Skip to main content
SimilarExport ZIP
100%

Fork of Spinning Globe

✓ Published0🌍 Public
MMuhammadsaad.khan@vuw.ac.nz
Last edited May 29, 2024
Created on May 29, 2024
Forked from 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.

AI-generated description

A spinning globe!

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Spinning Globe with capitals

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.

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
92% 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
88% match
Loading thumbnail…

Fork of HTML Starter

This interactive map displays COVID-19 total cases by country, colored on a red sequential scale. Built with D3 v7 and the `d3.geoOrthographic` projection, the map uses `d3.geoPath` to render country boundaries from GeoJSON data. Hovering highlights a country in orange and reveals a tooltip. A legend shows the color scale. The globe can be dragged to rotate, and a timer automatically spins it, recalculating the projection each frame. Case data loads from a linked CSV file.

MMuhammadsaad.khan@vuw.ac.nz
87% 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…

Fork of Circles with D3

Two synchronized world maps animate COVID-19 new cases per 100,000 people and vaccination rates over time, using sequential red and green color scales to encode values. Each map includes a play button and slider to scrub through dated records, with the choropleth paths colored from CSV data. The visualization uses D3.js version 3 with `d3.geoNaturalEarth2`, `d3.geo.path` for map projection, TopoJSON from the world-atlas package, and ISO country code mappings to join the data.

SSaipramod Yerra
82% 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
82% match
Loading thumbnail…

Fork of Covid-19

A world map uses semitransparent orange circles to show cumulative COVID-19 case counts by country on March 25, 2020. The visualization renders country boundaries as SVG paths via `d3.geoPath` with a `geoMercator` projection, and scales circle radii with `d3.scaleSqrt`. Data comes from a CSV of Johns Hopkins case counts, loaded with `d3.csv`. A range slider is present, but it does not currently change the displayed date.

Ddas888530
81% match