These are Scott Murray's D3 tutorials (see originals), updated to D3 v7. A note on the updates.


Working with D3 requires an appreciation of the following concepts.


Hypertext Markup Language is used to structure content for web browsers. The simplest HTML page looks like this:


The Document Object Model refers to the hierarchical structure of HTML. Each bracketed tag is an element, and we refer to elements’ relative relationships to each other in human terms: parent, child, sibling, ancestor, and descendant. In the HTML above, body is the parent element to both of its children, h1 and p (which are siblings to each other). All elements on the page are descendants of html.

Web browsers parse the DOM in order to make sense of a page’s content.


Cascading Style Sheets are used to style the visual presentation of HTML pages. A simple CSS stylesheet looks like this:

CSS styles consist of selectors and rules. Selectors identify specific elements to which styles will be applied:

Rules are properties that, cumulatively, form the styles:

We connect selectors and rules using curly brackets:

D3 uses CSS-style selectors to identify elements on which to operate, so it’s important to understand how to use them.

CSS rules can be included directly within the head of a document, like so

or saved in an external file with a .css suffix, and then referenced in the document’s head:


JavaScript is a dynamic scripting language that can instruct the browser to make changes to a page after it has already loaded.

Scripts can be included directly in HTML, between two script tags

or stored in a separate file, and then referenced somewhere the HTML (commonly in the head):

Developer Tools

Be familiar with your browser’s developer tools. In a WebKit browser (like Safari or Chrome), you can open the web inspector, which looks something like this:

Safari’s web inspector

While “View Source” shows you the original HTML source of the page, the web inspector shows you the current state of the DOM. This is useful because your code will modify DOM elements dynamically. In the web inspector, you can watch elements as they change. You’ll also use the JavaScript console for debugging. See more on debugging HTML, CSS, and JavaScript with the web inspector and console.


D3 is at its best when rendering visuals as Scalable Vector Graphics. SVG is a text-based image format. Meaning, you can specify what an SVG image should look like by writing simple markup code, sort of like HTML tags. In fact, SVG code can be included directly within any HTML document. Web browsers have supported the SVG format for years (except for Internet Explorer), but it never quite caught on, until now.

Here’s a little circle that I just coded into this page:

Go ahead — right-click on it: it’s not an image! Zoom your browser and you’ll see it scales up and down smoothly, as a vector graphic should.

You’re not required to use SVG with D3, but you’ll soon find that SVG provides a range of visual opportunities that aren’t possible with regular HTML elements.