Mastering D3.js has just became my reference book on data visualization implementation. It is not only the best book about D3 that I have read up to this point, but also a challenging didactic exercise that touches a variety of libraries and services really useful for the front end developers out there.

The Contents

As I read on the previous book I reviewed, Building a D3.js Edge, the Reusable API is here explained again. Remember that this pattern was first exposed by Mike Bostock on his seminal post Towards Reusable Charts in 2012. In this code heavy book we will see almost the same code, achieving the same testability and composability. I was pleased to see it as a standard.

Even though we are in 2015, a question that I get asked a lot deals with browser compatibility. As you already know, SVG elements are not supported by Internet Explorer 8 and some old Android versions. In one of the first chapters Pablo Navarro recommends an SVG fallback using the Canvas element. The library employed is canvg. This is something I didn’t think about before, and although I haven’t yet use it on production, it looks promising.

Another use of chart composition

Before reading this book, I tend to load external plugins to create advanced controls like sliders. Now I know that on apps with d3 included, these elements are easily created and in the 4 th chapter of Mastering D3.js we see how. We can take advantage of the composable nature of the Reusable API to build higher level controllers like the color picker built on this chapter. In the next one, the author uses composition again to tackle tooltips and brushing (the action of drag an overlay element over a graph in order to see a detail of it) over an area chart. Smart and pretty close to the “wow” effect always appreciated by users.

Service Integrations and code packaging

One of the most exciting things I learned with this book is to create Bower packages with my charts. Actually it wasn’t that hard, but I don’t know why it didn’t think about it before. It is a great idea! One of the outcomes of adopting the Reusable API is that charts end up being so solid that you keep on reutilizing them whenever you can. Wouldn’t be awesome to have a package online containing them? I think this could be one my objectives for this year. Pablo uses Grunt to build it and Vows for testing.

Backbone.js integration of D3 graphs is also tackled on this book, embedding charts in Backbone Views and giving some structure to your web application code. We will do it via the creation of a simple application that at the end will extend adding real time capabilities with Socket.io and Node.js, Firebase and the Twitter-streaming API. There will be also a chapter about making use of third party API endpoints which we will include in a simple Jekyll site hosted on GitHub Pages or Amazon S3.

Dashboards and maps

The author dedicates a chapter to introduce concepts and best practices on dashboard design. It was a nice surprise that he follows here the wise advice by Stephen Few, whose book Information Dashboard Design I consider one of the most useful, clear and right to the point books on the field.

The reader will find two chapters dedicated to advanced maps with D3. I haven’t had too many opportunities to work with maps in my career, but in the future I will keep these chapters as a reference.

Wrapping up

A great thing about this book is that the author has taken the time to introduce us some services and libraries that got some attention lately: Socket.IO, Firebase, Mapbox, Backbone, Grunt, Bower and Jekill. This fact has as an outcome a good synergy, so it is not just D3 what you are learning, but also some more cool stuff.

Once finished the book, the reader will have followed the author building different types of graphs. However, in a book of this characteristics, not everybody will need to read it cover to cover. Mastering D3.js could only be better if its code were built on a TDD basis (all code is), but it is still a great book.