D3 Start to Finish (Starter Edition)


  • learn how to build a custom, interactive and beautiful data visualization from scratch using D3.js (version 6)
  • over fifty online text-based lessons
  • lessons on D3.js features including selections, joins, data requests, events and transitions
  • lessons on architecting your code using modules, layout functions and state management
  • how to add a menu and an information popup
  • lessons on detailed styling to add polish to your visualization
  • step by step build of Energy Explorer (an interactive data visualization)
  • zip containing all the code (including 15 snapshots taken during the build)
  • certificate of completion


Learn how to build a custom, interactive and beautiful data visualisation from start to finish using D3.js (version 6).

D3 Start to Finish is made up of over fifty online text-based lessons. Lessons consist of clear and concise explanations and plenty of code snippets. Where appropriate, lessons also include CodePen examples so that you can directly interact with code examples.

You’ll learn how to build an interactive visualisation called Energy Explorer (live version) which lets you explore the energy outputs of all the countries in the world.

You’ll build Energy Explorer throughout the course. In total there are 15 steps to the build and you’ll be provided with before and after code snapshots for each step as well as step by step explanations of the build.

You’ll learn about:

  • D3 selections
  • D3 joins
  • Update functions
  • Data requests (including CSV files) using D3
  • D3 scale functions
  • Layout functions
  • Structuring your application using modules
  • How to join nested data
  • D3 event handling
  • How to add a popup
  • How to add a menu
  • State management
  • Sorting and filtering
  • D3 transitions
  • Detailed CSS styling

Satisfaction guaranteed

I strongly believe you’ll gain a deeper understanding of how to build a data visualisation with D3 and if after buying D3 Start to Finish you’re not happy, let me know within 14 days and I’ll refund you.


The course is aimed at front-end web developers. In other words, you need to be familiar with:

  • HTML
  • SVG
  • CSS
  • JavaScript

If you’ve built simple applications using JavaScript, or even coded with React and Vue you should be fine.

Otherwise I recommend taking my free Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualization course first which is aimed to bring you up to speed.

This course doesn’t use any build tools (such as webpack) as I wanted to keep it focused on the essentials. And the way the web is moving suggests tools such as webpack will be less common. (However, the Professional edition of the course includes a version of the Energy Explorer that uses ES2015 modules and webpack.)

What do I need?

You’ll need a text editor (such as VS Code, Atom or Brackets), a local web server and a web browser. If you don’t have any of these I suggest taking my free Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualization course first which will get you up to speed.

Will I learn how to build a bar/line/pie chart?

No. You won’t specifically learn how to build a bar, line or pie chart. I recommend using Chart.js or Highcharts if you need standard charts. The real strength of D3 is that it lets you build custom data visualisations, and that’s what you’ll do in D3 Start to Finish.

About the author

I’m Peter Cook and have been developing software professionally since 2000. I’ve been building data visualisations with D3 since 2012, both personal projects and for clients including Carbon Tracker, London Datastore and McGraw Hill Education.

I’ve also taught D3 to multiple well known clients in person and am now focusing on online teaching. I’m also the author of D3 in Depth.

I split my time between building data visualisation templates at Flourish and building data visualisation courses for Create With Data.