Skip to main content
100%

Gist fcaa6cc1968b4cd0eac0f15d1f0ff3f4

✓ Published0🌍 Public
YYannael
Last edited Sep 7, 2017
Created on Sep 7, 2017

This visualization maps geographic data onto a three-dimensional globe using D3.js and Three.js. It renders landmasses as extruded polygons via `d3.geoPath` and converts them to Three.js geometry, while a `d3.forceSimulation` drives the rotation of the globe. The example also applies a canvas-based texture through `getImageData` to overlay graticule lines and subtle shading, and it animates the camera with `transition.attrTween` to smoothly orbit the planet. The data comes from a GeoJSON source embedded in the gist file.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist f1bf8c3ebae119b50908ee3e14c67bb9

This visualization shows the evolution of a sparse network of points on a sphere, rendered as an interactive 3D globe. It uses Three.js to display the sphere and its points, while d3.forceSimulation computes a repulsive force between the points to distribute them evenly across the surface. The code reads positions from a data file and applies a custom projection to map geographic coordinates onto the 3D sphere. As the simulation runs, the points visibly repel each other and settle into a more uniform arrangement, with the globe rotating slowly to reveal the entire layout.

YYannael
81% match
Loading thumbnail…

Globe project

This globe visualization, rendered with D3 v4 and Three.js, presents an interactive Earth with countries, graticules, and labeled points of interest. Built from a fork of earthjs’s block, it combines SVG, canvas, and WebGL for smooth rotation and zoom, with hover tooltips for countries and dots. A subtle gradient ocean and interactive land paths highlight geographic features, while CSS transitions provide visual feedback on hover.

EEPBAH
80% match
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
79% match
Loading thumbnail…

This Is Not a Globe

This visualization presents a stylized, rotating globe built from world land boundaries using an equirectangular projection. The land data is drawn onto a circular canvas clip, with two offset copies of the map scrolling horizontally to create the illusion of continuous rotation. The code uses the D3.js `d3.geo.equirectangular` projection, `d3.geo.path`, and Canvas `context` APIs, driven by a timer to update the animation. The world-110m GeoJSON dataset provides the geographic features, and the animation simulates a sphere while the actual projection remains flat.

Mmbostock
79% match
Loading thumbnail…

Gist 9bd5ca69fc039cff50383b3a3459858b

This example shows how to render a spatial distribution of data points on a map using D3.js. It uses `d3.geoPath` to draw geographic boundaries and `d3.forceSimulation` to position overlapping points, while Canvas `getImageData` is used to read pixel data for collision detection. The visualization reads from a PGP-encrypted text file, suggesting the underlying dataset is not directly accessible. The code relies on D3’s selection and transition APIs to animate point movements, and it appears to use a projection to convert latitude and longitude coordinates into screen positions. The result is an interactive scatterplot overlaid on a map, with points dynamically adjusting to avoid overlap.

CCliffordAnderson
79% match
Loading thumbnail…

Gist 7db080b8909bfe2d732eeb33909de6ec

This visualization combines a D3 geographic projection with an animated particle system on an SVG and canvas hybrid, showing graticules and a world map in an interrupted sinusoidal projection. The code references the idea of piling up continents by latitude and longitude, and uses d3-geo-projection to render the map with an unusual projection. The animation likely shows the map morphing or the graticules/particles being drawn dynamically.

11wheel
78% match
Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry
78% match
Loading thumbnail…

Simplified Globe

A simplified globe spins continuously, displaying the world's landmasses as a dark silhouette against a plain background. The visualization uses an orthographic projection (`d3.geoOrthographic`) and renders the geographic features as an SVG path via `d3.geoPath`. Land data comes from the `world-110m` TopoJSON file, which is simplified with `topojson.presimplify` and `topojson.simplify`. A `d3.timer` drives the animation, rotating the projection and tilting it sinusoidally to create a wobbling effect.

CCurran Kelleher
78% match