Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 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
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This is a multi-page website demonstrating different chart types. The home page links to three separate HTML pages: a stacked and grouped bar chart, a stacked area chart, and a line chart with multiple lines. Each page displays static images of the visualizations, which are embedded via `<img>` tags and hosted from local desktop file paths. The site uses basic inline CSS for image sizing and borders, alongside a linked `style.css` file for typography and layout, creating a simple gallery of pre-rendered charts.

SSYAM TEJ
74% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a basic HTML page that uses D3.js to draw three circles and three rectangles in an SVG container. The rectangles are positioned using hardcoded data from a small array, while the circles have fixed coordinates. The code demonstrates direct SVG manipulation through both D3 selections and native DOM methods, logging elements to the console and adding onclick handlers to each rectangle. The page includes simple CSS styling for the message text and circle appearance.

Gg_ivaska@coloradocollege.edu
71% match
Loading thumbnail…

Fork of HTML Starter

This example presents a bare-bones HTML page that demonstrates the integration of CSS and JavaScript for visualization. It serves as a minimal starting point, with the code showing how a static web page can be structured to support interactive graphics. The implementation relies on standard web technologies—HTML for content, CSS for styling, and JavaScript for dynamic behavior—without external visualization libraries. The provided files include a README and the HTML source, offering a clean template for building more complex data displays. The example highlights fundamental web development practices rather than advanced charting techniques.

TTeshager Zerihun Nigussie
71% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents an interactive dashboard for exploring environmental sensor data. It renders a world map alongside line charts and a contour map, allowing users to select different sensor attributes from a dropdown menu. The code uses React with hooks, D3 scales and time parsing, and SVG rendering. Data is fetched from a local API endpoint, with brushed time ranges filtering the displayed temporal and spatial patterns.

CCheng Tang
70% match
Loading thumbnail…

Fork of HTML Starter

This example displays a series of thin horizontal rectangles that collectively span the full width of the browser window, using a minimal design that emphasizes simplicity. The SVG canvas is dynamically sized to match the viewport dimensions. The visualization is built with D3.js, leveraging the `select`, `append`, `range`, and `join` APIs to generate and position each rectangle vertically, with a fixed height of 10 units. The data is synthetic, derived from a numeric range of 100 values, resulting in a clean, unadorned grid-like pattern rendered directly in the browser.

Jjazmorguzdev
70% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example presents a health data visualization comprising three charts: a bar chart of Var1, a line chart showing Var2 over time, and a pie chart of Var3. It loads CSV data from a GitHub gist and uses D3.js v7 to render SVG elements. The bar chart maps data points to horizontal bars, the line chart uses scales and a line generator to plot the time series, and the pie chart uses `d3.rollups` to aggregate categories. The code includes axes and margin conventions for the line chart.

Aakhilakura@my.unt.edu
70% match
Loading thumbnail…

Fork of Choropleth

This fork of the choropleth example combines a geographic map with a scatter plot. It uses D3.js v6 to render two SVG elements side-by-side, with the map using `d3.geoEqualEarth` projection and `d3.geoPath` to draw country borders. The map is colored by urban rate, while the scatter plot shows life expectancy against GDP per capita, with point size encoding population and color distinguishing continents. The visualization includes an interactive tooltip that appears on hover, and data is loaded from external sources.

HHOURPRIMERA@GMAIL.COM
70% match
Loading thumbnail…

Fork of HTML Starter

This example displays a choropleth map of the world, coloring countries by their sample population values using a sequential blue color scale. The map is rendered with SVG and D3.js’s `d3.geoMercator` projection and `d3.geoPath`. It loads real world geometry from a local GeoJSON file (`countries.geo.json`) and overlays tooltips via SVG `title` elements. Population data is provided as a static JavaScript object, with missing countries shown in gray.

RRuthvik Bairaboina
69% match