I had the luck of being in the middle of a residency at Fabrica at the time and went about trying to produce something that could be used to compare all the data in the catalog.

In this video you can see changes made to the Orbital Comparison chart to make it more flexible in order to handle this data set. It became clear that to make the chart less daunting to new viewers there needed to be a way to allow them to view it in a form they were comfortable with, allow them to become familiar with it in that state and then give them the option to add more data when they thought they needed to. In this way the chart could serve simple or complex searches for people new to data visualizations or people used to seeing data in new ways.

This also served as my submission to the competition, as time became a factor and I was not able to finish all the aspects I had designed. Managing the amount of data, formatting so that it was usable and developing a GUI to make navigating it proved to be more challenging than I expected, but having gone through that I have learned a lot about time management, coding and working on such a large project.

There were two other charts I developed to handle issues in the World Bank data.

Bull’s Eye Chart
One of the first issues I found with the data was the consistency of what data was available for which country when.  At its core this is a simple question – For a given year and country is the data I am interested in actually in the data set? You can represent this simply enough with a circle that is either filled in or not. So to design a tool to help people using my application I started from there and expanded on it to make it useful.

Here is the chart at a very simple level, 1 country and one topic. In this chart the outer most ring represents the oldest year in the current selection and the inner most ring the newest year in the period (another chart was used to select the time period as it affected several of the other charts and menus). On the right you can see a more complicated version of a 1 x 1 version of this chart, showing 5 years at a time, each ring having a border to ensure a series of years without data didn’t become confused with a single year.

But the application allowed for 8 countries and 8 topics to be compared at once.

Which creates a chart with a pop art aesthetic, especially using a simple mock as in this example, for better or worse.  Again, to allow people to learn the chart more easily, the number of countries and topics being displayed at once could be changed to scale to whatever the user needed or was comfortable with. In this way it became easier to be able to find a set of countries that had data for the topic you were interested in or vice versa in order to make a complex comparison with the data.

Windmill Chart
The next chart I needed was one to handle data over time.  I needed a chart that could fit a lot of information into a small space because of the rest of the information that would need to be displayed, so I decided to try to make another chart based around a circle. Creating distinct, static sections of the circle to display data allows the user to become familiar with reading one section, become familiar with it and not having to reinterpret the display as they would if the sections of the circle were based on the number of data points. Again years are ‘stacked’, with the oldest year on the outside and newest in the center.

The function of this chart is to be able to show in each section a single data point for one country over five to ten years, be able to display averages over those numbers as a point of reference and to build up to being able to make more complicated over time comparisons. Eight sections allowed for a good amount of data to be shown without becoming anymore complicated that it admittedly already is.  This complexity does allow for some valuable comparison possibilities: One piece of data across eight countries over ten years, eight data points for one country, four data points for 2 countries, etc. Missing data points would appear as full black arches to avoid any confusion between a very small value and no data.

On the left is how the chart was designed to appear in the project. Starting from the bottom, a toggle to show/hide some averages and quick access to the data availability chart. Above that is a read out area, displaying the information listed based on mouse position. “Actual Number” would be the value of the last selected section of the graph.

The chart itself is percentage based, 100% being the highest value for all countries across the time period, but 0 being zero. The angle of the arch represents the data value, which can be tricky to interpret, especially slight differences. To ease that,  when the user is hovering their mouse of the chart a line is drawn from the center to their mouse with a read out of the value that line represents and supplying an easier way to be sure of the comparison of two angles in the same section.

On the right is a larger example of the chart. Here you can see that the layout of two sections, assuming they are the same data point, create white space that shows the difference between the two. In the system, each of the sixteen different data topics were represented by a distinct color, so this example is eight data points for one country.

The example on the right here represents 4 data points for 2 countries, arranged so that the same data point graphs are adjacent. Another menu, not shown, would handle arranging what selected data goes where on the chart in a drag and drop interface with some automatic functions to make use easy, but customizable. On the right is a chart of 8 different country graphs for a single data point as well as an alternative layout that loses the white space comparison in order to keep the growth of all sections from 0 to 100 going the same direction. This has its advantages and disadvantages, but I am generally inclined to allow users to customize a chart as much as possible to help them understand it.

Just so you can see it, this is the final design of the project, with every possible menu open at once.

It included straightforward menus for countries, topics, time and ranks. On the bottom is a slit eye view of the Orbital comparison chart, this could be swapped with the map currently underneath everything. I hope to get around to putting it all together and working out the kinks in those charts above soon.

We are making the current version of the project freely available for all people, but we’d like to make a few things clear before you download it. Firstly, this project is not meant to be used to do any trading on the actual stock market. There is a good for this: the data is months old. By clicking any of the links below you agree that all people listed in the credits of the project are not responsible for the outcome of any trades based on the information provided by the project.

Secondly, this project is still in development, and there are many things that could be added to the project that would improve usability and usefulness. There are many things that we are currently aware of that need adjusting, but we wanted to get the program out to people as quickly as possible to start getting more feedback.
This project was created while I was studying at The University of Advancing Technology in Tempe, Arizona.

If you’d like to contact me directly about the project please email me at stocproject@gmail.com.

Download STOC Here:
For Windows
For Mac
For Linux

Thanks:
I would like to personally thank Todd Spencer, for being an exceptional advisor on the project, introducing me to Processing and data visualization and putting up with the crazy ideas of a graphic designer that is trying to program for the first time in four years.

To Vesna Dragojlov for encouraging me to explore everything media can be, what I can do in Processing and introducing me to so many artists and projects that I could actually hold a conversation about new media.

To Stephen Cady, for refining my programming skills and always encouraging me to do new and different things because I’d be better for it in the end.

To Karyn Ricci, for teaching me great design and that it is important in everything that I do.

To Lee Gentry for a great friend and web designer, the one behind this site, and being able to drop everything and do an update for me on extremely short notice.

To Michela Magas and Becca Stewart for making my first Siggraph amazing, introducing me to lots of new people, giving me someone to talk to on the rare occasions we had downtime and freely providing invaluable advice.