D3 Bar Chart Retrospective


The D3 bar chart project was my first attempt at using D3 to visualize data. And boy, was D3 more difficult that I expected it to be. I expected a stroll in the park and got a punch in the face! This graph shows one bar which represents US gross domestic product per quarter from 1947 - 2015.

D3 started out simple enough, but using scales and getting my graph to align properly and get everything to display the way I expected was quite difficult. There are still a few rough edges in this bar chart and some of the other D3 projects I worked on.

One of the most useful resources I relied upon for learning D3 and getting the first couple of these projects working was Scott Murray's D3 tutorial.

Code Review

I'm not sure I'm confident enough with D3 to properly have opinions on how poorly or well my D3 code is written. I came into D3 really expecting to enjoy it and I didn't much care for it. That said, there are a few things that I know need work.

Getting the data on the axes to be presented properly was difficult and something I just didn't ever figure out. You can see in this bar chart project that my years are displayed as "2,015" rather than "2015". I couldn't figure out how to create a hover tooltip that wasn't just an HTML <title> tag, so that leaves something to be desired here as well. And just in general I had a hard time wrapping my head around scales, so I believe they are pretty fragile and might not handle additions to the data set well.

Future Improvements

As much as I struggled with D3 at the beginning, it did get better as I went through 5 D3 projects. It's also something I want to be better at. I believe I will revisit all of these D3 projects or projects like them in the future. A few things this bar chart in particular could use are:

  • Get a firmer grasp of scales and axes
  • Learn how to display data in different formats (years, decimals, etc)
  • Learn how to create really nice hover tooltips