D3 and HighCharts: Pros, Cons and Comparisons
26th
July 2024, 22:03
As far as Data Visualization goes, I have had the privilege of working primarily with JavaScript libraries D3 and HighCharts. And while to the untrained eye, they are, well, just JavaScript libraries with different names. However, as I'm about to show you today, there are marked differences between the two. Which one you choose will ultimately boil down to your needs, and understanding of their differences will play a huge part in your decision.
Due to the very nature of the way it's designed to be used, a certain amount of math in the usage of D3 is inevitable. You'll need to measure what needs to be subtracted from what, proportionality of this element to that element, and so on. You will need to position everything just so.
The good news is, you'll be able to do it. D3 offers developers a staggering amount of control over the final product. What the library does is give the developer an easy way to traverse the data, along with some useful aggregation functions that can be in turn be nested to produce complex calculations. There's plenty of sweat and toil involved if you want to add bells and whistles (hover effects, fancy positioning, and very custom stuff), but it can absolutely be done simply because the developer is still largely in control.
Thus, if the design of your intended visualization is unconventional, D3 is the preferred choice.
However, with the amount of complexity and control D3 offers, inevitably more code is involved, and subsequently maintenance can be a chore, if not a nightmare. No one but the most masochistic dev wants to deal with more code, especially if the end goal is something more or less standard.
Finally, D3 is free. It's an open-source project. for something that's free, D3 offers a whole lot of value.
We have examined D3; now let's take a look at HighCharts.
HighCharts takes care of the rest. The end result is your chart of choice, rendered beautifully with whatever color schemes you chose. Mouseovers, tooltips and animations are all built-in. The default settings are great - you don't have to lift a finger.
Which can sometimes be a problem in itself - HighCharts takes care of everything so you won't have to. But if you do want to customize, your options are limited to a plethora of color palettes, custom CSS stylings and other visual stuff. Anything truly out of the box is, unfortunately, also out of the question.
Thus you have a staggeringly huge number of known options, and hopefully your end goal fits into one of these pre-designed templates. As time goes by, HighCharts adds more and more different chart types to their repertoire, in the form of additional libraries. However, again, they are still pre-defined options, so getting something truly custom with HighCharts isn't going to be possible.
When it comes to hammering out a standard good-looking solution quickly with minimal fuss, HighCharts can't be beat. At least, not by D3.
HighCharts is free by default, though if you're using it for commercial purposes, there's a license you have to pay for. It's like SGD 200 a year if I'm not mistaken. A single license, with no frills and not inclusive of other add-ons, which also incur a cost. In other words, HighCharts is either free or hideously expensive, depending on what you're using it for.
Tags
See also
Data Driven Documents (D3)
D3 is a Data Visualization library with functions that enable you to step through a series of data in an array, and insert graphical elements (usually SVG - HTML is possible too, but not nearly as versatile) depending on the visualization required. One could chose rectangles or extremely thick lines for bar charts, lines and circles for line charts and paths for pie charts. The measurements of those graphical elements would, of course, depend on the data. Other parts of the chart such as scales, axes and legends, are also handled using inserted SVG lines and text.Due to the very nature of the way it's designed to be used, a certain amount of math in the usage of D3 is inevitable. You'll need to measure what needs to be subtracted from what, proportionality of this element to that element, and so on. You will need to position everything just so.
The good news is, you'll be able to do it. D3 offers developers a staggering amount of control over the final product. What the library does is give the developer an easy way to traverse the data, along with some useful aggregation functions that can be in turn be nested to produce complex calculations. There's plenty of sweat and toil involved if you want to add bells and whistles (hover effects, fancy positioning, and very custom stuff), but it can absolutely be done simply because the developer is still largely in control.
A lot of control.
Thus, if the design of your intended visualization is unconventional, D3 is the preferred choice.
However, with the amount of complexity and control D3 offers, inevitably more code is involved, and subsequently maintenance can be a chore, if not a nightmare. No one but the most masochistic dev wants to deal with more code, especially if the end goal is something more or less standard.
Finally, D3 is free. It's an open-source project. for something that's free, D3 offers a whole lot of value.
We have examined D3; now let's take a look at HighCharts.
HighCharts
HighCharts is a commercial Data Visualization tool that produces all (or most) known manner of charts. What's required is a HTML placeholder, a remote link to the library, and your dataset. You declare a HighCharts object and fill in all the properties required, and presto, you have a chart. If your data already comes in a format easily readable by HighCharts, there's very little coding necessary beyond that.HighCharts takes care of the rest. The end result is your chart of choice, rendered beautifully with whatever color schemes you chose. Mouseovers, tooltips and animations are all built-in. The default settings are great - you don't have to lift a finger.
Which can sometimes be a problem in itself - HighCharts takes care of everything so you won't have to. But if you do want to customize, your options are limited to a plethora of color palettes, custom CSS stylings and other visual stuff. Anything truly out of the box is, unfortunately, also out of the question.
Thus you have a staggeringly huge number of known options, and hopefully your end goal fits into one of these pre-designed templates. As time goes by, HighCharts adds more and more different chart types to their repertoire, in the form of additional libraries. However, again, they are still pre-defined options, so getting something truly custom with HighCharts isn't going to be possible.
When it comes to hammering out a standard good-looking solution quickly with minimal fuss, HighCharts can't be beat. At least, not by D3.
HighCharts is gonna cost you.
HighCharts is free by default, though if you're using it for commercial purposes, there's a license you have to pay for. It's like SGD 200 a year if I'm not mistaken. A single license, with no frills and not inclusive of other add-ons, which also incur a cost. In other words, HighCharts is either free or hideously expensive, depending on what you're using it for.
Conclusion
HighCharts is the optimal choice if you're aiming for a quick and decent solution for a simple well-documented use case, and don't mind paying. If you require a lot of customization and don't mind starting from a painfully low level, D3 is your go-to. D3 is incredibly flexible, but that flexibility comes with a certain amount of complexity which you have to be comfortable dealing with.My way or the high(charts) way!
