Comparisons in Coding: Using Chart.js vs D3.js, From a Beginner’s Perspective
JavaScript has a shockingly large number of libraries, around eighty-three to give a solid estimate. The two of which I have worked with previously, and are possibly the most popular within the data visualization topic, are Chart.js and D3.js. For the minimally-experienced students of JavaScript, it’s essential to weigh the advantages and disadvantages of possible JavaScript libraries as they’ll greatly impact how much time will be spent learning them versus using them for producing captivating projects. Since I’ve had my struggles with both, even more so because I used them within React, my experiences might be valuable to other beginners looking to work with those packages as well.
Questions to ask yourself when deciding which to use:
- How much time is available for you to work on this project?
In my experience, if you desire a more basic type of graph and need it done in a short amount of time Chart.js is for you. To use the graphs found in this package, all the coder needs to do is go to the documentation, find the type of graph that will show off their obtained data the best, and copy it into their HTML or a React render function. I used both Chart.js and D3.js in the React JavaScript framework and I must admit that Chart.js was nothing but a breeze in comparison. After I found what I needed in the documentation, I simply imported the needed “Horizontal Bar” component, copied it into my React render function and inserted all my data and color changes into the correct fields. Instantly upon rendering the page, I was shown my horizontal bar chart with colors, labels, animations, a legend, and hover interactivity. This was very convenient considering I only had four days to learn a new technology, that being Chart.js, and using it in a freshly created web application.
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.
That long process is what I compare to using D3.js. Creating each part of the graph like the x-axis, the y-axis, the path (through which the data is shown), the legend, the labels, the responsiveness, and interactivity, all take much time as they are all made from scratch. Even after all the time it took to create each piece, combining each part and ensuring they work together fluently is another part of the battle. Thankfully for such a popular JavaScript library, there are numerous articles providing their readers with examples of different graphs and their fragments, presenting them the previously prepared ingredients they need to learn how to use D3.js.
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!
In summation…
Taking a glimpse at my experiences, Chart.js should be used when basic types of graphs would make the given data the easiest to interpret and the length of project production would be short. This JavaScript package has easy-to-understand parts, simply, yet thoroughly, explained documentation, and is the easier of the two to use even within a front-end JavaScript framework like React. In comparison, D3.js has a much greater learning curve, but it does give its coders significantly more customization opportunities imaginable and has a generous amount of alluring graph types.
