Swanton Choropleth Map With Interactive Filtering

100%

Swanton Choropleth Map With Interactive Filtering

✓ Published1🌍 Public

Last edited Feb 20, 2019

Created on Sep 29, 2018

A choropleth map of the world colors each country by its economy type using a spectral ordinal color scale derived from World Atlas TopoJSON data. Interactive filtering dims non-selected countries and highlights the chosen economy when a legend swatch is clicked. The visualization uses D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, and `zoom` for panning, while the legend handles click events to toggle the filter. The SVG rendering includes hover effects, tooltips, and a semi-transparent background.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Swanton Choropleth Map

This choropleth map uses color to depict the economic classification of each country, rendered as an SVG via D3's `geoPath` and `geoNaturalEarth1` projection. Hovering a country turns it gray and reveals its name and economy in a tooltip. The map loads world geography and tabular data from the world-atlas package, and displays a color legend built with custom `colorLegend` logic. The visualization supports zooming and panning through D3's `zoom` component.

Jjons288

91% match

Loading thumbnail…

Swanton's Travels

A choropleth map displays world countries colored by income group, with a color legend for filtering. Clicking a country highlights it and dims all others; clicking again resets. The map uses D3's `geoNaturalEarth1` projection with `geoPath` for rendering shapes, and supports zooming via the `zoom` event. Data is loaded from a CSV of travelers and a TopoJSON world atlas, processed with `topojson.feature`. An ordinal spectral color scale maps economy categories.

Jjons288

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economy category and includes an interactive color legend for filtering. Hovering a legend item highlights matching countries and dims all others, while clicking toggles the selection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths with click-driven state updates.

JJunyanL

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by their economy category, with an interactive color legend that filters which countries remain highlighted. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for geographic rendering, `zoom` for panning and scaling, and a `scaleOrdinal` with a spectral scheme for categorical colors. Data comes from TopoJSON world-atlas files merged with TSV metadata, and clicking a legend tick dims all non-matching countries.

MMichał Szumnarski

90% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world economies using a color gradient, with an interactive legend that filters countries by economic category. Users can zoom and pan the map, and clicking a legend entry dims non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.zoom for navigation. Data comes from the world-atlas TopoJSON and TSV datasets, with unemployment type and population shown in tooltips. The color scale uses d3.schemeSpectral, and legend interactions are handled through d3 event listeners.

Jjlongwellchc

90% match

Loading thumbnail…

Choropleth map interactive filtering

This example presents a choropleth map of the world, where countries are colored according to their economy using a spectral color scale. The map supports interactive filtering: hovering highlights a country, and clicking a legend item dims all countries except those matching the selected economy category. The visualization is rendered as SVG using d3.geoPath with a geoNaturalEarth1 projection, while the color legend is built with d3.scaleOrdinal and d3.schemeSpectral. Country data comes from the world-atlas TopoJSON dataset, merged with TSV metadata. The zoom and pan interaction is enabled through d3.zoom, applying event.transform to the map group.

SSagar Malviya

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economies using color-coded countries, with interactive filtering through a clickable color legend. Hovering over legend items dims non-matching countries, while clicking toggles filtering and highlights selected categories. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from TopoJSON world-atlas files, with country names and economy classifications merged from TSV metadata.

Sszy1900

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes the world's economies, coloring each country according to its economic classification. Users can zoom and pan the map via `d3.zoom`, while the color legend offers an interactive click handler, though its filtering effect is not implemented. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, using `d3.geoPath` with a `geoNaturalEarth1` projection to render countries as SVG paths. A spectral color scale maps economy categories to hues, and hovering highlights a country in coral.

MMichał Szumnarski

90% match