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.

CodePen examples

D3 in Depth uses CodePen to demonstrate code. Here's an example:

Click the 'Edit in CodePen' button to open the example in CodePen.

Each example consists of three or more files:

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

index.html usually looks similar to:

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

index.js contains the JavaScript code and style.css contains CSS code.

Developing with bundlers

If you're using a bundler such as Vite or Webpack import D3 modules using code similar to:

import { select } from 'd3-selection';

Note the Codepen examples use Skypack so the equivalent import is:

import { select } from 'https://esm.sh/d3-selection';