D3 and HighCharts: Pros, Cons and Comparisons (Part 1/2)

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.

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.

Next

A look at HighCharts.