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.

Histogram

Intermediate 500 random samples from a normal distribution binned by d3.bin(), with a red normal-curve overlay derived from the sample mean and standard deviation. d3-array/bin

// Generate data
const rng = d3.randomNormal(50, 12);
const data = Array.from({ length: 500 },
  () => Math.max(0, Math.min(100, rng())));

// Create bin generator
const binner = d3.bin()
  .domain([0, 100])
  .thresholds(x.ticks(20));   // ~20 bins

const bins = binner(data);

// Y-scale from 0 to the tallest bin
const y = d3.scaleLinear()
  .domain([0, d3.max(bins, b => b.length)])
  .range([height, 0]);

// Draw bars
svg.selectAll('rect')
  .data(bins).join('rect')
  .attr('x', d => x(d.x0) + 1)
  .attr('y', d => y(d.length))
  .attr('width',
    d => x(d.x1) - x(d.x0) - 2)
  .attr('height',
    d => height - y(d.length));

// Normal-curve overlay
const mean = d3.mean(data);
const sd   = d3.deviation(data);

Key APIs

d3.bin() — partitions continuous data into discrete bins
.domain([min,max]) — sets the observable extent
.thresholds(array|count) — number of thresholds or explicit breakpoints
bin.x0 / bin.x1 — lower and upper bound of each bin
d3.mean() / d3.deviation() — summary statistics
d3.randomNormal(μ,σ) — samples from a normal distribution