Colorpleth Map with interactive filtering

100%

Colorpleth Map with interactive filtering

✓ Published0🌍 Public

Last edited Nov 28, 2020

Created on Nov 28, 2020

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

AI-generated description

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

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

91% match

Loading thumbnail…

Colorpleth Map with interactive filtering

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.

Ggregosaure

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

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering.js

This choropleth map visualizes countries’ economic classifications using color-coded regions, with an interactive legend enabling users to filter which categories remain highlighted. The map pairs an ordinal color scale with a natural Earth projection via `d3.geoPath`, while a `d3.zoom` handler controls pan and zoom. Clicking a legend option dims non-matching countries and emphasizes the selection, using `d3.scaleOrdinal` and `schemeSpectral`. Data comes from TopoJSON world-atlas shapes merged with TSV attributes, rendered as SVG paths.

NNeepaB

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters map regions by clicking legend items. The visualization combines a world map rendered with d3.geoPath and d3.geoNaturalEarth1, a colorLegend with clickable circles, and d3.zoom for panning and zooming. Country data comes from the world-atlas TopoJSON and TSV datasets, with hover highlighting and tooltips showing country names and values.

CClara Hu

91% match

Loading thumbnail…

Choroplath Map with Interactive Filtering

This choropleth map colors countries by economic category and supports interactive filtering through a clickable legend. Selecting a legend category highlights matching countries while dimming others, and clicking again clears the selection. The map uses d3.geoNaturalEarth1 projection with d3.geoPath, while d3.zoom enables panning and zooming. Color categories are assigned via d3.scaleOrdinal with CSS classes, and the legend’s click handler toggles the filter. Data comes from world-atlas TopoJSON and TSV files, rendered as SVG paths with tooltips showing country names and values.

Nnouralkhoury

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a color scale, where users can click on color legend items to interactively filter the map. The map renders countries as SVG paths using `d3.geoPath` with a Natural Earth projection, while the legend employs `d3.scaleOrdinal` with a spectral color scheme. Hovering reveals country names and values via `<title>` elements. Clicking a legend category dims non-matching countries, and zooming is enabled through the `d3.zoom` module. Data originates from the world-atlas TopoJSON and TSV files.

ZZG

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with a natural Earth projection rendered as SVG paths. An interactive legend allows users to click individual color categories, though the selection only logs to the console rather than filtering the map. The visualization loads world topology from the world-atlas TopoJSON dataset and joins country names from TSV data. The choropleth uses d3.geoPath, d3.scaleOrdinal with schemeSpectral, and d3.zoom for panning and zooming, while the custom colorLegend module handles the clickable legend UI.

Yyejichun@naver.com

91% match