D3.js (v4) Essentials

I have been using D3.js for quite sometime in my personal and professional projects. There are a lot of great tutorials in the internet covering version 3 of D3 but when it comes to v4 I couldn’t find one that covers the essentials concepts in v4. As I am in the process of upgrading myself to D3 v4 I thought it would be great if I put my learnings in a series of blog post. Hence this series. Hope you will find it useful.

In this series I am going to cover D3 v4. I will start from the very basics and then make our way towards some of the advanced topics of D3. No prior knowledge of D3 is required to follow along. There will be plenty of examples and demo will be provided in JSBin which you can edit and see the changes live.

Ok, here are the topics we are going to cover throughout this series.

  1. Introduction to D3.js
  2. D3 Selections
  3. Data formats and Data binding
  4. The Enter-Update-Exit Pattern in D3
  5. Scales
  6. Axes
  7. Transitions
  8. Shapes
  9. Layouts
  10. Interactions
  11. Recipes (Coming Soon)

I have decided to stay away from comparing D3 v3 and v4 throughout this series so that we start afresh with v4 and make the learning process smooth. I will cover the changes from v3 to v4 in a separate post.

If you feel something needs to be improved in this series or you have any sort of feedback don’t hesitate to leave your comments.


https://d3js.org – Mike Bostock

D3.js in action – Elijah Meeks

Interactive Data Visualization for the Web – Scott Murray

Data Visualization with D3.js Cookbook – Nick Qi Zhu


Ok that’s enough of talking. Lets say hello to the world with D3 – Introduction to D3.

>> Introduction to D3