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.

Select & Style

Beginner Use d3.select() and d3.selectAll() to target elements and apply attributes, styles, and properties. d3-selection

import * as d3 from 'd3';

const svg = d3.select('#container')
  .append('svg')
  .attr('viewBox', '0 0 480 300')
  .attr('width', '100%');

// Append coloured circles
const colours = ['#4f46e5','#e11d48','#16a34a','#f59e0b','#0ea5e9'];
colours.forEach((c, i) => {
  svg.append('circle')
    .attr('cx', 60 + i * 90)
    .attr('cy', 80)
    .attr('r', 35)
    .attr('fill', c);
});

// Select ONE element and style it
svg.select('circle')
  .attr('stroke', '#111')
  .attr('stroke-width', 3)
  .attr('stroke-dasharray', '6,3');

// Select ALL and add title tooltips
svg.selectAll('circle')
  .append('title')
  .text(function() {
    return `fill: ${d3.select(this.parentNode).attr('fill')}`;
  });

Key APIs

d3.select(selector) — selects the first matching element
d3.selectAll(selector) — selects all matching elements
.attr(name, value) — sets an SVG/HTML attribute
.style(name, value) — sets a CSS style property
.append(tag) — appends a child element and returns a selection of it
.text(value) — sets the text content