Skip to main content
SimilarExport ZIP
100%

Choropleth map with D3.js!

✓ Published3🌍 Public
Fforcox43
Last edited Jul 18, 2020
Created on Jul 18, 2020

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.

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.

See also React Starter.

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
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group, using a spectral color scale with an accompanying legend. The visualization is built with D3.js, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projection and rendering, and `zooming` via `d3.zoom` event handling. Country data comes from the `world-atlas` package, with income group information joined from a TSV file, and the map supports hover highlighting.

Iianleekq
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group, using a spectral color scale with a legend showing the categorical ranges. It renders country boundaries as SVG paths via the `d3.geoPath` and `d3.geoNaturalEarth1` projections, with a zoom interaction applied through `d3.zoom`. Data comes from the `world-atlas` TopoJSON and TSV files, processed with `topojson.feature` to merge attributes. Hovering highlights a country in red and displays its name and income group in a tooltip.

HHe Jianfeng
93% match
Loading thumbnail…

Choropleth map

A choropleth map colors countries by income group using a categorical color scale, with a hover effect that turns each country red and a tooltip showing the country name and income group. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, processes it with `topojson.feature` and `d3.tsv`, and projects it using `d3.geoNaturalEarth1` and `d3.geoPath`. A custom legend built with `d3.scaleOrdinal` and `schemeSpectral` renders interactive color swatches, while `d3.zoom` enables panning and zooming on the SVG map.

Rroncando
93% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring each country according to its `income_grp` attribute, using a spectral color scale (`d3.schemeSpectral`). The map shows a natural Earth projection rendered with `d3.geoPath`, with hover interactions highlighting countries in red. Built with React and D3 v6, it loads world boundary data from the `world-atlas` package via TopoJSON and TSV files, and includes a custom color legend component. The visualization supports zooming through a zoom behavior API.

MMatthew Rubino
93% match
Loading thumbnail…

Choropleth map

This choropleth map colors countries by income group, with a hover effect that highlights each nation and a legend displaying the categorical color scale. Built with React, it uses D3 v5 APIs including `geoNaturalEarth1` for projection, `geoPath` for rendering country boundaries, and `scaleOrdinal` with `schemeSpectral` for color mapping. World shape data comes from the world-atlas TopoJSON dataset, and the view supports zooming through `d3.zoom`. The legend is generated by the custom `colorLegend` module.

Jjeelong
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using an ordinal color scale with a spectral scheme. The visualization supports pan and zoom interactions through d3.zoom, while d3.geoPath and a Natural Earth projection render the geographic shapes. A custom color legend component displays the categorical colors with labeled circles. Country names and income groups appear as tooltips via SVG title elements, with data loaded from the world-atlas TopoJSON and TSV files.

Aanouckstbr@gmail.com
92% 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
92% match