Skip to main content
SimilarExport ZIP
100%

(interactive) Choropleth Map

✓ Published0🌍 Public
ZZY Huang
Last edited Apr 27, 2020
Created on Apr 27, 2020
Forked from Choropleth Map

This interactive choropleth map visualizes global economic data across countries using a spectral color scale. The map supports zooming and panning via d3.zoom, with a clickable color legend that highlights matching countries and dims others. Built with d3-geoPath and a Mercator projection, it renders SVG paths from TopoJSON data sourced from the world-atlas dataset. The legend uses d3.scaleOrdinal and d3.schemeSpectral to map categorical values to colors, with opacity transitions indicating selection state.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic data by coloring countries according to a categorical color scale. Users can click legend entries to highlight countries matching the selected category, dimming all others. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection and `d3.scaleOrdinal` for coloring. The map loads country boundaries and economic classifications from a world-atlas TopoJSON dataset, while the interactive legend and country paths are rendered as SVG elements.

Iinroadings
92% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a color scale, where users can click on color legend items to interactively filter the map. The map renders countries as SVG paths using `d3.geoPath` with a Natural Earth projection, while the legend employs `d3.scaleOrdinal` with a spectral color scheme. Hovering reveals country names and values via `<title>` elements. Clicking a legend category dims non-matching countries, and zooming is enabled through the `d3.zoom` module. Data originates from the world-atlas TopoJSON and TSV files.

ZZG
92% match
Loading thumbnail…

d3 Choropleth Map

This interactive choropleth map visualizes countries colored by economic classification, using a spectral color scale with a legend for reference. The map responds to zoom and hover interactions, highlighting countries on hover. Built with d3.js, it uses `geoPath` and `geoNaturalEarth1` for geographic projection, `scaleOrdinal` and `schemeSpectral` for coloring, and a custom `colorLegend` component. Data is loaded from world-atlas TSV and TopoJSON sources, rendered as SVG paths on a blue sphere background.

JJohnPaulPagelerJr
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economic data, colored by country using a spectral ordinal scale, lets viewers filter countries by clicking a color legend. The map renders with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, supporting pan and zoom through `d3.zoom`. Legend clicks toggle highlighting of matching countries, dimming others. Country data merges TopoJSON geometries with TSV attributes from the world-atlas dataset, and legend interactions redraw both map and legend.

Iianleekq
91% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification, using a spectral color scale and an interactive legend to indicate the mapping. Users can zoom and pan the map, which is rendered with SVG paths generated by the `d3.geoPath` and `geoMercator` projections. The visualization loads country boundaries and metadata from the world-atlas TopoJSON and TSV files, processed via the `topojson` library. Hovering over a country highlights it in red and displays its name and economy in a tooltip.

ZZY Huang
91% match
Loading thumbnail…

Choropleth map with interaction

This choropleth map displays global economic data, with each country colored according to its economy category. Clicking a color legend item filters the map, dimming non-matching countries and highlighting the selected category; clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country shapes from TopoJSON data, while d3.scaleOrdinal and schemeSpectral define the color encoding. d3.zoom enables panning and zooming, and the color legend uses d3 selections with click handlers for interaction.

MMatan
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications using color-coded countries on a natural Earth projection. Users can click legend items to filter and highlight specific categories while dimming others. The visualization uses d3.geoPath to render country shapes from TopoJSON data and d3.scaleOrdinal with a spectral color scheme. Interactive zooming is implemented with d3.zoom, while legend clicks trigger re-rendering with adjusted opacity values.

Xxsg13
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country’s economic group, with an interactive color legend that filters the map by clicking a category. Pan and zoom via d3.zoom reveal spatial patterns, while hovering shows country names and values through SVG titles. The visualization is built with d3.geoNaturalEarth1 and d3.geoPath, using ordinal color scaling with d3.scaleOrdinal and d3.schemeSpectral. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths, with the legend updating opacity to dim unselected countries.

Llkjcbl
91% match