Fork of Choropleth Map

100%

Fork of Choropleth Map

✓ Published0🌍 Public

Last edited Jan 14, 2023

Created on Jan 14, 2023

This example shows a choropleth map of the world, coloring each country according to its economy category using an ordinal color scale. The map renders with SVG paths generated by d3.geoPath and a Natural Earth projection, and it supports zooming and panning through d3.zoom. A custom color legend is built with circles and text labels. Data is loaded from world-atlas TopoJSON and TSV files, processed with topojson.feature, and the color scale uses d3.scaleOrdinal with schemeSpectral.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map

This example shows a natural Earth choropleth map where each country is colored by its economy category from a global dataset. Users can pan and zoom through the SVG map using d3.zoom, while a color legend built with ordinal scales and schemeSpectral displays the available classifications. The visualization loads TopoJSON world-atlas data, joins TSV attributes, and renders countries via d3.geoPath with hover effects that highlight individual states.

BBlakeMcMurray

96% match

Loading thumbnail…

Fork of Choropleth Map

This example shows a choropleth map of world countries colored by economic classification, with an interactive color legend and zoom-and-pan navigation. The visualization uses d3.geoPath with the Natural Earth projection to render country boundaries from TopoJSON data loaded from the world-atlas package, while d3.scaleOrdinal with the Spectral color scheme maps economy categories to fill colors. Users can zoom and pan the map via d3.zoom, and hovering highlights individual countries in red. A custom color legend, built with reusable D3 selections, displays color swatches and labels in an SVG overlay.

MMario Sánchez

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economy using a spectral ordinal scale, and includes an interactive color legend with circles and labels. The visualization renders world geography via a natural Earth projection and supports zooming and panning through d3.zoom. Data comes from the World Atlas TopoJSON and TSV files, processed with topojson.feature. The code imports individual D3 v5 modules including geoPath, geoNaturalEarth1, and scaleOrdinal, and builds the legend with a custom colorLegend function.

AAbdouEnsaj

94% match

Loading thumbnail…

Fork of Choropleth Map

This example visualizes world countries colored by economic grouping using an ordinal color scale with the spectral scheme. The map renders in SVG, with countries projected via d3.geoNaturalEarth1 and drawn using d3.geoPath, featuring hover highlighting and zoom behavior through d3.zoom. Data loads from World Atlas TopoJSON and TSV files, processed via topojson.feature and Promise.all. The legend component remains commented out, while the tooltip displays country names and economic categories via SVG title elements.

BBrian Tang

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economy type using a categorical ordinal scale and the spectral color scheme. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while a custom color legend built with SVG circles and text shows the category mapping. Users can pan and zoom via d3.zoom. Data comes from the world-atlas TopoJSON and TSV files, with hover effects highlighting individual countries.

BBolarinwa Omoware

94% match

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economy using world-atlas TopoJSON data. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render the map, and d3.scaleOrdinal with schemeSpectral for color encoding. The color legend, built with a custom colorLegend function, displays the ordinal scale. Interactive pan and zoom is implemented via d3.zoom, and hovering highlights countries in red.

CClara Hu

93% match

Loading thumbnail…

Fork of Choropleth Map

A world map displays countries colored by their economy category using an ordinal color scale. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, then renders each country as an SVG path using `d3.geoPath` with a natural Earth projection. Users can zoom and pan via the `zoom` event transform, while a color legend created with custom SVG shapes shows the category-to-color mapping. Hovering over any country highlights it in red and reveals its name and economy class in a tooltip.

KKirsten Lund

93% match

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map colors world countries by their economy category, using a natural Earth projection and an ordinal spectral color scale. Hovering highlights a country in red, while a zoom interaction pans and scales the map view. It loads TopoJSON and TSV data from the world-atlas package, rendering with SVG via d3.geoPath. A custom color legend, built with d3.scaleOrdinal, displays the categorical color scale, and topojson.feature processes the geographic data.

Kkzaiets

93% match