Fork of Choropleth Map

100%

Fork of Choropleth Map

✓ Published0🌍 Public

Last edited Feb 6, 2022

Created on Feb 6, 2022

This example shows a choropleth map of world countries colored by economic classification, with an interactive color legend and zoom-and-pan navigation. The visualization uses d3.geoPath with the Natural Earth projection to render country boundaries from TopoJSON data loaded from the world-atlas package, while d3.scaleOrdinal with the Spectral color scheme maps economy categories to fill colors. Users can zoom and pan the map via d3.zoom, and hovering highlights individual countries in red. A custom color legend, built with reusable D3 selections, displays color swatches and labels in an SVG overlay.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map

This example shows a natural Earth choropleth map where each country is colored by its economy category from a global dataset. Users can pan and zoom through the SVG map using d3.zoom, while a color legend built with ordinal scales and schemeSpectral displays the available classifications. The visualization loads TopoJSON world-atlas data, joins TSV attributes, and renders countries via d3.geoPath with hover effects that highlight individual states.

BBlakeMcMurray

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by their economy classification, using a spectral ordinal color scale and a natural Earth projection. The visualization supports zooming and panning through d3.zoom, and displays a custom interactive legend built with SVG circles and text. It loads geographic and economic data from the world-atlas TopoJSON and TSV files, processing them with topojson.feature and d3.tsv. Country paths are rendered via d3.geoPath, with hover highlighting and a tooltip showing the country name and economy value.

Mmgweiner

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economy using world-atlas TopoJSON data. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render the map, and d3.scaleOrdinal with schemeSpectral for color encoding. The color legend, built with a custom colorLegend function, displays the ordinal scale. Interactive pan and zoom is implemented via d3.zoom, and hovering highlights countries in red.

CClara Hu

94% match

Loading thumbnail…

Fork of Choropleth Map

This example shows a choropleth map of the world, coloring each country according to its economy category using an ordinal color scale. The map renders with SVG paths generated by d3.geoPath and a Natural Earth projection, and it supports zooming and panning through d3.zoom. A custom color legend is built with circles and text labels. Data is loaded from world-atlas TopoJSON and TSV files, processed with topojson.feature, and the color scale uses d3.scaleOrdinal with schemeSpectral.

MMarwan Sulaiman

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by economic classification using a spectral color scale, with a legend showing the ordinal categories. The map uses the Natural Earth dataset via TopoJSON and d3-geo's geoNaturalEarth1 projection. Users can zoom and pan through d3.zoom, and hovering highlights countries in red. The color legend is built with custom SVG components, while the map itself renders using the geoPath generator with tsv metadata joined to the geometry.

Vvivianaaai@qq.com

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by economic grouping, using a spectral color scale with a custom legend. The visualization reacts to user zoom and pan gestures, redrawing country boundaries through D3’s `geoPath` and `geoNaturalEarth1` projection. Country data merges TSV attributes with TopoJSON geometry via `topojson.feature`, and hovering any country highlights it in red, while a tooltip shows its name and economic category. The project relies on D3 v5’s `scaleOrdinal`, `schemeSpectral`, and the `zoom` event helper for interactivity.

MMajaha21

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes countries colored by their economic classification, using colors from the D3 `schemeSpectral` scale. The map is rendered as SVG paths generated with `geoPath` and the `geoNaturalEarth1` projection, with country data loaded from the world-atlas TopoJSON and TSV files. A legend built with D3's `scaleOrdinal` and `selectAll` shows the color categories, while pan and zoom interactions are handled through `d3.zoom`. Hovering a country highlights it in red and reveals its name and economic group in a tooltip.

MMajaha21

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economic classification using a categorical ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. The visualization renders geographic shapes with d3.geoPath and a natural Earth projection, while supporting interactive pan and zoom via d3.zoom. Data comes from the World Atlas TopoJSON and TSV files, loaded through d3.json and d3.tsv. A custom d3 color legend with circles and labels appears on the left, and hovering highlights individual countries in red.

Ttaaddele

94% match