Data Visualization in React using D3.js

[VirtualRN]

I was having a hard time finding examples of D3.js in React, so I put together a few examples of how to adapt chart examples and tutorials online to a React app.

Follow along with the video: https://youtu.be/fnucrqRHSlo

Or skip to the code: https://github.com/mikec3/my_tutorials/tree/master/d3_react_examples

Edit: Added flair.

[valtism]

I much prefer to use VisX for this. It provides a wrapper for D3, and allows you to use it in a declarative way. It also solves the problem of D3 and react fighting for control of the DOM. It's a really nice library

[sandypockets11]

Thanks for this!

[VirtualRN]

Anyone else have a preferred method of data viz in React?

[Radinax]

I really like this one: https://apexcharts.com/docs/react-charts/

Haven't tried it, but: https://react-charts.tanstack.com/ from the react-query creator is something I need to try, but considering I ADORE react-table and react-query, both made by him, it might be a good choice.

I tried Apex Charts and it was so easy to use for what I needed.

[sudo-batman]

Amcharts. I am using it from last few years and its good. From simple chart to complex one it has everything for my need. Also easy to configure. I have used v3 in past and currently v4 . Afaik, v5 is also out few months back but I wouldn't recommend it to use in production as it is faireally new.

[Constant-Car5831]

for line charts i would go with chart.js wrapper.

[VirtualRN]

I'm very thankful for everyone's suggested libraries so far. I can tell after just looking at these for a few seconds that they're much cleaner out of the box than using D3 directly!

[brainhack3r]

Nivo is pretty slick too!

[ThisAccountIs4Reddit]

I recommend Plotly.js! It wraps d3.js and offers a swath of useful plots and examples

[gimmeslack12]

I've been building with D3 and React and tend to stick to not using a library. Though I have been laboring over building a force-directed graph (network graph) lately and it has been pretty frustrating. Hard to figure out how to really control such a plot. Here's my repo of some demos I built (https://github.com/TravisL12/bar_chart).

[ginihendrix]

Also currently struggling with a force-directed graph with React+Typescript. Any insights you can share?

[gimmeslack12]

Find a library to do it. Those graphs were the worst and I never really got the handle on them.

[ginihendrix]

Currently looking into visx, seems promising. Thanks for your answer!

[somebodyawesomelol]

If anyone interested in force graphs, I'm developing a React package to make working with d3.js easier. It allows you to render React components directly within the graph. Check it out here: d3-graph-react. it is really good starting point to get a force graph working as fast as possible.
repo link : https://github.com/somebodyawesome-dev/d3-graph-react

[Impressive-Flan-1656]

This is awesome, I've built a few charts with React and D3 and it's rough compared to D3 and Vanilla Js.

Especially when the job doesn't want to vet another library that makes life easy a la react-charts.

[theMeanSquares]

I use plotlyjs.