visx

GitHub Link

A collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of React for updating the DOM.

visx a collection of expressive, low-level visualization primitives for React

At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React.

Here are the advantages of visx:

  1. Keep bundle sizes down. visx is split into multiple packages. Start small and use only what you need.
  2. Un-opinionated on purpose. Bring your own state management, animation library, or CSS-in-JS solution. Odds are good your React app already has an opinion on how animation, theming, or styling is done. visx is careful not to add another one and integrates with all of them.
  3. Not a charting library. As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.

And most importantly — it’s just React. If you know React, you can make visualizations. It’s all the same standard APIs and familiar patterns. visx should feel at home in any React codebase.

Motivation

Goal

The goal is to create a library of components you can use to make both your own reusable chart library or your slick custom one-off chart. visx is largely unopinionated and is meant to be built upon. Keep your bundle sizes down and use only the packages you need.

How?

Under the hood, visx is using d3 for the calculations and math. If you’re creating your own awesome chart library on top of visx, it’s easy to create a component API that hides d3 entirely. Meaning your team could create charts as easily as using reusable React components.

But why?

Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into componentDidMount() is just that. This collection of components lets you easily build your own reusable visualization charts or library without having to learn d3. No more selections or enter()/exit()/update().

FAQ

  1. What does visx stand for?visx stands for visualization components.
  2. Do you plan on supporting animation/transitions?A common criticism of visx is it doesn’t have animation baked in, but this was a conscious choice. It’s a powerful feature to not bake it in.Imagine your app already bundles react-motion, adding a hypothetical @visx/animation is bloat. Since visx is react, it already supports all react animation libs.Charting libraries are like style guides. Each org or app will eventually want full control over their own implementation.visx makes this easier for everyone. No need to reinvent the wheel each time.more info: https://github.com/airbnb/visx/issues/6examples:
  3. Do I have to use every package to make a chart? nope! pick and choose the packages you need.
  4. Can I use this to create my own library of charts for my team?Please do.
  5. Does visx work with preact?yup! need to alias react + react-dom and use preact-compat.
  6. I like using d3.Me too.