D3.js
D3.js (Data-Driven Documents) is a JavaScript library for creating dynamic, interactive data visualizations in the browser. It binds data to the DOM and applies data-driven transformations to the document.
Pages in this section
D3.js Basics Explained — Complete Guide to Setup, Selections & Data Join
Master D3.js from scratch: learn what D3.js is, how to install it, core concepts like selections, chaining, and the data join pattern for building data-driven visualizations.
✓ LiveD3.js SVG Explained — Shapes, Paths & Transformations Step-by-Step
Master SVG rendering in D3.js: draw circles, rectangles, lines, paths, arcs, use SVG groups, coordinate systems, and transformations (translate, rotate, scale).
✓ LiveD3.js Scales & Axes Explained — Practical Step-by-Step Guide
Master D3 scales (linear, ordinal, time, band, point, log), axes (bottom, left, top, right), color scales (sequential, diverging, categorical), and legend creation.
✓ LiveD3.js Charts — Practical Guide to Bar, Pie, Line & Scatter Plots
Build common chart types in D3.js: bar charts (vertical, horizontal, stacked, grouped), pie/donut charts, line charts with multiple series, and scatter plots with color encoding.
✓ LiveD3.js Interactions — Complete Guide to Transitions, Animations, Drag & Zoom
Master D3.js interactivity: transitions with easing, animation chaining, mouse events, tooltips, drag behavior, zoom/pan behavior, and event handling patterns.
✓ LiveD3.js Data Handling — Complete Guide to Loading CSV, JSON & Aggregation
Master data handling in D3.js: loading external data (CSV, TSV, JSON), using the arrays API, collections API, delimiter-separated values API, and data aggregation techniques.
✓ LiveD3.js Advanced — Geographies, Force Layout & Hierarchies Explained
Master advanced D3.js: geographic maps with GeoJSON and TopoJSON, force-directed graphs for network visualization, and hierarchical layouts (treemap, pack, tree).
✓ LiveD3.js v7 Reference & Cheatsheet
Complete D3.js v7 reference for daily development: all scales, axes, shapes, paths, colors, transitions, drag/zoom, geography, arrays, collections, requests, and timers.
✓ Live