react + d3 = vx

A new open source library for building visualizations with react

Harrison Shoff
May 7, 2017 · 4 min read
Image for post
Image for post
Image for post

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

Image for post
react + d3 = 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.

Image for post
Image for post

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/zoom

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. Below is a flow diagram that illustrates how vx could fit in at your organization.

Image for post
A flow diagram of how you could use vx to power all of your organization’s needs

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

Tutorials to come! And lots more on the way.

vx code

react + d3 = vx | visualization components

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store