d3 Choropleth Map

100%

d3 Choropleth Map

✓ Published3🌍 Public

Last edited Mar 20, 2019

Created on Feb 27, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Choropleth Map

This choropleth map colors countries by economic classification using a spectral color scale, with a legend showing the ordinal categories and hover effects highlighting individual countries. The map is rendered as an SVG using d3.geoPath with a geoNaturalEarth1 projection, while d3.zoom enables interactive panning and zooming. Data is loaded from the world-atlas TopoJSON and TSV files via topojson.feature, and the color legend is built custom with d3.scaleOrdinal and d3.schemeSpectral.

Aaslamluqman

95% match

Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country using color-coded regions. Users can filter the map by clicking legend categories, which dims non-matching countries and highlights those with the selected value. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render SVG map paths, while d3.scaleOrdinal and schemeSpectral assign colors. Data is loaded from world-atlas TopoJSON and TSV files, and interactions rely on the d3.event zoom and legend click handlers.

JJohnPaulPagelerJr

94% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries colored by their economic classification, using a spectral color scale to distinguish categories. The map renders geographic boundaries as SVG paths via `d3.geoPath` and a Natural Earth projection. Data is loaded from the World Atlas TopoJSON and TSV files, merged by country ID, then assigned to the `d3.scaleOrdinal` color scale. A custom legend shows color swatches with labels, and hovering highlights individual countries in red. Interaction includes zoom and pan through the `d3.zoom` event, which applies an SVG transform.

CCurran Kelleher

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a spectral color scale, with hover highlighting and zoom/pan enabled via d3.zoom. The visualization loads world geometry from TopoJSON and joins it with tab-separated country metadata from the world-atlas dataset. It renders geographic paths with d3.geoPath and a Natural Earth projection, while a custom color legend displays ordinal color domains using SVG circles and text.

NNilla

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with a spectral scheme. Hovering highlights a country in red, and the map includes a legend showing color categories. Built with D3 v5, it uses `geoPath` with the Natural Earth projection and loads geographic data from the world-atlas TopoJSON and TSV files. The visualization supports zooming via D3's zoom event and renders as an SVG.

AAdrianTNare

93% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with the spectral scheme, sourced from the World Atlas TopoJSON dataset. The map supports interactive zooming and panning, and clicking a legend item highlights matching countries while dimming others. It is built with D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` for geographic projections, and `d3.zoom` for navigation, with all elements rendered as SVG.

Mmaru25-alt

92% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries’ economic classifications using a color scale based on the world-atlas TopoJSON dataset. The map renders with d3.geoPath and a natural Earth projection, while a d3.scaleOrdinal with schemeSpectral colors fills each country. Hovering highlights countries in pink, and a color legend explains the ordinal scale. Users can zoom and pan via d3.zoom, with all interaction and styling implemented in SVG.

CCassie

92% match

Loading thumbnail…

Choropleth map

A choropleth map colors world countries according to their economic classification, with a color legend that filters and highlights selected categories. Users can click legend entries to dim non-matching countries and intensify the selected region. Built with D3.js, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project TopoJSON data from the world-atlas package, while `d3.scaleOrdinal` with `d3.schemeSpectral` assigns colors. Interactive zoom via `d3.zoom` and SVG rendering provide the map interface.

Nntech9613

92% match