Choropleth Map with D3 and SVG Final

100%

Choropleth Map with D3 and SVG Final

✓ Published1🌍 Public

Last edited Dec 27, 2022

Created on Dec 27, 2022

This interactive world map uses a stereographic projection to display countries colored by income group. Built with D3 v5 and rendered as SVG, it loads GeoJSON and TSV data from the world-atlas package. Users can pan and zoom the map, which features a color legend and tooltips showing country names and income classifications. The visualization relies on d3.geoStereographic, d3.geoPath, d3.scaleOrdinal, and d3.zoom APIs.

AI-generated description

Interactive Worldmap with geoStereographic view.

Bostock: worldmap

Bostock: Dataset for title function to return country names

The Data is pulled from unpkg file and linked based on income group. The data can be change if prefer.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with D3.js!

This choropleth map visualizes global income groups using D3.js to color each country based on its economic classification. Built with d3.geoNaturalEarth1 projection and d3.geoPath, the SVG renders geographic boundaries from TopoJSON data sourced from the world-atlas package, with income labels joined from a TSV file. The map includes an ordinal color scale using d3.scaleOrdinal and d3.schemeSpectral, supplemented by a custom color legend component. Interactive features include zooming via d3.zoom and hover effects that highlight individual countries in red.

CCarloWK1202

89% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using a categorical color scale with a spectral scheme. The visualization supports zooming and panning through d3.zoom, with country names and income groups revealed via tooltips on hover. Built with d3.geoPath and geoNames from the world-atlas TopoJSON dataset, it renders as SVG paths over a blue sphere. A custom color legend component displays the ordinal scale’s domain, while hover interactions highlight individual countries in red.

Mmla341

89% match

Loading thumbnail…

Choropleth Map with D3.js

This choropleth map visualizes global income groups using a color scale based on the Spectral scheme. The map is rendered with SVG paths generated by D3.js’s `geoPath` projection, and the world country boundaries come from the `world-atlas` TopoJSON dataset. Users can zoom and pan the map via the `zoom` event, and a color legend displays the ordinal scale’s categories. Data is loaded from the TSV file, merged with geographic features, and country names and income groups appear on hover via tooltips.

Ddanhuijia

88% match

Loading thumbnail…

Choropleth map with D3.js!

This choropleth map visualizes world countries colored by income group using D3.js. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with country boundaries loaded from TopoJSON world-atlas data and income classifications joined from a TSV file. A color legend built with `scaleOrdinal` and `schemeSpectral` displays the categorical color scale. Interactive zooming is implemented through `d3.zoom`, and hovering over a country highlights it in red while a tooltip reveals its name and income group.

Fforcox43

88% match

Loading thumbnail…

Choropleth Map with interactions

A choropleth map of world countries, colored by economic income group, supports interactive exploration. The map uses a natural Earth projection and is rendered as SVG. A color legend allows selection and highlighting of specific categories, while zooming and panning are enabled via d3.zoom. Data is loaded from the World Atlas TopoJSON and TSV files, and the visualization is implemented with d3.geoPath and d3.scaleOrdinal. Hovering a country displays its name and value in a tooltip.

Ggilbster

88% match

Loading thumbnail…

Choropleth World Map w/ D3.js

A choropleth world map colors countries by income group using a spectral color scale, with a legend showing the categorical mapping. The visualization is built with D3.js v5 and rendered as SVG paths projected via `d3.geoNaturalEarth1` and `d3.geoPath`. Country boundaries come from TopoJSON data (world-atlas), enriched with income attributes from a TSV file. Zooming is supported through `d3.zoom`, and the legend’s circles and labels are generated using a reusable `colorLegend` function.

Ppeterjchan

88% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a natural Earth projection, with a categorical color scale and a clickable legend of colored circles. The map supports zooming and panning via d3.zoom, and country tooltips display name and income group. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render SVG paths from TopoJSON data loaded from world-atlas, while the legend is implemented as a custom reusable component.

TToooooooT

88% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a red-blue ordinal color scale, with a zoomable Natural Earth projection rendered as SVG paths. It loads world country boundaries from the World Atlas TopoJSON dataset and joins them to TSV metadata by ISO country code. The map includes an interactive color legend built with custom D3 selections, and uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal with schemeRdBu. Hovering highlights individual countries, and a title tooltip shows each country’s name and income group.

AAdrian Tan

88% match