Skip to main content
SimilarExport ZIP
100%

Choropleth Map with D3.js

✓ Published1🌍 Public
Ddanhuijia
Last edited Feb 6, 2020
Created on Feb 6, 2020

This choropleth map visualizes global income groups using a color scale based on the Spectral scheme. The map is rendered with SVG paths generated by D3.js’s `geoPath` projection, and the world country boundaries come from the `world-atlas` TopoJSON dataset. Users can zoom and pan the map via the `zoom` event, and a color legend displays the ordinal scale’s categories. Data is loaded from the TSV file, merged with geographic features, and country names and income groups appear on hover via tooltips.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with D3.js!

This choropleth map visualizes global income groups using D3.js to color each country based on its economic classification. Built with d3.geoNaturalEarth1 projection and d3.geoPath, the SVG renders geographic boundaries from TopoJSON data sourced from the world-atlas package, with income labels joined from a TSV file. The map includes an ordinal color scale using d3.scaleOrdinal and d3.schemeSpectral, supplemented by a custom color legend component. Interactive features include zooming via d3.zoom and hover effects that highlight individual countries in red.

CCarloWK1202
92% match
Loading thumbnail…

Choropleth Map with interacti filtering D3.js

This choropleth map visualizes global income groups, with countries colored according to a categorical scale. Users can click legend items to filter the map, dimming countries that do not match the selected category. The visualization is built with D3.js v5, using `geoNaturalEarth1` and `geoPath` for map projections and SVG paths for rendering. Data is loaded from the World Atlas TopoJSON and TSV datasets, with the color legend implemented as an interactive SVG component.

Ddanhuijia
92% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring each country according to its `income_grp` attribute, using a spectral color scale (`d3.schemeSpectral`). The map shows a natural Earth projection rendered with `d3.geoPath`, with hover interactions highlighting countries in red. Built with React and D3 v6, it loads world boundary data from the `world-atlas` package via TopoJSON and TSV files, and includes a custom color legend component. The visualization supports zooming through a zoom behavior API.

MMatthew Rubino
92% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global income groups using a color scale applied to each country’s territory. The visualization employs d3.geoPath with a natural Earth projection to render the GeoJSON features, while d3.scaleOrdinal and schemeSpectral map income categories to colors. A custom color legend, built with select and merge, appears on the left. The map supports zooming via d3.zoom, and hovering highlights countries in red. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature.

PPiotr Paszek
92% match
Loading thumbnail…

Choropleth map with D3.js!

This choropleth map visualizes world countries colored by income group using D3.js. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with country boundaries loaded from TopoJSON world-atlas data and income classifications joined from a TSV file. A color legend built with `scaleOrdinal` and `schemeSpectral` displays the categorical color scale. Interactive zooming is implemented through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Fforcox43
92% match
Loading thumbnail…

Choropleth map

A choropleth map visualizes global income groups using a divergent spectral color scale, with country names and income categories shown on hover. The map uses a natural Earth projection via `d3.geoPath` and supports zooming and panning through `d3.zoom`. World geometry comes from TopoJSON (50m), enriched with TSV metadata, while `d3.scaleOrdinal` drives the color mapping. A legend, built with a reusable colorLegend module, displays the categorical scale; hover effects highlight countries in red.

Rroncando
92% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring each country according to its income_grp property. The map uses a natural Earth projection and fills countries with colors from a spectral ordinal scale, with a background legend showing the color categories. Built with D3 v5, the code loads world geometry from TopoJSON and income data from TSV files, then renders the map as SVG paths with zoom support via d3.zoom. The color legend is implemented as a reusable component, and hovering highlights individual countries.

Aanuj1450
91% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups, with each country colored according to its economic classification from the world-atlas dataset. The visualization uses a D3 v5 SVG rendering with a natural Earth projection, allowing users to pan and zoom through the interactive geoPath features. The map employs an ordinal color scale with a spectral scheme, while a custom legend (colorLegend.js) displays the categorical colors with circle markers. The data loads asynchronously from TSV and TopoJSON files via Promise.all, with country names and income group values shown as tooltips on hover.

Ccaydener
91% match