Skip to main content
SimilarExport ZIP
100%

d3 World Map

✓ Published0🌍 Public
NNoah Weinberg
Last edited Sep 29, 2020
Created on Sep 28, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3 World Map

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`.

NNoah Weinberg
92% match
Loading thumbnail…

World Map

This interactive visualization displays a world map using D3 and React, rendering Earth’s landmasses in green with country borders and graticule lines overlaid on a light gray sphere. The map is drawn using `d3.geoNaturalEarth1` projection and `d3.geoPath`, with geographic data sourced from the world-atlas TopoJSON file (countries-50m.json). Country interiors and borders are derived via `topojson.feature` and `topojson.mesh`, while React manages the SVG rendering and loading state.

HHollyClarke19
89% match
Loading thumbnail…

World Map

This world map visualization displays landmasses and country borders using a natural Earth projection with d3.geoPath and d3.geoGraticule. The SVG rendering, built with React, layers a light gray sphere, teal land fills, green interior boundaries, and cyan graticule lines. Data comes from the world-atlas TopoJSON dataset, processed through topojson.feature and topojson.mesh to extract land geometry and internal borders. The visualization emphasizes clean, stylized geographic outlines rather than thematic data encoding.

Mmclee933
89% match
Loading thumbnail…

WorldMap

This visualization shows a world map with country boundaries rendered in green, overlaid with graticule lines and gray sphere background. Using React to manage the component lifecycle, the code loads GeoJSON data from the world-atlas package via D3’s json function, then applies d3.geoNaturalEarth1 projection and d3.geoPath to draw SVG paths. TopoJSON’s feature and mesh utilities extract country polygons and interior borders from the topology.

EEd Hutchinson
89% match
Loading thumbnail…

World Map

This visualization displays a world map using an equirectangular projection, rendering countries and the globe’s sphere outline in distinct colors against a warm background. It loads geographical data from the world-atlas TopoJSON source, then uses d3.geoPath and d3.geoEquirectangular to generate SVG paths for each country. The code leverages topojson’s `feature` method to parse the dataset, and D3’s `select` and `json` handle DOM selection and asynchronous data fetching within a React framework.

TTejamod
89% match
Loading thumbnail…

World Map D3.js!

This example displays an interactive world map using SVG, with countries rendered in green and the ocean as a blue sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. Countries are drawn with `d3.geoPath` and the `geoEquirectangular` projection, and hovering over a country changes its fill to orange via CSS. The map uses D3 v5 for data binding and rendering.

NNikkko1
89% 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
89% match
Loading thumbnail…

World Map

A world map rendered with D3’s geoNaturalEarth1 projection, drawn in SVG using d3.geoPath. The map displays landmasses filled with teal, country interiors as thin light-blue lines, and graticules in gray. Data comes from the TopoJSON World Atlas (countries-50m.json), processed via TopoJSON’s feature and mesh APIs. The React-based visualization shows a static globe with a subtle color scheme, prioritizing clean spatial form over interactivity.

WWolfgang
89% match