Kontakt

D3.js

d3js.org

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