CS 424 Fall 2011

Viewer's Choice presentation


I will be presenting the Money Chart by xkcd's Randall Munroe.

Click here for the full image.

The data

The chart describes it self as showing "almost all" of the money, at various orders of magnitude, from daily expenses to the world's GNP. The choice of which data to show within such a wide range may seem arbitrary, and some juxtapositions may be accused of being "apples to oranges" comparisons, but the point is precisely to help the user build a mental image of monetary values at wildly different scales, bridging the gap between the amounts we deal with in our daily lives (from buying groceries to buying a car or a house) and the amounts involved in political and macroeconomical dealings, which for most of us are abstract figures we hear in the news, but with which we never interact directly. It is desirable to allow the user to compare data between wildly different domains; and so it should come as no surprise that two of the first values shown are the price of a dozen of apples and that of a dozen of oranges.

Clearly, building such a heterogeneous chart requires gathering data from many sources. The author lists over 200 different sources; whenever possible, a scholarly work or government publication was used.

The visualization

The chart is split into sections, by order of magnitude of the data displayed within: dollars, thousands, millions, billions, trillions. Within each section, the basic unit is represented as a small square, with color coding to help the reader keep track of what data he's looking at even when zooming on a small section of the huge chart: green for dollars, orange for thousands, gray for millions, yellow for billions, cyan for trillions.


It is often claimed that it is harder for people to accurately gauge differences in area than differences in length, but this depends on the shape. Shapes with curvilinear edges, or with non-square angles, are especially troublesome (note that the wedges of a piechart have both!), but rectangular shapes are much easier to compare. This visualization uses careful arrangement of the squares to make it easier to compare different values visually:


Each order of magnitude is visually related to the next by a sort of static zoom effect. The section for the larger order of magnitude contains a miniature version of the section for the smaller one, scaled to 1/1000th of its size, so that the area of $1000 in the dollar block becomes equal to the area of a $1000 square in the thousands block, and so on. This is reinforced by separate boxes showing how one thousand of the squares at the previous scale equal a single square at the next one.


As mentioned, each section has its own color: green for dollars, orange for thousands, gray for millions, yellow for billions, cyan for trillions. However, within a section, variations of the base color are used to highlight specific segments of a larger quantity, for instance the amount of taxation over an income.

In the millions chart, desaturared versions of the traditional colors of the two major American parties are used to accent campaign contributions by party without breaking the overall gray color scheme for millions.


Although all amounts within the same order of magnitude use the same basic square unit for ease of comparison, values that have specific meanings or that are related in significant ways are grouped together and displayed as subgraph, produced by careful arranging of the squares.

For instance, the billions section has a chart showing the income of all American households, split into five income brackets, each contributing roughly one fifth of the total. This subchart is overlaid with lots of additional information: the number of households corresponding to each category is displayed visually using house pictographs, state and income taxes are highlighted, as is the amount of money that must remain after taxes to allow the people within one of the brackets to enjoy, on average, a given standard of living. This particular visual element attempts to highlight the true impact of taxation across the different brackets.

Another interesting subchart is that for government spending of US states, where the squares for each state's spending are arranged into the shape of that state, and the shortfall is represented by darker squares.

Possible improvements

The main problem with this chart is that it requires a very large display area to browse effectively. This is, in fact, one of the reasons why I chose it: I wanted to see how it would look on the wall. On a computer screen, you can make do by zooming in and out and looking at different areas, but this detracts from the nice aspect of seeing so many things at the same time and letting the eye wander. It requires more methodical exploration.

On a handheld device, though, this visualization would be completely unusable.

More interactivity would also improve the experience. The website provides panning and zooming controls in the style used with maps, but this just helps the user browse the huge static image. A better approach might be, for instance, to display an order of magnitude at a time, and letting the user visually zoom into the thumbnail of the next smaller order, or zoom back into the next larger order so that the current view becomes a thumbnail within it.