Skip to main content
SimilarExport ZIP
100%

Chloropleth Map

✓ Published0🌍 Public
Ffloresh
Last edited Mar 11, 2019
Created on Oct 3, 2018

This example displays a choropleth map using 160 countries colored by income group, with a legend and tooltips. It loads world geometry from TopoJSON and joins it with TSV metadata, projecting paths with `d3.geoPath` and a natural Earth projection. The ordinal color scale uses `scaleOrdinal` with `schemeSpectral`, and the legend is built as a custom D3 component. Pan and zoom are enabled via `d3.zoom`, and hovering highlights the selected country in red.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Chloropleth Map

A choropleth map colors countries by income group using an ordinal color scale with a spectral scheme. The visualization renders world geography with d3.geoPath and a Natural Earth projection, and supports pan and zoom via d3.zoom. Country names and income groups appear as tooltips, while a custom colorLegend component displays the category labels with colored circles. Data is loaded from TopoJSON and TSV files processed with topojson.feature and d3.tsv.

Ccornshoots
93% match
Loading thumbnail…

Chloropleth Map-1

A choropleth map colors countries by their income group using an ordinal color scale with the d3-scaleChromatic scheme. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while pan and zoom are enabled via d3.zoom. A custom SVG legend displays the color scale using circle marks and text labels. Data comes from the World Atlas TopoJSON and TSV files, loaded and joined using d3.json, d3.tsv, and topojson.feature.

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

Chloropleth Map

This interactive chloropleth map displays world countries colored by income group, with a legend showing the categorical color scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render geographic boundaries from TopoJSON world data loaded via topojson.feature, while country names and income values come from a TSV file merged by ISO code. Users can pan and zoom using d3.zoom, and hovering highlights countries in red via CSS. The ordinal color scale employs d3.scaleOrdinal with the d3.schemeSpectral palette, and a custom colorLegend component renders circles and text labels.

VVishwa246
92% match
Loading thumbnail…

Choropleth Map

This example displays a world map as a choropleth, with each country colored by its income group using an ordinal color scale and a custom SVG legend. D3’s `geoNaturalEarth1` projection and `geoPath` render geographic boundaries from a TopoJSON source, while data from a TSV file is joined by country ID. Hovering a country turns it red and shows its name and income group in a tooltip, and pan/zoom interaction is enabled via a custom zoom event.

Ccpsshan
92% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a diverging red-blue ordinal scale, with a zoomable Natural Earth projection and a color legend built from custom SVG circles. The visualization loads world country boundaries from TopoJSON and joins them to TSV metadata, then renders each nation as a styled SVG path with hover highlighting. It uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal with the schemeRdBu palette, while the legend is implemented as a reusable module.

AAdrian Tan
91% match
Loading thumbnail…

Chorpleth Map

This choropleth map colors countries by income group using an ordinal color scale with a spectral scheme. The visualization loads world geometry from TopoJSON and joins it with TSV metadata, then renders the map with a natural Earth projection via d3.geoPath. Users can pan and zoom through d3.zoom, while a custom color legend built with SVG circles and text shows the categorical mapping. Hovering over a country highlights it in red and reveals its name and income group in a tooltip.

MMinwoo Pak
91% 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
90% match