Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published1🌍 Public
Ccpsshan
Last edited Jul 16, 2019
Created on Jul 16, 2019
Forked from Choropleth Map

This example displays a world map as a choropleth, with each country colored by its income group using an ordinal color scale and a custom SVG legend. D3’s `geoNaturalEarth1` projection and `geoPath` render geographic boundaries from a TopoJSON source, while data from a TSV file is joined by country ID. Hovering a country turns it red and shows its name and income group in a tooltip, and pan/zoom interaction is enabled via a custom zoom event.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map

This example displays a choropleth map of the world, coloring each country according to its income group using a categorical color scale. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, projecting it with `d3.geoNaturalEarth1` and rendering paths via `d3.geoPath`. A custom legend component uses D3 selections to show color categories. The map supports zoom and pan through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Rroncando
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a diverging red-blue ordinal scale, with a zoomable Natural Earth projection and a color legend built from custom SVG circles. The visualization loads world country boundaries from TopoJSON and joins them to TSV metadata, then renders each nation as a styled SVG path with hover highlighting. It uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal with the schemeRdBu palette, while the legend is implemented as a reusable module.

AAdrian Tan
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group, using a spectral color scale with a legend showing the categorical ranges. It renders country boundaries as SVG paths via the `d3.geoPath` and `d3.geoNaturalEarth1` projections, with a zoom interaction applied through `d3.zoom`. Data comes from the `world-atlas` TopoJSON and TSV files, processed with `topojson.feature` to merge attributes. Hovering highlights a country in red and displays its name and income group in a tooltip.

HHe Jianfeng
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a red-blue ordinal color scale, with a zoomable Natural Earth projection rendered as SVG paths. It loads world country boundaries from the World Atlas TopoJSON dataset and joins them to TSV metadata by ISO country code. The map includes an interactive color legend built with custom D3 selections, and uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal with schemeRdBu. Hovering highlights individual countries, and a title tooltip shows each country’s name and income group.

AAdrian Tan
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries according to their income group, using a spectral color scale with a clickable legend that displays the categorical values. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, with zooming enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON, joined with country names from a TSV file. The color legend is built with `scaleOrdinal` and custom `colorLegend` functions.

JJordan Chiu
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries according to their income group, using a spectral color scale with a clickable legend that displays the categorical values. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, with zooming enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON, joined with country names from a TSV file. The color legend is built with `scaleOrdinal` and custom `colorLegend` functions.

JJordan Chiu
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a natural Earth projection, with a categorical color scale and a clickable legend of colored circles. The map supports zooming and panning via d3.zoom, and country tooltips display name and income group. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render SVG paths from TopoJSON data loaded from world-atlas, while the legend is implemented as a custom reusable component.

TToooooooT
92% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Ss-janibekova
92% match