Comparisons in Coding: Using Chart.js vs D3.js, From a Beginner’s Perspective
Questions to ask yourself when deciding which to use:
- How much time is available for you to work on this project?
My learning experience with D3.js was not nearly as short or as friendly as it was with Chart.js. To use it within React, special hooks like “useEffect” were required and were new to me. In these hooks, first was called a function that would dispatch our data from Redux, then another hook with a function to initialize the chart, to which the later chart parts would be added in another function, inside the React render function. This was my Capstone team’s way of separating what D3.js would control and what React would control, as they both want to take over the DOM. This was a major part of what added to the time of producing graphs because of D3.js’s steep learning curve. It took my capstone team and I around two weeks to learn how rendering a bubble map graph in D3.js works, so beginners beware if this package is one you’re considering.
2. What sort of graph do you wish to produce?
Chart.js offers its users the popular graph types of bar, line, area, scatter, radar, and pie, a nice breadth of options for most simple data visualization projects. Even though Chart.js can suggest many options, it definitely doesn’t cover them all. In contrast, D3.js lets its coders create seven different categories of graphs, with about five or more specific graph types in each. Some that aren’t included in Chart.js include the types: violin, boxplot, ridgeline, heatmap, correlogram, bubble, density (2D), wordcloud, lollipop, treemap, dendrogram, maps, sankey, and edge bundling, just to name a few. Adding any of these to one’s project will surely make it stand out from the crowd.
It’s up to the creator to decide what types of graphs they want to show. Since both have good, varied options, the coder must choose what format they think will make their data the easiest to interpret.
3. What level of customization are you hoping to achieve?
When explaining the differences between D3.js and Chart.js, I often use the analogy of comparing Apple and Android products. Chart.js is analogous to Apple’s phones because they both offer something which is very easy to use because of how intuitive and smooth the user interface is. D3.js is more similar to an Android device. While their interface may not be as polished as Apple’s, Androids offer far more customization and control over what is displayed, along with what the user is allowed to do through adding interactivity/responsiveness to the graphs.
Another analogy that I have heard of more often is that D3.js is like making a food from scratch, while Chart.js is similar to purchasing an already produced food and just putting it to work by cooking it. To use a specific example, we’ll use my favorite food: potato and cheese pierogies. To make these pierogies from scratch, you must start with filling by cooking the potatoes and combining those with cheese and some spices. After that you can move on to the dough, which needs to be mixed, kneaded, and cut into the proper circular shapes. Once both components of the dough and the filling are prepared, the cook can combine the two by placing a spoonful of filling in a dough circle and sealing the edges up. The next and final step is to cook it, finally having it prepared for your dinner guest.
However, if you’re not wanting to adjust the recipe to the way you like it and just want to go right into eating the pierogies, you’ll want to go to your local grocery store, find what kind you want in the frozen food aisle, and cook it at home. Chart.js is essentially just as simple as that. All its creator has to do is go to the Chart.js documentation, choose what graph they want, copy and paste the code given into their HTML or React render function, and add their data to the given fields. Just like the graph is ready to be feasted on by the eyes of its users!