ryanwold.net

A civic-minded citizen seeking the singularity

D3.js Examples

Data-driven visualizations using D3

Bar Chart

A simple bar chart showing data values as vertical bars. Bar height is proportional to the data value, and color intensity increases with value (using RGB blue channel).

  • Data binding with selectAll().data().enter()
  • Dynamic positioning with accessor functions
  • Data-driven color using RGB values

Animated Scatter Plot

Random data points plotted on X/Y axes with animated transitions. Points start clustered and animate to their final positions, changing color and size during the transition.

  • Linear scales for X, Y, and radius
  • Axis generation with d3.svg.axis()
  • Chained transitions with start/end callbacks

Sine Wave

A continuous sine wave rendered as a smooth line using D3's line generator with basis interpolation.

  • Generated data using Math.sin()
  • Line interpolation with d3.svg.line()
  • Clipping path for clean boundaries

Co-occurrence Matrix

A matrix visualization showing character co-occurrences in Les Misérables. Hover over cells to highlight connections. The matrix can be reordered by name, frequency, or cluster to reveal different patterns.

Collapsible Indented Tree

An interactive hierarchical tree visualization showing the Flare visualization toolkit structure. Click on any node to expand or collapse its children. Nodes with hidden children appear blue, expanded nodes appear light blue, and leaf nodes appear orange.

  • Hierarchical data with d3.layout.tree()
  • Animated transitions for expand/collapse
  • Diagonal link generator for smooth connections

Interests Graph

A force-directed graph visualization showing relationships between interests, powered by data from Airtable. Nodes represent interests and edges show connections between related topics.

View Interests Graph

Sankey Diagram with Particles

An energy flow Sankey diagram with animated particles flowing along the links. Particle frequency and size are proportional to the flow value. Nodes can be dragged vertically to rearrange the layout.

  • Sankey layout with d3.sankey()
  • Canvas-based particle animation for performance
  • Draggable nodes with layout recalculation

More Examples Coming

Line charts, area charts, pie charts, geographic maps, treemaps, and more.

Coming soon