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/).
翻译:我们提出了一种新方法,用以在在线地理地图风格下可视化大型图。该方法构建了用于语义缩放的瓦片金字塔:在每个缩放级别,最高排名节点的标签保持可读,正如主要地理特征的名称在地图上始终清晰可见。边通过我们称为袖套管道路由的方法进行布线,该方法搜索约束Delaunay三角剖分的对偶图,以选择一条通过自由空间的三角形序列,随后应用漏斗算法计算所选袖套管内的一条最短路径。我们采用了多种启发式策略来加速路由过程。我们在MSAGLJS的WebGL渲染器中实现了该方法——MSAGLJS是一个用于网页浏览器中图可视化的开源TypeScript库,整个管线在客户端运行,无需专用服务器。我们的基准测试套件包含九个图,节点数多达32,768个,边数多达236,978条,并测量了浏览器端的解析、布局、路由及瓦片金字塔构建性能。该渲染器的演示可在https://microsoft.github.io/msagljs/renderer-webgl-sleeve/index.html 查看。MSAGLJS可在GitHub(https://github.com/microsoft/msagljs)上获取,并作为NPM包发布(@msagl/core、@msagl/drawing、@msagl/parser、@msagl/renderer-svg、@msagl/renderer-webgl——均可在https://www.npmjs.com/ 获取)。