Time & Money - a Box2DWeb Visualization

We read about money rates all the time, and see numbers thrown around for how much something is costing per hour or per year. What would it look like to "see" that money as it was being spent?  This work-in-process project is one way to visualize it.  You can see the visualization here on googledrive.

Using the Box2DWeb physics javascript library, along with the public domain images of coins and (specimen) bills from the public web sites of the United States Mint and the Federal Engraving Bureau, this visualization provides some perspective on the relationship between time and money.

Currently, it is best viewed on a desktop with Safari, Google Chrome, or Mozilla Firefox.  On Internet Explorer 9,  it may act a bit flaky and this has not been completely tracked down yet.

Time & Money (click to open website in new window)

The visualization shows money being "dropped" corresponding to a specified or calculated rate. It can be used for visualizing real-time dollars per hour for a person or group, or annual expenditures by institutions.

I believe that just seeing those coin and/or bills piling up or rushing by for a few moments can stick in one's head: it adds an extra level of "realness" to the connection between time and money.

Clicking on a coin or bill will suspend it in the flow, and bring up a popup that provides summary information on the particular currency (e.g., the designer).

There are a few preconfigured scenarios as well, using estimated rates: the combined cost of Congress and the Executive branch, the US budget, the US budget deficit, and the total income of the entire US working population.

Note that while I was able to estimate costs for the Senate and House of Representatives,  the costs associated with the Executive Branch are extremely difficult to simply find, let alone estimate.  For the purpose of this visualization, the 2008(!) vaue of 1.5 billion dollars from Bradley Patterson's To Serve the President is used.  I could not find any criticism or corrections of these estimates, but will update the default values should better public lower bounds become available.  However, exact and precise values are not considered critical here: the point is that whatever the amount, it's big.

I think it would be interesting to see the impact of some kind of tool like this if they showed it on a large screen on the House floor, the Senate floor, at White House press conferences, or at the State of the Union speeches.  It just seems like it would heighten focus and attention to productivity.

Special Thanks


The coin and "specimen" bill images are from the public web sites of United States Mint and Federal Engraving Bureau, respectively.

Angie Hicks of the United States Mint provided assistance in confirming which coin images could be used in this visualization (the "covered coins").

Glen "Tommy" Smith of the United States Secret Service provided assistance when confirming that the "specimen" bill images could be used in this visualization.

A Few Technical Notes


The basis for this implementation is the Box2dWeb javascript library, which is a javascript port of the Box2D physics engine by Eric Catto.  The images for coins and bills are overlaid onto Box2D bodies that the library tracks physics for.  The coins are allowed to interact with each other, but the bills interact only with the boundaries.

For performance reasons, the bar at the bottom opens up periodically to let the currency flow down.   This currently occurs when there are about 100 coins/bills being displayed.  This visualization may be pushing the limits of what Box2D can do in some cases.  On an iPad, performance is very sluggish - I've seen this same problem with svg on an iPad.  Supporting Joel Webber's observations from last year, it seems to perform better in Chrome, although I have not yet gathered detailed statistics to confirm this, and I still need to make a serious optimization pass through the implementation.

The clock in the upper left is a customization of the "March" HTML5 Canvas Clock.  The pocketwatch image is from the the clockskin gallery of clockworlds.zxq.net, a cool site that provides free clock apps, screensavers, and skins.

The "old paper" background images are from photographer Liz West's flickr site (Creative Commons license).

And finally, there might be slight apparent discrepancies between the amount that has "fallen" and the exact amount expected.  For example, in looking at the screenshot above, the exact amount that should have fallen by exactly 14 seconds is $3.89.  However, the actual time elapsed could be as small as about 13.5 seconds, which would correspond to about $3.75, or as large as about 14.5 seconds, which would correspond to about $4.03.  Actually, in this case of 10 people at $100/hr, the implementation when running on my iMac in Safari seems to consistently hit at about 13.64 seconds (which corresponds to about the $3.79) as it marches along performing the updates, setting up a 500ms timer each time for the next update.


Popular Posts