Create Awesome Maps with D3.js

The visualization I refer to throughout this blog post is here. Click on “Open in a new window” for a better view!


I followed Mike Bostock’s Let’s Make a Map tutorial to learn how to create a map from scratch using D3.js.

I used the Natural Earth dataset, but couldn’t find the legend/key that told me how to select just the United States, so stuck with creating a map of the United Kingdom.

I also downloaded GDAL for Windows (matched up to the correct Microsoft Visual C++ version), installed it, and finished with the tutorial without a hitch.

Once I started working on the above visualization, I ended up using data from Mike Bostock’s TopoJSON Examples to draw a map of the United States and bound pre-compiled data from the US Energy Information Administration to it. After a few additional tweaks (like a logarithmic color scale and year-by-year input field), I transformed the map to its final state.


After creating the visualization, I tried to find (economic) trends in the data from year to year.

As time passes, most states (and the country as a whole) uses more energy every year.. with a few exceptions. The most notable is the transition from 2008 to 2009, which some of us remember as the heart of the Great Recession (2007–2009). Take a look at the bar chart! The overall level of energy use dips noticeably.

Does this mean other years of non-growth in energy usage are connected to recessions in the United States?

I start by opening up the visualization and rewinding the slider to 1960. Below are the some years where growth in energy usage isn’t obvious matched with recessions in the United States.

Every non-growth in energy consumption doesn’t directly link to a recession in the United States, BUT every recession does link to non-growth in energy consumption! (Which also means there are more chunks of non-growth in energy consumption than chunks of recessions.)

This result isn’t particularly surprising (I had expected energy consumption to fall when the economy wasn’t doing as well due to decreased consumption/production of goods), but it is an example of how presenting data in different formats can help to discover trends that were hard to see otherwise.

A couple of other observations:

  • States around the Great Lakes (and California and Texas) tend to have higher energy consumption than other states; is this related to population?
  • Florida is in 19th place in 1960, but rises to 3rd place in 2012. This is likely related to population, but what factors played into such an increase (in population)?

And a couple of questions:

  • How would the map and bar chart look different if per capita data is used instead?
  • Are there any noteable geographic trends?
  • How would the map look different if states only showed up as green or red (depending on whether energy consumption increased or decreased compared to the previous year)? What new trends would this reveal?

Thanks to Dan Chamberlain and Chris Bradley for their help with creating the final product!

Like what you read? Give Robin Kim a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.