Histo-packing with d3-beeswarm
✓ Published0🌍 Public
KKcnarf
Last edited Mar 20, 2019
Created on Jul 3, 2017
A rework of John Burn-Murdoch’s Histo-packing block, this visualization shows 5,000 numeric values from a JSON file arranged as a vertical histogram—a beeswarm of individual circles stacked and packed from the center outward. Each circle’s final vertical position reflects its value, while its color encodes the distance from 50, creating a gradient from orange to red. The d3-beeswarm plugin computes the collision-free arrangement, and d3 transitions animate circles from a starting line down to their packed destinations with staggered delays and durations. The chart uses d3 scales, axes, and SVG rendering.
AI-generated descriptionA rework of johnburnmurdoch's Histo-packing block, using the d3-beeswarm plugin I made.