Untitled

100%

✓ Published0🌍 Public

Last edited Oct 24, 2018

Created on Oct 24, 2018

Forked from Project | Primary Balance | Chloro | Filter

This example displays a world choropleth map colored by each country’s economy category, with an interactive legend that filters and highlights selected categories. It uses d3.geoPath and d3.geoNaturalEarth1 for geographic rendering from TopoJSON data loaded via topojson.feature, with d3.scaleOrdinal and schemeSpectral mapping categories to colors. The legend and map respond to clicks, adjusting opacity and stroke widths, while d3.zoom enables panning and zooming.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows a choropleth map of world countries colored by their economy category, using a spectral color scale. The visualization renders SVG paths via d3.geoPath with a natural Earth projection, while d3.zoom enables panning and zooming. A custom color legend component displays ordinal values with circles and text, and hovering over any country highlights it in red. Data comes from the world-atlas TopoJSON and TSV files, with countries styled using CSS stroke and fill properties.

00718103673

92% match

Loading thumbnail…

Untitled

This example presents a choropleth map of the world, coloring each country according to its economic classification. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1()` and renders SVG paths with `d3.geoPath`. Country boundaries are stroked in black, and hovering turns a country black. The code merges TopoJSON geometry with TSV data, and colors are assigned using `d3.scaleOrdinal` with a reversed `d3.schemeSpectral` palette, where the legend is not shown. Data is sourced from the `world-atlas` package and a custom TopoJSON file.

Vvenkatajayanth03

89% match

Loading thumbnail…

world map

This example shows a choropleth world map colored by each country's economy classification, with a clickable color legend that filters and highlights matching countries while dimming others. The map uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, with d3.zoom enabling pan and zoom interactions. A d3.scaleOrdinal maps the spectral color scheme to the economy categories, and tooltips display country names and values. The SVG rendering includes CSS hover effects and opacity transitions for non-selected regions.

Zzhangfa

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

87% match

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

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

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

87% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

MMukund Khandelwal

87% match