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.

Bar Chart

Beginner Vertical bar chart using scaleBand for categories, scaleLinear for values, and axisBottom / axisLeft. d3-scale

const x = d3.scaleBand()
  .domain(data.map(d => d.label))
  .range([0, innerWidth])
  .padding(0.2);

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

// Bars
g.selectAll('rect')
  .data(data)
  .join('rect')
  .attr('x', d => x(d.label))
  .attr('y', d => y(d.value))
  .attr('width',  x.bandwidth())
  .attr('height', d => innerHeight - y(d.value))
  .attr('fill', '#4f46e5')
  .attr('rx', 3);

// Axes
g.append('g')
  .attr('transform', `translate(0,${innerHeight})`)
  .call(d3.axisBottom(x));

g.append('g')
  .call(d3.axisLeft(y).ticks(5));

Key APIs

d3.scaleBand() — ordinal scale with configurable padding for bar charts
d3.scaleLinear() — continuous numeric scale
scale.bandwidth() — the computed width of each band
d3.axisBottom(scale) / d3.axisLeft(scale) — axis generators
g.call(axis) — renders the axis into a <g> element