Choropleth map with interaction

100%

Choropleth map with interaction

✓ Published1🌍 Public

Last edited Nov 14, 2020

Created on Nov 14, 2020

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications, with each country colored according to its economy category. Users can click items in the interactive color legend to filter the map, highlighting matching countries and dimming all others, while hovering over the legend reveals tooltips. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render the map from TopoJSON world data, and d3.scaleOrdinal with schemeSpectral to assign colors. Zoom and pan functionality are implemented via d3.zoom, and the legend filtering uses click handlers with opacity transitions.

Ppplomith

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country’s economic group, with an interactive color legend that filters the map by clicking a category. Pan and zoom via d3.zoom reveal spatial patterns, while hovering shows country names and values through SVG titles. The visualization is built with d3.geoNaturalEarth1 and d3.geoPath, using ordinal color scaling with d3.scaleOrdinal and d3.schemeSpectral. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths, with the legend updating opacity to dim unselected countries.

Llkjcbl

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economies using color-coded countries, with interactive filtering through a clickable color legend. Hovering over legend items dims non-matching countries, while clicking toggles filtering and highlights selected categories. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from TopoJSON world-atlas files, with country names and economy classifications merged from TSV metadata.

Sszy1900

93% match

Loading thumbnail…

Choropleth Map w Interactions

This choropleth map displays global economic groups using an ordinal color scale, where each country is colored by its economy category. Users can click legend items to highlight matching countries while dimming others, and hover over countries to see their name and economy value in a tooltip. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries, and incorporates d3.scaleOrdinal with a spectral color scheme for categorical coloring. The map includes zoom functionality via d3.zoom, and data is loaded from the world-atlas package using d3.tsv and topojson.feature.

Llrakla

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country's economic classification, with an interactive color legend that filters the map by category. Clicking a legend item dims non-matching countries, while a second click clears the filter; hovering over a country reveals its name and category via a title tooltip. The visualization combines d3.geoPath and geoNaturalEarth1 for map projection, d3.scaleOrdinal with schemeSpectral for colors, and d3.zoom for pan and zoom. Data comes from the World Atlas TopoJSON and TSV files.

GGiovanniD_

93% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays global economic classifications by country, with an interactive color legend that filters the map to a selected category. Users click legend items to dim non-matching countries and highlight the chosen group, while zooming is supported via d3.zoom. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render world features from TopoJSON data, with d3.scaleOrdinal and d3.schemeSpectral mapping economies to colors. Hover states change country fills to red, and tooltips show country names and values.

Ddavidcenna

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with an interactive color legend that filters the map by hovering or clicking on a category. The d3-scaleOrdinal and schemeSpectral color scale map each economy type to a distinct color, while d3-geoPath and geoNaturalEarth1 render the world geometry from TopoJSON data. Clicking a legend item dims non-matching countries and highlights the selected group, with zoom support via d3.zoom. The map uses SVG and d3.v5 for all rendering and interaction.

Zzhangfa

93% match