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.