chloropleth

100%

✓ Published1🌍 Public

Last edited Aug 16, 2022

Created on Aug 14, 2022

This choropleth map displays global population by country, with a blue color scale indicating population ranges. Built with d3.js, it uses `d3.geoMercator` for projection and `d3.geoPath` to draw country boundaries from a GeoJSON dataset. Population data from a CSV file is matched to each country via a `Map`, and `d3.scaleThreshold` maps values to a color scheme. Hovering over a country triggers a transition that dims other countries and highlights the selected one with a black stroke.

AI-generated description

https://d3-graph-gallery.com/graph/choropleth_hover_effect.html

MIT Licensed

Similar vizzes

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

89% match

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

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

88% match

Loading thumbnail…

Choropleth map

This choropleth map displays global population data by country, with a threshold color scale using `d3.scaleThreshold` and `d3.schemeBlues`. The example loads world GeoJSON topology and population CSV data via `d3.json` and `d3.csv`, rendering the map with `d3.geoPath` and a Mercator projection. Interactive buttons allow switching between music genres, though the map itself does not respond to these selections. The visualization uses D3 v4 and SVG rendering within a 400x300 viewport.

Ffkara09

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

87% match

Loading thumbnail…

Chloropleth Map

This choropleth map visualizes global population estimates for 2018, using circle size to represent population magnitude overlaid on country boundaries. The visualization employs d3.geoNaturalEarth1 projection with d3.geoPath for rendering geographic features, while circles are positioned via d3.geoCentroid. Data from the UN population estimates is merged with TopoJSON world atlas geometry. Interactive zooming is implemented with d3.zoom, and a custom size legend communicates the population scale using d3.scaleSqrt.

TThomas Seberechts

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

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

84% match