Skip to main content
SimilarExport ZIP
100%

Colorpleth Map with interactive filtering

✓ Published0🌍 Public
Ggregosaure
Last edited Oct 30, 2020
Created on Oct 30, 2020
Forked from Colorpleth Map

This colorpleth map colors countries by their economy classification using an ordinal color scale. The visualization allows interactive filtering by clicking on legend items, which re-renders the map to highlight only the selected category. Built with React and D3 v5, it uses `d3.geoPath` with a natural Earth projection and draws countries as SVG paths from TopoJSON and TSV data loaded from the world-atlas package. Hovering a country turns it red, and the legend is rendered using the `colorLegend` component with custom click handling.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Colorpleth Map with interactive filtering

This choropleth map colors countries by their economy type using an ordinal color scale. Clicking a legend entry filters the map to highlight countries in that category while dimming others, with the sphere outline fading when a filter is active. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning and zooming, while data comes from a TopoJSON file with TSV metadata. The SVG rendering uses `scaleOrdinal` and `schemeSpectral` for color assignment.

LLongYuu
94% match
Loading thumbnail…

Colorpleth Map with interactive filtering

This interactive choropleth map visualizes economic data across countries using a color scale, with a legend allowing users to filter countries by clicking on specific values. The map renders in SVG using d3.geoOrthographic projection and d3.geoPath, while the accompanying color legend enables selection that highlights matching countries and dims others. Data comes from a CSV file merged with world atlas TopoJSON via d3.csv and topojson.feature. Users can also zoom and pan the map using d3.zoom.

Nnouralkhoury
91% match
Loading thumbnail…

Colorpleth Map

This colorpleth map uses a natural Earth projection to display world countries shaded by their economy type, with a color legend showing the ordinal scale. The visualization supports zooming and panning through d3.zoom, and hovering over a country highlights it in red while revealing its name and economy classification in a tooltip. Data is loaded from the World Atlas TopoJSON and TSV files, with d3.geoPath generating the geographic paths and d3.scaleOrdinal mapping economy categories to a spectral color scheme. The map is rendered as SVG within a React application.

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

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by their economy type, with a color legend that supports interactive filtering. Clicking a legend category highlights matching countries and dims all others, while a zoomable natural Earth projection enables pan and scale exploration. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map rendering, `scaleOrdinal` with `schemeSpectral` for color mapping, and `zoom` for interaction. Country data is loaded from the World Atlas TopoJSON and TSV files.

Lloicvdk
90% match
Loading thumbnail…

Colorpleth Map

This example, titled Colorpleth Map, visualizes global economic data by coloring each country on a natural Earth projection using a spectral color scale. The map renders geographic boundaries with `d3.geoPath` and supports zoom interaction via `d3.zoom`. A legend, built with custom D3 code, displays the ordinal color scale’s domain. The data is loaded from the `world-atlas` TopoJSON and TSV files, with countries colored according to their `economy` property.

Ggregosaure
90% match
Loading thumbnail…

Fork of Colorpleth Map with interactive filtering

This interactive choropleth map displays global economic data by country, where users can click legend items to filter and highlight specific categories. Built with React and D3 v5, the visualization uses d3.geoPath, d3.geoNaturalEarth1, and d3.scaleOrdinal to render an SVG world map. The map and color legend respond to clicks by adjusting opacity, dimming non-selected countries and legend ticks. Data comes from the world-atlas package, which combines TopoJSON geometries with TSV metadata.

SstellaWangg
89% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by their economy category, using an ordinal color scale based on the Spectral scheme. Hovering over a country highlights it in red, while clicking a color legend item filters the map to show only countries in that category, dimming all others. Built with D3 v5, it renders countries as SVG paths using the geoNaturalEarth1 projection, and loads country boundaries and attributes from the world-atlas TopoJSON and TSV datasets. The interactive legend and zoom behavior are implemented through the D3 selection API and the custom zoom event handler.

LLaura Molina
89% match