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.

Pie / Donut Chart

Intermediate Donut chart using d3.pie() to compute arc angles and d3.arc() to generate SVG paths with an innerRadius. d3-shape/pie

const pie = d3.pie()
  .value(d => d.value)
  .sort(null);          // preserve input order

// Donut: innerRadius > 0
const arc = d3.arc()
  .innerRadius(55)
  .outerRadius(110);

// Arc for centroid label placement
const labelArc = d3.arc()
  .innerRadius(126)
  .outerRadius(126);

const arcs = pie(data);   // compute start/end angles

g.selectAll('path')
  .data(arcs)
  .join('path')
  .attr('d', arc)
  .attr('fill', d => d.data.color)
  .attr('stroke', '#fff')
  .attr('stroke-width', 2);

// Label at arc centroid
g.selectAll('text')
  .data(arcs)
  .join('text')
  .attr('transform', d => `translate(${arc.centroid(d)})`)
  .attr('text-anchor', 'middle')
  .text(d => `${d.data.value}%`);

Key APIs

d3.pie() — computes start/end angles from data values
d3.arc() — SVG arc path generator with inner & outer radius
arc.centroid(d) — returns the midpoint [x,y] of an arc (for labels)
pie.sort(null) — disables automatic sorting of pie slices
Set innerRadius(0) for a full pie, or > 0 for a donut