Chloropeth Map with interactive filter

100%

Chloropeth Map with interactive filter

✓ Published0🌍 Public

Last edited Jul 16, 2020

Created on Jul 16, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Chloropeth Map

This choropleth map visualizes countries by their economic classification using a red-yellow-green color scale. Built with React and D3, it renders geographic boundaries via the `d3.geoPath` projection on a natural Earth base layer, with country data loaded from TopoJSON and TSV files. A color legend with animated transitions shows the ordinal scale mapping, and the map supports interactive zooming through `d3.zoom` events, while hover states provide tooltips with country names and economic values.

BB Sundaresan

93% match

Loading thumbnail…

Chloropeth Map with Interactive Filtering

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.

MMuhammad Jarir Kanji

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

91% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map visualizes countries' economies using color-coded paths, with an interactive legend that filters the map by economic classification. Clicking a legend category dims non-matching countries and highlights those selected, while a semi-transparent sphere provides geographic context. Built with React and D3 v5, the example uses `geoPath` with the `geoNaturalEarth1` projection for rendering SVG paths, `scaleOrdinal` and `schemeSpectral` for the color scale, and `zoom` for pan and zoom interactions. Data is loaded from the world-atlas package and processed via `topojson.feature`.

AAnShed

90% match

Loading thumbnail…

Chloropleth Map - Interactive

This interactive chloropleth map displays global economic data by country, with a color legend that filters the map to highlight selected categories. The visualization uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections to render the world map, while the legend leverages `scaleOrdinal` and `schemeSpectral` for color mapping. Users can click legend ticks to isolate specific economic classifications, with non-selected countries dimmed and the selected category emphasized. The map also supports zooming via D3’s `zoom` event, and country data is loaded from the world-atlas TopoJSON and TSV sources.

LLeora Wenger

89% 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

89% match

Loading thumbnail…

Choropleth Map - with interactive filtering

This choropleth map displays global economic classifications, coloring each country with an ordinal spectral scale based on its economy attribute. The visualization includes an interactive legend where clicking a category filters the map, dimming non-matching countries and highlighting selected ones. Built with React and D3 v5, it uses `geoPath` and `geoNaturalEarth1` for map projections, supports zooming via the `zoom` API, and loads country boundaries and data from the world-atlas package. The legend is interactive, with click handlers and animated transitions.

JJoseph Popoola

89% 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

89% match