Choropleth Map

100%

Choropleth Map

✓ Published0🌍 Public

Last edited Oct 20, 2020

Created on Oct 20, 2020

A choropleth map colors countries according to their economy, using a categorical color scale and an interactive legend to filter by income group. Built with D3 v5, it projects geographic data from the world-atlas topojson using `geoNaturalEarth1` and renders each country as an SVG path via `geoPath`. The legend, generated through a separate module, allows clicking to highlight or dim countries by color value, while a zoom interaction adjusts the projection transform.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map

This choropleth map displays countries colored by economic classification using a spectral color scale. Users can click legend items to highlight all countries in that category while dimming others, with zoom and pan via `d3.zoom`. The map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` projection using TopoJSON data from the world-atlas dataset. A legend, built with custom SVG circles and text, provides interactive filtering, and hover effects change country fill colors.

JJoel Schwartz

93% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic income group using an ordinal color scale. The visualization uses D3 v5 with d3.geoPath and a Natural Earth projection to render TopoJSON world data loaded from the world-atlas package. Users can zoom and pan via d3.zoom, and hovering highlights individual countries. A custom color legend component displays the category colors and labels, with interactivity handled through SVG selections.

VVivian Peng

93% 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

93% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification, with an ordinal color scale and a legend showing each category. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the projection, `topojson` to load world geometry from the world-atlas dataset, and `schemeSpectral` for the color range. The map supports zooming via `d3.zoom`, while hover effects highlight individual countries.

HHasideluxe

93% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic data by coloring countries according to a categorical color scale. Users can click legend entries to highlight countries matching the selected category, dimming all others. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection and `d3.scaleOrdinal` for coloring. The map loads country boundaries and economic classifications from a world-atlas TopoJSON dataset, while the interactive legend and country paths are rendered as SVG elements.

Iinroadings

93% match

Loading thumbnail…

Choropleth Map

A choropleth map of world countries colors each nation by its economy category using an ordinal spectral color scale. Data from the world-atlas TopoJSON and TSV files is projected with the Natural Earth projection and rendered as SVG paths. Hovering highlights a country, and a custom color legend with circles and labels is generated using the `colorLegend.js` module. The map supports interactive zooming via the `d3.zoom` API, which applies transformations to the map group on zoom events.

JJynadal

92% 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

92% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic category using an ordinal color scale with a spectral palette. The visualization loads world geometry and country metadata from the world-atlas TopoJSON and TSV files, rendering paths with `d3.geoPath` and a Natural Earth projection. Users can pan and zoom via `d3.zoom`, while a custom legend built with D3 selections displays color categories as circles and text. Hovering highlights a country in red, and tooltips show each nation's name and economy type.

MMajaha21

92% match