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.

Scatter Plot

Intermediate Scatter plot with colour-encoded groups, variable radius size, gridlines, and native <title> tooltips. d3-scale/ordinal

const color = d3.scaleOrdinal()
  .domain(['Alpha', 'Beta', 'Gamma'])
  .range(['#4f46e5', '#e11d48', '#16a34a']);

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

g.selectAll('circle')
  .data(data)
  .join('circle')
  .attr('cx', d => x(d.x))
  .attr('cy', d => y(d.y))
  .attr('r',  d => d.size)        // size encoding
  .attr('fill', d => color(d.group)) // colour encoding
  .attr('opacity', 0.75)
  .attr('stroke', '#fff')
  .attr('stroke-width', 1)
  .append('title')
  .text(d => `${d.group}: (${d.x}, ${d.y})`);

Key APIs

d3.scaleOrdinal() — maps categorical values to colours/symbols
d3.randomNormal(mean, sd) — Gaussian random number generator
Size and colour encoding — encode extra dimensions using r and fill
<title> element — native browser tooltip, no JS event needed
opacity — reduces overplotting in dense areas