Design and Implementation of a Real-Time Data Visualization Large Screen Using WebGL and a Custom Map Framework

The article introduces a modern data‑visualization large‑screen product developed by DiDi, which aims to make static data "alive" through vivid, real‑time, and interactive visual effects. It outlines the overall development workflow, from product requirement gathering and design refinement to the core implementation of six visualization modules: base map construction, trajectory, bubble, heatmap, flight line, and scatter point.

1. Development Process and Challenges

The team first coordinated with product and design teams, then focused on four main difficulties: (1) one‑time map loading requiring a custom map framework, (2) performance issues caused by massive data computation, transmission, and rendering, (3) stability and maintainability of numerous business‑line interfaces, and (4) visual fidelity.

2. Technical Solutions

2.1 Custom Map Framework (map3)

A self‑developed map framework called map3 was built on top of threejs , with an API design inspired by mapbox . The initialization code is as follows:

const map3 = new Map3({
  container: string | HTMLElement,
  style: Style,
  center?: number[],
  pitch?: number,
  bearing?: number,
  zoom?: number,
  controller?: boolean,
  hash?: boolean;
});

This framework loads the entire city model (roads, water, buildings, and detailed landmarks) in a single request, avoiding the tile‑reload problem of traditional mapbox solutions.

2.2 Data Compression with Geobuf

To handle >300 MB of 3D city data, the team adopted geobuf (based on Protocol Buffers) to compress GeoJSON by storing coordinate deltas and using varint encoding. An improved version called mbuf further reduces size by subtracting a base coordinate and performing projection on the server side.

2.3 Trajectory Rendering

Real‑time trajectories are drawn as meshes because WebGL can only render 1 px lines. The algorithm computes head and tail positions each frame, moves them along the path, and uses dynamic programming to locate points at a specific distance. Data is transmitted via ArrayBuffer over WebSocket to keep per‑frame processing under 20 ms.

2.4 Bubble Rendering

Bubbles represent order generation. Instead of DOM markers, they are rendered as meshes with texture atlases. The four vertices of a rectangle are calculated from the geographic coordinate, and texture coordinates are managed to stay within the 16‑texture‑unit limit of fragment shaders.

2.5 Heatmap Generation

The heatmap uses heatmap.js with custom modifications. Points are rendered to a grayscale canvas where alpha values accumulate linearly; a linear color gradient then maps alpha to final colors. A debugging interface allows designers to adjust radius and color palette without full re‑rendering.

2.6 Flight Line Rendering

Both straight and curved flight lines are implemented. Straight lines use sprites with animated UVs, while curved lines use CatmullRomCurve3 (or 3‑D cubic Bézier when the angle is small) to generate 100 points. UV animation is performed in the shader by passing a time‑based constant, avoiding per‑frame vertex updates.

2.7 Scatter Points

Static scatter points are enhanced with a breathing effect: point size and opacity oscillate over time, and positions are randomized to create a lively appearance.

3. Debugging Tools

A visual debugging panel lets designers adjust map lighting, heatmap parameters, and other visual settings in real time, bridging the communication gap between developers and designers.

4. Conclusion

The project demonstrates a full‑stack solution for large‑scale, real‑time data visualization, combining front‑end WebGL techniques, backend data compression, and performance‑aware networking. The team plans to extract reusable components into a shared library for future projects.