Building an Animated Line Chart with d3, React and Framer Motion

This video is brilliant because I found only here the Declarative way how to use D3 js inside React. Almost 99% of videos on the internet explain D3 js like jQuery )) Thank you so much, Sam, really appreciate it. Hope this video will be one of the series of the course about "The Declarative way to use D3 in React" ))

can you update this tutorial but go in depth on using and manipulating the dataset, maybe using Tanstack Query v5? A BuildUI course on d3 would be awesome too.

This is fantastic. You should make a course just about D3 with Framer Motion. I would defiantly buy that course.

Wow, this D3 charts tutorial is a game-changer for data visualization! 📊 The way you explain the concepts and demonstrate the coding is incredibly clear and easy to follow. I've always been intimidated by D3, but after watching this video, I feel much more confident in creating stunning interactive charts for my projects. Thanks for sharing your expertise!" 👏👍

OMG so cool🎉

I used this video and docs to make a gauge chart in svg with d3 and sveltekit. Ive been using a lot of your videos and rewatching over and over to duplicate animations in my app. Keep up the great videos! And would love more d3 charting videos. It was a royal pain to get the gauge to work with pie and arc

this is really good stuff

As someone who absolutely loves working with SVGs / canvas stuff…the level of detail in this video makes me very excited for that Build UI subscription😊

Absolutely beautiful, watched every second of it. This is exactly what I needed. Liked and subbed and I’m stoked to watch your other videos!

Awesome! can you make a D3.js series??

To be honest this an amazing video! I will definitely try it on my projects.

Really fun video, I love your attention to detail and little tips ❤

Wow, this was a really informative video. Just what i was looking for. Thanks for posting. I am actually working on a React Native app that i want to use D3 for. Framer does not work for React Native but i hope the D3 concepts you presented do.

Your narrative is clear and easy to follow, thank you so much.

Can you synchronize the circles appearing as the line animates left to right? It seems like the circle animation blocks the line one right now

Hi Sam, thanks for this detailed tutorial. I'm having a task for the next sprint to develop a custom chart with date period selection (7d/1m/6m/1y) and also vertical marks with tooltips. For now, I'm going with Visx (since I have quite a good to develop it). Do you think going with your route is better? I see that Visx is also quite low-level but didn't went into too much details, but I've skipped high-level ones and that cannot be customized as per design. Also, since Visx does not have an easy learning curve, I thought your route might be even better?

Have you considerd making a full coure for d3js in react?

This was awesome! Thank you! And I can't wait to buy your course(s) :)

“Bro, do you even lift?” “Weights or state?”

Recently I thought of learning d3, all the videos I saw were so long winded about everything that I ended up deciding not to learn d3. But you sir, I see one video from you and my will to learn d3 woke up again:))) you're gift to react community ^_^ thank you so much for making everything so easy and amazing 👍👍

Awesome but how would you test this?

when i grow up i wana be like you

Awesome video! Love how you've explained each element's composition!!

Fantastic, love the descriptions and explanation of the steps and logic, so good!

d3 docs are not the best, your video saved me a ton of time 🙏

framer motion looks interesting, might try to add it in one my work project, it adds awesome details!

Amazing attention to detail. My favorite place to pick up new skills. Congratulations on 10k, you deserve much more! Definitely interested in your course. Would be awesome to be able to give something back for all these gems. I’ve been playing around with using Vim in VS Code lately, a video about some useful commands would be fun 😊 But, I truly believe you should keep doing videos that YOU like. You see so many channels starting to lose that fire and just produce content for likes. Take care man! Thanks.

very good👍

That d3 stuff really needed some explanation (which you did great on).

I love this video

Dude you are producing some awesome content. Recently came across your profile on twitter and been loving your videos

Awesome! ❤️
You can run ads for me. Whatever you want the content worth it

I love ur videos man, the calmness of your voice and the beautiful content. Awesome 🔥

Man those animations at the end were amazing, I really want to try something like this

Can't wait for your course! This was so good!!

Really love your videos ! Great seeing you building step by step your projects while learning many technics, libraries and so on !

Super stoked about your course. Struggling to recall any other channel, which creates such concrete content. <3

Stoked for the course! :D

Signing up for Email Newsletter, so stoked to be a part of your community.

Thank you for demonstrating what you can do with a few lines of POWERFULLY composed code.

You're an artist with your logic.

I never write comments, so I mean this!

Cheers :D

Why do use "let" everywhere Sam, and not "const"?

Wow, more d3 stuff please

Really Good!

thankyou for uploading this!

Another awesome video! You're really killing on both the content and the production.

Incredible content and soothing voice, really looking forward to your course!
Cheers from France

this is Slick as hell, Sam! nicely done.