Data Display components

Choropleth Map

Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback.

Geography Quiz Map

Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel.

Globe 3D

Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs.

Heat Map Overlay

Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity.

Map 2D

Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop image.

Map Timeline

Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline.

Route Map

Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking.

Story Map

Standalone SVG scroll-driven narrative map — IntersectionObserver tracks the active chapter and the map shifts to its center + zoom.

Chronological Timeline

Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip.

Historic Timeline

Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers.

Interactive Timeline

Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events.

Animated Beam

Animated gradient beam that connects two elements with a flowing light path.

Follow Mode

Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip.

Handoff Beacon

Attention-routing beacon with pulsing ring and optional source / message card for live canvases.

Selection Halo

Local-user selection halo with corner handles + label slot for spatial canvases.

Snap Guides

Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.

Glass Progress

Glass-styled progress bar with a translucent track and token-colored fill.

Scroll Progress

Fixed bar that tracks reading progress down the page.

Floating Toolbar

Compact action bar that floats above a selection — primary / ghost / destructive variants.

Tree View

Hierarchical tree component for nested data with controlled state, single/multi-select, and keyboard navigation.

Primary Source Viewer

Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer.