react + d3 = vx

vx

A collection of reusable low-level visualization components. vx combines the power of d3 to generate your visualization and react for updating the DOM.

Super beta. Hold off on using this in production until I shake out some of the bigger API problems (post v1.0.0+).

Table of contents

1. Motivation
2. Examples
3. Packages
4. Roadmap
5. FAQ

Motivation

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().

Examples

• Simple line chart
• Simple line with glyphs chart
• Simple area chart

Packages

• @vx/annotation
• @vx/axis
• @vx/curve
• @vx/demo
• @vx/glyph
• @vx/grid
• @vx/group
• @vx/marker
• @vx/mock-data
• @vx/point
• @vx/responsive
• @vx/scale
• @vx/shape

Roadmap

Lots coming soon, check out the roadmap.

FAQ

1. What does vx stand for?

   vx stands for visualization components.

2. Do you plan on supporting animation/transitions?

   yup!

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. I like using d3.

   Me too.

✌️

MIT • @hshoff