d3 World Map

100%

✓ Published0🌍 Public

Last edited Oct 9, 2020

Created on Oct 8, 2020

This example displays a world map using an orthographic projection, with each country colored according to its economy classification from the World Atlas dataset. The visualization loads geographic data as TopoJSON and country metadata as TSV, then joins them by ISO code. It renders the sphere and country boundaries as SVG paths using `d3.geoPath`, assigns colors via `d3.scaleOrdinal` with the `schemeSpectral` range, and adds hover effects and zooming through `d3.zoom`.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

d3 World Map

This visualization displays a world map using an orthographic projection, with countries rendered as light green polygons that highlight orange on hover. The code loads geographic data from the world-atlas package via TopoJSON and joins it with country names from a TSV file. Using d3.geoPath and d3.geoOrthographic, it draws the globe’s sphere and country boundaries as SVG paths, with tooltips showing each nation’s name via appended title elements. The implementation relies on d3.v5, topojson-client, and a React-friendly structure with Promise.all for asynchronous data loading.

NNoah Weinberg

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

87% match

Loading thumbnail…

D3 World Map

This example displays a world map rendered as black countries with white borders on an SVG canvas. It uses D3.js version 5 and the `d3.geoMercator()` projection to transform geographic coordinates, with `d3.geoPath()` drawing the country boundaries. The map data is loaded from a GeoServer WFS endpoint as GeoJSON, which is then converted to TopoJSON via the `topojson` library to structure the geometries for rendering. The visualization showcases D3’s ability to handle geographic data through its projection and path APIs.

AAsmabee Khan

87% match

Loading thumbnail…

Make a World Map with D3

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.

Aamit0623

87% match

Loading thumbnail…

WorldMap

This example renders an orthographic world map using D3.js and TopoJSON. It loads country boundaries from the world-atlas dataset and projects them onto a sphere with `d3.geoOrthographic()`. The map draws a blue sphere background and light green country paths with thin black strokes using `d3.geoPath()`. The visualization demonstrates basic data joining and SVG path generation from geographic features.

KKelsey Xu

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

86% match

Loading thumbnail…

World Map

This example uses D3’s geoOrthographic projection and geoPath to render a three-dimensional-looking Earth in SVG. It displays country landmasses in purple, with gray graticules and sphere outlines, plus gray interior borders between countries. The map loads world-atlas TopoJSON data, converts it using topojson’s feature and mesh, and visualizes it with React. The projection and path are generated with d3.geoOrthographic, d3.geoPath, and d3.geoGraticule, producing a static globe view.

AAashish Pandey

86% match

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

86% match