Skip to main content
SimilarExport ZIP
100%

Fork of Interactive Chloropleath Map

✓ Published0🌍 Public
Ppychen01
Last edited Jan 13, 2021
Created on Jan 13, 2021

This interactive choropleth map colors countries by economic classification using data from the world-atlas package. A legend displays color categories, and clicking a legend entry dims all countries except those in the selected class. The map uses d3.geoPath with a Natural Earth projection, supports zoom via d3.zoom, and renders as SVG with tooltips showing country names and values.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Fork of Choroplath Map with Interactive Filtering

This interactive choropleth map colors countries by economic classification using a categorical color scale and topojson data from the World Atlas. Users click the color legend to filter the map, which dims non-matching countries and highlights the selected category via the `onClick` handler. Pan and zoom are enabled with `d3.zoom` and `d3.geoNaturalEarth1` projection for the SVG paths. The legend and map communicate through a shared `selectedColorValue` state, with opacity transitions driven by the color scale.

AAndres de la Garza
90% 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
90% match
Loading thumbnail…

Fork of Choropleth Map

This interactive choropleth map colors countries by economic classification, with a hover effect that turns each country red and a custom color legend showing the categorical scale. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map projections and rendering, while `scaleOrdinal` and `schemeSpectral` assign colors. The map loads world geometry from the world-atlas TopoJSON and TSV files, and supports zooming via the `zoom` event, which updates the SVG group’s transform.

Eexplorer123PiN
89% match
Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by their economic classification using a spectral color scale, with an interactive SVG legend displaying the categories. The map uses the Natural Earth 50m dataset, loaded via the `d3.json` and `d3.tsv` functions, and renders geographic paths with `d3.geoPath`. It employs `d3.scaleOrdinal` for color mapping and `d3.zoom` for pan/zoom interactions, with hover effects highlighting countries in red.

Rrpadron8
89% match
Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes an interactive color legend built with custom D3 selections. The map supports zooming via d3.zoom, and country tooltips display name and economic group. Data comes from the World Atlas TopoJSON and TSV files, loaded with d3.json and d3.tsv, with hover states highlighting countries in red.

Ggeneralshermanw
89% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering F

This choropleth map displays global country-level economic classifications using an ordinal color scale. Users can click legend items to highlight matching countries and dim all others, with a second click clearing the filter. The map uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for pan/zoom interaction, with SVG rendering. Data comes from the world-atlas TopoJSON dataset, joined to TSV metadata. The legend and map are both rendered with D3 selections, and hover effects highlight individual countries.

Ffsajedi22
89% match
Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by economy category, using a categorical color scheme with an interactive color legend built from circles and text. The visualization loads world country boundaries and metadata from the world-atlas package, merges them with TopoJSON processing, and projects the map with d3.geoNaturalEarth1 and d3.geoPath. It supports zooming via d3.zoom and highlights countries on hover by changing their fill to red.

Bboardkeystown
89% match