Fork of Colorpleth Map with interactive filtering

100%

Fork of Colorpleth Map with interactive filtering

✓ Published0🌍 Public

Last edited Aug 1, 2023

Created on Aug 1, 2023

Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic data by country, with a color legend that doubles as an interactive filter. Users click legend items to highlight matching regions while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering, and d3.zoom for panning. The legend employs scaleOrdinal with schemeSpectral colors, and onClick handlers toggle selection. Data comes from world-atlas TopoJSON and TSV files, processed via topojson.feature, with SVG output.

RRoland

92% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications with an interactive color legend that filters countries by category. Clicking a legend item highlights matching countries while dimming others, and clicking again removes the filter. The map uses D3 v5 with `geoNaturalEarth1` projection, `geoPath`, and zoom behavior, while the legend leverages `scaleOrdinal` with `schemeSpectral` colors. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG with hover tooltips showing country names and values.

Vvivianaaai@qq.com

91% 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…

Fork of Choropleth Map with Interactive Filtering

This choropleth map presents world countries colored by economic classification, with an interactive color legend that filters highlighted regions on click and hover. Users can zoom and pan the map, while clicking a legend category dims non-matching countries and re-clicking clears the filter. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map projection, `d3.zoom` for navigation, and `d3.scaleOrdinal` with `schemeSpectral` for coloring. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG paths with tooltips.

Aarbekos

91% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economy type, with an interactive color legend that filters the map when clicked. Hovering over legend items dims non-matching countries, while selected countries are highlighted and the sphere fades to emphasize the filter. Built with d3.v5, it uses d3.geoNaturalEarth1, d3.geoPath, d3.scaleOrdinal, and d3.zoom for panning and zooming, rendering as SVG from TopoJSON world-atlas data.

NNICHAPA

91% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This interactive choropleth map displays the world’s countries colored by their economic classification, with a color legend that filters the map when clicked. Clicking a legend value highlights corresponding countries and dims all others; clicking again clears the filter. Hovering a country reveals its name and value in a tooltip. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render country paths, and a custom `colorLegend` module for the clickable legend. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG.

CClara Hu

91% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

A choropleth map of world economies lets users filter countries by clicking legend items, with unselected countries fading to low opacity. The map uses d3.geoPath with a geoNaturalEarth1 projection and a d3.scaleOrdinal color scale with the schemeSpectral palette, rendering as SVG. The color legend, built with custom enter/merge/exit logic, triggers updates via click handlers that toggle the selected category. Geographic data comes from world-atlas TopoJSON, paired with economic metadata from a TSV file.

Ffrozengem397

90% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes countries colored by economy category using a natural Earth projection. Users can click legend items to filter the map, highlighting matching countries while dimming all others, and can also zoom and pan the SVG view. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for map rendering, with a d3.scaleOrdinal and schemeSpectral for color encoding. It loads geographic and metadata from the World Atlas TopoJSON and TSV datasets, while the color legend enables interactive filtering through click handlers.

Ggalyniayaroshenko

90% match