React For Big World Data - The making of Shopify’s BFCM Globe

Shopify’s yearly Globe visualizes purchases through its merchants in real time during Black Friday and Cyber Monday. Its layers include order arcs, city dots for places with orders in the past 24 hours, fireworks for merchants’ first sales of the day, animated city searches, and a small number of orbiting airplanes.

The team represented orders with Bézier curves and triangle strip meshes, oriented toward the camera so the arcs remain visible from different angles. City glows used instanced GL points, while fireworks used trails with gravity and a noise effect. For city searches, the camera interpolated between spherical coordinates; updating its up direction each frame fixed upside-down transitions, such as a route to Sydney.

After trying several globe textures, the team settled on a look inspired by risograph printing, with sharp dots of varying sizes. Screen-space postprocessing and several noise functions did not meet the visual goal, so they chose PSRD flow noise. Because 3D PSRD noise was too expensive to calculate repeatedly per fragment, they used its cheaper 2D version.

Earlier versions struggled to render more than a thousand arcs on some mobile devices. By instancing shared geometry and materials, the team rendered tens of thousands of arcs in a single draw call. Restrepo also points to responsive layouts, hardware acceleration, CSS optimization, touch input, and sharp assets as parts of supporting mobile viewers.