D3 frames to video

100%

D3 frames to video

✓ Published0🌍 Public

Last edited Jul 2, 2016

Created on Jul 2, 2016

This example shows a rotating orthographic globe with countries filled in rainbow colors, rendered as a 600-frame animation that spins smoothly. The visualization displays world geography from TopoJSON data, with each country’s fill color cycling through a rainbow palette based on its index and frame number. The code uses D3’s `geoOrthographic` projection and `geoPath` to draw the globe, countries, and borders onto an HTML5 Canvas via the `canvas` npm package. Frames are piped directly to FFmpeg, which encodes them into an MP4 video at 20 frames per second, demonstrating a headless workflow for creating D3 animations.

AI-generated description

This amazing script by Noah Veltman allows to create videos from d3.

install

npm install canvas topojson d3 rw

run

node draw.js | ffmpeg -y -c:v png -f image2pipe -r 20 -i - -an -c:v libx264 -pix_fmt yuv420p -movflags +faststart myvideo.mp4

enjoy

Similar vizzes

Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière

81% match

Loading thumbnail…

Rotating Orthographic

A rotating orthographic projection of the world, rendered via canvas animation, shows the globe slowly spinning as landmasses and country borders move across the sphere. The code uses `d3.geo.orthographic` with a clip angle to define the projection, `d3.geo.path` to draw land, borders, and graticule, and `d3.json` to load world-110m GeoJSON data. A timer updates the rotation angle over time, clearing and redrawing the canvas each frame.

Mmbostock

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…

D3 - Maps

A rotating orthographic globe displays world landmasses as stroked vector outlines on a Canvas element. D3’s `d3.geoOrthographic` projection and `d3.geoPath` render both the geographic features and a graticule, with the rotation updated by `projection.rotate` inside a `setInterval` loop. The geographic data comes from a remote TopoJSON-like GeoJSON file, while the animation runs on a 960×800 canvas.

SSubhendu Karmakar

77% match

Loading thumbnail…

spinning_globe_NH

A spinning orthographic globe displays world countries as filled paths, rotating smoothly around a tilted axis. The visualization uses d3-geo’s `geoOrthographic` projection, `geoPath`, and `geoGraticule` to render landmasses and grid lines. Country boundaries come from the visionscarto-world-atlas TopoJSON dataset, fetched via `fetch` and converted with `topojson-client`. The animation is driven by React state updates, with rotation angles changing each frame via `requestAnimationFrame`, redrawing the map on every render.

NNavak94

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

77% match

Loading thumbnail…

World Tour

This visualization presents an animated tour of countries on a globe using an orthographic projection. Each country's name is displayed before the globe rotates to center on that nation, with land, country borders, and the selected country drawn in separate colors onto a Canvas. The code loads world geometries from a TopoJSON file and country names from a TSV file, then uses D3's `d3.geo.path`, `d3.geo.centroid`, and `d3.interpolate` within a `d3.transition` queue to animate the rotation and redraw each frame.

DDangTHS

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

76% match