Developing a D3.js Edge
Last published on September 26, 2014 by Marcos Iglesias
The usual workflow when developing interactive data visualizations with D3.js is based on the great number of examples that its community provides. They are vast and useful, but still not ideal. Most of the time they require a lot of effort to integrate in your code and make them production ready. Developing a D3.js Edge suggests a series of best practices that provide a way of developing professional and reusable D3.js graphs.
Why I bought it
I have been interested lately in creating tests for the d3.js graphs that I have been working on. I usually spend most of my time cleaning and refactoring the initial examples I find via D3.js Gallery and bl.ockexplorer.org: extracting methods, creating configuration objects for parameters and in summary, making them production ready.
Interactive data visualizations can become pretty complex, and when the requirements change in the middle of the development (that often happens) or the categories, segments or amount of data is dynamic this challenge can become overwhelming. I have been doing Test Driven Development(TDD) lately and I also missed the confidence of having everything working at any time.
After some research the only book I found on this level of D3.js development was Developing a D3.js Edge from Bleeding Edge Press. It is a small book (108 pages) but goes straight to the point, including some nice touches I will talk about next.
The Book
The authors start talking about "Standard D3" to follow with a new way of building graphs. The reusable API provides a manner of creating data visualizations in a way that the D3.js community could use and set as best practice, enabling a great deal of code reuse.
It turned out to be a simple, and the most important for me, test friendly approach. On the fifth chapter of the book they propose some tests for our graphs made with Jasmine that easily extrapolate to other JavaScript testing frameworks.
An added feature that it demonstrates with the example that occupies the rest of the book is the capability to create composeable graphs, having the opportunity to build interactive graphs with entities that share the same data set. This main example is a map visualization that can be used to get a data segment from the points selected, and with this data feed a radial graph.
This last feature introduces Crossfilter, an advanced library build over D3 and used to link visualizations of the example. The book also presents a standard way of creating a data loader module which includes a data cleaning method, and communicates via events. Again, test friendly and pretty modular.
Wrapping up
This publication presents a real design pattern for D3.js charts development. It helps a developer build reusable and shareable graphs, which are in my opinion the perfect way to create your own tools or snippets for your projects. I consider this a pretty good buy, as it is a book that will help the reader move to the next level of data visualization development with D3.js.
I would love to read a similar book with a TDD approach, if anybody out there would accept that challenge?