Getting started with D3.js
The programmable notebook Introduction to D3 by Arvind Satyanarayan (MIT Visualization Group) is part of a full course at MIT about Interactive Data Visualization.
The linked notebook uses D3.js, but previous classes in the course have dealt with Vega, which is,
“[…] a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.”
Vega is a higher-level abstraction than D3 and is, therefore, both more powerful and more limited than it.
If what you want to build fits the higher-level building blocks of Vega (see examples), then you’ll be done more quickly with that; if it doesn’t, then D3.js offers more flexibility as it functions at finer granularity.
“[…] grammars [like Vega] break visualization design down into a process of specifying mappings (or visual encodings) between data fields and the properties of graphical objects called marks. They’re useful for concisely and rapidly creating recognizable visualizations, while giving us more design flexibility (or expressivity) than chart typologies like Microsoft Excel.
“However, describing visualization design in these high-level terms limits the types of visualizations we can create. For example, we can only use the available marks, and can only bind data to supported encoding channels.”
With D3.js, you have to do a bit more legwork yourself, but it offers more graphical flexibility and possibilities. Instead of customizing the settings for predefined renderers (or “marks”), you define the renderers yourself: the notebook includes examples in HTML and SVG. To keep things simple, the SVG examples replicate the HTML examples, but they could render much more that is not so easy to realize in HTML.
Although D3.js has a reputation as a “charting library”, that moniker is actually more appropriate for Vega. D3.js is a generalized data-to-graphics mapping library. As you can see from the examples, it is very useful for charts, but allows a lot more customizability than Vega. Anyone building charts for their site should consider very carefully whether the additional power and complexity are warranted vs. a solution with something like Vega.
That said, it was a lot of fun getting to know D3 with this notebook. The notebook is extremely well-written and organized and it’s absolutely fantastic that it’s available online, for free. I was able to understand and execute all of the exercises and feel like I have a good enough grasp of D3 now to be able to build something with it. Perhaps more importantly, I feel that I can now:
- Determine whether D3 or Vega are appropriate for a given project
- Estimate the amount of time required to build something with either of them