Choropleth map

100%

Choropleth map

✓ Published2🌍 Public

Last edited May 6, 2020

Created on May 6, 2020

This choropleth map displays world economies by color, with a legend that filters countries by clicking a color category, dimming non-matching regions. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the legend is built with D3 scales and `d3.schemeSpectral`. Country data comes from the World Atlas TopoJSON and TSV files, rendered as SVG paths with zoom support via `d3.zoom`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes world economies by coloring each country according to its economic classification, using a spectral color scale created with `d3.scaleOrdinal` and `schemeSpectral`. The map renders as an SVG using `d3.geoPath` with the Natural Earth projection, displaying country data loaded from the world-atlas TopoJSON and TSV files. Interactive zooming via the `zoom` event lets users explore regions, while a custom `colorLegend` function shows the categorical color assignments.

RRenato Francia Castillo

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

93% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the world’s economies, coloring each country according to its economic classification using a spectral color scale. The map displays the geographic distribution of these categories, with hover states revealing a country’s name and category. Built with D3.js (v5), the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from world-atlas TopoJSON and TSV data. A custom `colorLegend` component, drawn as SVG circles and text, provides a reference for the color categories, while zooming is handled via D3’s `zoom` event and `event.transform`.

Pprincit

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

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy type using a categorical color scale, with a legend showing each category. It renders world geography as SVG paths via `d3.geoPath` and the Natural Earth projection, while `d3.zoom` enables panning and zooming. The code loads TopoJSON and TSV data from the world-atlas package, mapping country IDs to economy labels, and uses `d3.scaleOrdinal` with `schemeSpectral`. Hovering highlights a country in red.

Ggabcoderboi

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy category using a sequential spectral color scale. It renders world geography as SVG paths via the `d3.geoPath` and `d3.geoNaturalEarth1` projection, with zoom support through `d3.zoom`. Country names and values appear as tooltips, and a custom `colorLegend` component displays the ordinal scale. The data is loaded from a TopoJSON world atlas and a TSV mapping country IDs to metadata. Hovering highlights countries in red.

BBahareh Zarei

93% match

Loading thumbnail…

Choropleth map

This choropleth map colors world countries by economy type using a spectral color scale. The map is rendered with SVG, using `d3.geoPath` with the Natural Earth projection, and supports zooming via `d3.zoom`. A legend with color swatches allows users to click a category, which highlights matching countries while dimming others. Data is loaded from the world-atlas TopoJSON and TSV files.

JJens Grochtdreis

93% match

Loading thumbnail…

Choropleth map

This choropleth map colors world countries by their economy type using a spectral color scale. Hovering a country highlights it in red and reveals its name and economy through an SVG title tooltip. The map is rendered with D3’s `geoPath` and a Natural Earth projection, with data loaded via TopoJSON and TSV files from the world-atlas dataset. A custom `colorLegend` displays the categorical color scale.

AAsperge-Atomique

93% match