Results Map
A choropleth where hovering a region tells you the whole story.
IntermediateWeb appData viz10–20hAI-buildable 5/5no setupworth shipping
Bind a dataset to an SVG map and colour regions by value, with a legend, a hover detail panel, and a properly chosen colour scale. The craft is in the scale — a naive linear ramp over skewed data makes everything look the same, and fixing that is the actual lesson.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- An SVG map renders regions from GeoJSON
- Regions colour by a value from the bound dataset
- Hovering a region shows its detail in a side panel
- A legend explains the colour scale with real value breaks
- The colour scale handles skewed data rather than washing out
- Regions with no data are visually distinct from regions with a zero value
- Keyboard navigation moves between regions
The interesting part
- Choosing between linear, quantile and threshold scales for skewed data
- Projecting GeoJSON into screen coordinates
- Making a map keyboard-navigable and screen-reader legible
Once it works
- Add zoom and pan
- Add a time slider that animates the data across years
- Let users load their own CSV and map it to regions
Suggested stack
reacttypescripttailwindd3-geod3-scale