Pencil Sketch

100%

✓ Published0🌍 Public

Last edited Apr 27, 2020

Created on Sep 18, 2014

A rotating globe appears hand-drawn, with landmasses rendered as multiple overlapping, jittered outlines in a sketchy style. The visualization uses D3’s geometry pipeline to resample, jitter, and smooth points along great arcs for a hand-drawn effect. It renders to a canvas element, animating the globe’s rotation over time. The code loads world map data from a JSON file and draws it using an orthographic projection.

AI-generated description

This stylized globe uses D3’s in-development geometry pipeline to jitter points before rendering. Points are sampled along great arcs, jittered, and then smoothed using basis-spline interpolation to achieve a hand-drawn effect. The resulting spherical geometry is computed once, allowing faster rendering with arbitrary rotation!

This techinque was developed in collaboration with Derek Watkins for Norway the Slow Way.

gpl-3.0 Licensed

Similar vizzes

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

81% match

Loading thumbnail…

Rotating Globe

A rotating orthographic globe displays world landmasses and graticule meridians in SVG. The Earth spins continuously via a d3.timer that updates the d3.geoOrthographic projection’s rotation, with d3.geoPath rendering the geographic features from TopoJSON world-atlas data. A hover effect darkens countries, while a static color legend lists continents. Zoom and pan are supported through d3.zoom, with the globe group transformed on user input.

Nnouralkhoury

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

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

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

79% match

Loading thumbnail…

Rotating Globe

This example shows a continuously rotating orthographic globe, with country outlines and a graticule drawn over a dark ocean. The globe is interactive, allowing users to pan and zoom via a d3.zoom handler that applies a transform to the SVG group. The rotation is driven by a d3.timer that updates the d3.geoOrthographic projection’s rotation, while d3.geoPath renders the sphere, graticule, and land masses from World Atlas TopoJSON and TSV data. The visualization uses SVG with hover highlights on countries.

Ddarinadii11

79% match

Loading thumbnail…

Multiple Rotations

An animated canvas displays a rotating globe. The graticule and sphere are drawn using D3’s geometry pipeline, which applies two sequential rotations—a fixed tilt and a time-based spin—before orthographic projection and clipping. The code uses `d3.geo.pipeline` with `d3.geo.rotate`, `d3.geo.clipCircle`, and `d3.geo.project`, rendering via a `contextSink`. The graticule is generated by `d3.geo.graticule`.

Mmbostock

78% match

Loading thumbnail…

Untitled

An orthographic globe projects world landmasses and graticule onto a Canvas, with countries highlighted in red on hover and named in a header. The globe auto-rotates using a d3.timer, and users can drag to spin it via versor-based quaternion rotation, pausing rotation after interaction. Data comes from the world-atlas TopoJSON and a world-country-names TSV, rendered using d3.geoPath and d3.geoOrthographic within the d3-geo library.

DDolbyref113

78% match