Data visualization state 2019
As a Front-End Engineer at Sisense, I need to build multiple components using data visualization libraries. visualization libraries exist to help us understand complex ideas. There are plenty of library options to make visualizations on the web. Each of which has their own positives and negatives. Here are, in my opinion, five of the best visualization libraries out there now.
To begin with, I assume you already know what React is. If you’re unfamiliar with it, the short answer is that React is a JavaScript library to build user interfaces. If you want the long answer, you can check out a bit more here. React is supported by Facebook and is the most popular Javascript library to build UI’s today.
D3
D3 is a javascript library to manipulate documents based on data, this library uses web standards and is framework agnostic, which means , that d3 doesn’t care if you use React, Vue or any other javascript framework, D3 will work anywhere, to prove what i say i build 3 apps with different libraries (React, Vue, Polymer) and D3 works flawless on all of them.
D3 works with selectors jQuery-like (for the old developers like me reading 😉) to select DOM elements, which are usually SVG, but also be canvas. D3 applies manipulations and events to your DOM elements.
D3 can manipulate the DOM elements but because we use React, which excels in rendering the DOM because of its virtual DOM, we want to use React to perform that task. We will use D3 only for calculations.
D3 is like the mother of all the visualization libraries, not because it’s the oldest but because many other libraries are D3 based. This library continues to survive all the frameworks and libraries because someone will always make a new library using D3 as the base.
Data visualization exist in this world to help us understand complex ideas…
React-vis
React-vis is a React visualization library created by Uber. With it you can easily create common charts, such as line, area, bar charts, pie and donut charts, tree maps and many more.
GitHub stars: 5,520
Why this library?
The React-vis library is incredibly easy to install and use, it has excellent documentation and is supported by Uber. In fact, Uber is the largest company supporting a data visualization library, which is reassuring and great to know.
What can be better?
Although this library got a rich API when we want to add specific things or extend it is a little difficult. (of course you can send an MR! 😉).
Chart.js
Great library , even better documentation, lightweight , fully responsive charts. 7 charts including: Bar, Bubble, Doughnut, Line, PolarArea, Radar, Scatter.
GitHub stars: 43,182
Why this library?
Size! this library is tiny!! only 11kb gzipped , this days in web development size matters, nothing better than a small size library.
Uses native API’s so the learning curve is tiny to none.
what can be better?
This library can be even better with more charts and also with svg options.
VX
great library that shows the power of React together with D3, fast and lightweight.
GitHub stars: 5,965
Why this library?
Great API, super easy to make complex graphs, vx is largely un-opinionated and is meant to be built on top of, the amount of types of graphs it offers out of the box is incredible.
Rechart
A composable charting library built on React components, great documentation with lots of live examples.
GitHub stars: 11,482
Why this library?
Small library, also composable, which means that you can build on top and “compose” different charts with new components.
so now what?
At the end of the day, I have to say that all of these libraries are great and the differences between them are small. It can be size of the library, or the different use of API’s to use, and of course, popularity on GitHub. But at the end of the day, in the open source world, we know that the most popular libraries will be updated more often and will have a great community that will add many features.
However, I also encourage all of you to go out there and find your own — or even build one! D3 is very powerful and allows you to wrap it with your own JS library. However, the ideal is to let D3 to make the calculations and to make the JS framework, whichever one you choose to use, to do the render. This way you will be allowed to make incredible interactive graphs.
