Choropleth Map interactive

100%

Choropleth Map interactive

✓ Published1🌍 Public

Last edited Nov 1, 2019

Created on Nov 1, 2019

This interactive choropleth map colors countries by economic classification using a spectral color scale, with a legend showing the ordinal categories. Users can pan and zoom the map via d3.zoom, which applies a transform to the map group. The visualization loads world geometry from TopoJSON and joins it with tabular data from a TSV file, then renders the map with d3.geoPath and a Natural Earth projection. Hovering highlights a country in red, and tooltips display country names and their economy values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical ordinal scale with the Spectral scheme. It loads world geometry from TopoJSON and joins it with TSV metadata, then renders the map with d3.geoPath and a Natural Earth projection. The visualization includes an interactive color legend built with custom SVG components, and supports zooming and panning through d3.zoom. Hovering highlights individual countries in red, and tooltips display each country’s name and economic group.

Ddata-inside

94% match

Loading thumbnail…

Choropleth Map.js

This choropleth map colors countries by their economy classification using an ordinal color scale with a spectral palette. A hover effect highlights individual countries, and a custom legend displays the color categories. The visualization loads world geometry from TopoJSON and joins it with tabular TSV data, rendered as SVG paths via `d3.geoPath` and a natural Earth projection. Interactive pan and zoom are enabled through `d3.zoom`, while the legend and map styling are built with D3’s selection and data-join methods.

NNeepaB

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

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using an ordinal color scale based on `d3.scaleOrdinal` and `d3.schemeSpectral`. The visualization also includes an interactive color legend, built with reusable D3 components, that allows users to filter countries by clicking on a category. Geographic boundaries are rendered as SVG paths using `d3.geoPath` with a natural Earth projection, while the data comes from the World Atlas TopoJSON and TSV datasets. Zooming is enabled through `d3.zoom`, and hovering highlights individual countries.

AAbishek-Dulal

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

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

93% match

Loading thumbnail…

D3 Choropleth Map

This D3 Choropleth Map colors world countries by their economic classification, using a spectral color scale and a geospatial natural Earth projection. The visualization includes an interactive legend with circles and labels, while zoom and pan are enabled via d3.zoom. Data is loaded from TopoJSON and TSV files using d3.json and d3.tsv, with country paths generated by d3.geoPath. The map is rendered as SVG, and hovering over a country turns it red, with tooltips showing name and economy value.

Rrdeichert

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries according to their economy group, using a spectral color scale to differentiate categories. It renders geographic boundaries with d3.geoNaturalEarth1 and d3.geoPath, and includes an interactive color legend built with custom SVG components. Users can pan and zoom the map via d3.zoom, while tooltips reveal country names and economy values. The visualization loads TopoJSON data from the world-atlas package and joins it with TSV metadata to assign colors, with hover states highlighted in red.

JJynadal

93% match