D3.js
D3.js is a JavaScript library for creating interactive visualizations. We're using it in many projects – and while creating "classical" charts (bar charts, line charts, ...) is more work, the results are heavily customizable. That's why we are suggesting to ADOPT D3.js and related libraries.
Benefits
- many primitives for binding HTML and SVG to changing data
- support for many advanced visualizations (like sunbursts, heatmaps, maps)
- supports interactive animations
- basis for many other visualization libraries
Drawbacks
- SVG must be architected and styled by hand
- quite verbose for standard chart types; and there does not exist a de-facto standard on top of d3 providing these chart types. Instead, many libraries build on D3; but these are often less maintained and less flexible.
Alternatives
- we've successfully used recharts in react applications
- plotly.js is also a great library, though somewhat heavywheight
- many other good libraries can be found in this blog article. Generally we recommend to use what works for you; it's fine to use higher-level chart libraries if they work for your use case.
- A great overview about D3-based chart libraries, including their usage in Reace, can be found in this SmashingMagazine article: Bringing Together React, D3, And Their Ecosystem