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

TL;DR

This paper introduces a novel client-side graph visualization method using tile pyramids and sleeve routing, enabling efficient rendering of large graphs in web browsers without server dependence.

Contribution

The authors develop a new visualization technique combining semantic zoom and sleeve routing, implemented entirely in WebGL for large-scale graph rendering in browsers.

Findings

Successfully visualized graphs with up to 32,768 nodes and 236,978 edges.

Achieved efficient browser-side parsing, layout, routing, and tile construction.

Demo available at https://microsoft.github.io/msagljs/renderer-webgl-sleeve/index.html.

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/).