Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of HTML Starter

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

2d1daec345044503a39028949cd42a88

Open

Fork of Fork of HTML Starter

0 stars0🌍 Public
Wwjo672@haw-hamburg.de
Last edited Jan 29, 2026
Created on Jan 23, 2026

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 description

Choropleth Maps Side by Side

A responsive web page that displays three Datawrapper choropleth maps perfectly aligned in a three-column layout.

Maps Included

  1. Map 1: https://datawrapper.dwcdn.net/KNXe5/3/
  2. Map 2: https://datawrapper.dwcdn.net/wZkrU/2/
  3. Map 3: https://datawrapper.dwcdn.net/ma4dc/1/

Features

  • Three maps displayed side by side in equal columns
  • Responsive design that fills the entire viewport
  • Full-screen immersive viewing experience
  • Each map takes up exactly 1/3 of the screen width

Layout

  • Column distribution: 3 equal columns (33.333% each)
  • Height: Full viewport height
  • Alignment: Perfectly centered and aligned

Files

  • index.html - Main HTML structure
  • styles.css - Styling and layout
  • index.js - Map URL configuration