Skip to main content
SimilarExport ZIP
100%

Choropleth Map

✓ Published1🌍 Public
NNico Donovan
Last edited Jul 17, 2020
Created on Jul 17, 2020

This choropleth map colors countries by their economy classification using an ordinal color scale. Users can zoom and pan the map, and hovering over a country displays its name in a tooltip. The visualization pairs TopoJSON world geography with tabular TSV data from the World Atlas, merging them via `d3.json` and `d3.tsv`. It renders with SVG paths through `d3.geoPath` and `d3.geoNaturalEarth1`, and includes a custom color legend built with D3’s general update pattern.

AI-generated description

Integrating TopoJSON with tabular data

Creating a loadAndProcessData module

Visualizing an ordered attribute with color

Showing data from 2 attributes in tooltip

Adding a color legend

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, with a color legend and tooltips showing each country’s name and category. The visualization uses a natural Earth projection rendered as SVG paths via d3.geoPath, while TopoJSON and TSV data from the world-atlas package are loaded asynchronously. Users can pan and zoom the map using d3.zoom, and hovering highlights individual countries in red. The color scale uses d3.scaleOrdinal with a spectral scheme, and an interactive legend is built from custom d3 selections.

BBrandon Lehr
96% match
Loading thumbnail…

Choropleth Map

A choropleth map colors each country by its economy classification using an ordinal color scale with a spectral palette. The visualization supports pan and zoom via d3.zoom, and renders geographic features with d3.geoPath and a Natural Earth projection. A custom color legend component displays the categorical scale, while data is loaded from the World Atlas TopoJSON and TSV files, with tooltips showing country names and economy values on hover.

Nnkohdatavis
95% match
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification, using a sequential spectral color scale to distinguish categories. The visualization renders geographic boundaries with `d3.geoPath`, projecting the world using the Natural Earth projection and enabling zoom and pan through `d3.zoom`. The code loads world topology from TopoJSON and joins it with TSV metadata via `d3.tsv`, while a custom color legend component displays the categorical scale. Hovering highlights individual countries in red, and the map includes data from the world-atlas dataset.

Vvitoriss12
95% match
Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by their economy classification using an ordinal color scale with the spectral scheme. The visualization supports zooming and panning through D3’s zoom behavior, while hover effects highlight individual countries. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Data is loaded from the World Atlas TopoJSON and TSV files, processed via topojson.feature, and joined by country ID.

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

Choropleth Map

This choropleth map colors countries by their economy classification using an ordinal color scale with a spectral scheme. The geographic data comes from the world-atlas TopoJSON dataset, which is processed with topojson.feature and joined to TSV metadata. A natural Earth projection renders the map via d3.geoPath, while d3.zoom enables panning and zooming. Hovering highlights countries in red, and a custom color legend displays the color scale with circles and text labels.

MMaxwell Dayvson da Silva
95% match
Loading thumbnail…

Choropleth Map

This choropleth map displays the world’s countries colored by their economy classification, with a hover tooltip revealing each country’s name and economic group. The visualization uses `d3.geoPath` with the `geoNaturalEarth1` projection to render the globe, while `topojson.feature` loads the world atlas data and merges it with TSV metadata. An ordinal color scale applies a `schemeSpectral` range, and the custom `colorLegend` component builds an SVG legend. The map supports interactive pan and zoom via `d3.zoom`.

Ggcappadaniel
95% match
Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their economic classification using an ordinal color scale with a spectral scheme. The visualization loads world geometry from TopoJSON and country metadata from TSV, joining them by ISO numeric codes, and renders with D3’s `geoNaturalEarth1` projection and `geoPath`. A custom `colorLegend` displays the scale, while zooming and panning are enabled via `d3.zoom`. Hovering highlights countries, and tooltips reveal name and economy class.

Vvaynexie
95% match