Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
YYamini Malikireddy
Last edited Apr 12, 2026
Created on Apr 12, 2026
Forked from HTML Starter

This interactive world map visualizes population data for select countries, with a Mercator projection rendered as SVG paths. Users can click buttons to smoothly zoom into India or reset the view, using D3 v7 transitions and geo path bounds calculations. The map loads TopoJSON country geometries from the world-atlas package and merges them with a local population JSON file, coloring each country with a sequential blue scale based on its population value.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This interactive SVG world map highlights five countries colored by population size, with India and China appearing darkest on a blue sequential scale. The visualization loads world geometry from the world-atlas TopoJSON dataset, then uses `topojson.feature` to extract country boundaries and `d3.geoPath` with a Natural Earth projection to render them. The D3 v7 code joins the TopoJSON features with the CSV-derived population data by country name, applying a tooltip on mousemove to display exact population figures. Countries lacking data render as gray.

Bbalaaswitha@gmail.com
90% match
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
88% 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
86% 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
86% 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
85% 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
84% match
Loading thumbnail…

Fork of Fork of D3 Starter-maps

This choropleth displays world population figures for a selection of countries, with darker blues representing higher populations and gray for countries without data. It uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render country boundaries from a TopoJSON world-atlas dataset. Population values are mapped through a sequential `d3.scaleSequential` with an `interpolateBlues` color scale. Hovering reveals a tooltip with the country name and population in millions, powered by SVG `title` elements.

Aaddalalikitha15@gmail.com
84% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a world population map where individual countries are shaded with a blue sequential color scale, and hovering over a country reveals its name and population in millions via a tooltip. It renders a Natural Earth projection using `d3.geoPath` and `d3.geoNaturalEarth1`, with geographic data loaded from TopoJSON via `topojson.feature` and country names from a TSV file. The code uses `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors, and SVG paths for country boundaries.

Ppvvaishnavi93@gmail.com
83% match