Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published2🌍 Public
Bbprokopowicz
Last edited Apr 1, 2020
Created on Apr 1, 2020

A choropleth map colors countries by income group using a sequential color scale from `d3.scaleOrdinal` and `d3.schemeSpectral`. The visualization renders with `d3.geoPath` and a natural Earth projection, drawing geographic features from TopoJSON data loaded via `d3.json` and `d3.tsv`. Pan and zoom are enabled through `d3.zoom`, and a custom legend component built with SVG elements displays the color scale. Hovering highlights individual countries, while tooltips show country names and income group values.

AI-generated description

D3 course follow along.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by income group using an ordinal color scale with a spectral scheme, drawing each nation with `d3.geoPath` and a Natural Earth projection. The visualization supports zooming via `d3.zoom` and includes a custom color legend rendered with SVG circles and text. Country names and income data come from TopoJSON and TSV files loaded from the world-atlas package. Hovering over a country reveals its name and income group in a tooltip.

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

Choropleth Map

This choropleth map colors countries according to their income group, using a spectral color scale with a clickable legend that displays the categorical values. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, with zooming enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON, joined with country names from a TSV file. The color legend is built with `scaleOrdinal` and custom `colorLegend` functions.

JJordan Chiu
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries according to their income group, using a spectral color scale with a clickable legend that displays the categorical values. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, with zooming enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON, joined with country names from a TSV file. The color legend is built with `scaleOrdinal` and custom `colorLegend` functions.

JJordan Chiu
94% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using an ordinal color scale built with `d3.scaleOrdinal` and `schemeSpectral`. It renders geographic boundaries with `d3.geoPath` and a Natural Earth projection, with country data sourced from the world-atlas TopoJSON dataset. Users can pan and zoom via `d3.zoom`, and hovering highlights individual countries. A custom `colorLegend` component displays the categorical color scale as an SVG legend, while tooltips show each country’s name and income group.

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

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Ss-janibekova
94% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Ss-janibekova
94% match