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.

Chord Diagram

Advanced Chord diagram visualising bidirectional flows between groups using d3.chord() and d3.ribbon(). Hover a ribbon for the flow value. d3-chord

// Square flow matrix [n × n]
const matrix = [
  [  0, 800, 600, 200, 100 ],
  [800,   0, 700, 300,  50 ],
  // …
];

const chord = d3.chord()
  .padAngle(0.04)
  .sortSubgroups(d3.descending);

const chords = chord(matrix);

// Outer arc for each group
const arc = d3.arc()
  .innerRadius(innerR)
  .outerRadius(outerR);

// Ribbon for each flow
const ribbon = d3.ribbon().radius(innerR);

// Render group arcs
g.selectAll('path')
  .data(chords.groups)
  .join('path')
  .attr('d', arc)
  .attr('fill', d => color(names[d.index]));

// Render ribbons
g.selectAll('path.ribbon')
  .data(chords)
  .join('path')
  .attr('d', ribbon)
  .attr('fill', d => color(
    names[d.source.index]));

Key APIs

d3.chord() — computes chord layout from an N×N matrix
chords.groups — one arc descriptor per matrix row/column
d3.arc() — draws the outer ring segments
d3.ribbon() — draws the curved flow ribbons between groups
.padAngle() — gap between group arcs in radians
chord.source / chord.target — each ribbon has two sub-group descriptors