Choropleth map

100%

Choropleth map

✓ Published1🌍 Public

Last edited May 5, 2020

Created on May 5, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth map

A world map rendered as a choropleth shades each country according to its economic classification, using a spectral color scale. Hovering highlights a country and shows its name and classification. The map is drawn with d3.geoPath and a Natural Earth projection, with TopoJSON data from the world-atlas package. A custom colorLegend function displays the ordinal scale, and d3.zoom enables interactive panning and zooming of the SVG.

JJoel Schwartz

95% match

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

94% match

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

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with the spectral scheme, sourced from the World Atlas TopoJSON dataset. The map supports interactive zooming and panning, and clicking a legend item highlights matching countries while dimming others. It is built with D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, and `d3.zoom` for navigation, with all elements rendered as SVG.

Mmaru25-alt

93% match

Loading thumbnail…

Choropleth Map

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.

JJoachim Klug

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. Hovering highlights a country in red, and the map includes a legend showing color categories. Built with D3 v5, it uses `geoPath` with the Natural Earth projection and loads geographic data from the world-atlas TopoJSON and TSV files. The visualization supports zooming via D3's zoom event and renders as an SVG.

AAdrianTNare

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a categorical ordinal color scale from `d3.scaleOrdinal` with the `schemeSpectral` palette. It renders world geography with `d3.geoPath` and a Natural Earth projection, loading TopoJSON country boundaries and TSV metadata from the world-atlas package. A custom color legend built with D3 selections appears alongside the map, while `d3.zoom` enables panning and zooming. The visualization uses SVG elements and includes hover effects that highlight individual countries.

CChenluWang96

93% match

Loading thumbnail…

Choropleth map

A choropleth map colors world countries according to their economic classification, with a color legend that filters and highlights selected categories. Users can click legend entries to dim non-matching countries and intensify the selected region. Built with D3.js, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project TopoJSON data from the world-atlas package, while `d3.scaleOrdinal` with `d3.schemeSpectral` assigns colors. Interactive zoom via `d3.zoom` and SVG rendering provide the map interface.

Nntech9613

93% match