Intro to D3.js
Overview
Background
In Square’s new engineer onboarding program, which we call NEO, we offer short courses and lectures on a variety of tools that we use at Square. We started to collect notes from our course on D3.js and found the notes were well-suited for a tutorial — and worth sharing.
Introduction
The tutorial provides a quick intro to d3.js, a Javascript library for creating data visualizations in the browser. D3 is built on top of common web standards like HTML, CSS, and SVG.
D3 makes web-based visualizations easier by “automating the hard bits you already understand,” as opposed to “hiding the hard bits” (hat tip @andy_matuschak).
Again, the tutorial is not a deep dive — we want you to learn how to learn D3 and gain a high-level understanding of this useful tool.
Notes
The recent version of d3.js, v4, has some big breaks in the API from the previous version (see all the details of the v3-to-v4 transition in the D3 wiki). Since we expect this to be the future, and that people coming to learn d3 would want to be up to date from the beginning, we have updated this tutorial to work with the v4 version. We tagged the v3 version for posterity.