Using React (Hooks) with D3 – [Finale] 5 Things You Should Know

Hi! This is the final episode of the "Using React (Hooks) with D3" series, and in this one, I recap and sum up the most important things to remember from this series.

Hope you like it, and as always, you can find the code for this episode and all the other episodes here on GitHub:

Thanks for all the support for this series, see you in the next series! I will probably still do stuff regarding D3 / dataviz, but in another context. If you have any issues with the series and the code from this series, just let me know or create an Issue on the repo.

Also, if you want to see a certain topic on this channel, or have suggestions, feel free to tell me!

Enjoy!

00:55 Connecting React & D3 with hooks
03:32 Updateability
05:27 General Update Pattern (Join API)
09:20 Comparison between new (join) & old way of updating pattern
12:00 Scales
15:30 Functions returning more functions

Thanks to Min Huang for timecodes!

[minhuang]

00:55 - #1: connecting React & D3 with hooks
03:32 - #2: updatability
05:27 - #3: general update pattern (join API)
09:20 - #3: comparison between new(join) & old way of updating pattern
12:00 - #4: scales
15:30 - #5: functions returning more functions

[MCMelonslice]

this is hands off the best resource I've found so far about react + d3

[therimalaya]

Thank you for the video. You have explained the concept of updating of the plot very nicely together with how we can use it in react using hooks.

[bono]

Super thanks for made this series Muri!
Really helpful tutorial for begginers (perhaps also intermediates).

[zltn]

Hi Murat - just wanted to drop a comment with a thank you for creating this amazing series. There are not many resources around on using D3 together with modern/current React, and your series explains this topic in a super clear fashion. Your teaching style is relaxed and approachable, and this made following the series a real joy. Also love the artwork! Looking forward for your future content :)

[quirkmaker]

Very clear and nicely structured - awesome - thanks!

[alisonfromaccy]

Hi Murat, Can I just say a big thanks for such a great series on D3/React (...please MORE). And keep up the great work.

[jedkaplowitz]

Most excellent series. I learned so much. That you for putting this together, and I look forward to whatever you put out in the future.

[arr]

Simply amazing ! Many thanks - looking forward to what comes next.

[yoyo-]

No question, no issue, just one comment : AMAZING SERIE !!! Thks a lot ! Next challenge: do the same in react-native

[Feschmesser]

Thank you so much for all your videos, already looking forward to your next projects!

[abhaykumar]

I was so hooked by this series, I went through all 19 videos in 1 go... AMAZING.. I was looking for this

[cil]

Thank you for all the series. So helpful. I learned a lot.

[milansingh]

Your are amazing man, all videos thumb up. Hope such exciting in the near days. I would be more happy if there is one more video that shows of event on the graph and legends, syncing legend hover effect to the graph animation. But heads off

[steveroe_]

Loved the series! Be great to see Pie Charts in the future too

[mikel]

Thank you for this amazing series!

Is there a way we can put the logic from the useEffect into a helper function?

[ankushkoul]

Muri - Brilliant job with this series!! Could you please help me understand the difference between select & selectAll? Sometime they get used interchangeably but sometimes only one of them works. I have gone through many articles on select Vs selectAll but still do not completely comprehend it.

[arr]

Hi Muri - This is such a wonderful series ! I am trying to figure out how to load data from a .csv, .tsv, or .json file vs hard coding it. In some videos you have the data in App.js and passed into the component. I see lots of examples of d3.csv("data/mydata.csv"), then(data=>{ }) on the web, would you move the data call back into the component inside the useEffect with that syntax ?