D3 Start to Finish (Professional Edition)

This is the Professional Edition and includes additional lessons and code on:

  • transforming the original data into a CSV file using Node.js
  • creating a responsive version of Energy Explorer (for mobile and tablets)
  • adding a dark mode option to Energy Explorer
  • using webpack and ES2015 modules to build Energy Explorer

The Professional edition also includes access to the course forum where you can get help on the course content.

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

The Professional edition also includes the following extras:


The Professional edition includes a lesson (and code) on making the Energy Explorer responsive to device width (so that mobile devices are supported):

Dark mode

The Professional edition includes a lesson (and code) showing how a dark theme mode button can be added to Energy Explorer.

Data transformation

When creating a data visualization a lot of effort often goes into transforming the source data into a suitable format. This is no exception with Energy Explorer and the Professional edition includes a lesson on how the original data (from the World Bank) was transformed into the CSV file that’s loaded into Energy Explorer.

ES2015 modules and webpack

To keep things simple, Energy Explorer is built without build tools (such as webpack). However if you’re a professional developer you’re probably familiar with build tools such as webpack. The Professional edition includes a version of Energy Explorer that uses ES2015 modules and webpack to build it. There are an additional 5 lessons to explain how this was achieved.

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.