Skip to main content
SimilarExport ZIP
100%

Focus_Example

✓ Published0🌍 Public
Kknstrom
Last edited Mar 3, 2022
Created on Mar 3, 2022

This interactive choropleth displays country economies using a categorical color scale from `schemeGreens`, with World Atlas TopoJSON data and a natural Earth projection via `d3.geoPath`. Clicking a country or legend item isolates that value, dimming all other map regions and legend ticks. Zoom and pan are enabled through `d3.zoom`. Hovering shows country names and values via SVG `<title>`. The visualization uses a d3 v5 ordinal scale and modular ES6 imports, rendering entirely as SVG.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive

A world choropleth map colors countries by economic classification, using a spectral ordinal color scale. Users can click any country to highlight it and dim all others, or click again to clear the selection; clicking legend swatches filters the map to a specific category. The visualization uses d3.geoNaturalEarth1 with d3.geoPath to render TopoJSON country outlines from the world-atlas dataset, d3.scaleOrdinal for coloring, and d3.zoom for panning and scaling. An SVG legend, built with custom functions, adds interactive filtering and selection feedback.

ZZhi Guangda
84% match
Loading thumbnail…

Interactive Filtering

This interactive choropleth map visualizes country-level economic data from the World Atlas, rendered as SVG projections using D3’s `geoNaturalEarth1` and `geoPath` APIs. Users click countries to highlight them, which dims all others, and adjust the categorical color legend to filter which economies appear vivid. A color scale from `scaleOrdinal` with `schemeSpectral` maps economy types, while pan and zoom controls rely on D3’s `zoom` event. Country data combines TSV attributes with TopoJSON geometry via `topojson.feature`.

NNikhil Prakash
84% match
Loading thumbnail…

Choropleth Map Interactive

This interactive choropleth map displays countries colored by their economy category, using a spectral color scale and a natural Earth projection. Users can click legend swatches to highlight matching regions while dimming others. The visualization is built with D3 v5 modules including `geoNaturalEarth1`, `geoPath`, and `zoom`, rendering vector shapes as SVG. It loads geographic data from the World Atlas TopoJSON and TSV files, processing them via `topojson.feature`. A dedicated color legend component supports selection filtering, while CSS hover effects emphasize individual countries.

MMunTatt Yap
84% match
Loading thumbnail…

Choropleth Map with Interactive Practice

This visualization presents a world choropleth map coloring countries by economic classification using a spectral color scale, with an interactive legend that filters highlighted countries on click. Built with D3 v5, it employs `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and `d3.zoom` for panning and zooming. Country data comes from the World Atlas TopoJSON and TSV files, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering over a country turns it red, and the legend’s clickable ticks dim non-selected categories.

Ccpsshan
83% match
Loading thumbnail…

Choropleth Map with Interactive Practice

This visualization presents a world choropleth map coloring countries by economic classification using a spectral color scale, with an interactive legend that filters highlighted countries on click. Built with D3 v5, it employs `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and `d3.zoom` for panning and zooming. Country data comes from the World Atlas TopoJSON and TSV files, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering over a country turns it red, and the legend’s clickable ticks dim non-selected categories.

Ccpsshan
83% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a color scale based on world-atlas TopoJSON data. Users can click legend items to highlight countries matching that category while dimming others, and hover effects further emphasize individual countries. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.zoom for panning and zooming, and d3.scaleOrdinal with schemeSpectral for color encoding. The legend and map are built as separate SVG components that re-render when the selection changes.

Ggcappadaniel
83% match
Loading thumbnail…

Interactive choropleth map filtering

An interactive choropleth map displays global economic classifications using color-coded countries over a natural Earth projection. Clicking legend entries filters the map, dimming unselected economies and highlighting the chosen one while allowing zoom and pan through d3.zoom. The visualization uses d3.geoPath to render TopoJSON world-atlas data, d3.scaleOrdinal with schemeSpectral for color mapping, and SVG elements with transitions managed by D3’s data join. Hovering changes country fill to red, and tooltips show country names and values.

Zzenoe
83% match
Loading thumbnail…

choropleth map

This choropleth map shows global economies colored with a sequential green scale, with a hover effect that highlights individual countries and a legend displaying the ordinal color categories. The visualization uses d3.geoPath with a natural Earth projection to render country boundaries from TopoJSON data provided by the world-atlas package, while loadAndProcessData merges TSV metadata with the geometry. Interactions include d3.zoom for panning and zooming the map, and colorLegend renders the categorical legend as an SVG group with circles and text labels.

AAndrew Fletcher
83% match