Skip to main content
SimilarExport ZIP
100%

choropleth map with interactions!

✓ Published0🌍 Public
Kkaviya-ds
Last edited Aug 24, 2020
Created on Aug 24, 2020
Forked from choropleth map!

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.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
92% 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
92% 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
92% match
Loading thumbnail…

Choropleth map with interaction

This choropleth map displays global economic data, with each country colored according to its economy category. Clicking a color legend item filters the map, dimming non-matching countries and highlighting the selected category; clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country shapes from TopoJSON data, while d3.scaleOrdinal and schemeSpectral define the color encoding. d3.zoom enables panning and zooming, and the color legend uses d3 selections with click handlers for interaction.

MMatan
92% match
Loading thumbnail…

Interactivity in Choropleth Map

This interactive choropleth map visualizes global economic data, coloring each country on a natural Earth projection according to its economy category. Users can click a country to highlight it, dimming all others, or click a color legend to filter countries by economic classification, which also outlines matching countries in red. The example uses d3.geoPath for map rendering, d3.scaleOrdinal with a spectral color scheme, and d3.zoom for pan and zoom interactions. Country data is loaded from a TopoJSON file combined with a TSV file containing ISO country codes and economic classifications.

Mmla341
92% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by economy category using a sequential color scale, with an interactive legend that filters the map by clicking a category. The map renders geographic features with `d3.geoPath` and `d3.geoNaturalEarth1`, while the legend circles respond to clicks to toggle the selected category, dimming non-matching countries. Pan and zoom are enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV files, processed with TopoJSON’s `feature` method.

Aanduskong
92% match
Loading thumbnail…

Interactive choropleth map filtering

An interactive choropleth map displays global economic classifications using color-coded countries over a natural Earth projection. Clicking legend entries filters the map, dimming unselected economies and highlighting the chosen one while allowing zoom and pan through d3.zoom. The visualization uses d3.geoPath to render TopoJSON world-atlas data, d3.scaleOrdinal with schemeSpectral for color mapping, and SVG elements with transitions managed by D3’s data join. Hovering changes country fill to red, and tooltips show country names and values.

Zzenoe
92% match