Should I use D3 for creating charts and graphs?

This entry is part 1 of 2 in the series D3 basics

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.


Fundamentals of D3 visualisations

This entry is part 2 of 2 in the series D3 basics

D3.js is a popular SVG based data visualization library and there are many reasons for its popularity. D3.js provides foundations and components for creating data visualizations instead of providing some already built charts. Another big reason of D3.js popularity is that it don’t use a new technology but rely on existing web standards.

  1. HTML
  2. CSS
  3. DOM
  4. SVG

Probably some of you have heard about SVG but don’t know what exactly it is. SVG stands for Scalable Vector Graphics. If you guys haven’t much time and want to know very basic of SVG then see . If you are one of those guys who want to study in detail then this book named SVG Essentials seems promising.

There are 3 things at which D3.js is very good.

  1. Data manipulation and calculations
  2. DOM manipulation
  3. SVG creation and manipulation

In fact D3 magic depends on these 3 things together. D3 embeds Data in DOM after manipulation and parsing it in different ways and use SVG where graphics is required.

Data Manipulation and Calculations:

D3 stands for Data Driven Documents. So first D in D3 stands for Data.  And D3 provides different ways for manipulating data and doing different calculations. For example, D3 provide different array related methods as shown here: .

Other than arrays D3 also have variety of methods to work with time and time intervals, detail can be found here:

DOM Manipulation:

It is easy to Manipulate and Bind data with DOM. A simple bar chart code can be seen here as well:

/* set the CSS */
body { font: 12px Arial;}
.bar {
display: inline-block;
width: 20px;
height: 75px;
background-color: teal;
border:solid 1px #fff;
function getDataValue(d) {
	var barHeight = d * 5;
	return barHeight + "px";
        .append('div').attr('class', 'bar').style('height', getDataValue);


Here we only utilized D3’s interaction capabilities with DOM instead of using any SVG related feature. While SVG is much more feature rich when it comes to visualizations.

SVG Creation and Manipulation :

D3 can utilize HTML DOM elements to visualization as well but actual format used for visualization by D3 is SVG. It is because SVG provide a lot more variety of graphical features than an HTML DOM. A very basic thing you can do in D3 is to draw and SVG line. But this is not the limit, you can create shapes, polygons and different gradients etc. In fact you can do whatever you can do in other vector graphics tool like Adobe Illustrator and Inkscape.  Also D3 can provide very good animation related functionality as well.

Data Visualization Steps using D3.js

There are 3 major steps.

  1. Have data parsed and formatted based on how you need it to draw its visuals.
  2. Bind an SVG element in DOM.
  3. Draw whatever you want in SVG element.

There can be more steps if you want behavior, animation and user interaction however above mentioned steps are major steps.

Recommended Book

Although there are many books on D3.js. But if you want to learn it in detail then this book: Interactive Data Visualizations for the Web by Scott Murray can be very helpful. However, I will talk more about D3 its learning resources in next posts so if you don’t have time for book, you can still know more learn D3.js. But keep in mind that blog is no replacement of such awesome book.