Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published1🌍 Public
JJoseph Popoola
Last edited Feb 14, 2020
Created on Feb 13, 2020

A choropleth map colors world countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral, with a legend rendered via a custom colourLegend component. Geographic shapes are drawn with d3.geoPath and a Natural Earth projection, while data loads from World Atlas TopoJSON and TSV files. Hovering highlights countries, and d3.zoom enables panning and zooming with animated transitions on the legend circles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification, with a hover effect highlighting individual nations and a legend showing the categorical color scale. The visualization renders world geography using `d3.geoPath` with a Natural Earth projection, while `d3.zoom` enables pan and zoom interaction. Data loads from the world-atlas TopoJSON and TSV files, merged by country ID, and the color scale uses `d3.scaleOrdinal` with `schemeSpectral` ranges. The legend is built as a reusable component with `selection.enter` and `merge` patterns.

Lloicvdk
94% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economic classification, with a color legend showing ordinal categories from the Spectral scheme. The visualization loads world geometry from TopoJSON and joins it with tabular data from a TSV file. Using d3.geoPath with a geoNaturalEarth1 projection, it renders SVG paths that support zooming via d3.zoom. Hovering highlights individual countries, while a custom colorLegend component displays the color scale with circles and text labels.

Ccaydener
93% match
Loading thumbnail…

Choropleth Map

A choropleth map colors world countries by economic classification using a sequential ordinal scale and the Spectral color scheme. The visualization, built with D3 v5 and TopoJSON, renders countries as SVG paths via d3.geoPath with a Natural Earth projection, supporting zoom and pan. A custom color legend displays the categorical color scale, while country data is joined from the World Atlas TopoJSON and TSV datasets using Promises.

Xxhoumba
93% match
Loading thumbnail…

Choropleth map

A world map rendered as a choropleth shades each country according to its economic classification, using a spectral color scale. Hovering highlights a country and shows its name and classification. The map is drawn with d3.geoPath and a Natural Earth projection, with TopoJSON data from the world-atlas package. A custom colorLegend function displays the ordinal scale, and d3.zoom enables interactive panning and zooming of the SVG.

JJoel Schwartz
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic classification using a categorical ordinal scale with a spectral color scheme. Users can zoom and pan the natural Earth projection, while a custom color legend displays the category colors and labels. The visualization loads geographic and metadata from the world-atlas TopoJSON and TSV files, rendering paths via d3.geoPath and enabling interaction through d3.zoom. Hovering highlights individual countries, and the legend is built with reusable d3 selections.

Jjesramyep1263
93% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by economic classification, using a spectral color scale to distinguish categories. Clicking a legend item filters the map to highlight only matching countries, while zooming and panning are enabled via d3.zoom. The visualization imports world-atlas TopoJSON and TSV data, projecting features with d3.geoNaturalEarth1 and d3.geoPath. Map and legend are rendered as SVG, with hover states and opacity dimming for non-selected regions.

JJuyeonee
93% match
Loading thumbnail…

Choropleth map

A choropleth map colors world countries according to their economic classification, with a color legend that filters and highlights selected categories. Users can click legend entries to dim non-matching countries and intensify the selected region. Built with D3.js, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project TopoJSON data from the world-atlas package, while `d3.scaleOrdinal` with `d3.schemeSpectral` assigns colors. Interactive zoom via `d3.zoom` and SVG rendering provide the map interface.

Nntech9613
93% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economy classification using an ordinal color scale with a spectral scheme. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, projecting it with d3.geoNaturalEarth1 and rendering paths via d3.geoPath. Hovering highlights a country in red, while a custom color legend component displays the categorical ranges. Zooming is enabled through d3.zoom, and the map includes a static sphere background.

LLuce Liu
93% match