Skip to main content
SimilarExport ZIP
100%

Choropleth map with interaction

✓ Published0🌍 Public
JJasonYeong0821
Last edited Nov 23, 2020
Created on Nov 23, 2020

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world economies by color, showing how countries group by income category. Users hover over color legend items to filter the map, which dims non-matching countries and highlights selected ones. The visualization uses D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for map projection, `zoom` for panning, and `scaleOrdinal` with `schemeSpectral`. It loads geographic boundaries from TopoJSON and economic data from TSV in `loadAndProcessData`. Interactive legend clicks trigger opacity changes through `colorLegend`, with SVG rendering throughout.

LLittledevil7
93% match
Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world economies using a color gradient, with an interactive legend that filters countries by economic category. Users can zoom and pan the map, and clicking a legend entry dims non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.zoom for navigation. Data comes from the world-atlas TopoJSON and TSV datasets, with unemployment type and population shown in tooltips. The color scale uses d3.schemeSpectral, and legend interactions are handled through d3 event listeners.

Jjlongwellchc
93% match
Loading thumbnail…

D3 Choropleth Map - interactable

This interactive choropleth map visualizes world economies using a color-coded legend. Users can click legend items to highlight countries matching the selected economic category, with non-matching countries dimmed to 20% opacity. The map uses D3 v7 with d3.geoNaturalEarth1 projection, d3.geoPath for SVG rendering, and d3-scaleOrdinal with d3.schemeSpectral. Data comes from World Atlas TopoJSON and TSV files, with the legend built through reusable functions that manage unidirectional data flow and zoom support.

YYoung Song
93% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of world economies displays countries colored with an ordinal spectral scale. Users click a legend to filter the map, highlighting matching countries and dimming all others. Built with D3 v5, the map uses a natural Earth projection with `d3.geoPath` and `d3.geoNaturalEarth1`. Economic data comes from a TSV file loaded via `d3.tsv`, while country boundaries are processed from TopoJSON using the `topojson` library. The visualization supports zooming and panning via the `d3.zoom` API.

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

Choropleth Map with interactive filtering!

This choropleth map visualizes world economies using a natural Earth projection, with each country colored by economic category through d3.scaleOrdinal and d3.schemeSpectral. Hovering highlights countries, while clicking a legend item filters the map to show only matching categories, dimming others via opacity adjustments. Built with d3.geoPath, d3.geoNaturalEarth1, and d3.zoom for panning, the data comes from TopoJSON and TSV files. The color legend uses d3 event handlers for interactive filtering.

KKurt J Nilsen
92% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world economies using a spectral color scale, with each country colored according to its economic classification. Users can click legend items to filter the map, highlighting countries matching the selected economy while dimming others. The visualization uses D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.scaleOrdinal`, and `d3.schemeSpectral` to render SVG paths. Data comes from a World Atlas TopoJSON file joined with TSV metadata, and interactive zooming is enabled through D3's `zoom` event system.

RRoger Yu-Hsiang Lo
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