Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published1🌍 Public
Ssreen020
Last edited Oct 30, 2020
Created on Oct 30, 2020

This example displays an orthographic map of the world, rendered as a blue sphere with grey country outlines. It uses D3’s `geoOrthographic` projection and `geoPath` to draw the sphere and country boundaries, pulling geographic data from the `world-atlas` TopoJSON dataset via `topojson.feature`. The SVG output includes a styled sphere fill and country paths, with interactive rotation not implemented in the shown code.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple orthographic world map rendered as an SVG, with countries filled in light green and a blue sphere representing the globe. It uses D3 v5’s `geoOrthographic` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas dataset. The code appends a sphere path, then fetches the TopoJSON file, converts it to GeoJSON with the `feature` function from the topojson library, and binds the resulting country features to SVG paths.

DDukatino
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an orthographic world map rendered as an SVG, with countries filled in green against a light blue sphere. It uses D3.js version 5 functions `d3.geoOrthographic` and `d3.geoPath` to project and draw geographic features, alongside TopoJSON’s `feature` method to extract country boundaries from the world-atlas dataset. The map initially displays a global view, with the sphere outline and country paths appended to the SVG canvas.

SSophia Murage
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example creates an interactive orthographic map of the world using D3.js v5 and TopoJSON. It loads world country boundaries from the world-atlas dataset and renders them as SVG paths with a blue ocean background and green landmasses. The code uses `d3.geoOrthographic` for the projection and `d3.geoPath` to generate the geographic paths. Country features are extracted with TopoJSON’s `feature` method and bound to SVG path elements, producing a simple, static globe visualization.

VVinh H. Le
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example creates a world map rendered as SVG using D3 v5 and TopoJSON. It loads world country boundaries from the World Atlas TopoJSON dataset, projects them with the `geoNaturalEarth1` projection, and draws each country as a filled path using `d3.geoPath`. A blue sphere background is added first, with countries shown in light green and outlined with subtle black strokes. The map displays the entire globe with country shapes accurately projected.

CChip
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders an orthographic globe using D3.js and TopoJSON, drawing country boundaries as green SVG paths with white strokes over a sphere background. It loads world geography from the world-atlas dataset, converts TopoJSON features via `topojson.feature`, and projects them with `d3.geoOrthographic` and `d3.geoPath`. The map is static, with no rotation or interaction, and displays all countries at a 110m resolution.

Aaidanoconnor1
92% match
Loading thumbnail…

Let's make a map D3.js

This example displays world countries on a rotating orthographic globe rendered as an SVG sphere with light green landmasses. The visualization loads geographic data from the World Atlas TopoJSON dataset via `d3.json`, then converts it to GeoJSON using TopoJSON’s `feature` method. D3’s `geoOrthographic` projection and `geoPath` generate the country outlines, while the sphere background is drawn using a GeoJSON Sphere object. The code imports specific D3 modules (`select`, `json`, `geoPath`, `geoOrthographic`) and styles the map with CSS classes.

JJoachim Klug
92% match
Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON. It shows the entire globe as a blue sphere with light green countries, using the `geoEqualEarth` projection and `geoPath` to generate SVG paths. The map draws country boundaries from the `world-atlas` dataset loaded via `json()`, demonstrating a simple choropleth-style base map with subtle stroke effects.

WWhitney Hung
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map with D3.js, displaying country boundaries and a blue sphere as the base layer. It uses the `geoNaturalEarth1` projection and `d3.geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The visualization demonstrates a simple two-step workflow: drawing the sphere outline first, then fetching and appending each country's path via `topojson.feature`. The map is styled with CSS, using a light green fill for countries and a dark blue ocean, with a clean, minimal aesthetic.

Hhuashe418
92% match