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.

Transitions & Animations

Intermediate Animate attribute changes with selection.transition(), duration, and easing functions. Click Randomise to watch the bars animate to new values. d3-transition

// Initial render
bars = g.selectAll('rect')
  .data(data)
  .join('rect')
  .attr('y',      d => y(d))
  .attr('height', d => iH - y(d));

// On button click — update with transition
function randomise() {
  const newData = labels.map(
    () => 10 + Math.random() * 88
  );

  bars.data(newData)
    .transition()
    .duration(600)
    .ease(d3.easeCubicInOut)
    .attr('y',      d => y(d))
    .attr('height', d => iH - y(d));

  labels.data(newData)
    .transition()
    .duration(600)
    .ease(d3.easeCubicInOut)
    .attr('y', d => y(d) - 4)
    .text(d => Math.round(d));
}

Key APIs

selection.transition() — returns a transition object for animated attribute changes
.duration(ms) — animation length in milliseconds
.ease(easeFn) — easing function e.g. d3.easeCubicInOut, d3.easeElastic
.delay(ms) — per-element stagger delay (can be a function of d, i)
.on('end', fn) — callback when transition completes
d3.schemeTableau10 — a 10-colour categorical palette