react + d3 = vx – vx code – Medium

#ReactJS + #D3JS = vx, a new #datavisualization library for React:   #D3

  • 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?
  • “I wish there was something more like d3 I could use,” you say.Enter vxreact + d3 = vxMixing two ways to update the DOM is never a good time.
  • 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 vxGoal 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.
  • 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.
  • The vx collection of components lets you easily build your own reusable visualization charts or library without having to learn d3.

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…

@starliftorg: #ReactJS + #D3JS = vx, a new #datavisualization library for React: #D3

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.

and magic dances across your screen.

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.

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.

I could use,” you say.

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.

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.

entirely. This means your team could create charts as easily as using reusable react components.

has no opinion on how you style your components. Use css or one of the many css-in-js options out there.

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?

5. I like using d3.

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

react + d3 = vx – vx code – Medium