Skip to main content
SimilarExport ZIP
100%

Choropleth map

✓ Published0🌍 Public
Jjbruzzo
Last edited Nov 6, 2022
Created on Nov 2, 2022

This choropleth map visualizes annual population growth rates by country for 2017, using a diverging color scale from indigo (negative growth) to white (no change) to dark green (positive growth). The visualization renders world country shapes using D3’s `geoEqualEarth` projection and `geoPath`, with graticule and sphere overlays. It loads World Bank data from a CSV and geospatial data from GeoJSON, and includes an interactive tooltip on hover plus a user-location marker via the Geolocation API.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth World population map

A choropleth world map visualizes population data by country, using sequential color intensity from a threshold color scale to represent population magnitude. The visualization employs a Robinson projection to render the geographic layout, with each country's fill color derived from a CSV dataset joined to the GeoJSON map data. Interactive features include tooltips on hover, displaying the country name and calculated population in millions, while click and hover events trigger opacity and stroke changes. The implementation utilizes d3.geoPath for map drawing, d3.scaleThreshold for color classification, and d3.queue for asynchronous data loading, all rendered as SVG elements within a styled HTML container.

Vvishusikka
85% match
Loading thumbnail…

Map_2

This map visualization displays global population growth rates for 2020, using a color scale that maps negative growth to indigo, positive growth to dark green, and zero to white. It renders country boundaries from a GeoJSON file containing world administrative regions onto an SVG canvas, using D3’s `d3.geoPath` and `d3.geoEqualEarth` projection. The data comes from a CSV file with World Bank indicators, parsed via D3’s `csv` function, and the code uses a linear color scale with an extent derived from the metric values.

NNita
85% match
Loading thumbnail…

Choropleth World population map

A choropleth map displays world population by country, with each nation colored on a gradient from light to dark red based on its population size. The visualization uses the Robinson projection to render the world map, and employs a color scale defined by `d3.scaleThreshold` with a sequential color scheme. The map is drawn using `d3.geoPath`, with country boundaries loaded from a GeoJSON file and population data from a CSV. An interactive tooltip appears on mouseover, showing the country name and its population.

DDIANJING FAN
85% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global population estimates for 2018, with countries colored in a blue scale on an orthographic projection of the world. The visualization uses `d3.geoOrthographic` to project countries and `d3.geoPath` to render their shapes, while a `d3.scaleSqrt` encodes population counts as circle radii for select countries. Data comes from the UN population estimates CSV and a world TopoJSON, processed with `topojson.feature`. Interactivity includes zooming via `d3.zoom` and a color legend, rendered as SVG.

NNita
84% match
Loading thumbnail…

Choropleth World population map

A choropleth map of the world colors each country according to its population, using a threshold color scale with a sequential red palette. Hovering over a country dims others and reveals a tooltip with the country name and population in millions, while clicking zooms the map. Population data is joined to GeoJSON country outlines via three-letter country codes, and the map is rendered as SVG using `d3.geoRobinson`, `d3.geoPath`, and `d3.scaleThreshold` with an animated `transition` on opacity and stroke.

Pprateekvasi
84% match
Loading thumbnail…

Choropleth Map

A choropleth map visualizes population estimates per country for 2018, with each country shaded and overlaid with proportional circles sized by population magnitude. The visualization uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, while `topojson.feature` loads world geometry. Population data comes from a CSV file, and a square-root scale sizes the circles. The map supports zooming through `d3.zoom`, and legends for color and size are built with custom SVG components. Hovering highlights countries and shows population in a tooltip.

Kkasalwelengwe@gmail.com
83% match
Loading thumbnail…

Choropleth World population map

A choropleth map shows the number of legal immigrants per country, with a threshold color scale ranging from gray to dark blue. Built with D3 v4, the visualization loads GeoJSON country boundaries and a CSV of immigration totals, then projects them using `d3.geoRobinson()` and draws paths with `d3.geoPath()`. Interactivity includes hover effects that highlight each country and display a tooltip with its name and total, plus a legend mapping color ranges to values.

RRubieStannard
83% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global population data from the UN’s 2019 dataset, coloring each country according to its population value. The visualization uses D3’s geoMercator projection and geoPath to render country outlines from World Atlas TopoJSON data, while the D3 scaleOrdinal and schemeSpectral functions generate the color scale. A custom color legend shows the mapping between colors and population values, and hovering over a country highlights it in red.

SSophia Murage
83% match