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.

Brush & Linked Views

Expert Focus + context: brush a time window in the mini overview to dynamically filter and rescale the detail chart above it. d3-brush

// Two separate x-scales:
//   xDetail — drives the zoomed view
//   xOv     — fixed to the full range

const brush = d3.brushX()
  .extent([[0, 0], [iW, overviewH]])
  .on('brush end', (event) => {
    if (!event.selection) return;

    const [x0, x1] = event.selection;

    // Convert pixel selection → dates
    const newDomain = [
      xOv.invert(x0),
      xOv.invert(x1),
    ];

    // Rescale the detail x-axis
    xDetail.domain(newDomain);

    // Redraw detail chart paths
    detailArea.attr('d', areaFn);
    detailLine.attr('d', lineFn);

    // Redraw detail x-axis ticks
    gXDetail.call(
      d3.axisBottom(xDetail).ticks(6)
    );
  });

// Attach brush to overview g
overviewG.append('g').call(brush);

// Set initial selection
brushG.call(brush.move, [0, iW / 3]);

Key APIs

d3.brushX() — horizontal brush; d3.brushY() / d3.brush() for other orientations
.extent([[x0,y0],[x1,y1]]) — constrain the brush to a region
event.selection — [pixelStart, pixelEnd] of the current selection
scale.invert(pixel) — converts a pixel offset back to a domain value
brush.move(g, selection) — programmatically set the brush position
Focus+context is a classic D3 pattern: overview shows all data, detail shows a filtered window