Chloropeth Map with Interactive Filtering

100%

Chloropeth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Feb 14, 2021

Created on Dec 19, 2020

A choropleth map colors world countries by economy using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, dimming unselected countries and enlarging the selected one’s stroke. The visualization supports zooming and panning via d3.zoom, uses d3.geoNaturalEarth1 and d3.geoPath for projection, and loads TopoJSON and TSV data from the world-atlas package. A hovering effect turns countries pink.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Chloropeth Map

A choropleth map colors countries by economy using a D3 v5 ordinal color scale with a spectral scheme. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from TopoJSON world-atlas data, with a legend built via a custom `colorLegend` function. Hovering highlights a country in pink, and a zoom interaction is implemented with `d3.zoom`. The map is rendered as SVG with a dark blue ocean background.

MMuhammad Jarir Kanji

94% match

Loading thumbnail…

Chloropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using an ordinal color scale, with a linked legend for interactive filtering. Clicking a legend category dims non-matching countries and highlights selected ones, while clicking again clears the filter. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map projection, and d3.zoom for pan and zoom. Data comes from world-atlas TopoJSON and TSV files; colors are applied via d3.scaleOrdinal with the GnBu scheme.

Ffbudwill

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…

Chloropleth Map with interactive filtering-1

A choropleth map displays global economic classifications, with a linked color legend for interactive filtering. Clicking a legend category dims non-matching countries and highlights those selected. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Data comes from TopoJSON world-atlas and TSV metadata, rendered as SVG paths with hover effects.

Jjblaskovich

92% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, reducing the opacity of non-matching countries and highlighting the selected category. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world features from TopoJSON data, while d3.zoom enables panning and zooming on the SVG. Hovering a country turns it red via CSS.

CCarloGato

92% match

Loading thumbnail…

Chloropeth Map with interactive filter

This choropleth map visualizes global economic data using a natural Earth projection, with countries colored on an ordinal red-yellow-green scale. Users can click legend items to filter the map, dimming non-matching countries and fading the sphere background. Built with React and D3 v5, it uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal, with data loaded from world-atlas TopoJSON and TSV files. The SVG rendering includes smooth transitions on legend circle updates.

BB Sundaresan

92% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by economic classification, with an interactive legend that filters which countries remain highlighted. Users click legend categories to isolate specific economic groups, dimming non-matching countries to 10% opacity. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for panning, and a d3.scaleOrdinal with schemeSpectral for coloring. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package. The SVG rendering supports hover effects and a legend built with custom SVG groups and circles.

Ggabcoderboi

91% match

Loading thumbnail…

Chloropleth Map Interactive

This interactive choropleth map displays world countries colored by their economic classification using an ordinal color scale. Users can click legend items to filter and highlight countries matching the selected economy type, with non-matching countries fading to low opacity. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering country boundaries as SVG paths, with d3.zoom enabling pan and zoom interactions. Data comes from TopoJSON world atlas files, while the interactive legend is built with custom d3 selections and click handlers.

IIsabel

91% match