Choropleth Map

100%

Choropleth Map

✓ Published0🌍 Public

Last edited Dec 14, 2019

Created on Dec 14, 2019

This choropleth map visualizes countries colored by their economy classification, using a spectral color scale to differentiate income groups. The visualization displays country names and classifications on hover via tooltips, with a legend showing the ordinal color mapping. Built with D3 v5, the example uses `geoNaturalEarth1` projection and `geoPath` to render world geography from TopoJSON data, while `scaleOrdinal` with `schemeSpectral` assigns colors. The interactive zoom feature uses `zoom`, and a custom `colorLegend` function draws the legend with SVG circles and text.

AI-generated description

MIT Licensed

Similar vizzes

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

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 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 classification using a sequential ordinal color scale, with an interactive color legend and hover effects that highlight individual nations. The visualization loads world geometry from a TopoJSON file and joins it with tabular TSV data containing country identifiers and economic attributes. Built with D3 v5, it employs `d3.geoPath` with a natural Earth projection, `d3.scaleOrdinal` for color mapping, and `d3.zoom` for panning and zooming. The SVG rendering includes a custom legend component that updates based on the color scale’s domain.

ZZakaria

94% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic classification, with a hover effect highlighting regions and a color legend displaying category ranges. Built with D3 v5, the example uses d3.geoPath with a natural Earth projection to render the map, while d3.scaleOrdinal and schemeSpectral assign colors to discrete economy values from the world-atlas dataset. Interactive zooming is enabled via a d3.zoom event, and the SVG output includes tooltips showing country names and their economic group. The visualization loads geographic data from TopoJSON and TSV sources.

PPreciousone

94% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the economic classification of countries across the globe, using color to encode each nation’s economy category. The map is rendered with D3.js v5, using `geoNaturalEarth1` projection and `geoPath` to draw country boundaries. Country data is loaded from the world-atlas TSV and TopoJSON files, with the `economy` property mapped to a spectral color scale. Hovering over a country displays its name and economy type, while a custom color legend explains the color mapping. A zoom interaction is also implemented via `d3.zoom`.

Ccpsshan

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

94% match