d3 Choropleth Map

100%

d3 Choropleth Map

✓ Published2🌍 Public

Last edited Mar 25, 2019

Created on Mar 25, 2019

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.

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

95% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using a categorical color scale based on the World Atlas TopoJSON dataset. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while a legend built from d3.scaleOrdinal and schemeSpectral displays the color categories. Hovering highlights individual countries, and d3.zoom enables pan and zoom interactions on the SVG.

Yylzami40

94% match

Loading thumbnail…

Choropleth Map

Yylzami40

94% match

Loading thumbnail…

d3 Choropleth Map

This d3 choropleth map visualizes global economic data by coloring countries according to their economy classification. It uses a spectral color scale with a custom legend that displays the ordinal categories, and includes interactive zooming and hover effects that highlight individual countries. The map employs d3's geo projection and geoPath for rendering world features from TopoJSON data, while the economy data is joined from a TSV file using the world-atlas dataset.

Aaslamluqman

94% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. The visualization renders geographic boundaries with d3.geoPath and a natural Earth projection, with zooming enabled via d3.zoom. Hover effects highlight individual countries, and a custom color legend built with SVG circles and text explains the color categories. Country names and economic data are loaded from TopoJSON and TSV files using d3.json and d3.tsv.

JJaloYang

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

94% match

Loading thumbnail…

D3 Choropleth Map

This D3 Choropleth Map colors world countries by their economic classification, using a spectral color scale and a geospatial natural Earth projection. The visualization includes an interactive legend with circles and labels, while zoom and pan are enabled via d3.zoom. Data is loaded from TopoJSON and TSV files using d3.json and d3.tsv, with country paths generated by d3.geoPath. The map is rendered as SVG, and hovering over a country turns it red, with tooltips showing name and economy value.

Rrdeichert

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

93% match