Skip to main content
100%

Spinning globe with glowing city markers in D3

✓ Published0🌍 Public
Aackuser
Last edited May 15, 2015
Created on Jun 9, 2017

A D3.js visualization presents a spinning globe with glowing city markers, rendered using SVG animation. The globe continuously rotates, and over 4,000 city locations from the GeoNames database are dynamically reprojected and plotted as glowing points. The visualization, which uses a black background and elegant typography, is computationally intensive and optimized for Chrome browsers. It highlights global population distribution by representing cities with markers whose positions are recalculated in real time.

AI-generated description

A Spinning globe with glowing city markers in D3.

Note: This visualization constantly recalculates and reprojects the position of over 4000 markers and thus needs a lot of computation power. Older computer and mobile devices might struggle with the rendering process. Furthermore the visualization is only optimized for Chrome browsers and might look different than expected when opened in other browsers.

Inspired by Curran Kelleher's idea to plot a world map in D3 by using the GeoNames database as seen in his great Introdction to D3 video.

Similar vizzes

Loading thumbnail…

Spinning Globe with capitals

A spinning globe displays capital cities as proportional points, with land, water, graticules, the equator, and the prime meridian rendered in gradient colors that shift with the rotating orthographic projection. Using d3-geo’s `geoPath` and `geoOrthographic`, the animation advances longitude each frame via `requestAnimationFrame`, while city radius scales with square-rooted population data from a reduced world cities CSV. Overlaid graticule lines and country borders are clipped to the globe’s visible hemisphere, producing a stylized, night-side gradient effect.

Ffadingcode9@gmail.com
83% match
Loading thumbnail…

Rotating globe

This rotating globe visualization uses an orthographic projection to display world country polygons, a graticule grid, and three labeled city points (Munich, San Antonio, and Melbourne). The globe continuously rotates via a d3.timer, updating the country paths, graticule lines, city markers, and labels each frame. Labels are hidden when their corresponding city is on the far side of the globe, determined by the great-arc distance from the map’s center. The example uses d3.v3 with SVG and animation, loading TopoJSON world data and styling countries, graticules, and points with distinct colors.

EEE2dev
82% match
Loading thumbnail…

Globe with Cities - React & D3

An orthographic globe projection displays world landmasses and city markers scaled by population, with graticules and a sphere contour providing geographic context. Built with React for state management and D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` for projection and rendering, the visualization includes interactive rotation via mouse position tracking. City coordinates come from a CSV dataset, and land features are derived from TopoJSON using `topojson.feature` and `topojson.mesh`.

Ddvinubius
82% match
Loading thumbnail…

SVG Globe with cities

An interactive SVG globe displays roughly 48,000 cities from the MaxMind WorldCities database, with each city shown as a red point. Users can pan and zoom the globe, which uses `d3.geoOrthographic` and `d3.geoPath` to render the sphere, graticule, and country borders. The implementation leverages `d3.zoom` for navigation, and dynamically redraws the paths on each zoom or drag event. The city data is loaded from a CSV and plotted as a single `MultiPoint` feature, with population values available but not visually encoded.

SSazerland
81% match
Loading thumbnail…

Cities on a Globe

This example presents an interactive orthographic globe that plots circles for cities with populations over 100,000, with circle size proportional to population. Users can pan and zoom the globe by dragging or using the scroll wheel, which triggers dynamic re-rendering of city markers. The visualization uses D3 v4 with d3.geoOrthographic projection, d3.geoPath, d3.drag, and d3.zoom, along with TopoJSON world-atlas data for country boundaries. City data originates from a preprocessed Geonames dataset, and the code displays tooltips via d3-tip on hover.

DDavid Allyn
81% 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
81% 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
81% match
Loading thumbnail…

Spinning Globe

A spinning globe uses an orthographic projection to display world country boundaries from a TopoJSON file. The globe rotates continuously around its vertical axis as the projection’s rotation state updates on each animation frame via `requestAnimationFrame`. The code applies `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule` to draw country paths, a graticule, and a sphere outline, with state managed through setState and cleanup.

JJoel Jäggli
80% match