Choropleth Map with interacti filtering D3.js

100%

Choropleth Map with interacti filtering D3.js

✓ Published0🌍 Public

Last edited Feb 7, 2020

Created on Feb 6, 2020

This choropleth map visualizes global income groups, with countries colored according to a categorical scale. Users can click legend items to filter the map, dimming countries that do not match the selected category. The visualization is built with D3.js v5, using `geoNaturalEarth1` and `geoPath` for map projections and SVG paths for rendering. Data is loaded from the World Atlas TopoJSON and TSV datasets, with the color legend implemented as an interactive SVG component.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Choropleth Map with D3.js

This choropleth map visualizes global income groups using a color scale based on the Spectral scheme. The map is rendered with SVG paths generated by D3.js’s `geoPath` projection, and the world country boundaries come from the `world-atlas` TopoJSON dataset. Users can zoom and pan the map via the `zoom` event, and a color legend displays the ordinal scale’s categories. Data is loaded from the TSV file, merged with geographic features, and country names and income groups appear on hover via tooltips.

Ddanhuijia

92% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global income groups using a natural Earth projection, with countries colored by income classification. Clicking a color legend item filters the map to highlight only countries in that group, dimming all others and adjusting the sphere’s opacity. Hovering reveals country names and values via SVG titles. Built with d3.geoPath, d3.zoom, and d3.scaleOrdinal, it loads TopoJSON and TSV data from the world-atlas package, with interactive legend selection managed through d3 event handlers.

Rraylexlee

92% match

Loading thumbnail…

Choropleth Map w Interactive Filtering

This choropleth map displays global income groups, color-coded using a spectral scale and an interactive zoom projection built with D3’s geoNaturalEarth1 projection and geoPath. The map renders country boundaries from World Atlas TopoJSON and TSV data, with a custom legend generated by colorLegend.js. Users can pan and zoom via the zoom overlay, while hovering over a country highlights it in gray and reveals its name and income group in a tooltip. The visualization demonstrates SVG-based DOM manipulation and event handling through D3’s selection and event APIs.

Cceresfin

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This example presents an interactive choropleth map of the world, coloring countries according to their income group using an ordinal color scale. Users can click a legend item to filter the map, dimming all countries that do not match the selected income group, and click again to clear the filter. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for rendering map shapes, with zooming enabled via the `zoom` API. Data is loaded from the World Atlas TopoJSON and TSV files, processed using the `topojson` library, and rendered as SVG in a React-based workflow.

MMatthew Rubino

91% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map displays world countries colored by income group using an ordinal color scale, with a zoomable, panning natural Earth projection. Clicking a legend swatch filters the map by highlighting matching countries and dimming others. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for map interaction, while a custom colorLegend component handles click-driven filtering. Data comes from the world-atlas TopoJSON and TSV files, with countries rendered as SVG paths and hover effects changing fill color.

JJason-Manbodh

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Ffloresh

90% match

Loading thumbnail…

Choropleth map with interactive filtering

A choropleth map of world countries colored by income group, with interactive filtering through a color legend. Clicking a legend category highlights matching countries and dims others; clicking again clears the filter. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with zoom controls from `d3.zoom`. It loads TopoJSON country boundaries from the world-atlas dataset, merges names from a TSV file, and renders in SVG with `d3.scaleOrdinal` and `schemeSpectral`.

PPeter S

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows global economies by income group, with a color legend that filters countries by category. The map renders world geography using d3.geoPath with a Natural Earth projection, while a d3.scaleOrdinal with a spectral scheme assigns colors. Clicking a legend entry dims non-matching countries and highlights the selected group, using D3 v5’s zoom behavior for panning. The visualization loads TopoJSON and TSV data from the World Atlas package and draws everything as SVG.

RRenato Francia Castillo

90% match