Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published0🌍 Public
KKainsli
Last edited May 19, 2021
Created on May 19, 2021

This choropleth map uses color to encode the economy classification of countries, sourced from world-atlas TSV data matched with TopoJSON geometries. D3’s `geoNaturalEarth1` projection and `geoPath` render country outlines as SVG paths, while a sequential spectral color scale (`schemeSpectral`) fills each territory. An interactive zoom control, built with D3’s `zoom` event, adjusts the projection transform, and a custom legend (from `colorLegend.js`) displays the ordinal scale’s categories with hover effects highlighting individual countries.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries colored by their economic classification, using a spectral color scale to distinguish categories. The map renders geographic boundaries as SVG paths via `d3.geoPath` and a Natural Earth projection. Data is loaded from the World Atlas TopoJSON and TSV files, merged by country ID, then assigned to the `d3.scaleOrdinal` color scale. A custom legend shows color swatches with labels, and hovering highlights individual countries in red. Interaction includes zoom and pan through the `d3.zoom` event, which applies an SVG transform.

CCurran Kelleher
95% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by country, coloring each nation according to its economy category. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from TopoJSON world-atlas data, with country attributes loaded from a TSV file. A color legend, constructed via `colorLegend`, displays the ordinal color scale using `d3.scaleOrdinal` and `d3.schemeSpectral`. The SVG map supports zooming via `d3.zoom`, and hovering changes a country’s fill to red.

Eevavan8
95% match
Loading thumbnail…

Choropleth Map

This choropleth map uses color to depict each country's economy category, sourced from world-atlas data. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it renders SVG paths colored via d3.scaleOrdinal with d3.schemeSpectral. Animated color legend transitions, hover effects highlight countries, and topojson-client processes geographic features alongside TSV metadata.

AAmar Nath Yogi
95% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, with a color legend and tooltips showing each country’s name and category. The visualization uses a natural Earth projection rendered as SVG paths via d3.geoPath, while TopoJSON and TSV data from the world-atlas package are loaded asynchronously. Users can pan and zoom the map using d3.zoom, and hovering highlights individual countries in red. The color scale uses d3.scaleOrdinal with a spectral scheme, and an interactive legend is built from custom d3 selections.

BBrandon Lehr
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy grouping, using a spectral color scale assigned through D3's `scaleOrdinal` and `schemeSpectral`. The code projects geographic features with `geoNaturalEarth1` and `geoPath` onto an SVG, overlaying a white legend built by a custom `colorLegend` component. Hovering highlights a country in red via CSS. Data comes from the `world-atlas` package, merging TopoJSON shapes with TSV metadata. Zoom interactions are handled through D3's `zoom` event, transforming the map group.

YYoung Song
94% match
Loading thumbnail…

Choropleth Map

This choropleth map uses a color scale to depict the economy classification of each country from the world-atlas dataset. The visualization includes a color legend built with custom SVG shapes, and it supports interactive pan and zoom through event handling. The implementation relies on D3’s geoPath and geoNaturalEarth1 projection for map geometry, and uses scaleOrdinal with schemeSpectral for categorical coloring. Country data is loaded from TopoJSON and TSV files, with paths rendered as SVG elements that display the country name and economy type on hover.

XXenos Panagiotis
94% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economic classification using an ordinal color scale with a spectral scheme. The visualization loads world geometry from TopoJSON and country metadata from TSV, joining them by ISO numeric codes, and renders with D3’s `geoNaturalEarth1` projection and `geoPath`. A custom `colorLegend` displays the scale, while zooming and panning are enabled via `d3.zoom`. Hovering highlights countries, and tooltips reveal name and economy class.

Vvaynexie
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy category using an ordinal color scale with a spectral scheme, and displays a color legend with clickable circles. It renders geographic boundaries with antialiased SVG paths via `d3.geoPath` and the Natural Earth projection, while loading data from the world-atlas package (TSV metadata and TopoJSON geometries) and processing it with `topojson.feature`. Hovering highlights a country in red, and the map supports zooming through the `d3.zoom` interaction.

Ffaaty
94% match