Overview
I wanted a travel page that felt closer to a notebook than a checklist. The map highlights countries I have visited, breaks out individual US states, and plots cities as clickable dots so a trip can be read at country, state, or city level.
The data lives in a YAML file, which keeps it easy to update without touching the rendering code. The current version tracks 30 countries, 26 US states, and 79 cities.
Features
- Country highlighting across the full world map
- Separate US state highlighting instead of treating the United States as one shape
- Clickable city dots with names and locations
- Drag-to-pan and click-then-scroll zoom behavior
- Labels that appear as the map zooms in
- YAML-backed travel log for cities, states, and countries
Technology Stack
- Astro for the static page
- TypeScript for data validation and map state
- D3 geo utilities for projection and path rendering
- TopoJSON datasets for world countries and US states
- YAML for the editable travel log