Tweening Map Projections
The theme for day three of the #30DayMapChallenge is Polygons. For this theme I've created a map that visualizes a map of the world using five different map projections.
Maps shape how we see the world. Depending on the projection used, continents and countries can appear stretched, squashed, or rotated in surprising ways. This interactive map lets you explore five different world map projections in one place:
Mercator → Mollweide → Robinson → Equirectangular → Natural Earth
⚙️How it Works
The map is built using D3.js and TopoJSON.
Data Source: Country geometries come from World Atlas TopoJSON.
Single Layer Rendering: All countries are drawn in a single <g> SVG group. This keeps the map simple and fast.
Transition Logic: Smooth transitions are applied between the different projections using d3.transition().
Automatic Looping: The map uses d3.interval() to cycle through projections every 2.5 seconds, letting the viewer watch the world morph naturally.
Interactive Header: The header shows clickable projection names, and clicking jumps immediately to that projection while continuing the loop.
Comments