Another common form of interacting with data visualizations and sketches in general is by rollovers and clicking. Now so far, we've done zooming and rotating and sliding and we have done slicing. Rollovers are familiar. We've done them before were you go over the top of something and it changes. In this example, I am going to be using a sketch that we did a couple of chapters ago which was on bar charts where I am using the Olympic data from the early 1900s on the tug of war as an Olympic event. Except this time what I'm doing is I want to show you a little more detail and also in the last one, I mentioned that you could use flags to pop up on the bars as a way of highlighting things and that's what we have actually done in this particular case.
So let me just explain the few things that are different. The font stuff at the top is the same. The string of the country abbreviations is the same. The array of the medal counts is the same. The string array of the full names of the countries is the same. The next two are new, PImage is the processing image format and I've made an array to hold the flags. Now unfortunately, you have to do this in a multi step process, really Processing only wants me to declare how long the array is, and so what I did is I simply grabbed the country's list and said if the same length is that.
And then what I did is I created a separate array with the names of the image files. Now in this particular example, I use the three character abbreviations of the countries and I did all PNG ping files. Ping files are nice because they support transparency, and we got all of these files and put them into the sketches data folder. In fact, let me show that to you real fast. So here's the sketch. It's in it's own folder right here and here's the data folder and now you see that I have flags for several different countries. You also notice that the images are slightly different sizes and it turns out that that's completely irrelevant because we're going to have Processing automatically resize and just squish them to fit the bars that they go in, and I'll show you the code for that in a minute.
So the two new arrays here are for the image arrays where I simply say how long it is, and then I have an array with the actual names of the image files. Then I am going to scroll down a little bit. The setup is the same, come down little further and the 4 loop is the same except at the bottom of it, I've added flags as it's going through the arrays item by item and it's loading and how tall each item should be based on their medals wins and it's loaded in the "x" and the "y" coordinates.
I also am having it load in the names of the flag files, so that SWE.PNG for Sweden's into the flags array. Previously I can only see have how long it is now. I can actually put the names of those files into the array. Then we go down a little further and this is the hovering code. This is the key part for what we're doing right now. Because the bars are rectangles I need to use the four-part conditional. I need to check that the mouse has gone inside the bar, that it's gone past the left side but it has not gone past the to right side. That it's below the top and that it's above the bottom.
And because I've centered the bars that way I could use the same x-coordinates for the labels. I have this little thing where first identify the center of the bar and then I add or subtract half of the width or the height to specify the boundaries of the bar. We come down a few lines here, I specify the fill, then I bring in the font, and then I say that I am going to be centering the text. Then I bring in the text. So if we're hovering over a bar it will bring in the full name of that country along with it's medal count and it'll put it right above the bar. That's what the one that says text tugNames is.
Also I am going to put the image into the bar so I'll use imagemode (CENTER) so I can use the same coordinates that produce the bar where we used Ridgemont Center. And so what I do is I specify the image. What I need to input is the name of the file and I say go to the array flags and go to the indexItemI and that will be for instance BL.PNG for Belgium's flag. And then I want you to get the same x-coordinates and y-coordinates that are used for pushing the rectangle in, and then I want you to adjust the size of the Ping files so that it's the same width of the bar, that's "w" and that's the same for all of them, and it is the same height as that particular bar and that's "t" for the I index number.
Also the next one is important. It's to turn off the fill and the reason for that is because the rectangles are drawn outside of the hovering loop and if I don't shut off the fill, the rectangles will just draw right over the top of the flags, and I'll lose the effect, and it's little hard to juggle, because they're in different loops. But if I simply turn off the fill that will carry over and the rectangle will draw it's just because it has no fill and it has no stroke. You can't see it. And so what remains is the flag and that's the important part of this.
So let me show you the final effect. I am just going to come up and press Run and so far this looks the same. Now in the previous version, if I came over and I hovered over something it would turn yellow and it would put the statistics above, now if I hover over I get the country flag along with the full name of the country and the number of medals they have won in this particular event. And the flags have been distorted to fit into the bar. By the way, for you history buffs, we're aware that these are not the historically accurate flags for these countries in the early 1900s, nevertheless, we thought it would be a more informative to use the flags that were familiar to people right now and also given the unusual shapes as some of the other flags, these ones just fit better.
But you get the idea. As you just roll over, you get a flag for the country and you get its name and the number of medals they won, and that's a very simple, but eye-catching form of interaction in this particular visualization.
Get unlimited access to all courses for just $25/month.Become a member