react + d3 = vx
A new open source library for building visualizations with react
But first a story — stop me if you’ve heard this one.
You’ve fallen in love with React. You’ve built a redux app. You’ve dabbled with GraphQL. You’ve started following along with Relay Modern and Apollo Client. But your next project is a dashboard that requires building some charts.
“Not a problem,” you say.
You know how to make charts. You just need to use d3 and magic dances across your screen.
Of course, the last time you made a chart with d3 was 3 or was it 4 years ago? Doesn’t matter… A few bl.ocks.org later and you get a sense of how to put the familiar in your text editor. “Just need to hook into a DOM node,” you say.
“Not a problem,” you say. React gives you some escape hatches to hook into the DOM. You find yourself spending more developer time in componentDidMount() than usual. But that doesn’t sit right with you. Maybe there’s something out there that does that for you so you don’t have to worry about that. “Just need to drop in the data,” you say.
Charting libraries are great until they’re not. Doesn’t look like off-the-shelf has created the chart you need make. “I wish there was something more like d3 I could use,” you say.
Enter vx
Mixing two ways to update the DOM is never a good time. Telling your team members to learn d3 to use the charts you’ve made is also never a good time.
Found yourself in the place before? Me too.
So I set out making a library of low-level components that could be used to build up reusable charts or those one-off requests or that special idea you had for a visualization that you’ve never seen done before.
About vx
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. vx is largely unopinionated and is meant to be build on top of. Keep your bundle sizes down and use only the packages you need.
How? Under the hood, vx is using d3 for the calculations and math. d3 is the visualization kernal used to generate the data that flows to your components. If you’re creating your own awesome chart library on top of vx, it’s easy to create a component api that hides d3 entirely. This means 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. The vx 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().
Styling The react ecosystem is filled with many different options for styling your react components. vx has no opinion on how you style your components. Use css or one of the many css-in-js options out there.
Current installable packages
@vx/annotation
@vx/axis
@vx/brush
@vx/curve
@vx/event
@vx/drag
@vx/glyph
@vx/gradient
@vx/grid
@vx/group
@vx/marker
@vx/mock-data
@vx/pattern
@vx/point
@vx/responsive
@vx/scale
@vx/shape
@vx/text
@vx/zoomFAQ
- What does
vxstand 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. Below is a flow diagram that illustrates how vx could fit in at your organization.
5. I like using d3.
Me too.
We want your help
vx is still in the super beta/developer preview phase. So, take vx for a test drive. Pull requests or issues are welcome. Let us know what you think. https://github.com/hshoff/vx
Check out the demos: https://vx-demo.now.sh
