Skip to content

Dataviz JS libraries

Jump to bottom
Juan Valencia edited this page Oct 4, 2017 · 3 revisions

This is a small compilation of JavaScript based data visualization libraries.

After some digging around them, given that all these options have all needed features for our project, we are gonna focus on a specific feature that can get tricky depending on the selected option, proper live data representation, and by that meaning a soft transition when new data comes.

Canvas rendering

SVG rendering

On the SVG field we can find that D3 is the king, being almost all other libraries wrappers of this already 6 years old library.

Non D3 based

  • Chartist

    • Live data support

    Usecase not covered actually, though could might be achieved as the separation of concerns in this library and its plugins system goes. Chartist is a different take on charting libraries as it tries to keep its 10kb size and simplicity over a big features collection.

D3 based

  • D3.js

    • Live data support

    Being a wide scope library, you obviously can have live data support, though you have into account these considerations.

  • Highcharts

    • Live data support

    Full support for live data representation. But its non-commercial license states the following: Although Highsoft's Software have open source codes, our software is not licensed as an open source software and is unfortunately not compatible with any open source software license like Apache 2 or any GPL. See also Non-Commercial Redistribution

  • C3

    • Live data support

    Though including a Flow method in its API, it looks more akin to sporadic addition of new data, not a data stream.

  • NVD3

    • Live data support

    Not a pretty/specifically dedicated support for it it's included, but it can be successfully drawn by setting the chart animation duration to 0.

  • Plotly.js

    • Live data support

    Supported through the use of extendTraces(), Present on the documentation. Not real-time data proper animations are supported though. Plotly.js has probably the largest diversity of charts available.

  • Billboard.js

    • Live data support

    As based on C3.js, though including a Flow method in its API, it looks more akin to sporadic addition of new data, not something like a data stream.

  • Rickshaw

    • Live data support

    There are examples showing how well this works with realtime data. There's even a wrapping component for Angular.

  • Epoch

    • Live data support

    Real-time charts are first class citizens in this library, so the examples are mainly aimed to this usecase. Sadly, the library seems kinda abandoned with no activity at all on the last two years.

  • ngx-charts

    • Live data support

    Live data and updating it is somehow supported, the only thing that needs taking care it's the current animation or data flow, as it's not natural with the current implementation. PRs are welcome for this. Also there's a PR open now to be able to disable animations, which would help with this.

    The differentiation factor of this one is that instead of just wrapping D3, it uses Angular to render and animate the SVG elements, using D3 for the math, scaling, axis, shape, etc. functions. This leads to performance advantages associated to Angular itself (AoT, Universal), and it also avoids problems coming from different JS codebases touching the DOM independently.

Addendum

A good comparison between these libraries, and different factors to consider when choosing one of them (even including use examples):

Some JS dataviz related awesome lists:

Clone this wiki locally