Skip to main content
SimilarExport ZIP
100%

Choropleth map

✓ Published4🌍 Public
VVaggelisKlt
Last edited May 20, 2020
Created on May 18, 2020
Forked from lets make a map

This choropleth map displays countries colored by economic classification, sourced from the world-atlas dataset. Built with React and d3.v5, it uses d3.geoNaturalEarth1 and d3.geoPath to project and render GeoJSON features. A color legend, created with a custom d3.scaleOrdinal component, maps categories to a spectral scheme. D3 zoom interactions allow panning and scaling, while CSS hover states highlight individual countries.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification, with a hover effect highlighting individual nations and a legend showing the categorical color scale. The visualization renders world geography using `d3.geoPath` with a Natural Earth projection, while `d3.zoom` enables pan and zoom interaction. Data loads from the world-atlas TopoJSON and TSV files, merged by country ID, and the color scale uses `d3.scaleOrdinal` with `schemeSpectral` ranges. The legend is built as a reusable component with `selection.enter` and `merge` patterns.

Lloicvdk
93% match
Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral, with a legend rendered via a custom colourLegend component. Geographic shapes are drawn with d3.geoPath and a Natural Earth projection, while data loads from World Atlas TopoJSON and TSV files. Hovering highlights countries, and d3.zoom enables panning and zooming with animated transitions on the legend circles.

JJoseph Popoola
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with the spectral scheme, sourced from the World Atlas TopoJSON dataset. The map supports interactive zooming and panning, and clicking a legend item highlights matching countries while dimming others. It is built with D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, and `d3.zoom` for navigation, with all elements rendered as SVG.

Mmaru25-alt
92% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical color scale based on the World Atlas TopoJSON dataset. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while a legend built from d3.scaleOrdinal and schemeSpectral displays the color categories. Hovering highlights individual countries, and d3.zoom enables pan and zoom interactions on the SVG.

Yylzami40
92% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical color scale based on the World Atlas TopoJSON dataset. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while a legend built from d3.scaleOrdinal and schemeSpectral displays the color categories. Hovering highlights individual countries, and d3.zoom enables pan and zoom interactions on the SVG.

Yylzami40
92% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications, with countries color-coded by their income group using a spectral ordinal scale. Users can click legend items to highlight matching regions, which dims non-selected countries and increases their stroke width. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render GeoJSON from the world-atlas TopoJSON dataset, while d3.zoom enables interactive panning and zooming. A custom color legend with clickable circles and d3.scaleOrdinal drives the selection filtering, rendered entirely as SVG elements within a React framework.

Aakshayms0
91% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. Hovering highlights a country in red, and the map includes a legend showing color categories. Built with D3 v5, it uses `geoPath` with the Natural Earth projection and loads geographic data from the world-atlas TopoJSON and TSV files. The visualization supports zooming via D3's zoom event and renders as an SVG.

AAdrianTNare
91% match
Loading thumbnail…

Choropleth Map

A choropleth map of countries colored by economic classification from world-atlas data, with a categorical color legend that filters the map on click. The visualization uses D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `scaleOrdinal` with a spectral color scheme, rendering as SVG with interactive zoom and hover highlighting.

EEdoardoRegini
91% match