Arrow Link Vector
Arc Diagram
A network arc diagram visualizing relationships in a JavaScript ecosystem (25 nodes across 7 groups: Frontend Frameworks, Server Frameworks, Build Tools, Compilers, Testing, Visualization, Styling). Nodes are arranged vertically with colored dots and labels. Curved arcs connect related tools, colored by group when source and target share the same category (gray otherwise). Arc stroke width is proportional to connection weight. Interactive controls include: a group filter dropdown to isolate a specific category, a sort selector (by group, name, or degree), a color scheme picker (Tableau10, Category10, Set1, Set2, Dark2, Paired, Accent), a bend angle slider (10°–180°), a stroke scale slider (0.2x–3x), and a show/hide labels toggle. Hovering over arcs shows a tooltip with source, target, and weight. A legend displays group colors, and summary stats show node/link/group counts.
Arrow Variation Chart
An arrow variation chart showing changes in population and income inequality across 25 US metro areas from 1980 to 2015. Each arrow starts at the metro’s 1980 position (population on log x-axis, inequality ratio on y-axis) and ends at its 2015 position. Arrow color uses a diverging scheme to indicate whether inequality increased (red) or decreased (blue). Highlighted metro labels (New York, Los Angeles, Chicago, Houston, San Francisco, etc.) appear as text annotations near arrow endpoints. Interactive controls include: a color scheme dropdown (BuRd, RdBu, PiYG, PuOr, BrBG, RdYlBu, RdYlGn, Spectral), a bend checkbox to toggle curved vs straight arrows, a labels checkbox to show/hide city name annotations, an arrow head length slider (0–20), and a stroke width slider (0.5–5). Hovering over arrow endpoints shows a tooltip with metro name, population change, inequality change, and net change value. Summary cards below the chart show total metro count, number with increasing inequality, and number stable or decreasing.
Barley Trellis Plot with Arrows
A trellis (small multiples) chart showing year-over-year barley yield changes across 6 Minnesota trial sites (University Farm, Waseca, Morris, Crookston, Grand Rapids, Duluth) and 10 barley varieties. Each facet panel represents one site, and within each panel, arrows connect the 1931 yield to the 1932 yield for each variety. Arrow color uses a diverging scheme to encode the magnitude and direction of change — warm colors for yield decreases, cool colors for increases. The chart reproduces the classic Immer et al. 1934 barley dataset, including the famous Morris anomaly where 1931/1932 yields appear inverted compared to other sites. Interactive controls include: a color scheme dropdown (Spectral, RdYlBu, RdYlGn, RdBu, PiYG, PuOr, BrBG), a sort order selector (Median Yield, Alphabetical, Yield Change), an arrow width slider (0.5–5), and a grid toggle checkbox. Hovering over arrows shows a tooltip with variety name, site, and yields for both years. Summary cards at the bottom show total trial sites, yield increases count, and yield decreases count across all sites.
Difference Arrows
A difference arrows chart showing the gender participation gap across 25 Olympic sports. Each horizontal arrow connects the female athlete count (left dot) to the male athlete count (right arrowhead) for a given sport. Arrow color indicates which gender dominates: blue/teal arrows point right when there are more male athletes, pink/red arrows point left when female athletes outnumber males, and gray indicates equality. The chart uses Plot.link with Plot.groupY to aggregate individual athlete records by sport and sex. Interactive controls include: a sort selector (by difference, total athletes, female count, or alphabetical), a color scheme picker (Pink-Blue, Purple-Green, Orange-Teal, Red-Blue), an end marker style toggle (arrow or dot), a minimum total athletes slider to filter out small sports, and a count labels checkbox to show/hide numeric annotations at arrow endpoints. Hovering over any sport row displays a tooltip with female count, male count, and difference. Summary cards below the chart show counts of sports with more male, equal, and more female participation.
Finite State Machine
A directed graph visualization of a finite state machine (Markov chain) with three states (A, B, C) arranged in a circle. Arrows between states have widths proportional to transition weights from an editable transition matrix. The chart uses Plot.dot for state nodes, Plot.arrow for directed transition edges with bending, and Plot.text for state labels and optional edge value annotations. Interactive controls include: preset selector buttons (Default, Absorbing, Cycle, Uniform) to load common transition patterns, a checkbox to toggle edge value display, an arrow scale slider to adjust arrow thickness, and an inline matrix editor where users can directly edit each transition weight. Changes to the matrix immediately update the chart.
Phases of the Moon
A lunar calendar visualization showing the phases of the moon for any given year, in the style of Irwin Glusker. The chart has a dark background (#111) with white text and uses a grid layout where the x-axis represents day of month (aligned by day of week, range 1–40) and the y-axis shows month names (January through December). Each day is rendered as a dark gray circle (Plot.dot) with a crescent overlay (Plot.vector with a custom d3.geoOrthographic shape) that accurately depicts the moon’s phase using suncalc moon illumination data. Day-of-month numbers appear as small text labels above each moon. Interactive controls include: a year slider (1900–2100) with quick-select buttons for 2024/2025/2026, a moon size slider (6–20px), a moon color dropdown (Silver, Gold, Pale Blue, White, Amber, Rose), a locale dropdown to change month name language (English, French, German, Spanish, Japanese, Portuguese), and a show/hide day labels checkbox. Hovering over any day shows a tooltip with the full date, phase name (New Moon, Waxing Crescent, First Quarter, etc.), and illumination percentage. Summary cards below the chart display total days in the year, full moon count, and new moon count.