Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
RRuthvik Bairaboina
Last edited Nov 9, 2025
Created on Nov 9, 2025
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization shows a world map with countries colored by population using a threshold scale, rendered as SVG paths via `d3.geoPath` with a Mercator projection. The choropleth uses a quantized color range from light to dark blue, and hover interactions trigger tooltips built with `d3-tip`, displaying each country’s name and population. Data comes from a TopoJSON file and a TSV of population figures, both loaded asynchronously with the queue library.

Ddaniel
90% match
Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes world population data from a CSV file, displaying countries in a sequential blue color scale based on their population size. It renders an SVG with D3 v6, using `d3.geoNaturalEarth1` and `d3.geoPath` to draw country boundaries from TopoJSON world-atlas data. Interactive tooltips appear on mousemove, showing country names and population values, while a gradient legend indicates the color scale up to 1.5 billion people.

BBalaji Dasari
90% match
Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes global population by country, using a blue sequential color scale where darker shades represent higher population counts and gray indicates missing data. The visualization loads a GeoJSON world map and a CSV of population figures, then joins them by ISO3 country codes. Built with D3 v7, it uses the `geoNaturalEarth1` projection and `geoPath` to render SVG paths, with interactive tooltips showing each country’s name and population via the `append('title')` method.

Ssharathchandrareddymuthyam
89% match
Loading thumbnail…

Fork of HTML Starter

This choropleth map colors countries by their 2020 population in millions, using a blue sequential scale where darker shades represent larger populations. Built with D3 v7 and TopoJSON data from the world-atlas package, the visualization projects geographic features with `d3.geoNaturalEarth1` and renders them as SVG paths via `d3.geoPath`. Country populations from `dataset.csv` are joined to geometry using ISO3 codes, with tooltips displaying each nation’s name and population value.

RRithvik
87% match
Loading thumbnail…

Fork of Fork of HTML Starter

This interactive choropleth map visualizes global population by country, with each nation color-coded according to population size using a threshold scale and a blue sequential color palette. Hovering over a country highlights its borders and displays a tooltip showing the country name and exact population figure. The visualization loads geographic data from a TopoJSON file and population statistics from a TSV file, then renders the map using `d3.geoMercator` projection and `d3.geoPath`. Tooltips are implemented with the d3-tip library, while the queue library manages asynchronous data loading.

Sshindeayush76@gmail.com
87% match
Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This choropleth map colors world countries by population, using darker blues for more populous nations while unlisted countries appear gray. A legend explains the visual encoding. The example loads world-atlas TopoJSON, converts it to GeoJSON features using topojson-client, and projects the map with d3.geoNaturalEarth1 and d3.geoPath. A d3.scaleLinear maps population values to a light-to-dark color range, and SVG paths render each country with tooltips showing population figures.

SSathviKankanala@my.unt.edu
86% match
Loading thumbnail…

Fork of HTML Starter

This example displays a choropleth of Middle Eastern countries on a Mercator projection, highlighting listed nations and showing their assigned ID numbers in a tooltip on hover. It loads world GeoJSON data and uses `d3.geoMercator` with `fitExtent` to focus the map on the relevant region. The SVG visualization relies on `d3.json` for data loading and `d3.select` for DOM interaction, with country shapes styled and tooltips positioned using CSS transitions.

Mmhzahdeh@dons.usfca.edu
86% match
Loading thumbnail…

Fork of HTML Starter

This example displays a world map colored by values joined from a CSV dataset, with a hover tooltip showing each country’s name and numeric value. It renders an SVG using D3 v7’s `d3.geoNaturalEarth1` projection and `d3.geoPath`, loading country boundaries from TopoJSON via `world-atlas`. Country colors are assigned through a sequential `d3.scaleSequential` interpolator, while the CSV is joined using a `Map`. The tooltip appears on mouseover events, positioned at the cursor.

Ssaiabhishekmunnangi@gmail.com
86% match