Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Nov 19, 2025

Created on Nov 19, 2025

This example shows a choropleth world map colored by the prevalence of undernourishment (percent) for the 2022–2024 three-year average, using a subset of FAOSTAT food security indicators. Each country’s fill intensity reflects the data value loaded from an embedded CSV string. The visualization uses D3 v7 with `d3.geoPath` and TopoJSON to render country boundaries, along with `d3.scaleSequential` and `d3.interpolateYlOrRd` from d3-scale-chromatic for the color encoding. SVG is used for rendering, and the map includes a legend and hover effects.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example visualizes world population data from a 2024 Kaggle dataset using a choropleth map. The map displays each country’s population with a blue color scale, from light (low) to dark (high), based on the `Population 2024` column, while countries without data appear gray. The visualization is built with D3 v7 and TopoJSON, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render geographic features. It loads world map geometry from the world-atlas package and the CSV dataset, then employs `d3.scaleSequential` with `d3.interpolateBlues` to map population values to fill colors. Interactive tooltips display exact population figures on mouseover, and a graticule and legend provide spatial and color context.

BBhargav Reddy

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

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

81% match

Loading thumbnail…

Fork of WorldMap1

This fork of WorldMap1 presents a static choropleth of internet penetration rates for selected countries, using a blue sequential color scale. Countries without data remain uncolored, and hovering reveals a country name tooltip. The map is rendered as SVG with D3 v7 and uses `d3.geoNaturalEarth1` and `d3.geoPath` to project Natural Earth country boundaries from TopoJSON via `topojson.feature`. The color encoding is defined by `d3.scaleSequential` with `d3.interpolateBlues`, and the visualization includes a graticule and sphere outline for geographic context.

Ppriyankachary1701@gmail.com

81% match

Loading thumbnail…

Fork of D3 Course Code Along - Choropleth Map

This interactive choropleth map visualizes countries color-coded by income group on a natural Earth projection. A legend with animated transitions updates when the color scale changes. The visualization uses d3.geoPath with TopoJSON data from the World Atlas, and builds the map with SVG paths. Hover effects highlight individual countries, while zoom and pan are enabled through d3.zoom. World population data from CSV files supports additional context.

SSathya1208

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

81% match

Loading thumbnail…

Fork of Fork of Chloropleth

This example displays a choropleth map of the world, coloring countries based on their "Birth Rate" from a 2023 world-data CSV. A blue-to-red linear color scale encodes the data range, with grey indicating missing countries. The visualization renders two separate SVG canvases side-by-side, each showing the same map. The code loads GeoJSON map data, country statistics, and continent data using `Promise.all` and `d3.json`, `d3.csv`, then draws the map with `d3.geoEqualEarth` and `d3.geoPath`.

Gg_ivaska@coloradocollege.edu

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

80% match