Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published2🌍 Public
PPotikorn
Last edited Feb 18, 2020
Created on Feb 18, 2020

This choropleth map colors countries by income group, with a legend showing the categorical color scale. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw world boundaries from TopoJSON data loaded via `topojson.feature`. Country polygons are filled based on economy data from a TSV file, and hover effects highlight regions. Users can zoom and pan using D3’s `zoom` behavior, while the custom color legend is built with reusable D3 selection methods.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

Choropleth Map

This choropleth map shows countries colored by income group, with a clickable color legend that highlights matching regions and a pan-and-zoom interface. It uses D3 v5 with `geoNaturalEarth1` and `geoPath` to project TopoJSON world data loaded from the World Atlas, while `scaleOrdinal` and `schemeSpectral` assign colors. A zoom behavior updates the map transform on interaction. The legend, rendered with SVG circles and text, triggers the selection filtering.

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