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

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.