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.

Area Chart

Intermediate Stacked area chart using d3.stack() to compute layer baselines and d3.area() with y0 / y1 accessors. d3-shape/area

const keys = ['Organic', 'Referral', 'Direct'];

// Stack layout — computes [y0, y1] for each layer
const stack = d3.stack().keys(keys);
const series = stack(data);

const y = d3.scaleLinear()
  .domain([0, d3.max(series,
    s => d3.max(s, d => d[1]))])
  .range([innerHeight, 0]);

// Area generator uses stacked y0/y1
const area = d3.area()
  .x(d => x(d.data.date))
  .y0(d => y(d[0]))   // bottom of layer
  .y1(d => y(d[1]))   // top of layer
  .curve(d3.curveCatmullRom);

g.selectAll('path')
  .data(series)
  .join('path')
  .attr('fill', (_, i) => colors[i])
  .attr('d', area);

Key APIs

d3.stack().keys(keys) — stack layout generator for multi-series data
d3.area().y0(accessor).y1(accessor) — area path with baseline and topline
Each stacked datum is [y0, y1] with .data reference to the original row
d3.max(series, s => d3.max(s, d => d[1])) — find the stacked maximum for the y domain
d3.curveCatmullRom — smooth curved interpolation between points