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.

Zoom & Pan

Advanced Attach d3.zoom() to an SVG to get scroll-to-zoom and drag-to-pan. Axes rescale in sync using transform.rescaleX/Y(). d3-zoom

const xBase = d3.scaleLinear()
  .domain([0, 100]).range([0, iW]);
const yBase = d3.scaleLinear()
  .domain([0, 100]).range([iH, 0]);

// Working copies updated by zoom
let x = xBase.copy();
let y = yBase.copy();

const zoom = d3.zoom()
  .scaleExtent([0.5, 20])
  .on('zoom', (event) => {
    // Derive new scales from transform
    x = event.transform.rescaleX(xBase);
    y = event.transform.rescaleY(yBase);

    // Redraw axes
    gXAxis.call(d3.axisBottom(x));
    gYAxis.call(d3.axisLeft(y));

    // Reposition points
    circles
      .attr('cx', d => x(d.x))
      .attr('cy', d => y(d.y));
  });

svg.call(zoom);   // attach to SVG element

Key APIs

d3.zoom() — zoom/pan behaviour factory
.scaleExtent([min, max]) — min/max zoom level
.translateExtent([[x0,y0],[x1,y1]]) — restrict panning area
event.transform.rescaleX(baseScale) — returns a new scale with the zoom transform applied
svg.call(zoom) — attaches wheel and pointer event listeners
Use a <clipPath> to prevent points from rendering outside the chart area