Make a World Map with D3

100%

Make a World Map with D3

✓ Published0🌍 Public

Last edited Feb 22, 2020

Created on Feb 22, 2020

This example shows a world map colored by economy type using a categorical color scale, with hover highlighting and zoom/pan interaction. The map uses D3 v5 with `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering, and TopoJSON from the world-atlas dataset. Country boundaries are drawn as SVG paths, colored via `d3.scaleOrdinal` with `schemeCategory10`, and tooltips appear on hover. The data comes from a TSV file mapping ISO country codes to names and economies.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

world_map

This example visualizes world countries colored by economic classification using a natural Earth projection. The map supports zooming and panning, with hover highlighting and tooltips showing country names and economic categories. Built with D3 v5 and TopoJSON, it loads world atlas data from unpkg, utilizes `d3.geoNaturalEarth1` and `d3.geoPath` for geographic rendering, and applies a spectral color scale via `d3.scaleOrdinal` and `d3.schemeSpectral`. SVG paths enable interactive styling and title tooltips.

IInnoFail

89% match

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

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

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

88% match

Loading thumbnail…

World Map Visualization

This example displays a world map using D3’s `geoNaturalEarth1` projection, coloring each country by its economy classification from a TSV dataset. It loads geographic data from `world-atlas` GeoJSON and joins it with metadata, then renders countries as SVG paths with a blue ordinal color scale. The map supports zooming and panning via `d3.zoom`, and features a hover effect that highlights countries in orange.

LLakshmanRangisetti

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

88% match

Loading thumbnail…

world map

This example shows a choropleth world map colored by each country's economy classification, with a clickable color legend that filters and highlights matching countries while dimming others. The map uses d3.geoNaturalEarth1 and d3.geoPath to render TopoJSON world-atlas data, with d3.zoom enabling pan and zoom interactions. A d3.scaleOrdinal maps the spectral color scheme to the economy categories, and tooltips display country names and values. The SVG rendering includes CSS hover effects and opacity transitions for non-selected regions.

Zzhangfa

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

87% match