Untitled

100%

✓ Published0🌍 Public

Last edited Feb 21, 2020

Created on Feb 21, 2020

Forked from Choropleth Map with Interactive Filtering

A choropleth map of Central Java regions colors each district by its economy category. Hovering over a color legend item filters the map, highlighting regions in that category while dimming all others; clicking the same item again removes the filter. The visualization uses D3 v5 with `geoNaturalEarth1` projection, `geoPath` for rendering, and `scaleOrdinal` with `schemeSpectral` colors. It loads TopoJSON from an Indonesia atlas and merges it with TSV data from the World Atlas.

AI-generated description

A choropleth map where you can hover over items in the color legend items to interactively filter!

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

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.

MMukund Khandelwal

83% match

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

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

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

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

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

79% match

Loading thumbnail…

Choropleth Map

A choropleth map colors countries according to their economy type, with a custom ordinal color legend and hover interactions that highlight each nation. The visualization renders an SVG world map using a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, while supporting pan and zoom through `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV datasets, processed with `topojson.feature` and loaded asynchronously. The color scale uses `d3.scaleOrdinal` with `d3.schemeSpectral`, and the legend is built with custom D3 enter/merge/exit selections.

Yyejichun@naver.com

79% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters highlighted regions. Users can click legend items to dim non-matching countries and emphasize selected categories, while zoom and pan are enabled via d3.zoom. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.scaleOrdinal with a spectral color scheme. Data comes from the world-atlas TopoJSON dataset, with country names and economy values loaded from TSV metadata.

JJuyeonee

78% match