Let's make a map

100%

Let's make a map

✓ Published1🌍 Public

Last edited Mar 4, 2020

Created on Mar 3, 2020

This map visualizes country data, coloring each nation according to its economic classification. It uses a dark blue sphere background and interactive pan and zoom capabilities. The code loads geographic boundaries from `world-atlas` and enriches them with economic data from a TSV file, rendering everything as SVG paths. It relies on D3’s `geoPath`, `geoMercator`, and `scaleOrdinal` to project the map and color the countries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This D3.js example displays a natural Earth projection map of the world, with countries colored by their economic classification using a spectral color scale and an interactive color legend. The visualization loads geographic and metadata from the world-atlas dataset via TopoJSON, then renders each country as an SVG path. The map supports zooming through d3.zoom, and hovering over a country highlights it in red while a tooltip shows its name and economy type.

MMitul Suthar

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

86% match

Loading thumbnail…

Let's make a map with D3.js!

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.

DDan Stockham

84% match

Loading thumbnail…

world map with colors

This interactive choropleth map colors each country by its economy category, using a spectral color scale and click-to-highlight interaction to compare regions. Built with D3 v5, it renders country outlines via `d3.geoPath` with a Natural Earth projection, loads TopoJSON country boundaries from the World Atlas, and joins economic classifications from a TSV file. A zoom behavior enables panning and scaling, while an ordinal color legend supports filtering by clicking a category to fade unmatched countries.

BBajiSharifPatan@my.unt.edu

84% match

Loading thumbnail…

Map

This example uses D3 v5 to visualize global economic data with a natural Earth projection. Countries are filled with colors from a spectral scheme based on their economy category, and hovering highlights each region. The visualization includes a custom color legend with circles and text. Data is loaded from the world-atlas package as TopoJSON and TSV files, which are processed using the `feature` function from topojson and rendered with `d3.geoPath`. The map supports zooming through `d3.zoom` events.

Kklumng

84% match

Loading thumbnail…

Interactive WorldMap

This interactive visualization displays a world map colored by each country’s economy type, using a natural Earth projection. The map supports pan and zoom through `d3.zoom`, with country names and economy values shown as tooltips via SVG `<title>` elements. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, then maps economy categories to a spectral color scale using `d3.scaleOrdinal`. The code relies on `d3.geoPath` to render countries and a sphere outline, with hover effects changing country fills to red.

KKelsey Xu

84% match

Loading thumbnail…

Map with selectable countries

This example presents an interactive choropleth map of the world, where each country is colored according to its economic classification. Users can click on any country to highlight it, dimming all others, and click again to deselect. The map uses D3's `geoPath` and `geoNaturalEarth1` projection, with `scaleOrdinal` and `schemeSpectral` for the color scale. A separate legend allows filtering by economy value, and the zoom feature (`zoom()`) is included. Data comes from the `world-atlas` package, loaded with `tsv` and `json`.

LLongYuu

84% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map colored by economic classification, with an ordinal color legend displayed in the corner. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country outlines from TopoJSON data loaded via the `world-atlas` package. Countries are colored using `d3.scaleOrdinal` with `schemeSpectral`, and a custom `colorLegend` component draws circles and text labels. The map supports zooming through `d3.zoom`, and hover states change country fills to red via CSS.

LLudovicGouverneur

83% match