Skip to main content
SimilarExport ZIP
100%

22_Choropleth Map

✓ Published0🌍 Public
FFMajid-ops
Last edited Dec 21, 2020
Created on Dec 20, 2020

This choropleth map colors countries by income group using a sequential spectral color scale, with hover highlighting and zoom/pan via d3.zoom. It loads World Atlas TopoJSON and TSV data through d3.json and d3.tsv, then renders geographic paths with d3.geoPath and a natural Earth projection. A custom color legend built with SVG circles and text appears on the left, and tooltips show country names and values.

AI-generated description
MIT Licensed

Similar vizzes

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

Choropleth map

A choropleth map colors countries according to their income group, using a spectral color scale with a natural Earth projection. The visualization includes a color legend with circles and labels, and supports zooming via d3.zoom. Data is loaded from a TSV file and TopoJSON world atlas using Promise.all, then rendered as SVG paths with d3.geoPath. Hovering highlights countries in red, and tooltips show country names and income group values.

AAmol Kulkarni
91% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using a categorical color scale with a spectral scheme. The visualization supports zooming and panning through d3.zoom, with country names and income groups revealed via tooltips on hover. Built with d3.geoPath and geoNames from the world-atlas TopoJSON dataset, it renders as SVG paths over a blue sphere. A custom color legend component displays the ordinal scale’s domain, while hover interactions highlight individual countries in red.

Mmla341
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
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a red-blue ordinal color scale, with a zoomable Natural Earth projection rendered as SVG paths. It loads world country boundaries from the World Atlas TopoJSON dataset and joins them to TSV metadata by ISO country code. The map includes an interactive color legend built with custom D3 selections, and uses d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.scaleOrdinal with schemeRdBu. Hovering highlights individual countries, and a title tooltip shows each country’s name and income group.

AAdrian Tan
91% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group, using a spectral color scale with a legend showing the categorical ranges. It renders country boundaries as SVG paths via the `d3.geoPath` and `d3.geoNaturalEarth1` projections, with a zoom interaction applied through `d3.zoom`. Data comes from the `world-atlas` TopoJSON and TSV files, processed with `topojson.feature` to merge attributes. Hovering highlights a country in red and displays its name and income group in a tooltip.

HHe Jianfeng
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
Loading thumbnail…

Choropleth Map

A choropleth map colors world countries according to their income group, using a spectral color scale. The map is rendered as an SVG with a natural Earth projection, and hovering highlights a country in red. Built with d3.v5 and topojson, it loads geographic data from the World Atlas TopoJSON files alongside a TSV table of income classifications. The code uses `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.zoom`, and a custom `colorLegend` component that maps ordinal color values to circles and labels.

AArriannePandaraoan
90% match