Code

D3.js

Select & Style

Select elements and apply styles with d3.select() and d3.selectAll().

Data Binding

Bind arrays to DOM elements using the enter / join / exit pattern.

Bar Chart

Vertical bar chart with scaleBand, scaleLinear, and axis helpers.

Scales

Linear, sqrt, log, and sequential colour scales compared visually.

Line Chart

Multi-series time-series line chart with area fill.

Scatter Plot

Scatter plot with colour and size encoding per group.

Pie / Donut Chart

Donut chart using d3.pie() and d3.arc() with percent labels.

Area Chart

Stacked area chart with d3.stack() and scaleTime.

Histogram

Frequency histogram with d3.bin() and a normal-curve overlay.

Transitions

Animated attribute changes with easing functions and callbacks.

Zoom & Pan

Scroll-to-zoom and drag-to-pan via d3.zoom().

Force Graph

Draggable force-directed network graph with forceSimulation.

Treemap

Hierarchical squarified treemap with d3.hierarchy() and d3.treemap().

Chord Diagram

Relationship matrix visualised as a chord diagram with d3.chord().

Brush

Focus+context: brush a time window in the overview to filter the detail view.

Generative Art

Animated flow-field generative art with sine-harmonic noise and sequential colour scales.

Scales

Beginner D3 scales map an input domain to an output range. Visualise how scaleLinear, scaleSqrt, scaleLog, and scaleSequential distribute values differently. d3-scale

// Linear — uniform mapping
const linear = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 300]);

// Square-root — compresses large values
const sqrt = d3.scaleSqrt()
  .domain([0, 100])
  .range([0, 300]);

// Log — expands small values
const log = d3.scaleLog()
  .domain([1, 100])
  .range([0, 300]);

// Sequential — maps to a colour interpolator
const color = d3.scaleSequential(
  d3.interpolateViridis
).domain([0, 300]);

// Usage
const px = linear(50);  // 150
const c  = color(150);  // '#…'

Key APIs

d3.scaleLinear() — uniform linear interpolation
d3.scaleSqrt() — square-root transformation (great for area encoding)
d3.scaleLog() — logarithmic transformation (domain must not cross 0)
d3.scaleSequential(interpolator) — maps [0,1] to a colour interpolator
scale.domain([min, max]) — input extent
scale.range([min, max]) — output extent
scale.invert(output) — reverse map (linear & log only)