GHD - Dots Visualization
The Dots Visualization is the second most complicated visualization after the final one, and I spent most of the summer of 2012 working on it. This visualization is quite complicated (the main reason it was scrapped), so please take a look at the walkthrough below. This was made with Processing.js. You can start it by going here.
The purpose of this visualization was to display a ton of data, but I pretty much just built a bunch of features I thought would be cool/informative until it became an unruly beast. There are various groupings: gender, location (urban/rural), socio-economic status (SES), risk group, and intervention. The visualization has one dot for each combination of these groups, scaled to the appropriate size based on the number of people in the group. Each intervention has a color and a shape, so “dots” of that intervention have that color and shape.
You begin on a page that asks you to select 4 interventions, just so things don't get too crazy. You also have the opportunity to read a little bit more about each intervention, though the text is all filler, and only the first few interventions are real. When you have selected your interventions, click the “open the visualization” button, which will open a new window. In the new window, click the “begin” button. You start on the simple graphs tab, but switch over to the “Full Visualization” tab to see the visualization.
At this point, there are a variety of things you can look at. On the left side is an “accordion” of interventions, which allows you to adjust coverage levels and read more about the intervention. Click on the title of an intervention to open it up.
Next is the main visualization. In the top left there are various zoom options you can play around with.
In the top right is the options button, which opens a popup allowing you to control some options. The dot radius controls the size of the dots. Organizing Type lets the user pick whether they want to see the populations represented as a simple bar graph (divided only into DALYs and DALYs averted), a bar graph with interventions (where the DALYs averted bar is divided into smaller bars stacked on top of each other, where each bar represents the DALYs averted by one of the interventions), “Ordered Divided” which orders the dots into a box divided by DALYs and DALYs averted, “Rings” which puts the dots in rings with the largest dots in the middle, “Rectangular,” which puts the dots in a rectangle grouped by intervention, and “Pie Chart” which groups the dots into a pie chart based on intervention.
The next option is “Fast or Fun?” “Fun” makes it so the dots transition to their new position but it is slower than “Fast,” which makes the dots teleport immediately to their new position.
Finally, there is a button that allows the user to create a custom group. This opens a new popup that lets the user choose their group's name and what the group contains. (Note, using shift and command it is possible to select multiple items from within a dropdown).
Below the controls is a set of tabs. “Random” scatters the dots randomly. “Ordered” groups the dots into DALYs averted and DALYs that still happened. The rest of the tabs simply group into a given category (e.g. the “By Gender” tab groups the dots by gender). The user can also mouse over any individual dot to learn more about it, as well as collapse groups they don't want by clicking the yellow minus next to a group's name.