Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
DDan Stockham
Last edited Dec 4, 2018
Created on Nov 28, 2018

A choropleth map of global economies colors each country according to its economic classification using a categorical color scale. The visualization uses D3 v5 with `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and TopoJSON data from the world-atlas package. Users can pan and zoom via `d3.zoom`, while hovering displays a tooltip with the country name and economic category. An ordinal color legend with circles and text labels explains the color mapping.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by country, coloring each nation according to its economy category. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from TopoJSON world-atlas data, with country attributes loaded from a TSV file. A color legend, constructed via `colorLegend`, displays the ordinal color scale using `d3.scaleOrdinal` and `d3.schemeSpectral`. The SVG map supports zooming via `d3.zoom`, and hovering changes a country’s fill to red.

Eevavan8
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a choropleth world map colored by each country’s economy classification, using a natural Earth projection and a red-yellow-green color scale. Users can zoom and pan the map via D3’s zoom behavior. The map is rendered as SVG paths generated with `d3.geoPath` and `geoNaturalEarth1`, while country boundaries come from the world-atlas TopoJSON dataset. Data is loaded with `d3.tsv` and `d3.json`, with colors assigned using `scaleOrdinal` and the `schemeRdYlGn` scheme.

Jjesramyep1263
91% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the world’s economies, coloring each country according to its economic classification using a spectral color scale. The map displays the geographic distribution of these categories, with hover states revealing a country’s name and category. Built with D3.js (v5), the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render the map from world-atlas TopoJSON and TSV data. A custom `colorLegend` component, drawn as SVG circles and text, provides a reference for the color categories, while zooming is handled via D3’s `zoom` event and `event.transform`.

Pprincit
90% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications by coloring each country according to a categorical ordinal scale derived from the `economy` property in the world-atlas dataset. The visualization loads TopoJSON and TSV data, then uses `d3.geoPath` with a natural Earth projection to render country boundaries, while a custom color legend built with SVG circles and text explains the color encoding. Users can zoom and pan via `d3.zoom`, with hover effects highlighting individual nations.

Ggcappadaniel
90% match
Loading thumbnail…

Choropleth Map

This choropleth map displays global economic classifications by coloring each country according to a categorical ordinal scale derived from the `economy` property in the world-atlas dataset. The visualization loads TopoJSON and TSV data, then uses `d3.geoPath` with a natural Earth projection to render country boundaries, while a custom color legend built with SVG circles and text explains the color encoding. Users can zoom and pan via `d3.zoom`, with hover effects highlighting individual nations.

Ggcappadaniel
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
90% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic classifications by coloring each country according to its economy type. Using D3.js v5 with the `geoNaturalEarth1` projection and `geoPath` for rendering, it loads world map data from TopoJSON and TSV files containing country metadata. The color scale uses `scaleOrdinal` with `schemeSpectral` ranges, and hovering highlights a country in red while a tooltip displays the country name and economic group.

Ggcappadaniel
90% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes the economic classification of countries across the globe, using color to encode each nation’s economy category. The map is rendered with D3.js v5, using `geoNaturalEarth1` projection and `geoPath` to draw country boundaries. Country data is loaded from the world-atlas TSV and TopoJSON files, with the `economy` property mapped to a spectral color scale. Hovering over a country displays its name and economy type, while a custom color legend explains the color mapping. A zoom interaction is also implemented via `d3.zoom`.

Ccpsshan
90% match