Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published1🌍 Public
FFerrandiaz92
Last edited Aug 7, 2019
Created on Aug 7, 2019
Forked from Choropleth Map

This choropleth map colors countries by economic group using a spectral color scale, with hover effects that highlight individual nations. The visualization uses D3.js (v5) to load world map data from TopoJSON and TSV files, projecting geographic coordinates with d3.geoNaturalEarth1 and rendering paths via d3.geoPath. A custom color legend with circles and text labels is built using D3 selections, while zooming is enabled through d3.zoom. The map data comes from the world-atlas package, and SVG is used for all rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a spectral color scale, with hover highlighting and zoom/pan enabled via d3.zoom. The visualization loads world geometry from TopoJSON and joins it with tab-separated country metadata from the world-atlas dataset. It renders geographic paths with d3.geoPath and a Natural Earth projection, while a custom color legend displays ordinal color domains using SVG circles and text.

NNilla
95% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical ordinal scale with the Spectral scheme. It loads world geometry from TopoJSON and joins it with TSV metadata, then renders the map with d3.geoPath and a Natural Earth projection. The visualization includes an interactive color legend built with custom SVG components, and supports zooming and panning through d3.zoom. Hovering highlights individual countries in red, and tooltips display each country’s name and economic group.

Ddata-inside
95% match
Loading thumbnail…

Choropleth Map

This choropleth map colors the world’s countries by economic classification using a spectral color scale, with country names and values shown on hover. The visualization also places a set of fixed coordinates as small circles on the map, though these are filled with the same color scale. Built with D3.js, it projects geographic data from a TopoJSON world atlas using the Natural Earth projection (`d3.geoNaturalEarth1`) and renders paths via `d3.geoPath`. Interactive zooming is enabled through a `d3.zoom` event, which transforms the SVG group containing the map.

Yylzami40
94% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification, with a hover effect highlighting regions and a color legend displaying category ranges. Built with D3 v5, the example uses d3.geoPath with a natural Earth projection to render the map, while d3.scaleOrdinal and schemeSpectral assign colors to discrete economy values from the world-atlas dataset. Interactive zooming is enabled via a d3.zoom event, and the SVG output includes tooltips showing country names and their economic group. The visualization loads geographic data from TopoJSON and TSV sources.

PPreciousone
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

Nnouralkhoury
94% match
Loading thumbnail…

choropleth map!

This choropleth map colors countries by economic grouping using an ordinal color scale with a spectral scheme. The visualization renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Users can pan and zoom via d3.zoom, while hovering highlights individual countries. Data comes from the World Atlas TopoJSON and TSV files, loaded asynchronously with d3.json and d3.tsv.

Kkaviya-ds
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries according to their economy group, using a spectral color scale to differentiate categories. It renders geographic boundaries with d3.geoNaturalEarth1 and d3.geoPath, and includes an interactive color legend built with custom SVG components. Users can pan and zoom the map via d3.zoom, while tooltips reveal country names and economy values. The visualization loads TopoJSON data from the world-atlas package and joins it with TSV metadata to assign colors, with hover states highlighted in red.

JJynadal
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic classification, using a spectral color scale to distinguish categories. Clicking a legend item filters the map to highlight only matching countries, while zooming and panning are enabled via d3.zoom. The visualization imports world-atlas TopoJSON and TSV data, projecting features with d3.geoNaturalEarth1 and d3.geoPath. Map and legend are rendered as SVG, with hover states and opacity dimming for non-selected regions.

JJuyeonee
94% match