🌍 Public
Viewing a saved revision (read-only)
3d59da97b05a443083675c39a0c86cf6
Fork of Fork of HTML Starter
This example displays three Datawrapper choropleth maps in a side-by-side three-column layout, filling the viewport with a responsive design. Each map is embedded via an iframe and occupies exactly one-third of the screen width, with equal column distribution and full-height alignment. The page uses pure HTML, CSS, and JavaScript, with index.js assigning Datawrapper embed URLs to respective iframe elements, while styles.css applies flexbox layout, borders, and shadows for visual separation.
AI-generated descriptionChoropleth Map Fade Animation
A responsive web page that displays three Datawrapper choropleth maps with a fade-in/fade-out animation effect.
Maps Included
- Map 1: https://datawrapper.dwcdn.net/KNXe5/3/
- Map 2: https://datawrapper.dwcdn.net/wZkrU/2/
- Map 3: https://datawrapper.dwcdn.net/ma4dc/1/
Features
- Three maps cycle with a 10-second animation loop
- Each map displays for approximately 3.33 seconds
- Smooth fade transitions between maps
- Responsive design that fills the entire viewport
- Full-screen immersive viewing experience
Animation Timing
- Total cycle: 10 seconds
- Display duration per map: 3.33 seconds
- Transition time: Simultaneous fade-out/fade-in effect
Files
index.html- Main HTML structurestyles.css- Styling and animation keyframesindex.js- Map URL configuration