d3 ES module CDN import
D3 can be loaded from CDN as an ES module: import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
d3-core
20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
d3 submodule imports
Individual D3 submodules can be imported directly. For example: import {mean, median} from "d3-array"; or import {forceSimulation, forceCollide, forceX} from "https://cdn.jsdelivr.net/npm/d3-force@3/+esm";
npm install d3
D3 can be installed via npm with: npm install d3. It can then be imported as: import * as d3 from "d3"; or specific symbols like: import {select, selectAll} from "d3";
d3 UMD CDN import
D3 can be loaded from CDN as UMD, which exports a global d3 object: <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
D3 interactions facilitate data exploration
D3 provides reusable interactive behaviors including panning, zooming, brushing, and dragging to facilitate data exploration.
D3 layouts provide algorithms for complex visualizations
D3 includes layout algorithms for treemaps, trees, force-directed graphs, Voronoi diagrams, contours, chords, and circle-packing.
D3 is developed by Observable
D3 is developed by Observable, the platform for collaborative data analysis.
D3 scales and axes encode data into visual values
D3 scales encode abstract data into visual values such as position, size, and color. Axes explain position encodings to viewers.
D3 shapes render geometric primitives for visualization
D3 shapes render arcs, areas, curves, lines, links, pies, stacks, symbols, and any other geometric primitive needed to visualize data.
D3 core capability areas
D3 covers selections and transitions, scales and axes, shapes (arcs, areas, curves, lines, links, pies, stacks, symbols), interactions (panning, zooming, brushing, dragging), layouts (treemaps, trees, force-directed graphs, Voronoi, contours, chords, circle-packing), geographic projections with multiple spherical projection types, array utilities (CSV parsing, date parsing and formatting, color spaces, calendar math, statistics), and many other features.
D3 selections allow DOM manipulation without virtual DOM
D3 selections enable creating, updating, and animating the DOM based on data without the overhead of a virtual DOM through selection and transition capabilities.
D3 has no concept of charts
D3 is not a charting library in the traditional sense. It has no concept of charts. When you visualize data with D3, you compose a variety of primitives.
D3 is a suite of 30 discrete modules
D3 is not a single monolith but rather a suite of 30 discrete libraries or modules. These modules are bundled together for convenience rather than necessity.
D3 synchronous imperative evaluation model
D3's synchronous, imperative evaluation model means that calling selection.attr immediately mutates the DOM, which can make it easier to debug than frameworks with complex asynchronous runtimes.
D3 history and creators
D3 was created by Mike Bostock in 2011. Mike co-authored the D3 paper with Jeff Heer and Vadim Ogievetsky at Stanford. Jason Davies made major contributions to D3 from 2011 to 2013, most notably to D3's geographic projection system. Philippe Rivière has been a major contributor to D3 and its documentation since 2016. Mike and Philippe now maintain D3 and Observable Plot at Observable.
D3 data join concept
D3's most novel concept is its data join: given a set of data and a set of DOM elements, the data join allows you to apply separate operations for entering, updating, and exiting elements. The data join exists so that you can control exactly what happens when your data changes and update the display in response.
D3 stacked area chart example primitives
To make a stacked area chart, you might compose: a CSV parser to load data, a time scale for horizontal position (x), a linear scale for vertical position (y), an ordinal scale and categorical scheme for color, a stack layout for arranging values, an area shape with a linear curve for generating SVG path data, axes for documenting position encodings, and selections for creating SVG elements.
D3 allows external stylesheets and debugging
D3's embrace of web standards brings benefits: you can use external stylesheets to alter the appearance of charts even in response to media queries for responsive charts or dark mode; you can use the debugger and element inspector to review what your code is doing.
D3 modules that touch the DOM versus operate on data
While some D3 modules such as selections and transitions touch the DOM, others including scales and shapes only operate on data.
D3 works with DOM and web standards
D3 works directly with web standards such as SVG and Canvas, and with the Document Object Model (DOM). The name D3 stands for data-driven documents, where documents refers to the DOM standard that represents the contents of a webpage.