Browsing Large Graphs with Tile Pyramids and Sleeve Routing in the Browser

Abstract: We present a new way to visualize a large graph in the style of online geographic maps. The method builds a tile pyramid for semantic zoom: at every zoom level the labels of the highest-ranked nodes remain readable, just as the names of major geographical features stay readable on those maps. The edges are routed by a method we call sleeve routing, which searches the dual graph of a Constrained Delaunay Triangulation to select a sequence of triangles through the free space, then applies the funnel algorithm to compute a shortest path inside the selected sleeve. We apply several heuristics to speed up the routing. We implemented our approach in the WebGL renderer of MSAGLJS, an open-source TypeScript library for graph visualization in web browsers, with the entire pipeline running client-side, without a dedicated server. Our benchmark suite contains nine graphs with up to 32,768 nodes and 236,978 edges, and measures browser-side parsing, layout, routing, and tile-pyramid construction. The renderer's demo can be seen at https://microsoft.github.io/msagljs/renderer-webgl-sleeve/index.html. MSAGLJS is available on GitHub (https://github.com/microsoft/msagljs) and as NPM packages (@msagl/core, @msagl/drawing, @msagl/parser, @msagl/renderer-svg, @msagl/renderer-webgl -- all on https://www.npmjs.com/).

• The paper introduces a client-side framework that uses tile pyramids and a novel sleeve routing algorithm for interactive, obstacle-avoiding graph visualization.
• It employs PageRank-based filtering and spatial hashing to achieve semantic zoom with preserved node positions and adaptive scaling.
• Empirical results demonstrate up to 63% routing speed improvements and near-60Hz interactive rates, ensuring smooth performance on large graphs.

Large-Scale Graph Browsing in the Browser: Tile Pyramids and Sleeve Routing

Overview

The paper "Browsing Large Graphs with Tile Pyramids and Sleeve Routing in the Browser" (2605.17498) presents a client-side, open-source TypeScript framework for interactive visualization of large graphs on the web. The approach leverages a hierarchical tile pyramid reminiscent of geographic map metaphors, coupled with a novel sleeve routing algorithm operating over the dual of a Constrained Delaunay Triangulation (CDT). This design supports smooth, real-time pan and zoom, while maintaining readable labels and visually stable obstacle-avoiding routes, rendering all stages via WebGL in browsers without requiring backend computation.

Tiling Scheme and Semantic Zoom

The visualization pipeline constructs a tile pyramid, where each level corresponds to a distinct zoom factor and maintains a bounded set of visible entities per tile. Nodes at each level are selected using a PageRank-based filter, ensuring label prominence for high-importance vertices and facilitating semantic zoom. Node positions are preserved across levels, while node sizes are adaptively scaled to prevent overlap, pruning lower-ranked nodes when necessary. This selection employs an efficient spatial hashing mechanism for overlap checks, maintaining construction cost manageable even with large input graphs.

Figure 1: The entities rendered on each level are shown without scaling as the user zooms in.

Figure 2: Two adjacent pyramid levels of the Game of Thrones graph rendered by the WebGL renderer with the sleeve router; edges are routed anew at each level, and node selection is PageRank-based.

A key attribute of this approach is that all per-level layouts, routing, and segmentation are performed up front, enabling low-latency user interactions. However, this up-front strategy imposes a bound on the input graph size, primarily dictated by memory and computational cost.

Sleeve Routing on CDT Duals

Edge routing is performed using the sleeve routing algorithm, which seeks homotopy-aware, shortest-path geodesics around node obstacles using the dual of a CDT. Routing is decomposed into two subproblems: identifying a triangle sequence in the dual for the edge (combinatorial), and extracting the shortest realization within this channel (geometric), which the funnel algorithm solves.

This architecture affords several optimizations tailored for web scaling:

• Batching via Dijkstra Trees: For vertices with multiple incident edges, a single-source Dijkstra search in the CDT dual identifies sleeves to all targets, reducing redundancy compared to per-edge A* search.
• Vertex Cover Heuristic: Further reduction in search roots is achieved by identifying an approximate minimum vertex cover over the query edge set; only the endpoints in the cover serve as Dijkstra roots, amortizing search over overlapping demand efficiently.
• Vertex Collapse at Endpoints: To improve geometric path quality at source/target nodes, a collapse step merges sleeve chains adjacent to endpoints, mitigating visually awkward detours and opening the funnel at entry/exit points.

Figure 3: Effect of vertex collapse on the LORAS--RENLY edge; post-collapse (b), the funnel path is straightened and endpoint detours are removed.

Experimental results show that the sleeve router's total arc length is within 2.8% of the visibility-graph optimum, with worst-case per-edge stretch well below the theoretical maximum for CDT-based routing. The Dijkstra batching and vertex cover heuristics provide substantial speedups with higher-degree graphs, with observed routing speed improvements of up to 63% over naive A*, and an extra 11–42% reduction via the vertex cover approach.

Rendering and Browser Interaction

All processing is performed client-side, with tile delivery handled via deck.gl's TileLayer using the precomputed tile pyramid. User input results only in tile lookups and rendering—no recomputation or server roundtrips are required at interaction time.

Interaction is further supported by hover mechanisms (node and edge focus highlighting), and animated zoom transitions. At all times, the number of rendered elements is governed by the active tile set, not the total graph size, ensuring scalability.

Empirical browsing studies show that the system sustains near-60Hz interactive rates for graphs with tens of thousands of nodes and up to hundreds of thousands of edges. Long rendering or browser pauses remain rare and short, even on dense social graphs.

Experimental Evaluation

Performance is validated on benchmark graphs spanning from several hundred to over thirty thousand nodes, and up to nearly a quarter-million edges. The initial build (layout, CDT, routing, tile segmentation) completes in seconds to a few minutes, depending on size, with routing time overwhelmingly dominated by the Dijkstra-tree sleeve searches. Results show effective MAP-based filtering maintains dense-screen tiles well-bounded in terms of GPU load, peaking at a few thousand render elements at the deepest zoom, independent of total graph size.

Numerical Highlights

• Routing stretch: Sleeve routing yields a total arc length 1.028× that of the visibility-optimal route for the evaluated social graph.
• Speedups: Batched Dijkstra trees provide up to 63% faster routing than per-edge A*; the vertex cover heuristic yields an additional 11–42% reduction.
• Responsiveness: 95th percentile frame times remain below 18.4 ms (≤1.7 ms over 60 Hz theoretically perfect), even for million-edge graphs.

Implications and Future Directions

The proposed system delivers a practical, web-native vehicle for map-like, semantic zoom navigation over large graphs—an undertaking previously reserved for specialized desktop environments or raster servers. By shifting both geometric and routing computations entirely to the browser and leveraging hierarchical, PageRank-driven filtering, the framework enables scalable, real-time graph browsing accessible to any client platform.

Pending challenges include:

• Incremental Tile Pyramid Construction: To mitigate up-front cost and further lift size bounds, the authors propose lazy, demand-driven tile computation, delivering high-level overviews immediately and postponing deeper, finer tile generation until required.
• Tighter Per-Tile Load Enforcement: Although average tile density is bounded, pathological input can result in tiles exceeding targeted capacity by an order of magnitude, impacting rendering and interactivity. Enforcing hard caps on per-tile rendering load remains unresolved.

The implication for network science, knowledge exploration, and any domain where very large graphs are consumed interactively in browsers is significant: immediate, visually stable access to large, richly annotated, and dynamically laid-out graphs directly on the client.

Conclusion

The paper presents a complete, efficient, and open-source solution for the visualization and interactive exploration of large-scale graphs in web browsers. The combination of tile pyramids for semantic zoom and scalable sleeve routing for visually stable, obstacle-avoiding edges situates this system at the forefront of practical graph visualization infrastructures. The approach yields strong empirical results for both performance and route quality, establishing a foundation for future interactive, map-like graph analysis capabilities on commodity devices.