Fork of Choropleth Map

100%

Fork of Choropleth Map

✓ Published0🌍 Public

Last edited Sep 20, 2023

Created on Sep 20, 2023

This choropleth map visualizes global income groups using a natural Earth projection, coloring each country according to its income classification. The map is rendered with SVG paths using `d3.geoPath` and `geoNaturalEarth1`, with country data loaded from TopoJSON and TSV files via the world-atlas package. A custom color legend component displays the ordinal color scale, which uses `scaleOrdinal` with a spectral scheme. The visualization supports pan and zoom through `d3.zoom`, and hover interactions highlight individual countries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map

This visualization displays a choropleth map of world countries colored by income group using a categorical color scale. D3 v6 and topojson load geographic data from the World Atlas, while `geoNaturalEarth1` projection and `geoPath` render the SVG paths. A legend built with `scaleOrdinal` and `schemeSpectral` shows income categories. Pan and zoom interactions are enabled via `d3.zoom`, and hovering highlights countries in red.

RRishi Kavikondala

93% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors countries by their income group using a spectral color scale. The visualization employs the d3 geoNaturalEarth1 projection and d3.geoPath to render geographic features from world-atlas TopoJSON and TSV data. A custom color legend displays the ordinal scale, while the d3 zoom event enables interactive panning and zooming. Hovering over a country turns it red and reveals its name and income category in a tooltip.

Mmehdi kaidi

93% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors world countries by income group using a spectral color scale. The visualization uses D3 v5 and the `geoNaturalEarth1` projection with `geoPath` to render country shapes from the world-atlas TopoJSON and TSV data. A custom `colorLegend` displays the ordinal color scale as circles and text, and zooming is enabled through D3’s `zoom` event. Hovering a country turns it red, and tooltips show its name and additional text.

Ttbar72

93% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by income group using an ordinal scale with a spectral color scheme. The visualization supports zooming and panning via d3.zoom, and includes a custom color legend with circles and labels built through reusable D3 selections. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths using d3.geoPath with a natural Earth projection. Hovering highlights countries in red, and tooltips display country names and income categories.

SSaip Can Hasbay

92% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economic classification using a natural Earth projection with an ordinal spectral color scale. The visualization supports zooming and panning through d3.zoom, with country names and income groups revealed on hover via SVG title elements. A custom color legend with circles and text labels is built using D3 data joins, while geographic data comes from the world-atlas TopoJSON dataset processed with topojson.feature and loaded via d3.tsv and d3.json. The map is rendered entirely in SVG.

Ggalyniayaroshenko

92% match

Loading thumbnail…

Fork of Choropleth Map

This map visualizes global economic classifications by shading each country with a categorical color scale, with a legends showing the income groups. It uses d3.geoNaturalEarth1 and d3.geoPath to project and draw country boundaries from TopoJSON data sourced from world-atlas, while d3.scaleOrdinal maps economy categories to a spectral color scheme. The map supports zooming via d3.zoom, and hovering highlights individual countries. A custom colorLegend module builds the SVG legend with circles and text labels.

Mmaxthamt

91% match

Loading thumbnail…

Fork of Choropleth map with D3.js!

This choropleth map colors countries by income group using a categorical color scale from `scaleOrdinal` and `schemeSpectral`. The visualization loads world geometry from TopoJSON via `world-atlas` and joins it with tab-separated metadata, then renders paths with `geoPath` and a `geoNaturalEarth1` projection. The map supports zooming through `d3.zoom`, highlights countries on hover via CSS, and includes a custom color legend built with SVG circles and text.

NNikithakatta30

91% match

Loading thumbnail…

Fork of Choropleth Map

This example displays a world choropleth map coloring countries by their economic income group, with a categorical color legend and zoom/pan functionality. The visualization uses D3 v5 APIs including `geoPath` with `geoNaturalEarth1` projection, `scaleOrdinal` with `schemeSpectral` for color mapping, and `zoom` for interaction. It loads geographic data from the world-atlas TopoJSON and TSV files via `topojson.feature`. Countries render as SVG paths with hover highlighting, and the color legend dynamically generates from the ordinal scale domain.

Jjay-goone

91% match