Preface

D3 logo, Copyright 2014–2020 Mike Bostock. ISC License: Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies. https://observablehq.com/@d3/logo

What is D3?

D3.js or D3 (short for Data-Driven Documents) is a popular JavaScript library for producing dynamic, interactive data visualizations using web standards SVG, CSS and HTML.

D3 focuses on composable low-level building blocks, rather than using configurable charts (like for instance Chart.js does), making it very flexible and giving you maximum freedom to design the best possible visual representation of your data.

In addition, the developers of D3 (Observable) built a JavaScript library on top of D3, for creating quick charts, called Plot (not part of this tutorial). Observable also provides an online platform where anyone can publish, share and explore articles that include data visualizations built with D3.

Context of this tutorial

There are a lot of D3 tutorials and documentation out there on the web, including the D3 website itself. Writing this tutorial is a way for me to understand D3 in a better and more fundamentally way. I want to write a tutorial that I wish I had when I first started learning D3.

This tutorial covers version 7 (v7.8.5) of D3.

D3 is a JavaScript library that interacts with HTML, SVG and CSS. Therefore, this tutorial assumes familiarity with HTML, SVG, CSS and JavaScript.