Should I use D3 for creating charts and graphs?

What is D3 ?

D3.js is an open source Javascript library intended for data visualization purpose. “D3” stands for Data Driven Documents. It can also be used for creating and manipulating SVG files.  And different charts or graphs can also be plotted using D3 easily.

How D3 is different?

D3 is not similar to other charting solutions like Fusion charts and high charts etc. It don’t just take JSON and render a graph based on some predefined options but D3 let you plot the whole graph. It is comparatively low level library where developer plot the graph and create all graph elements and define its behavior. Although that is more time consuming but that also provide complete control in developer’s hand so it is very flexible. You render each and every element how you want it.

In  case of other charting solutions you choose which type of chart you want to plot and some other configurable options and call the function which renders graph/chart. That type of graph rendered and that’s all. Then it all depends on charting solution that what it returns. Some returns canvas based result while some renders an SVG.

When to Use D3 ?

A common understanding is that D3 should be only used if you are going to draw a graph which nobody has ever built. This is wrong. This can be the one reason but it is not the only one. If you simply want to customize the charts and want to look and work it exactly like some design, then D3 is something you can use. At  the same time one need to understand that it is something that will consume more time.

Another reason can  be to use D3 when you want every day graphs but you want them to  be look much different and behave different than what other frameworks are providing. If you want some extra elements that no charting solution is providing then D3 can be an option. As D3 is something which let you actually plot graphs and manipulate SVG elements through basic building blocks so by using those building blocks, you can create your own graphs with lot of flexibility.

D3 is very much useful when at time of starting building graph, your requirements are open ended and your clients don’t want to compromise on what they want. Other libraries graphs can have limits because they are already plotted with fix number of options so they will be rendered accordinlgy, while in D3 every element is placed by developer as he want it.

Why not customize other Charting solutions?

Many managers or people concern about deadlines often ask this question. Obviously time-line is important. No solution is good solution if it can’t be provided on time. First of all customizations can be of two types: Appearance and behavior.

Appearance can be customized through CSS if SVG is rendered by charting library.  But in case of chart’s or graph’s behavior, options are limited. There are many options which can be passed in JSON at time of initialization but still a chart or graph can render what it have. If you simply don’t have some option like if you want crosshair values to appear separately and your charting library provide it along with crosshair line then you normally cant change that.

So in short it can’t provide that level of flexibility that D3 can. So in case you have tight deadline and open ended requirements then you need to choose smartly between those two things.

What about D3 based charing libraries?

There are charting libraries which are based on D3. One example is C3.js . C3 is based on D3 and have cleaner API as well but it still don’t provide as much flexibility as D3 can. However, if you find limitations in C3 solution you can start using D3 there as well. But problem is that once you are using C3 and getting SVG, then to customize via d3 you need to manipulate that SVG directly and direct SVG manipulation is very low level thing. So that can even consume more time because in D3 you don’t always need to draw every SVG element but to customize a rendered SVG you may need to manipulate every single item.

So for flexibility should you never use D3 based charting libraries?

Actually you can use them but if you want more flexibility then either use D3 directly or use that D3 based charting library which provide you access to D3 components directly.

For example if that library make D3 axis and scale function and generate graph based on that, then it is better if you can access those same scale and axis function to use with D3. So that you can render them or change them if you want instead of using D3 to just change SVG elements of rendered graph.

Are there good resources for learning D3?

Actually D3 has a detailed documentation which is I think enough to understand D3. Also there are many D3 examples available as well as some books are written on D3 which can provide understanding of D3 to start.  There are also some video trainings available but I think those are mainly on data visualizations rather than on D3.

Is D3 easy to learn?

Actually with D3 documentation, I think it is easy to learn but you need to have a good mathematical mind. At-least a mind which don’t mind doing some calculations because many times you will be telling it where to render what. After all, great power come with great responsibility.