Skip to main content
100%

Globe

✓ Published0🌍 Public
Aapratt2003
Last edited Oct 30, 2017
Created on Oct 30, 2017

This example shows a globe rendered with an orthographic projection, displaying the world’s landmasses in steelblue against an empty background. The visualization draws geographic features using D3 v4’s `d3.geoOrthographic` and `d3.geoPath` APIs, with map data loaded from the `world-atlas` TopoJSON dataset via `d3.json` and `topojson.feature`. A text element initially appears with an empty value before the map loads. The code sets the projection scale and translate to center the globe, then appends SVG paths for each land feature.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

This Is a Globe

A rotating orthographic globe displays Earth’s landmasses as a flat silhouette on a circular canvas. The map is rendered using D3 v3’s `d3.geo.orthographic` projection and `d3.geo.path`, with TopoJSON land data from the world-110m file. A `d3.timer` advances the rotation each frame, clearing and redrawing the canvas context, while a stroked arc outlines the sphere’s edge.

Mmbostock
87% match
Loading thumbnail…

Orthographic Globe

This interactive visualization presents an orthographic (globe) projection of world landmasses using the D3 v4 library. Users can pan the globe by dragging with the mouse, which adjusts the projection’s rotation based on pointer movement, and zoom by scrolling, which scales the projection. The map is rendered as SVG from TopoJSON world atlas data.

Aapratt2003
85% match
Loading thumbnail…

Orthographic

This example shows a globe rendered with the orthographic projection, displaying landmasses and country boundaries over a graticule, all clipped to a sphere. The visualization uses D3 v3’s `d3.geo.orthographic` for projection, `d3.geo.path` for drawing, and `d3.geo.graticule` for the grid. Land and boundary data come from a TopoJSON world file (world-50m), processed with `topojson.feature` and `topojson.mesh`. The sphere is drawn twice: once as a black stroke and once as a white fill, with the land and boundaries layered in between.

Mmbostock
85% match
Loading thumbnail…

globe

This example displays a map of the world on a dark grey spherical globe with white borders. The globe is rendered using React and SVG, with the d3.geoOrthographic projection and d3.geoPath converting geographic data into SVG paths. Country boundaries are drawn from a TopoJSON file loaded using the d3.json function. A large grey circle provides the globe’s background, while the map features are layered on top with thin white strokes.

CChase Hall
84% match
Loading thumbnail…

Spinning Globe

This example displays a spinning orthographic globe using D3 v4 and TopoJSON. It loads land geometry from the `world-110m` TopoJSON file and renders it as an SVG path. A `d3.timer` continuously updates the projection’s rotation, spinning the globe horizontally while tilting it vertically with a sinusoidal motion. The visualization demonstrates how minimal code can create an animated geographic visualization using D3’s geo path and timer modules.

Aapratt2003
84% 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
84% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using an orthographic projection, rendering countries as light-green SVG paths with dark strokes. It loads geographic data from a TopoJSON world-atlas file via `d3.json`, then converts it to GeoJSON using `topojson.feature`. The map is drawn with `d3.geoPath` and `d3.geoOrthographic`, projecting the spherical landmasses onto a flat plane. The dark blue background and minimal styling emphasize the Earth’s curved shape, creating a simple globe-like visualization.

NNita
84% match
Loading thumbnail…

Let's make a map!

This example renders an interactive orthographic globe using D3’s `geoOrthographic` and `geoPath` projections. It loads world country boundaries from TopoJSON and country names from a TSV file, then displays each country as a light-green SVG path that turns red on hover, with tooltips showing the country name. The globe itself is drawn as a dark-blue sphere, and all interactions rely on D3’s data join and selection methods.

DDannie2020
84% match