Introduction To D3.js

In this post I give you an overview of JavaScript library D3, here I won't compare D3 to other charting libraries but in some instances I will refer to popular technologies like jQuery and jQueryUI since it is very easy to understand where you stand compared to what you probably already know.

What is D3?

One can say D3 is a JavaScript library that "helps" you in creating "visualizations". Let me explain the above statement a bit. I say "helps" because unlike other charting or UI libraries, it does not take a set of parameters and create a UI for you. The job of D3 is that it takes your data and either modifies it in such a way that it attaches helping keys in the data or provides you with functions that will use the data (that you give it) to provide you with output.

What can I do with D3 that I cannot do using other libraries?

D3 has a list of layouts that you can use to create your visualizations. Think of each layout as a function that takes data and modifies it in a way so as to create that layout. For example, consider the TreeMap layout, it'd take an object in the hierarchical format and append keys like 'x', 'y', 'dx' and 'dy' to it. Using these keys you can position elements on the page and give them dimensions so as to view the data that you have sent in the first place in the form of a TreeMap. Another interesting example of visualization is creating a geographical map. D3 has the d3.geo API which takes actual coordinates of regions/countries and plots them using different layouts. You can have flat (Mercator) maps as well as spherical (Orthographic) maps and many more in between. Unlike other libraries, D3 (in most cases) doesn't create the HTML or UI for you. It does the difficult part that is of the calculations and leaves appending DOM elements to you. The main advantage of this is the flexibility of choosing which HTML/SVG elements. For example in the TreeMap example above, you have the flexibility of using divs or svg elements for rendering the TreeMap.

Advantages of D3

Flexibility is one of the biggest advantages of D3. The fact that it does most of the calculation and lets you handle what and what not to append to the DOM can be very powerful. You'll not have to bother finding a way to show multiple axes, to hide ticks when you don't want them, and the like. The choice of selecting the type(like svg over div) of elements to use is another big advantage. The large span of functionality that D3 provides viz. time, scales, layouts, geography, geometry, interactions, transitions, SVG, and other helper functions to do number crunching on your data is also impressive.

Limitations of D3

In my personal opinion, the learning curve of D3 is a bit steep. I won't say it is difficult but it is different. It introduces new (at least for me) concepts like virtual joins. And the JavaScript part is also bit confusing to understand (at first) as it uses a declarative programming style over the conventional imperative one. But once you understand how to wield it, it is a power you can't code without! Flexibility which is one of its advantages itself proves to be a pitfall if you don't use it responsibly. Since you are given the flexibility to choose your own DOM elements, it is very easy to get carried away. For instance, while using svg elements, you have to keep a check on the number of elements that you append to the DOM. The performance of SVG depends a lot on the number of elements in the DOM. And we are not just talking about displaying charts and visualizations. We are talking about interacting with them.

Conclusion

D3 provides a huge span of functionality in the visualization sector. With cons which exist only if one lets them come. In my opinion it is a tool that all UI developers should carry under their belt.