Skip to main content
SimilarExport ZIP
100%

D3 Choropleth Map - interactable

✓ Published0🌍 Public
YYoung Song
Last edited Jun 27, 2022
Created on Jun 26, 2022
Forked from D3 Choropleth Map

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.

AI-generated description
  • Making the Color Legend Clickable
  • Implementing Unidirectional Data Flow
  • Highlighting the selected color value
  • Componentizing the Choropleth Map
  • Highlighting countries using the selected color value
MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays global economic data, coloring each country according to its economy category. Users can click a color in the legend to filter the map, highlighting matching countries and dimming others, with the sphere and non-matching countries reduced in opacity. The visualization uses the d3.geoPath and d3.geoNaturalEarth1 projections to render geographic shapes, while d3.scaleOrdinal and d3.schemeSpectral drive the color assignments. Geographic and tabular data are loaded from the World Atlas TopoJSON and TSV files via d3.json and d3.tsv.

NNilla
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…

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

Choropleth Map with Interactive Filtering

This choropleth map visualizes world economies by color-coding countries according to their economic classification. Users can click legend categories to filter the map, highlighting matching countries while dimming others; clicking again resets the filter. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, while d3.scaleOrdinal with d3.schemeSpectral supplies the color scale. Data comes from the world-atlas dataset, loaded via d3.tsv and topojson.feature.

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

Choropleth Map with Interactive filtering

This choropleth map of world economies uses color to encode categorical economic data, with an interactive legend that filters which countries are highlighted. Clicking a legend value dims all countries not in that category while emphasizing those that match. The visualization is built with d3.geoPath and d3.geoNaturalEarth1 for map projections, d3.scaleOrdinal with schemeSpectral for coloring, and a custom colorLegend component with click handlers. Country data comes from World Atlas TopoJSON and TSV files, rendered as SVG paths.

NNico Donovan
92% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world economies by color, with an interactive legend that filters countries by economic category. Clicking a legend item dims non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render TopoJSON data from the world-atlas package, while d3.scaleOrdinal with schemeSpectral assigns colors. Zoom and pan are enabled via d3.zoom, and clicking legend items toggles opacity and stroke styling through SVG attributes.

PPyRed1
92% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic data by coloring countries according to a categorical color scale. Users can click legend entries to highlight countries matching the selected category, dimming all others. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection and `d3.scaleOrdinal` for coloring. The map loads country boundaries and economic classifications from a world-atlas TopoJSON dataset, while the interactive legend and country paths are rendered as SVG elements.

Iinroadings
92% match