Skip to main content
SimilarExport ZIP
100%

Chloropleath Map

✓ Published2🌍 Public
AAjit Singh
Last edited Jan 11, 2021
Created on Jan 11, 2021

This example displays a world choropleth map coloring countries by economy type, using a natural Earth projection and an ordinal color scale. It loads geographic data from the World Atlas TopoJSON and TSV files, rendering SVG paths with `d3.geoPath` and TopoJSON’s `feature`. A zoom behavior via `d3.zoom` pans and scales the map, while a custom color legend built with SVG circles and text shows the categorical values. The map also includes tooltips via appended `title` elements, with a dark blue sphere background and black country strokes.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

A choropleth map colors countries according to their economy type, with a custom ordinal color legend and hover interactions that highlight each nation. The visualization renders an SVG world map using a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, while supporting pan and zoom through `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV datasets, processed with `topojson.feature` and loaded asynchronously. The color scale uses `d3.scaleOrdinal` with `d3.schemeSpectral`, and the legend is built with custom D3 enter/merge/exit selections.

Yyejichun@naver.com
90% match
Loading thumbnail…

Chloropleth Map Interactive

A choropleth map shows world countries colored by economy type, with a legend that filters and highlights selected categories. The visualization supports zooming and panning, and dims non-selected countries while emphasizing those matching the chosen economy. It uses d3.geoPath with the geoNaturalEarth1 projection to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Country data comes from world-atlas TopoJSON and TSV files, with hover effects and a clickable color legend for interaction.

MMaxwell Dayvson da Silva
90% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy type using a categorical color scale, with a legend showing each category. It renders world geography as SVG paths via `d3.geoPath` and the Natural Earth projection, while `d3.zoom` enables panning and zooming. The code loads TopoJSON and TSV data from the world-atlas package, mapping country IDs to economy labels, and uses `d3.scaleOrdinal` with `schemeSpectral`. Hovering highlights a country in red.

Ggabcoderboi
90% match
Loading thumbnail…

chloropleth map

This choropleth map colors countries according to economic data, with a color legend and hover highlighting. The visualization uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, while loading world data from the world-atlas TopoJSON and TSV files. The color scale uses `d3.scaleOrdinal` with the Spectral scheme to map economic classifications. Users can pan and zoom via `d3.zoom`, and country names appear as tooltips on hover.

Aaidanoconnor1
90% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy category using an ordinal color scale with a spectral scheme, and displays a color legend with clickable circles. It renders geographic boundaries with antialiased SVG paths via `d3.geoPath` and the Natural Earth projection, while loading data from the world-atlas package (TSV metadata and TopoJSON geometries) and processing it with `topojson.feature`. Hovering highlights a country in red, and the map supports zooming through the `d3.zoom` interaction.

Ffaaty
90% match
Loading thumbnail…

Choropleth Map

A choropleth map of world countries colors each nation by its economy category using an ordinal spectral color scale. Data from the world-atlas TopoJSON and TSV files is projected with the Natural Earth projection and rendered as SVG paths. Hovering highlights a country, and a custom color legend with circles and labels is generated using the `colorLegend.js` module. The map supports interactive zooming via the `d3.zoom` API, which applies transformations to the map group on zoom events.

JJynadal
90% match
Loading thumbnail…

Chloropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its economy type, with a color legend to the side. Built with D3 v5, it uses `d3.geoPath` with the Natural Earth projection to render country boundaries from TopoJSON data loaded from the world-atlas package. An ordinal color scale maps economic categories to the spectral scheme, while zoom interaction and hover highlighting are implemented via `d3.zoom` and CSS. The legend is generated as a reusable SVG component through custom functions.

Ffbudwill
89% match
Loading thumbnail…

Chloropleth Map

This choropleth map displays countries colored by economic classification, with a color legend positioned in the lower-left corner and hover interactions that highlight individual nations. The visualization uses D3 v5 with d3.geoNaturalEarth1 for projection and d3.geoPath for rendering geographic features, while d3.zoom enables pan and zoom functionality. TopoJSON and TSV data from the world-atlas package populate the map, with d3.scaleOrdinal mapping economy categories to a spectral color scheme. SVG elements render all visuals, and the legend uses custom D3 scales and tick marks for clarity.

AAdrian Tan
89% match