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.

Treemap

Advanced Hierarchical treemap using d3.hierarchy() to build the tree, .sum() to roll up leaf values, and d3.treemap() for squarified tiling. d3-hierarchy/treemap

// Build hierarchy from nested data
const root = d3.hierarchy(data)
  .sum(d => d.value ?? 0)    // roll-up leaf values
  .sort((a, b) => b.value - a.value);

// Compute x0, y0, x1, y1 on each node
d3.treemap()
  .size([width, height])
  .paddingOuter(4)
  .paddingInner(2)
  .round(true)(root);

// Render leaves
const leaf = svg.selectAll('g')
  .data(root.leaves())
  .join('g')
  .attr('transform',
    d => `translate(${d.x0},${d.y0})`);

leaf.append('rect')
  .attr('width',  d => d.x1 - d.x0)
  .attr('height', d => d.y1 - d.y0)
  .attr('fill', d => color(d.parent.data.name));

leaf.append('text')
  .attr('x', 4).attr('y', 14)
  .text(d => d.data.name);

Key APIs

d3.hierarchy(data) — wraps nested data in a node hierarchy
.sum(accessor) — accumulates leaf values up the tree
d3.treemap().size([w,h]) — computes x0,y0,x1,y1 for each node
.paddingOuter(px) / .paddingInner(px) — spacing between groups and siblings
root.leaves() — returns only the leaf nodes (no children)
root.descendants() — returns all nodes (ancestors + leaves)