Skip to main content
SimilarExport ZIP
100%

Choropleth Map with D3.js!

✓ Published2🌍 Public
CCarloWK1202
Last edited Jul 25, 2022
Created on Jul 21, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Choropleth Map

This choropleth map displays global income groups using a color scale applied to each country’s territory. The visualization employs d3.geoPath with a natural Earth projection to render the GeoJSON features, while d3.scaleOrdinal and schemeSpectral map income categories to colors. A custom color legend, built with select and merge, appears on the left. The map supports zooming via d3.zoom, and hovering highlights countries in red. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature.

PPiotr Paszek
93% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups, with each country colored according to its economic classification from the world-atlas dataset. The visualization uses a D3 v5 SVG rendering with a natural Earth projection, allowing users to pan and zoom through the interactive geoPath features. The map employs an ordinal color scale with a spectral scheme, while a custom legend (colorLegend.js) displays the categorical colors with circle markers. The data loads asynchronously from TSV and TopoJSON files via Promise.all, with country names and income group values shown as tooltips on hover.

Ccaydener
93% 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
92% match
Loading thumbnail…

Choropleth Map

This choropleth map depicts global income groups, coloring countries according to their income classification. Built with D3 v5 and TopoJSON, it loads world map data and country metadata, then projects it using a natural Earth projection with `d3.geoPath`. A color legend uses `scaleOrdinal` and `schemeSpectral` to map income groups to colors. The visualization supports zooming via `d3.zoom` and shows interactive hover states that display country names and income levels.

Cceresfin
92% match
Loading thumbnail…

Choropleth Map w Interactive Filtering

This choropleth map displays global income groups, color-coded using a spectral scale and an interactive zoom projection built with D3’s geoNaturalEarth1 projection and geoPath. The map renders country boundaries from World Atlas TopoJSON and TSV data, with a custom legend generated by colorLegend.js. Users can pan and zoom via the zoom overlay, while hovering over a country highlights it in gray and reveals its name and income group in a tooltip. The visualization demonstrates SVG-based DOM manipulation and event handling through D3’s selection and event APIs.

Cceresfin
92% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring each country according to its income_grp property. The map uses a natural Earth projection and fills countries with colors from a spectral ordinal scale, with a background legend showing the color categories. Built with D3 v5, the code loads world geometry from TopoJSON and income data from TSV files, then renders the map as SVG paths with zoom support via d3.zoom. The color legend is implemented as a reusable component, and hovering highlights individual countries.

Aanuj1450
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