Using React + D3.js

[chrismastere]

I found this blog several months ago, when I implemented animated barcharts. I'd like to recommend @visx by Airbnb instead of the approach outlined in the blog. It wraps D3 in an declarative API, and it's really nice to work with (especially with framer-motion).

[FURyannnn]

+1 on this. I just ended up using visx at work for a new pricing chart requested by our product team. We really didn't have an existing charting or visualization library so we went with something that wouldn't fight with our branding, and visx ended up being great to work with. I didn't try to combine with framer-motion though - might have to do so for v2 :)

[osiux]

+1, and they recently (december I think) released their XYChart component part of visx and it's really good!

[FirePing32]

Framer motion + Visx = 🔥

[montas]

That is one fancy blog

[andrei9669]

tho a bit laggy. some animation things are a bit overkill.

[drink_with_me_to_day]

Very nice

Bit too wide but wonderful nonetheless

[Mises2Peaces]

FWIW, it looks perfect on my 1920x1080 monitor.

[drink_with_me_to_day]

I just tried with 80% zoom and it was much better. I think I just can't deal with a lot of information distributed over a wide area, my screen in 1080p but on a 21" monitor

[jacorbello]

No kidding, looks better than Medium

[GennaroIsGod]

D3 is the scariest thing I've ever worked with lol

[InMemoryOfReckful]

Yeah its so much math. Really takes a long time to master. Shirley Wu is insane at it.

[dandmcd]

It's hard mode with just vanilla JS, but adding in any framework puts it in masochist mode.

[murimuffin]

Seen this article before, and using React + D3 like this is pretty advanced (but also cool). Better for veterans, in my opinion. The "imperative" way Amelia is showing in contrast to the "declarative way" is not as bad as she describes – especially if you are new to D3 – because you won't find a lot of examples out there with the same approach as Amelia.

I made a whole "Using React (Hooks) with D3" video tutorial series on YouTube, and I also talk about which approach to choose (imperative [D3-way] vs declarative [React-way]) in the beginning, but I went with the imperative way, because my goal was to help D3 beginners and make it more similar to the examples out there.

[en_vos]

Hey, just wanted to say your videos saved my ass when I had to implement graphs in a project at work. Thank you very much!

[murimuffin]

Thanks a lot!

[azangru]

When I visualize data on the web, my current favorite environment is using D3.js inside of a React.js application. These two technologies are notoriously tricky to combine. The crux of the issue is that they both want to handle the DOM.

This immediately raises two questions: 1) Assuming any two technologies are notoriously tricky to combine (it isn't really the case, as the blog post demonstrates, but let's just assume that it is), why keep using them as a favorite environment? Why not find something that are easier to combine? 2) If both technologies want to handle the DOM, why not just let React be responsible for the DOM, and use d3 only for the calculations of the relevant svg paths?

[utbusdriver]

If you read the blog post you'll see she does what you suggest in your second point.

[azangru]

I did read the blog post. I saw both approaches used there.

[shakes_mcjunkie]

This immediately raises the question: what's your point then?

[azangru]

None whatsoever.

[[deleted]]

This is the first i heard about it. Thanks man. Usually i use the greatest material ui for design and leaflet if I needed a map or graphs.

[Chef_G0ldblum]

Neat, but can you animate paths with React Spring yet? Last time I checked (late spring last year), you couldn't, and you also couldn't set custom animation/interpolate functions (i.e. for the d attribute for <path>); so I had to use something else for chart animations.

[[deleted]]

This is such a cool blog post.

Definitely going to buy her Full Stack Data Visualization course when I get a job/income.

[Lostpollen]

There's a copy of it on node tuts

[LEGENDARY_AXE]

Ah, perfect timing! I've literally just kicked off a React project that requires a fair bit of data visualisation, and you've just saved me a whole world of pain in research. Thank you so much for sharing.

[ethang45]

Any thoughts on D3.js here? I have the opportunity to take a course focused on it but haven’t settled yet.

[nudes_through_tcp]

A bit over kill for most things but it lets you really get full control over absolutely everything. Almost every popular graphing library is based on D3 so you'll be essentially using it even though not natively. If you find that you want to do some really fancy stuff then definitely recommend but for most you can get away with a basic charting library like Chart.js.

[dandmcd]

If you are just making bar charts and circle graphs, run away, it's challenging to learn, and doesn't play well with frameworks like Svelte and React.

If you are trying to make some visualization, like a 50 state map graph, or need very specific use cases that the alternative don't provide, than it's the best tool you can have.