Skip to main content
SimilarExport ZIP
100%

Fork of Spinning Globe with capitals

✓ Published0🌍 Public
MMuhammadsaad.khan@vuw.ac.nz
Last edited May 29, 2024
Created on May 29, 2024

This visualization displays a rotating orthographic globe with capital cities and COVID-19 case data colored on countries. The globe automatically spins via `d3.timer` while supporting drag interaction through `d3.drag`. It uses `d3.geoOrthographic` with `geoPath` to render country boundaries, graticule lines, the equator, and Greenwich meridian. Radial gradients applied through SVG definitions create a night-side effect on the sphere. City points are sized by population using `geoPath`’s `pointRadius` method, and COVID-19 data is loaded from a CSV file.

AI-generated description

A spinning globe with capital cities.

Initially, I just wanted to change the rotation, and add the equator. Then I realized that the graticule lines are clipping as expected, so tried to add the capital cities too in the same manner (see the SO link below that helped me to achieve that). And I could not resist to have some fun with gradient coloring. The 'defaultProjection' and the gradient values are tuned for this "small" VizHub view and use 'userSpaceOnUse' for gradientUnits (for various reasons :) ... yeah, I don't know much about this, and I was satisfied with the current result.)

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Spinning Globe

A spinning orthographic globe visualizes global COVID-19 case counts by country, with a sequential red color scale for intensity and a tooltip on hover. Built with D3.js (version 7.8.2) and the `d3.geoOrthographic` projection, it uses `d3.geoPath` for country outlines and `d3.timer` for continuous rotation. The choropleth map loads world geometries from a GeoJSON file and COVID-19 case data from a local CSV, while user drag interactions via `d3.drag` adjust the rotation. A legend displays the color scale range.

MMuhammadsaad.khan@vuw.ac.nz
93% match
Loading thumbnail…

Fork of HTML Starter

This interactive orthographic globe displays world COVID-19 case counts, coloring each country on a red sequential scale based on its total cases. The visualization uses d3.geoOrthographic projection with d3.geoPath to render country boundaries from a loaded GeoJSON dataset, while COVID-19 statistics come from an external CSV file. Users can drag the globe to rotate it, and a d3.timer animation continuously spins the projection. Hovering over a country reveals a tooltip showing its exact case number, and a legend shows the color-to-case-value mapping.

MMuhammadsaad.khan@vuw.ac.nz
86% match
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
86% match
Loading thumbnail…

Fork of Circles with D3

This interactive map shows total COVID-19 cases per country on a rotating orthographic globe. The visualization uses D3.js with `d3.geoPath` and `d3.geoOrthographic` to project world GeoJSON data, while a sequential red color scale encodes case counts loaded from a CSV file. Users can hover over countries to see exact case numbers in a tooltip, and drag or auto-rotate the globe through `d3.drag` and `d3.timer`.

MMuhammadsaad.khan@vuw.ac.nz
84% match
Loading thumbnail…

Fork of Spinning Globe 1

This animated visualization shows a spinning orthographic globe with country boundaries and a graticule grid, rotating continuously around its vertical axis. The map renders world geography from a TopoJSON dataset fetched from unpkg.com, using D3’s `geoOrthographic`, `geoPath`, and `geoGraticule` to project and draw the sphere, outline, and countries. Animation is driven by `requestAnimationFrame`, updating the rotation state to decrement the longitude each frame, which re-renders the projection. The code manages state transitions and cleanup for hot reloading.

Jjeetamakhal@gmail.com
82% 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…

Fork of Spinning Globe

A spinning globe animation uses an orthographic projection to display world country boundaries from a TopoJSON dataset loaded from unpkg. The d3-geo projection rotates continuously via requestAnimationFrame, updating the globe’s rotation state each frame. A graticule and sphere outline are drawn using d3.geoPath, while country polygons are rendered with distinct strokes, creating a clear, animated visualization of Earth’s geography.

Ss_cural@coloradocollege.edu
81% match
Loading thumbnail…

Fork of Spinning Globe

This example presents a spinning globe, rendered as an orthographic projection that continuously rotates to showcase Earth's geography. The visualization uses d3-geo's `geoOrthographic` projection and `geoPath` to draw country outlines from TopoJSON data loaded from the visionscarto-world-atlas, along with a graticule and sphere outline. An animation is driven by `requestAnimationFrame`, which updates the projection's rotation state to create the spinning effect. The code is structured with a main module handling data fetching and state management, while a separate map module draws the geographic elements.

Ool.ritter@web.de
81% match