Data Display components
Charts, metrics, and visualizations for surfacing data.
21 components
Animated Beam
Animated gradient beam that connects two elements with a flowing light path.
1 storyChoropleth Map
Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback.
4 storiesChronological Timeline
Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip.
4 storiesFloating Toolbar
Compact action bar that floats above a selection — primary / ghost / destructive variants.
3 storiesFollow Mode
Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip.
3 storiesGeography Quiz Map
Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel.
3 storiesGlass Progress
Glass-styled progress bar with a translucent track and token-colored fill.
2 storiesGlobe 3D
Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs.
3 storiesHandoff Beacon
Attention-routing beacon with pulsing ring and optional source / message card for live canvases.
4 storiesHeat Map Overlay
Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity.
5 storiesHistoric Timeline
Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers.
4 storiesInteractive Timeline
Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events.
4 storiesMap 2D
Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop image.
4 storiesMap Timeline
Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline.
3 storiesPrimary Source Viewer
Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer.
3 storiesRoute Map
Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking.
5 storiesScroll Progress
Fixed bar that tracks reading progress down the page.
1 storySelection Halo
Local-user selection halo with corner handles + label slot for spatial canvases.
3 storiesSnap Guides
Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.
3 storiesStory Map
Standalone SVG scroll-driven narrative map — IntersectionObserver tracks the active chapter and the map shifts to its center + zoom.
3 storiesTree View
Hierarchical tree component for nested data with controlled state, single/multi-select, and keyboard navigation.
4 stories