toto2

100%

✓ Published0🌍 Public

Last edited Nov 22, 2017

Created on Nov 22, 2017

This example shows a rotating orthographic projection of the world, with the globe spinning continuously around its vertical axis on a green background. The code loads a GeoJSON dataset of country boundaries from an external URL and renders it as an SVG path using `d3.geoOrthographic` and `d3.geoPath`. A `d3.timer` updates the projection’s rotation angle based on elapsed time, redrawing the path each frame to create the animation. The visualization relies on D3 v4 and SVG output.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/6e24bcc3a19477fc610b5801a642d14b'>toto</a>

forked from <a href='http://bl.ocks.org/SimplicissimusFr/'>SimplicissimusFr</a>'s block: <a href='http://bl.ocks.org/SimplicissimusFr/a5ed3ac1e80b27e86c6c0c3987df2dce'>toto</a>

mit Licensed

Similar vizzes

Loading thumbnail…

toto

A rotating orthographic globe displays country boundaries from a GeoJSON dataset, rendered as a single SVG path. The projection rotates continuously around the Y-axis via `d3.geoOrthographic`, with a timer updating the rotation and refreshing the path geometry using `d3.geoPath`. The map fills the viewport with a green background, emphasizing the spherical motion over interactive control.

SSimplicissimusFr

93% match

Loading thumbnail…

Spinning Globe

A spinning globe displays the world’s landmasses in an orthographic projection, rotating continuously while its tilt oscillates. The visualization uses D3 v4’s `d3.geoOrthographic()` projection and `d3.geoPath()` to render country polygons from the `world-110m` TopoJSON dataset. A timer updates the projection’s rotation and tilt, redrawing the SVG path each frame to create the animated effect.

CCurran Kelleher

82% match

Loading thumbnail…

Spinning Globe

This example visualizes the Earth as a spinning globe, using an orthographic projection to render country boundaries and a graticule in a dark-outlined sphere. The animation continuously updates the rotation state via `requestAnimationFrame`, gradually shifting the longitude to create a smooth spin. The code uses `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` from the D3 library, along with `topojson-client` to convert TopoJSON data fetched from the visionscarto-world-atlas into GeoJSON features. The visualization responds to window resizing, scaling the SVG output accordingly.

Aaaadarshsingh36@gmail.com

82% match

Loading thumbnail…

fresh block

This example shows a spinning globe visualization that rotates continuously to display world continents. The orthographic projection rotates around the vertical axis using `d3.geoOrthographic()` and `d3.geoPath`, with the rotation angle driven by `d3.timer` based on elapsed time. The globe renders country boundaries from a GeoJSON file loaded via `d3.json`, while the SVG background is styled with a light blue color. The code uses D3 v4 for all geographic projections, path rendering, and animation timing, with no additional libraries or interactive elements.

CCanaramour

82% match

Loading thumbnail…

Spinning Globe

This example shows a world map projected onto a rotating globe, using an orthographic projection to create a 3D effect. It displays the graticule and country boundaries with a simple, clean visual style. The code uses `d3.geoOrthographic` and `d3.geoPath` to render the map, and `d3.geoGraticule` for the grid lines. It loads country data from a TopoJSON file via `topojson-client` and manages rotation through state. The animation is implemented using `requestAnimationFrame` to update the rotation values, though it is currently disabled.

SShad Frigui

81% match

Loading thumbnail…

Rotating Orthographic

An orthographic projection of the world rotates continuously, showing a dark outline of the continents against a circular boundary. The rotation is driven by a timer that recalculates the projection’s center based on elapsed time and a fixed velocity. The example uses `d3.geo.orthographic()`, `d3.geo.path()`, and `topojson.feature()` to render the land from a `world-110m.json` dataset as SVG. The code also applies a 90-degree clip angle and updates the path’s `d` attribute on each tick, with styling from a CSS circle element.

Mmbostock

81% match

Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Mmbostock

81% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Nnouralkhoury

81% match