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

[@alexanderkuznetsov634]

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" ))

[@samselikoff]

So glad that key point came across!! It's really important + I absolutely love the idea of a Build UI course on this 😊 Cheers!

[@comanderguy]

Most videos would have ended at 24:00 and brushed over the fact that the xScale.ticks(5) was not actually perfectly splitting by month. Thank you for going through the rest of it and not just telling us to draw the rest of the owl.

[@rapske50]

Agree. This took the video up a notch. Really helpful.

[@ashleyredman]

Honestly the best content on youtube for detailed ui development

[@FirisTheTraveller]

Thanks for the very detailed video on the line chart! I struggled very much online finding tutorials mixing d3 and React together, but it turns out to be quite simple now!

[@thatsalot3577]

This..... was beautiful, I watched the whole 42:38 minutes long video and subbed to the channel, this is one of the best tutorials I've found who's using d3 without useEffect and useRef, Thanks....

[@samselikoff]

You got it, thanks for such a nice message!

[@seanyohara]

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

[@joshbaker5566]

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

[@kushalchowdhury6296]

This was a really detailed explanation of a practical use of the D3 and Absolutely loved how you threw in framer just to make it more lively !!! Awesome work !!!

[@WalterKimaro]

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😊

[@nopefoh]

this is Slick as hell, Sam! nicely done.

[@Ahmad-vm9pb]

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!" 👏👍

[@maximegroff7688]

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

[@liamsmith6859]

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

[@kyo2846161]

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

[@iNTERO1337]

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

[@maharaj1991]

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 👍👍

[@boggeshzahim3713]

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

[@darwinnarro2889]

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

[@sklldllm]

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!

[@chintansawla]

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

[@camoman1000]

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

[@Ali-sc6dh]

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

[@amireshaq]

your tutorials are awesome

[@FaridShokri]

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

[@ammargillani509]

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

[@ShubhamJain148]

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

[@aaronmcadam]

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

[@Shaker-Hamdi]

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

[@monarchgam3r]

Wow, more d3 stuff please

[@DRCmusic]

I really loved this video. Would you be able to describe how to add a tooltip to the graph using your method of react and D3? Not sure how to use the enter method in d3 to link a tooltip to the data. Thanks!

[@samselikoff]

Is the tooltip rendered by D3 or by a React lib like Radix?

[@DRCmusic]

@@samselikoff I managed to make a tooltip with just React, but I’m a little stuck. So far, it highlights the section of the x-axis using some JSX/CSS style tricks and mouseover/mouseout functions, and printing the x & y value I hover over in a div below the graph. But I’m still having trouble highlighting the y-axis value to make a crosshair type of tooltip that tracks the data (the dateof intervals using date fns made the x axis highlighting easier than the values found in the y-axis, since the y-axis doesn’t have set intervals to make any CSS rectangle type tricks). For the x axis, I just made equal rectangles that correspond to the date intervals with opacity of 0 and turned opacity = 1 at mouseover. I was trying to see if it’s doable using D3, but in following the tutorial, it seems like React is the framework in control of the DOM for this project, unless there is a way to use D3’s control of the DOM for only the tooltip? I have not tried Radix. Is that an easier and more general solution than what I’m trying to do? I’m graphing monthly S&P 500 data over 1993-2024 using your method. You can check out what I did so far here: github.com/drcasas2/sp500dataviz And the live page for the result here: drcasas2.github.io/sp500dataviz/

[@demarco6967]

thankyou for uploading this!

[@MrChickenpoulet]

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

[@andreas_ottosson]

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.

[@samselikoff]

Appreciate the kind words! I do expect to make a Vim video soon because so many people ask, but in the mean time I have this Tailwind workflow tips video which might have some Vim tips you can pick up! kzbin.info/www/bejne/p3qrg2Wtot2sabc

[@andreas_ottosson]

Thanks, I’ll check it out.

[@SogMosee]

@@samselikoff oh shi... 5 months in the making...? I can tell you're about to make the best vim tutorial on youtube. defnitely excited for that one

[@thorbjornbrancher5883]

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

[@janisprox]

this is really good stuff

[@alexandergarzo9415]

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

[@namucho266]

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

[@eddyv524]

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.

[@Ayoubased]

beautiful, I wonder how you been able to get to this level when it is hard to learn d3 on its own and it follows a different kind of learning path where you dont go full in d3 and no css manipulation.

[@mishasawangwan6652]

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

[@viniciuspacheco960]

Really Good!

[@danygagnon8446]

I love this video

[@F39Productions]

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

[@whoman7930]

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

[@jmula1963]

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.

[@IDOLIKIofficial]

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?

[@IDOLIKIofficial]

The graph example: i.imgur.com/dRfraCY.png

[@samselikoff]

It really depends on how close you want to be to the mockup. The pre-existing tools will get you there faster but if you run into customization issues you hit a wall. These days I usually make it myself just bc I hate that wall!

[@IDOLIKIofficial]

@@samselikoff Thanks for the reply Sam! Really appreciate your comments on this. I didn't expect Visx to have that kind of 'wall', nevertheless - it has steep learning curve so opting for D3 isn't that much of a difference. Another question I had, and potentially a tutorial for it - How to handle dragging / zooming (mobile + desktop), for example having 3 periods visible, and dragging the chart to the left revealing rest of them. I thought the simplest why would be to set the chart to be width of the screen and then just overflow-x to scroll. What libraries would you recommend to play around with? Thanks !

[@claus4tw]

Awesome but how would you test this?

[@Nurtylek]

very good👍

[@joseangelhdzrda]

OMG so cool🎉

[@andresgutgon]

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

[@sashaikevich]

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

[@1basketeveryday]

when i grow up i wana be like you

[@stinkybuttonmasher]

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