Using D3.JS and Other Charting Frameworks
In this video, you’ll learn how D3.JS compares with other charting frameworks.
One of the most common visualization frameworks is D3.JS. It has an extensive API and is very powerful. But it has a pretty steep learning curve. Other frameworks like Highcharts or E Charts are easier to use although they don’t offer the range of options that D3 does. For example, side-by-side comparisons using the same chart illustrate the pros and cons of D3.JS and E Charts at the code level, including the ability to add labels to a chart.
One of the most common visualization frameworks in this phase is D3.JS. D3 has a very extensive API that you can use to build pretty much any chart you want, but the problem with it is that it's hard to ramp up on. On the flipside, you have libraries like Highcharts or E-Charts that only give you a certain list of charts that they support, and they give you some options to customize those, so you're limited in the capabilities of charts that you can produce with those, but it's much simpler to work with.
D3.JS Versus Other Charting Frameworks
Let me show you an example of how D3 compares to other charting frameworks. In this example, we're looking at a donut chart created with D3.JS. The donut chart is grouped by payment type, and we can see each individual sector corresponding to each of our payment types. On the left hand side, we have a filter control that will allow us to filter out one of our payment types. Let's make the exclude selection, and let's remove diners. When we do that, our donut has now updated, and the diner sector was removed.
A Donut Chart in E Charts
Let me show you an example now on how to do it on a different charting framework. In the example that you're looking at the screen, we've decided to use E Charts to create a similar donut chart. As you can see, we're also grouping by payment type, and we have different sectors for each of our payment types.
We'll again show the example of removing one of our payment types from the donut. We'll select diners. We'll exclude it, apply that, and our donut has now updated. If you compare these two, they pretty much look the same, but the code to write these looks vastly different. Let's jump now into the code and show you how different they are.
Sample Code for D3 Donut Chart
Now we're looking at the example code for the D3.JS donut chart. The first thing that we want to look at is how many lines of code do we have. So, right now, we have about 181 lines of code. In this example, we have to make sure that we tell D3 how to write each of the sectors that we have available in our donut. So, if we scroll down a little bit, you'll see that we have some code when new data comes in. We tell it how to draw those arcs. We also have some information on how to update each individual arc when the data gets updated and what to do with the sectors that have been removed. We also have to give them some information about the different functions on how to find the adjacent sectors and how to find the preceding ones. And we also even have to give it information on how to interpolate between size differences when the data have been updated.
Comparing D3 Code to E Charts Code
Now let me show you how this is much simpler in a charting library like E Charts. Now we're looking at the donut chart created by E Charts. We're gonna look, and you'll see that we have only 58 lines of code compared to about 180 lines of code that we had in our D3.JS example. We have a method here that we can use to provide an option to E Charts, and we only simply have to tell it what type of chart we're gonna be rendering. So, we're gonna be rendering a pie chart, and then when we receive our data, we just tell it what our data is gonna be. And we set some information about the radius of the donut chart and how to center it in the screen, and that's it. The charting library takes care of creating the donut chart for us.
Adding Labels to the E Charts Visualization
Now, let me show you an example of how we can add some labels into this donut chart. So, in our options, we have the ability here to specify some label information. As you can see right now, I have show set defaults. So, that means that, whenever we're looking at the donuts, there's no way for us to know which payment types we're looking at. Let me simply update that to true and rerender the chart.
As soon as the chart rerenders, we now have labels for our different payment types. This kind of update would have been much harder to do in the D3.JS example.