D3.js Resources to Level Up

I have gotten a lot better at D3.js development over the past few years, and can trace most of my improvement to coming across a few key tutorials, blogs, books and other resources on the topic. They’ve been a huge help for me, and I’ve gathered a bunch of my favorites in this post to hopefully help others improve their D3 experience.

Here it goes:

Assessing your level

First, let’s define four general D3.js levels:

  • Complete Beginner: You have no previous experience with D3.js or any front end technologies (HTML/CSS).
  • Basic: You have some HTML/CSS/JS skills and have played around with some D3.js examples, but don’t completely understand the patterns and mechanics it uses.
  • Intermediate You know how to customize D3.js graphs using examples found in search engines, but you struggle to reuse them and aren’t quite happy with the quality of the code itself.
  • Proficient: You have build a lot of different graphs, tests and integrated them with different technologies or libraries. You’ve even created packages to easily share logic between projects.

Complete Beginner

Books

Scott Murray’s Interactive Data Visualization for the Web. Available free online through O’Reilly, it covers most of the basics needed for building your first interactive graphs.

Tutorials and Hands-on Learning
Reference links

Christophe Viau’s D3.js Gallery, is a pretty extensive list of charts made on D3 and sorted by graph type (bars, pie, bubble, etc.)

Courses

Udacity’s Data Visualization with D3.js, Communication with Data. It’s free and looks sweet, what else can you ask for?!

D3 Pie Chart

This chart employs a number of D3 Features: d3.csv, d3.scale.ordinal, d3.svg.arc & d3.layout.pie. From bl.ocks.org

 

Basic

Books

Getting started with D3.js: a short introduction (under 100 pgs) targeted for web developers.

Tutorials and Hands-on Learning

Introductions & Core Concepts sections of the D3 wiki tutorials.

Reference links
This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features. From bl.ocks.org

This simple bar chart is constructed from a TSV file storing the frequency of letters in the English language. The chart employs conventional margins and a number of D3 features. From bl.ocks.org

Intermediate

Books
Tutorials and Hands-on Learning

Introductions & Core Concepts section of the D3 wiki tutorials

Reference links
Videos

Ian Johnson’s bayd3 youtube playlist

coenraets.org

coenraets.org

 

Proficient

Books

Some of the content in Mastering D3.js may be new for you, but I haven’t found a lot published at this level.

Tutorials and Hands-on Learning

Check out the Specific Techniques section of the D3 wiki tutorials.

Reference links
Blogs
Interactive D3 chart from the NY TImes

Interactive D3 chart from the NY Times

I hope this roundup of links will help level up your D3.js skills. This is by no means an exhaustive list, if you have others you’ve found useful share them with me on twitter @golodhros. I hope this is a great starting point to get you started and building more exciting visualizations!