Choropleth Map with interactions

100%

Choropleth Map with interactions

✓ Published1🌍 Public

Last edited Jan 2, 2020

Created on Jan 2, 2020

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.

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

92% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic income group using an ordinal color scale. The visualization uses D3 v5 with d3.geoPath and a Natural Earth projection to render TopoJSON world data loaded from the world-atlas package. Users can zoom and pan via d3.zoom, and hovering highlights individual countries. A custom color legend component displays the category colors and labels, with interactivity handled through SVG selections.

VVivian Peng

92% match

Loading thumbnail…

Chloropleth Map Interactive

A choropleth map shows world countries colored by economy type, with a legend that filters and highlights selected categories. The visualization supports zooming and panning, and dims non-selected countries while emphasizing those matching the chosen economy. It uses d3.geoPath with the geoNaturalEarth1 projection to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Country data comes from world-atlas TopoJSON and TSV files, with hover effects and a clickable color legend for interaction.

MMaxwell Dayvson da Silva

91% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using an ordinal color scale with a spectral scheme. The visualization supports pan and zoom interactions through d3.zoom, while d3.geoPath and a Natural Earth projection render the geographic shapes. A custom color legend component displays the categorical colors with labeled circles. Country names and income groups appear as tooltips via SVG title elements, with data loaded from the world-atlas TopoJSON and TSV files.

Aanouckstbr@gmail.com

91% match

Loading thumbnail…

Choropleth Map with interactions

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`.

WWarren-Fitzhenry

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Ffloresh

91% match

Loading thumbnail…

Choropleth map

A choropleth map colors world countries by income group using an ordinal color scale with a spectral scheme. The visualization renders geographic boundaries via TopoJSON data and the d3.geoPath projection, with a legend displaying color categories. Interactive zooming is enabled through d3.zoom, and hovering highlights individual countries. Data comes from the world-atlas and visionscarto-world-atlas packages.

Jjrodg

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economies using color coding derived from world-atlas TopoJSON data, with countries shaded by income group. Users can filter the map by clicking color legend items, which highlights matching countries and dims others. The visualization uses d3.geoNaturalEarth1 projections, d3.geoPath for country outlines, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral colors. Hovering changes country fill to red, and tooltips reveal country names and values.

OOxfordComma

91% match