Jesse in Coding 4 minutes

Data Visualization With D3

Lately, I’ve been working on data visualizations at work. The idea is taking some data, whether it be votes from an election, the data from your FitBit, or anything else, and using it to tell a convincing story at a glance.

There is a magic in graphs. The profile of a curve reveals in a flash a whole situation — the life history of an epidemic, a panic, or an era of prosperity. The graph informs the mind, awakens the imagination, convinces.

―Henry D. Hubbard

I’ve been using a great javascript library called D3 and wanted to make a quick blog post to show off what the D3 library can do. D3 allows you full, custom control over the way your charts / graphs look and feel and you can even use common data structures like CSV (Like from an Excel file). The charts below are sample charts I’ve pulled from other sources. Make sure to click, drag, and touch the graphs to trigger the animations.

Click on the “Sort” and “Reset” buttons above to see the chart animation in action.

This one is a bit pointless but is pretty cool- Click and drag any of the circles above, drag it around, fling it across the screen… Go nuts.

Click on any of the blue boxes above.

Ok, that’s all for now. The next time you’re swamped with data at the office, consider using a visualization library like D3 to let your data help you make a much more convincing case for your argument.