In the world of data – visualization plays a keen role in portraying the data. It enables you to make sense of it faster, and also observe interesting patterns that wouldn’t be apparent from looking only at stats.
We were faced with a similar issue – to choose an all-around visualization tool. Starting with Chart.js, we soon realized that relatively complex graphs with customization were impossible to make and the only open source project serving our need was “D3”.
Basically, the two libraries are –
Chart.js – The Charting library which provides supports 6 basic chart types, best used for standard and simple graphs.
D3.js – It’s not a charting library; it is a powerful versatile tool which is best used for complex and nonstandard data visualizations. While you can use it to create conventional charts (bar, line, pie, etc.), it’s capable of so much more! Stuff like this is not possible to achieve through Chart.js.
To decide the tool according to usage, below is the comparison of D3.js and ChartJS
D3 Pros –
1. Variety of visualizations – As seen in the link above, data manipulation can easily generate non-standard visualizations for massive amounts of data. Some more interesting graphs can be seen here – heatmap1, radial1 etc.
2.Interactivity – D3.js offers incredible levels of interactivity! The charts are rendered in SVG (Scalable Vector Graphics) which enables us to interact with each element of the chart. Also, this helps in displaying tooltips and legends for the chart
(For the clearer understanding, think of svg as a div in DOM. Similar to HTML, SVG is built into the document using elements, attributes, and styles.)
D3 Cons –
Well D3 has only one drawback (which tells us a lot about it, doesn’t it?) – Steep learning curve
The syntaxes are way more complex than Chart.js because it involves creating each element of the chart. Where a simple Chart.js code for a bar chart would look like
var barChart = new Chart(ctx, { type: ‘bar’, data: data, options: options });
the same in D3js would not take less than a hundred lines! And this is where Chart.js takes over D3.js.
Chart.js Pros
Simple and elegant – Easy to implement as seen above, as long as we need only basic graphs – bar, line, pie etc. The chart.js documentation is well organized and provides detailed information on using each feature
Chart.js Cons
1. Non-interactive – The charts are canvas based (think of canvas as a photo). Similar to a picture, the chart is not interactive. The chart is a single HTML element so parts of it cannot be modified
2. Very basic graphs only – Chart.js only provides 6 chart types. For even little complex representations, we need to look for other options
Depending on the need, we can choose any of the two after weighing all the properties above. Below are our use cases where we achieved what was needed – through D3.
- Heatmap which shows channel usage by time of day
- Graph where range with the person’s age is highlighted
