Let’s learn D3.js – D3 for data visualization (full course)

This course teaches you how to visualize data in the browser using D3.js. Watch it here or check out the interactive version at Scrimba, where you’ll be able to play with the code as well: https://scrimba.com/g/gd3js

D3.js is the most popular data visualization library for the web. It allows you to make sense of your data through a powerful API of methods. Throughout this course you’ll learn the most important features of the library while building four different visualizations.

Course content:

Introduction (0:00)
Selection and manipulation (1:59)
Data loading and binding (5:25)
Creating a simple bar chart (7:29)
Creating labels (11:16)
Scales (13:22)
Axes (15:18)
SVG elements (17:41)
Creating a pie chart (20:32)
Line charts (21:55)

You can follow the course creator Sohaib Nehal on Twitter here: https://twitter.com/Sohaib_Nehal

Learn to code for free and get a developer job: https://www.freecodecamp.com

Read hundreds of articles on programming: https://medium.freecodecamp.com

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp


This Post Has 47 Comments

  1. Mukun An

    Hello why was there bracket wrapping barWidth variables like [barWidth * i, 0], even though it is neigther array nor rendered in HTML?

  2. Cumar lama

    why would you skip the Pie Chart in the middle ?

  3. Aled Griffiths

    That was one of the worst teachings of a subject I've ever seen. So, what did you teach the viewer? You just repeated what you wrote. That's not teaching. Do you not see it from the perspective of someone whose new to all this? It's meant to be explained slowly yet you were going so fast. And how are you to understand the context of what your saying without a picture, something to visualise. Terrible

  4. Reed Anthony

    Thank you. this has helped me to understand D3.js functions.

  5. web - presence

    Too bad none of this stuff works at all. I want the last couple hours of my life back.

  6. Gaurav Dasgupta

    Must Say!! Excellent Stuff I found whole throughout the web which can get you going straight forward deep dive into writing your own data visualizations like magic…. Best Tutorial on D3

  7. Very good explanation! Before this video I watched and read a lot of tutorials however all of them were lack simplicity which I saw in this video course. Good job!

  8. akshay awate

    Just simply explains the written code,not up to the mark

  9. Thank you very much for this helpful overview of D3 sir. But one quick note: 17:32 The y-axis is going through the (0,0) point. That may need some fixing. Cheers ^_^

  10. Alhugen

    hello! is there a way to automate the creation of the project like the p5-manager from terminal for p5.js?

  11. PKG

    no one is teaching tricky part, how to grab the data from an external file like csv .

  12. Shivam Varshney

    Hey can we make dynamic flowchart or tree-like structure using D3 js? If yes please teach that how to.

  13. Davy Van Laere

    Its a nice introductory video, but its a bit annoying that it is divided into these very small sections, and that each small section has an intro and an outro (in the previous lesson bla bla bla) …

  14. bernard doci

    For Pie Chart text to appear add .text(d => `${d.data.platform}`) in the arc.append('text')

  15. Ariel Erijman

    Sohab, thank you very much! You make it short, practical, easy to understand and to follow. Amazinig!! You have incredible teaching skills!!

  16. Zdravko Dimov

    I first passed the FreeCodeCamp challenges (on the website) and now watched this. Learned so much! Thanks.

  17. samar taj Shaikh

    crisp, precise and very well overview, just as what i needed, thank you.

  18. Holsp

    For anybody wondering why the scales don't work, he adds yScale to theheight function also, it's really quick and I was dumbfounded why it wasen't working!

  19. H Clark

    Can you do a world map using D3 tutorial?

  20. Tom Otero

    Code from bar chart example is not working for me.

    The only difference in my code is the data values and I'm using NodeJS and webpack to bundle my javascript.

    Nope, I'm just blind. Line 24 is var translate = [barWidth * i, 0]; not var translate = [barWidth + i, 0];.

  21. Vivek Ananth

    From Scales, Bar Chart is NOT working as expected. Please follow other tuts while coming to Scales.

Leave a Reply