D3 in Depth covers version 6 of D3
Home About
Build a real-world, custom, interactive and beautiful data visualization from scratch using D3.
Over 50 online text-based lessons on D3, interaction, code architecture, state management, styling and more.
Visit course page

Getting Started

D3 in Depth assumes you’re familiar with HTML, SVG, CSS and JavaScript. If not, I recommend following my free course Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualization.

If you’re familiar with libraries such as React and Vue.js (or even jQuery) you should be fine.

There are many code examples hosted on CodePen. For example:

Clicking on the ‘Edit in CodePen’ button opens the example in CodePen.

Each example consists of three or more files:

  • index.html
  • index.js
  • style.css

index.html will usually look something like:

<svg width="760" height="140">
  <g transform="translate(70, 70)">
  </g>
</svg>

(CodePen hides the usual boilerplate that starts <!DOCTYPE html> and ends </html>.)

index.js contains your JavaScript code and is automatically included into index.html by CodePen. (I’ve also configured the examples to include D3.js.)

style.css contains your CSS code and is also automatically included into index.html by CodePen.

Exporting from CodePen

CodePen has a nice feature where you can download the pen and work on it in your own code editor. You first need to save the pen then some buttons will appear in the bottom right. Click on Export and choose the Export as .zip option. This will result in a folder containing your code.

The src directory contains the code as it appears in the pen and is perhaps not so useful. The dist directory however has the complete code and can be edited locally, served locally (or uploaded to the web).

If any of this doesn’t make sense to you I invite you to take my free Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualization course which goes into more detail.

Stay up to date with D3 related articles, tutorials and courses