- additional content on data transformation, responsiveness, dark mode and ES2015 modules
- access to the course forum so you can get help on the course content
- 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
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):
ES2015 modules and webpack
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:
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?
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.