Choropleth Map

100%

Choropleth Map

✓ Published0🌍 Public

Last edited Jul 16, 2019

Created on Jul 16, 2019

This choropleth map visualizes global income groups, with each country colored according to its economic classification from the world-atlas dataset. The visualization uses a D3 v5 SVG rendering with a natural Earth projection, allowing users to pan and zoom through the interactive geoPath features. The map employs an ordinal color scale with a spectral scheme, while a custom legend (colorLegend.js) displays the categorical colors with circle markers. The data loads asynchronously from TSV and TopoJSON files via Promise.all, with country names and income group values shown as tooltips on hover.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map displays global income groups using a color scale applied to each country’s territory. The visualization employs d3.geoPath with a natural Earth projection to render the GeoJSON features, while d3.scaleOrdinal and schemeSpectral map income categories to colors. A custom color legend, built with select and merge, appears on the left. The map supports zooming via d3.zoom, and hovering highlights countries in red. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature.

PPiotr Paszek

94% match

Loading thumbnail…

Choropleth Map with D3.js!

This choropleth map visualizes global income groups using D3.js to color each country based on its economic classification. Built with d3.geoNaturalEarth1 projection and d3.geoPath, the SVG renders geographic boundaries from TopoJSON data sourced from the world-atlas package, with income labels joined from a TSV file. The map includes an ordinal color scale using d3.scaleOrdinal and d3.schemeSpectral, supplemented by a custom color legend component. Interactive features include zooming via d3.zoom and hover effects that highlight individual countries in red.

CCarloWK1202

93% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring each country according to its income_grp property. The map uses a natural Earth projection and fills countries with colors from a spectral ordinal scale, with a background legend showing the color categories. Built with D3 v5, the code loads world geometry from TopoJSON and income data from TSV files, then renders the map as SVG paths with zoom support via d3.zoom. The color legend is implemented as a reusable component, and hovering highlights individual countries.

Aanuj1450

93% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its income group. Built with D3 v5 and TopoJSON, it uses an ordinal color scale with the spectral scheme and renders geographic shapes via `d3.geoPath` with a natural Earth projection. The map supports pan and zoom through D3’s zoom behavior, and hovering highlights countries in red. A custom legend, generated with appended SVG circles and text, displays the color categories, while data is loaded from the World Atlas TopoJSON and TSV files.

Eevapavlinek

92% match

Loading thumbnail…

Choropleth Map

This choropleth map depicts global income groups, coloring countries according to their income classification. Built with D3 v5 and TopoJSON, it loads world map data and country metadata, then projects it using a natural Earth projection with `d3.geoPath`. A color legend uses `scaleOrdinal` and `schemeSpectral` to map income groups to colors. The visualization supports zooming via `d3.zoom` and shows interactive hover states that display country names and income levels.

Cceresfin

92% match

Loading thumbnail…

Choropleth Map of Income Group

This choropleth map visualizes countries color-coded by income group, using a yellow-green sequential color scale. The map renders world countries as SVG paths via `d3.geoPath` with a `geoNaturalEarth1` projection, and includes an interactive color legend built with a custom `colorLegend` component. Hovering highlights countries in red, while tooltips show the country name and income group. The visualization loads and joins geographic and tabular data from the `world-atlas` package using `Promise.all` with `d3.json` and `d3.tsv`, then processes it with `topojson.feature`.

Ssherryyx

92% 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

92% match

Loading thumbnail…

Choropleth Map w Interactive Filtering

This choropleth map displays global income groups, color-coded using a spectral scale and an interactive zoom projection built with D3’s geoNaturalEarth1 projection and geoPath. The map renders country boundaries from World Atlas TopoJSON and TSV data, with a custom legend generated by colorLegend.js. Users can pan and zoom via the zoom overlay, while hovering over a country highlights it in gray and reveals its name and income group in a tooltip. The visualization demonstrates SVG-based DOM manipulation and event handling through D3’s selection and event APIs.

Cceresfin

92% match