d3 to three

100%

✓ Published0🌍 Public

Last edited Jan 18, 2017

Created on Jan 18, 2017

An interactive 3D globe displays a list of people with their photos and Twitter handles; selecting a person or choosing "Show All" rotates the globe to highlight their geolocated cities. D3 generates the globe's texture from TopoJSON country data and handles UI transitions and scroll tweening, while Three.js renders the WebGL scene. The example adapts Mike Bostock's World Tour and Steve Hall's WebGL globe approach.

AI-generated description

Pictures are a scrollable ul; select "Show All" in the select box to scroll thru all people.

textures for three mesh are generated with topojson and d3

d3 is used for transitions and interpolation

three.js renders the globe

adapted from Mike Bostock's World Tour

and Steve Hall's Interactive WebGL Globes with THREE.js and D3

Tested on os x Mavericks Chrome, Safari, Firefox.

"Show All" sporadically crashes in Chrome Beta on my KitKat Android phone.

forked from <a href='http://bl.ocks.org/kenpenn/'>kenpenn</a>'s block: <a href='http://bl.ocks.org/kenpenn/16a9c611417ffbfc6129'>d3 to three</a>

mit Licensed

Similar vizzes

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

78% match

Loading thumbnail…

World Tour

This visualization presents an animated orthographic globe that cycles through the world’s countries, highlighting each one in red while rotating to center it on screen. The display shows the country name above the globe as it transitions between nations. The code uses D3.js v3 for transitions and tweens, TopoJSON for world map data, and a Canvas 2D context for rendering. A queue loads GeoJSON topology and country name mappings, while d3.geo.path draws land, borders, and the globe sphere with dynamic rotation.

AAjar06

77% match

Loading thumbnail…

Globe Zoom - Animate

This interactive globe visualization animates between orthographic and map projections to display geographic data points, with country boundaries rendered as SVG paths. Users can zoom and rotate the globe, search for locations, and toggle between datasets showing meat consumption and population growth percentages. The visualization is built with D3.js version 3, React, and TopoJSON, using d3.geo.orthographic and d3.geo.winkel3 projections with d3.geo.zoom for interaction. Data is loaded from external CSV and TopoJSON sources, with tooltips and a legend providing additional context.

Nnouralkhoury

76% match

Loading thumbnail…

Globe Zoom - Animate

Nnouralkhoury

76% match

Loading thumbnail…

GLOBE

This interactive visualization presents a rotatable 3D orthographic globe of the world using D3.js and React. Users can drag the globe to explore different regions, with rotation applied via the versorDrag helper and d3.drag. The map displays country boundaries from TopoJSON world-atlas data (110m and 50m resolutions), rendered as SVG paths with hover highlighting. A graticule overlays the sphere to show latitude and longitude lines, while the projection updates dynamically through React state and d3.geoOrthographic.

AAnujbhatt26

75% 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

75% match

Loading thumbnail…

Let's make a map D3.js

This example displays world countries on a rotating orthographic globe rendered as an SVG sphere with light green landmasses. The visualization loads geographic data from the World Atlas TopoJSON dataset via `d3.json`, then converts it to GeoJSON using TopoJSON’s `feature` method. D3’s `geoOrthographic` projection and `geoPath` generate the country outlines, while the sphere background is drawn using a GeoJSON Sphere object. The code imports specific D3 modules (`select`, `json`, `geoPath`, `geoOrthographic`) and styles the map with CSS classes.

JJoachim Klug

75% match

Loading thumbnail…

D3 World Map III

This example displays an interactive world map with countries rendered in light green against a light blue ocean. Users can pan and zoom the map using mouse or touch gestures, with a hover effect that highlights countries in red and reveals their names as tooltips. The visualization uses d3-geo with the geoNaturalEarth1 projection and d3.geoPath to draw SVG paths, while d3.zoom handles the interactive transformations. Geographic data comes from the world-atlas TopoJSON dataset, with country names loaded from a corresponding TSV file.

YYoung Song

75% match