At FlashBelt 2007, I wanted to introduce some basic and crucial concepts of data visualization. With all of the information that surrounds our daily lives, just trying to find ways of better understanding it is a never-ending challenge (which is why this field has intrigued me for many years).
This page helps demonstrate how showing relative data that is commonly understood and help bring home the underlying point of the infographic. I then take this one step further, to show how harnessing a tool like Flash and Actionscript 3 helps us further explore data. Where Flash is used, source code is provided.
With that said, I wanted to use an example that is easy to follow and deals with a topic I have been personally tied to. Some background: When I first moved to Wisconsin from growing up in Arkansas (and living in Croatia, which has a similar climate), I had a hard time understanding just how cold it can get in the upper Midwest. I received mixed responses from many people, so I wanted to try and understand, on my own terms, what I was up for.
I started out by graphing the average high and low temperatures of the city I grew up in (Fayetteville, AR) and the city was about to move to (Madison, WI), with temperature in Fahrenheit on the Y axis and the 12 months of the year on the X axis. Just looking at one data set, in this case Madison, told me very little. Go to the next slide >
Now adding the temperatures in Fayetteville, our understanding of the differences start to unfold. You can see very clearly that Arkansas is, indeed, warmer than Wisconsin.... which is absolutely nothing new to anybody who lives in North America. Go to the next slide >
Now here is where things start getting interesting and further meaning can be derived. I wanted to find something that is commonly understood to help understand just how different these climates are. The freezing point (about 30° F) is pretty clear and it's a temperature most all humans understand. By using an attribute like this, we can begin understanding the associations each region has in terms of how cold it can get. This is the basics for successful information visualization. We can see from this alone that Wisconsin has 3 months in the year where the average temperature does not exceed freezing, while Arkansas has three months in the year where the average low barely nudges below freezing. That alone gave me an idea of just how cold it gets, but I took it one step further in the next slide >
This final layer of abstraction is a purely subjective one. I put in a 'pleasant temperature' range to help understand just how many months there are in the year where you can enjoy the outdoors in Wisconsin vs. Arkansas. Basically, 8 months fall within this range in Arkansas, while only 5 months fall within this time in Wisconsin. However, the discussion could go much further than this with this kind of data now displayed (i.e. the fact that for two months in Wisconsin, the average temperature fits nicely within the temperature range). Now for the fun part, integrating this information into Flash >
The work above help demonstrate some basic understanding of how to visualize data. I designed these graphs using Illustrator because it was a quick tool to use, especially for the small amount of data I was wanting to compare. Moving to Flash, however, we can start to really play with the data and move away from X and Y relationships. Even though this data set is very small, I came up with three completely different visual iterations in just a few lines of code using AS3 and E4X.
Where I started was creating an XML file that displayed this data. View the XML
This first abstract example shows a sort of frequency color spectrum where the stage starts with colder temperatures (center) and becomes warmer as you move away from the center. This particular visualization may not be particularly useful, however it demonstrates that within just a few lines of code you can generate truly data-driven aesthetics.
Download the source code for this iteration
In this second iteration, I wanted to show the freezing temperature (the blue line) and use the mean temperature (which is also in the XML file, though I could have calculated that in Actionscript) to draw the temperature box above or below freezing. The height of each box is simply the range of temperature. Again, not completely practical, but demonstrates what modifying a few lines of code can accomplish.
Download the source code for this iteration
In this last iteration, I wanted to just put some type of circular aesthetic here to show break further away from X / Y. The most left side of the stage represents freezing. As you rotate, clockwise, the temperature gets warmer. The rotation is not representative of degrees, but rather demonstrates, in another format, the cold to hot relationship between these two regions.
Download the source code for this iteration
If you want, you can Download All Source Code. Play with this data. If you come up with interesting iterations, you can Email Me and I will gladly put them up here.