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.

Data Binding

Beginner Bind an array of values to DOM elements using the .join() enter/update/exit pattern — the heart of every D3 visualisation. d3-selection/joining

const data = [42, 78, 55, 91, 34, 67, 83, 28, 60, 47];

// Data join using .join()
svg.selectAll('rect')
  .data(data)          // bind data
  .join('rect')        // enter + update + exit
  .attr('x',  (_, i) => i * colW)
  .attr('y',  d => height - scale(d))
  .attr('width',  colW - 4)
  .attr('height', d => scale(d))
  .attr('fill', (_, i) => color(i))
  .attr('rx', 4);

// Value labels bound to same data
svg.selectAll('text.val')
  .data(data)
  .join('text')
  .attr('x', (_, i) => i * colW + colW / 2)
  .attr('y', d => height - scale(d) - 4)
  .attr('text-anchor', 'middle')
  .text(d => d);

Key APIs

.data(array) — binds an array to a selection
.join(tag) — handles enter, update, and exit in one call
selection.enter() — elements that need to be created
selection.exit() — elements that should be removed
Accessor functions (d, i) => … receive the datum d and index i