d3 Choropleth Map

100%

d3 Choropleth Map

✓ Published1🌍 Public

Last edited Mar 26, 2019

Created on Mar 26, 2019

This d3 Choropleth Map visualizes world countries colored by their economic classification from a World Atlas dataset. It uses an SVG rendering with a natural Earth projection and a spectral color scale for the legend. The code employs `d3.geoPath`, `d3.geoNaturalEarth1`, and `topojson.feature` to process and draw the map, while `d3.scaleOrdinal` and `schemeSpectral` define the color categories. A custom legend component displays the color scale with circles and labels, and hovering a country turns it red.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. It uses d3.geoPath with a natural Earth projection to render the countries from a TopoJSON file. The colorLegend component uses d3.scaleOrdinal and schemeSpectral for the color scale, and clicking a legend item reduces the opacity of non-matching countries while highlighting the selected ones.

Jjayjoepark

92% match

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

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

91% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a categorical ordinal color scale from `d3.scaleOrdinal` with the `schemeSpectral` palette. It renders world geography with `d3.geoPath` and a Natural Earth projection, loading TopoJSON country boundaries and TSV metadata from the world-atlas package. A custom color legend built with D3 selections appears alongside the map, while `d3.zoom` enables panning and zooming. The visualization uses SVG elements and includes hover effects that highlight individual countries.

CChenluWang96

91% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

Nnouralkhoury

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

90% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It renders world geography with d3.geoPath and a Natural Earth projection, with zoom and pan via d3.zoom. A color legend built from d3.zoom and custom SVG circles and text displays the categorical levels. The data comes from a GitHub-hosted CSV joined to TopoJSON world atlas geometries using topojson.feature. Hovering highlights individual countries with a red fill.

SSarahKiyani

90% match