Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

This choropleth map visualizes sample population scores by country, using a blue-green color scale to represent score ranges. It loads world country boundaries from a TopoJSON file and joins them with CSV data containing country IDs and population scores. The visualization is built with D3.js v7, using `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to generate SVG paths, and `d3.scaleThreshold` for the color bins. Country polygons are rendered as SVG elements with hover tooltips showing the country name and score, accompanied by a static legend.

AI-generated description

MIT Licensed

Similar vizzes

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

91% 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

89% 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

87% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by a numerical score from a CSV dataset, displaying the values on a natural Earth projection. The visualization uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` to render the map, while a separate SVG color legend with circles and text labels indicates the color scale. Users can pan and zoom the map via D3's `d3.zoom` behavior, and hovering over a country highlights it in red and shows its name and score in a tooltip. The map data comes from TopoJSON, merged with the CSV by country codes.

Xxyang3672

87% 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

87% match

Loading thumbnail…

Fork of D3 Starter

A choropleth world map visualizes population data for select countries, using a red sequential color scale to encode values and a legend for reference. Built with D3 v7 and TopoJSON, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projections, loading country boundaries from a world-atlas package and population values from a Gist JSON file. Hovering over a country reveals a tooltip with its population in millions.

Kkmuddana@gitam.in

87% match

Loading thumbnail…

Fork of Fork of Fork of D3 Starter-maps

This choropleth visualizes global population using a Natural Earth projection. Countries are drawn as SVG paths via `d3.geoPath` and a `d3.geoNaturalEarth1` projection, with fill colors assigned from a sequential blue scale (`d3.scaleSequential`) based on population values from a CSV. Countries lacking matching population data receive a random light blue fill. The map uses TopoJSON for feature parsing and is rendered at full viewport size.

Hharshithamiriyam@gmail.com

86% match