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.

Force-Directed Graph

Advanced Interactive network graph powered by d3-force simulation. Drag any node to explore the layout. Forces: link distance, charge repulsion, center gravity, collision. d3-force

const simulation = d3.forceSimulation(nodes)
  .force('link',
    d3.forceLink(links)
      .id(d => d.id)
      .distance(60))
  .force('charge',
    d3.forceManyBody().strength(-120))
  .force('center',
    d3.forceCenter(cx, cy))
  .force('collide',
    d3.forceCollide(20))
  .on('tick', () => {
    // Update positions each tick
    links
      .attr('x1', d => d.source.x)
      .attr('y1', d => d.source.y)
      .attr('x2', d => d.target.x)
      .attr('y2', d => d.target.y);
    nodes
      .attr('cx', d => d.x)
      .attr('cy', d => d.y);
  });

// Drag to pin nodes
nodes.call(d3.drag()
  .on('start', (ev, d) => {
    if (!ev.active)
      simulation.alphaTarget(0.3).restart();
    d.fx = d.x; d.fy = d.y;
  })
  .on('drag', (ev, d) => {
    d.fx = ev.x; d.fy = ev.y;
  })
  .on('end', (ev, d) => {
    if (!ev.active)
      simulation.alphaTarget(0);
    d.fx = null; d.fy = null;
  }));

Key APIs

d3.forceSimulation(nodes) — creates and starts the physics simulation
d3.forceLink(links) — spring force along edges; .id() resolves string ids
d3.forceManyBody() — N-body charge (negative = repulsion)
d3.forceCenter(x, y) — gently pulls nodes toward the centre
d3.forceCollide(r) — prevents node overlap
simulation.on('tick', fn) — called each animation frame to update positions
d.fx / d.fy — fixed coordinates to pin a node during drag