Viewers: in countries Watching now:
Start communicating ideas and diagramming data in a more interactive way. In this course, author Barton Poulson shows how to read, map, and illustrate data with Processing, an open-source drawing and development environment. On top of a solid introduction to Processing itself, this course investigates methods for obtaining and preparing data, designing for data visualization, and building an interactive experience out of a design. When your visualization is complete, explore the options for sharing your work, whether uploading it to specialized websites, embedding the visualizations in your own web pages, or even creating a desktop or Android app for your work.
In the previous movies, the data that we were charting was quantitative, that it measured something that was more or less, and often it was floating-point data, so we would have decimal places. On the other hand, sometimes you're counting discrete events or categories, but you're counting the frequency of occurrence in those categories. And when you have that kind of data, it can be very helpful to use a bar chart. Now, bar chart is a very common kind of chart, and it's done in Excel a million times a day, but I'm going to show you how you can bring some extra life and interest to a bar chart by giving some interaction in Processing.
Now, the first thing I'm going to do is I'm going to get a dataset about Olympic medal counts. I went to databaseolympics.com, and I actually got some information about the early 1900s Olympics, when it turns out that the tug of war was a team sport. And what I have here is a complete list of countries that won medals in the men's team tug of war. There was only a men's event. It was only a team event. But we have all the countries that won medals. Just as an interesting little note, the gold medal in 1900 was won by a team with people from both Sweden and Denmark.
Sweden went onto win another medals, Denmark never won any other, so I've just attributed that one went to Sweden. Anyhow, but because I have my data in a summary table, I'm actually able to put it straight into the sketch. I'm able to embed it, and I'm using a few arrays that are relatively short. The first one gives the name of the countries, gives the three letter abbreviations that appeared in the dataset. Those are also really good to use as labels underneath the bars. The second array is integers, and that simply indicates how many medals each country won in this event.
And the third string is the full names of each of the countries, which can be helpful for when we do a rollover, to get extra information about what happened. Now, please note, I don't have the Table class on a separate tab that I've had in several of the other ones. That's because I don't need it. The data that I have is all right here at the top, in these arrays. That makes things a little bit simpler. So now I'm going to scroll down to the setup, and I've got a window that's 600 pixels wide, 200 pixels tall. I've loaded two fonts, a titleFont and a labelFont, by using Processing's FontCreator. And again, you may or may not have the exact same fonts available on your computer.
If you don't, you can either comment these fonts out or you can create your own and replace them. I've also turned on anti-aliasing, and I'm placing the rectangles, because each bar is a rectangle, I'm centering them so I can use the same coordinates for placing the rectangles and for placing their labels. In the draw loop, the first thing I do is I'm placing the background. Also, instead of using the palettes, like I've done in most of the others, this time I am just entering hex codes directly. And the background is a dark gray and I've also turned off the outline for the shapes.
Then what I do, I'm creating some variables that I will use for calculating borders around the fence. I have one called bb for the bottom border. That means I want to have a, sort of a buffer there of 40 pixels, and lb for the left border, 75 pixels. And then I have a for loop. I'll scroll that one up a little bit. And what this does is it goes through the arrays one item at a time, starts at zero. And I do the length of the tug countries. That's the one that have the three letters. But since all of the arrays are the same length, I can use any of them.
It's just counting to the same point. In there, I also put in a variable w for the width of the bars that I chose and how much space I want between the bars, and then I pull in an array of variables t, and that's how tall each bar should be, and that comes from how many medals they won multiplied times 20 pixels to get it it's about the right height for the window. Then I have another one where I calculate the X position. That's going to be the left-right of the bar, and then I have got a kind of complicated formula there.
What it is is I start by putting in the lb. That's the buffer on the left. So push everything over to a certain extent, and then I want you to take the letter i, and that's the increment. It starts, it goes from 0 to 1 to 2 to 3, and I want to add on .5 to that, so the first one gets 0.5, the next one gets 1.5, and then I want to multiply that times the combined width of the bar and the space between the bars. So what that does is it takes that unit and just multiplies it and it gets me the midpoint of every bar that I'm going to need.
So that's going to be the X position, the left-right of every bar. I'm also going to use that for the labels. After that, I create a new array for Y, and what that does is it gives me the coordinates for the center of each bar going up and down, because that's how we're positioning them. And that one again, I have to get the full height of the window, which is 200 pixels, and then I subtract the bottom border, which is--I recall, how big is the bottom border? It's 40. So that's 200 minus 40.
There we are, back in the middle. And then from that, I subtract half of the height of each of the bars as I go through, to get to their midpoint. Again, a little bit of complicated algebra here, but it makes it so I can place these things using the center function. Then what I have is I've got another if set, and this is actually to use for rollovers. And because I'm dealing with rectangles here, I have to have these four if statements to determine if the mouse is within the rectangle for a particular country. And that's why I do that mouseX is greater than the left border of the bar, less than the right border, greater than the top of the bar, and less than the bottom of the bar in between. And if it does all that then I change the fill to a bright yellow.
Interestingly, you have the option of importing, for instance, the image files or the flags of each country and having those pop up. That gets a little busy. It's a little more complicated. Aesthetically, it's not my first choice, but it's something that you could do if you wanted. Also, I'm going to, when we do the mouseover, I'm going to bring up some extra information: the full name of the country, along with its medal count right next to it. You'll see that I have a few lines commented out at the bottom. That's something I'm going to show a little bit later, and that allows me to make it so that the extra information appears only if you click on each bar.
But right now, all you've got to do is roll over and hover on them. And then I have some code that says if you're not hovering over it, leave it a light-gray-- that's the CCCCCC--and then I have the actual draw the rectangle for each one. So they all have their own x and y positions. They're all the same width, so the w doesn't need to have an index number. But they do have different heights. Beneath that is to place the labels, the short three-letter versions of each country name, beneath the bars.
The next little block of code is to put labels on the left side of the axis, going up, to count off, these are tick marks of 0, 1, 2, 3, 4, 5 medals that country has won. And then the very last thing is the title that goes across the top. Now, I do want to mention something: in earlier versions of this, I had that title a little higher up in the code. It was in the for loop, and it came up very fuzzy, and it was because it kept overwriting it several times during each draw loop.
It's still in the draw block, but I've taken it out of the for loop that's in the draw block, and that helps sharpen things up. Anyhow, I'm going to scroll back up to the top here, and I'll hit the Play button, and there is our bar chart. And you see, for instance, I didn't actually have to insert an actual line across the bottom, because we have a very nicely implied line by the bottom of the boxes. We got a nice amount of separation. It's clean. You can tell that Great Britain has won more than Sweden and USA, who won more than any of the other countries.
And as we bring the mouse over, you see each one turns a bright yellow, and then we get the full name of the country, along with the indication, again, of how many medals that country won. So it's a very basic form of interaction, and what I'm going to do right now is I'm just going to come back and I am going to make one little switch here, because I have mentioned this one. I am going to make it so that you actually have to click. I'm going to uncomment those, and I'm going to comment that one and turn it off, and now I'll run the chart again. And now when I mouse over, it turns yellow, but the actual information doesn't show up until I click on the mouse, or I click on the bar.
So, if you want to have a two-stage interaction, that's another choice on how you can do that. Anyhow, a bar chart is a very basic chart, but hopefully what you've been able to see here is that we can get some more control over the aesthetics and the arrangement and a whole lot more control over the form of interaction than you could in, for instance, a standard spreadsheet program. So, Processing can take even a very basic kind of chart and make it something more interactive and more interesting and I think more informative.
There are currently no FAQs about Interactive Data Visualization with Processing.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.