D3 in Depth covers versions 6 and 7 of D3

Home About

Getting Started

Getting started with D3.js. This article assumes familiarity with HTML, SVG, CSS and JavaScript.

D3 in Depth assumes you're familiar with HTML, SVG, CSS and JavaScript. If not, I recommend reading Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation.

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 suggest reading Fundamentals of HTML, SVG, CSS and JavaScript for Data Visualisation course which goes into more detail.

BOOKS & COURSES
D3 Start to Finish book cover

Visualising Data with JavaScript teaches you how to build charts, dashboards and data stories using Chart.js, Leaflet, D3 and React.

Find out more

"One of the best D3 books I've read. The contents are very clear, it is easy to follow and the concepts are very solid."

Javier García Fernández

Learn how to make a custom data visualisation using D3.js.

Find out more

Learn the fundamentals of HTML, SVG, CSS and JavaScript for building data visualisations on the web.

Find out more