JavaScript D3-Based Data Visualization Libraries

D3.js is the leading drawing library for creating svg-based scalar images in browsers because it is powerful and fast. The corollary that great power comes with great responsibility holds true: D3 is said to be very difficult to learn and use well, and rewards those who can specialize in developing with it. Writing out svg seems even harder/more special then D3, but I am considering any library that uses SVG really.

Fortunately, many charting libraries have sprung up for those who can’t specialize in D3 or what it does, but need graphs and charts in browsers -like me. Probably too many, each with its own not-quite-generic approach to a subset of chart functionality it’s creator had in mind.

There are quite a few comparison pages offering a list of the libraries with overviews and checklists of features. These are useful at eliminating some, such as non-open source packages, canvas-only libraries etc. Many comparison sites simply list the popular choices but lack any depth beyond a blurb and URL. I was unsatisfied and started my own rating table.

My 5-6 libraries that supported all popular chart types:

I tested speed by loading 30 charts displaying a single series of 40 values as a line chart in a single browser window in IE 10. Whatever each library decided to enable as defaults was accepted and displayed. Tooltips and axis overlay effects did not appear to tip the scale: the fastest and slowest library had the same features. Animation transitions were turned off/avoided.

Conclusion

NVD3 for speed, C3 for features and documentation. Dimple could be great for interactivity and animation, but strangely, it sorted by y values.

I hear a lot about High Charts and Chart Fusion, both commercial products. They were slow and dated, but offer support and many templates. Google charts is an API-driven service which is too restrictive for use in an application.