Fork of Choropleth map with D3.js!

100%

Fork of Choropleth map with D3.js!

✓ Published0🌍 Public

Last edited May 12, 2023

Created on May 12, 2023

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.

AI-generated description

//deo-geo-projection on github: // need to include as src on index.html: <script src ='https://d3js.org/d3-geo-projection.v2.min.js"></script>

A bare minimum HTML page.

Similar vizzes

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

92% match

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

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

91% match

Loading thumbnail…

Fork of Choropleth Map

This interactive choropleth map colors countries by economic classification, with a hover effect that turns each country red and a custom color legend showing the categorical scale. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map projections and rendering, while `scaleOrdinal` and `schemeSpectral` assign colors. The map loads world geometry from the world-atlas TopoJSON and TSV files, and supports zooming via the `zoom` event, which updates the SVG group’s transform.

Eexplorer123PiN

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

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

91% match

Loading thumbnail…

Fork of Choropleth Map

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.

NNYCUBK201

91% match