Skip to main content
SimilarExport ZIP
100%

D3 Choropleth Map

✓ Published1🌍 Public
YYoung Song
Last edited Jun 26, 2022
Created on Jun 22, 2022
Forked from D3 World Map III

This D3 Choropleth Map visualizes countries colored by income group using a natural Earth projection and world atlas TopoJSON data. The map uses an ordinal color scale with a spectral scheme, while a semi-transparent legend with circles and text labels displays the income categories. Hovering highlights countries in black and reveals tooltips showing both country name and economy type. The visualization supports zooming and panning through d3.zoom, with the map rendered as SVG paths generated by d3.geoPath.

AI-generated description
  • Integrating TopoJSON with tabular data
  • Creating a loadAndProcessData module
  • Visualizing an ordered attribute with color
  • Showing data from 2 attributes in tooltip
  • Adding a color legend
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using an ordinal color scale with the spectral scheme. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, using TopoJSON data from the world-atlas package. Hovering highlights countries in red, while a legend built with custom D3 code displays the color categories. The map supports zooming and panning through d3.zoom, and tooltips show each country’s name and income group.

CClara Hu
93% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by economic income group using an ordinal color scale. The visualization uses D3 v5 with d3.geoPath and a Natural Earth projection to render TopoJSON world data loaded from the world-atlas package. Users can zoom and pan via d3.zoom, and hovering highlights individual countries. A custom color legend component displays the category colors and labels, with interactivity handled through SVG selections.

VVivian Peng
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
Loading thumbnail…

Choropleth map

This choropleth map colors world countries by income group using a spectral ordinal scale, with a hover effect that highlights individual country borders and a legend showing the color categories. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, while d3.zoom enables panning and interactive exploration. Color encoding and the legend are built with d3.scaleOrdinal and d3.schemeSpectral, with data loaded via d3.tsv and d3.json.

JJames Malvern
91% match
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
91% 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
91% 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…

Choropleth Map

This choropleth map visualizes countries colored by income group using a natural Earth projection. It loads world geometry from TopoJSON and joins it with TSV metadata via d3.json and d3.tsv, then renders paths with d3.geoPath. A d3.scaleOrdinal with a schemeSpectral range assigns colors, and an interactive legend built with d3-selection shows the categorical scale. The map supports zooming through d3.zoom and highlights countries on hover via CSS.

Ooptimizeresume
91% match