Skip to main content
SimilarExport ZIP
100%

Choropleth Map with interactions

✓ Published0🌍 Public
WWarren-Fitzhenry
Last edited Jan 4, 2020
Created on Jan 4, 2020

An interactive choropleth map encodes a country's economy category through a spectral color scale. Pan and zoom via D3's `zoom` and `event` APIs manipulate the SVG projection, while clicking a legend tick highlights only countries in that category. Hovering reveals the country name and value via a `title` element. The map uses `d3.geoPath` and `geoNaturalEarth1` on World Atlas TopoJSON, with the legend built from `scaleOrdinal` and `schemeSpectral`.

AI-generated description

Interactive map based of of World Atlas JSON.

MIT Licensed

Similar vizzes

Loading thumbnail…

choropleth map with interactions!

This interactive choropleth map displays world countries colored by economy category, with a clickable color legend that highlights or dims countries in the selected group. Pan and zoom via d3.zoom transform the map, while d3.geoNaturalEarth1 and d3.geoPath render the GeoJSON features derived from World Atlas TopoJSON data. The legend uses d3.scaleOrdinal with a spectral scheme, and hover styling changes country fill to red.

Kkaviya-ds
93% match
Loading thumbnail…

Choropleth Map with interactions

A choropleth map of world countries, colored by economic income group, supports interactive exploration. The map uses a natural Earth projection and is rendered as SVG. A color legend allows selection and highlighting of specific categories, while zooming and panning are enabled via d3.zoom. Data is loaded from the World Atlas TopoJSON and TSV files, and the visualization is implemented with d3.geoPath and d3.scaleOrdinal. Hovering a country displays its name and value in a tooltip.

Ggilbster
91% match
Loading thumbnail…

Choropleth Map Interactive

This interactive choropleth map displays countries colored by their economy category, using a spectral color scale and a natural Earth projection. Users can click legend swatches to highlight matching regions while dimming others. The visualization is built with D3 v5 modules including `geoNaturalEarth1`, `geoPath`, and `zoom`, rendering vector shapes as SVG. It loads geographic data from the World Atlas TopoJSON and TSV files, processing them via `topojson.feature`. A dedicated color legend component supports selection filtering, while CSS hover effects emphasize individual countries.

MMunTatt Yap
91% match
Loading thumbnail…

Choropleth map with interaction

This choropleth map displays world economies using a color scale mapped to each country, with dimming and highlighting applied when a legend category is selected. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection and rendering, and `d3.zoom` for panning and zooming. A clickable legend, rendered via custom D3 selections, filters the map by economy type, while data is loaded from TopoJSON and TSV files using `d3.json` and `d3.tsv`. The map renders as SVG with hover effects and interactive focus.

JJasonYeong0821
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes the world's economies, coloring each country according to its economic classification. Users can zoom and pan the map via `d3.zoom`, while the color legend offers an interactive click handler, though its filtering effect is not implemented. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, using `d3.geoPath` with a `geoNaturalEarth1` projection to render countries as SVG paths. A spectral color scale maps economy categories to hues, and hovering highlights a country in coral.

MMichał Szumnarski
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economic grouping, with a legend of color categories that users can click to highlight matching regions and fade all others. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the legend employs scale-ordinal colors from `schemeSpectral` and interactive click handlers. Panning and zooming are enabled through `d3.zoom`. The geographic data comes from the World Atlas TopoJSON, with ISO country mappings joined from TSV metadata.

Ccaydener
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to distinguish categories, with an interactive legend enabling users to click a category and highlight matching countries while dimming the rest. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files. Hovering reveals country names and values via SVG `title` elements.

Jjesramyep1263
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economic data, colored by country using a spectral ordinal scale, lets viewers filter countries by clicking a color legend. The map renders with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, supporting pan and zoom through `d3.zoom`. Legend clicks toggle highlighting of matching countries, dimming others. Country data merges TopoJSON geometries with TSV attributes from the world-atlas dataset, and legend interactions redraw both map and legend.

Iianleekq
91% match