The Hitchhiker’s Guide to d3.js

Posted to Coding  |  Tags:  |  Nathan Yau

Ian Johnson provides some good direction for those looking to get their feet wet with d3.js.

This guide is meant to prepare you mentally as well as give you some fruitful directions to pursue. There is a lot to learn besides the d3.js API, both technical knowledge around web standards like HTML, SVG, CSS and JavaScript as well as communication concepts and data visualization principles. Chances are you know something about some of those things, so this guide will attempt to give you good starting points for the things you want to learn more about.

Look at that map. I find that a big thing about learning visualization for the web is to set the right expectations. People coming from R or with little programming experience often expect to reach Mount Bostock really fast, but in reality, very few people are up there (if anyone). It’s not a plug-and-play situation. The good news is that you can still accomplish a lot at sea level, and d3.js creator Mike Bostock visits the villages often.

Favorites

Real Chart Rules to Follow

There are rules—usually for specific chart types meant to be read in a specific way—that you shouldn’t break. When they are, everyone loses. This is that small handful.

The Changing American Diet

See what we ate on an average day, for the past several decades.

Visualizing the Uncertainty in Data

Data is an abstraction, and it’s impossible to encapsulate everything it represents in real life. So there is uncertainty. Here are ways to visualize the uncertainty.

Years You Have Left to Live, Probably

The individual data points of life are much less predictable than the average. Here’s a simulation that shows you how much time is left on the clock.