13-hour Data Visualization with D3.js

The Data Visualization with D3.js course was created by Curran Kelleher, organized and hosted on freeCodeCamp.org Youtube Channel. In the past two months, I followed the tutorial by Curran Kelleher and learned Data Visualization with D3.js as a beginner.

What I coded

I followed the tutorial and code each project and customised styles for some of the projects. Sources code are available on GitHub.

Here are the screenshot and demo of parts of the projects:

Basic Charts

Bar Chart

Customized Axis of Bar Chart

Area Chart World Population

Area Chart

Line Chart

Scatter Plot

Github Repository

General Update Pattern

Update Pattern Github Repository

Click Interaction

click interactin Github Repository

Making World Map

worldmap Github Repository

Choropleth Map

Choropleth Map Github Repository

Tree Hierarchy

Three Hierarchy Github Repository

Making Circles on Map

Making Circles on Map Github Repository

Line Charts with Multiple Lines

Line Charts with Multiple Lines Github Repository

Select a Year on a Line Chart

Select a Year on a Line Chart Github Repository

Reference Resources

For the theory of Data Visualization, the course is following

Full-Day Tutorial](https://www.cs.ubc.ca/~tmm/talks/minicourse14/vad17fullday.pdf)

Why learn Data Visualization with D3.js

Instead of just watching the other’s Data Visualization work and sigh ‘Amazing’, I expect that one day I would be able to create the kind of data visualization work by my hands and make sure the work could delivery something useful for audiences.

D3.js is popular today and almost has become a basic framework to visualize data for the Web. I’ve read some simple tutorials on D3.js but hard to get the sense understanding the logic. Curran’s course on Youtube looks good and could be a good start for me.

How and what I learnt?

The course lasts about 13 hours. The tutor Curran encourages students to follow the tutorial and code on the VizHub platform he contributed.

I followed Curran’s recommendation coding myself just I set up my local environment with rollup.js for me to understand how a D3.js project can be set up and run as a standalone project.

How I feel of the journey?

  • At the beginning, things are fun and interesting
  • The first time I set up local development environment, it spent time to get rollup.js up and ‘watch’ code changing. Good luck finally I figure out the issue through StackOverflow.
  • The course was created in 2017 while today some JavaScript grammar has evolved that would block the road. Good luck there are always hints online for me to find a way out for most of the cases.
  • It is more than a journey of learning how to code in D3.js, but a training of how to keep calm and good mood to figure out problems.
  • Curran is good at showing how he think and move forward to achieve goal. There are bullet points on each section which make the steps clear.
  • Grammar of a language needs time to remember. The 13 hours practices helped me understood how D3.js works, what it can create and ways to figure out issues when code doesn’t work. If I want to be able to creating things from scratch with D3.js, it requires time and practices and a never-give-up mindset.
  • I split the learning progress into pieces during the weekend and holidays and didn’t push myself too hard to finish the course. It took me about two months to complete the journey.
  • The video course lasts about 13 hours however it costs more than 20 hours in total if typing all code and digest the idea by yourself.


Keep updated with her latest updates on design, code and writing. Follow her on Twitter or GitHub.


Subscribe to RSS

This website was designed and built by Millie with Bulma, Gatsby and Vercel.