论文研读-图可视化-NetV.js:Web端可视化工具库

1 论文概述

2021年发表在Visual Informatics上的文章，介绍了浙大陈为老师发布的图数据Web端可视化工具库-NetV.js。

1.1 文章摘要

图形可视化在社交媒体网络、蛋白质-蛋白质相互作用网络和交通网络等领域发挥着重要作用。许多可视化设计工具和编程工具包在图形相关的应用程序中得到了广泛的应用。然而，一个关键的挑战仍然是大规模图数据的高效可视化。在本研究中，我们提出了NetV.js，这是一个开源的、基于WebGL的JavaScript库，支持以交互帧速率在普通计算机上快速可视化大规模图形数据(多达5万个节点和100万条边)。实验结果表明，我们的库优于现有的工具包(Sigma.js, D3.js, Cytoscape.js和Stardust)的性能和内存消耗。

关键词：图、图可视化、网络可视化、节点-链接图

1.2 引言

图可视化在多个领域发挥着重要作用。一系列可视化创作工具已经开发出来，以方便图形可视化的设计和创建。其中，d3.js极大地降低了基于web的可视化创作的难度，并增强了可视化社区的能力，随后出现了许多基于web的图形可视化工具。

在各种类型的可视化表示中，节点-链接图是最受欢迎的，因为它可以显示拓扑结构和连接。开发人员使用一般的可视化创作工具如D3.js，P4和stardust来操作节点链接图的可视化元素时需要特别注意。可视化节点链接图的一些类似的要求可以被抽象和封装到相关的接口中，以减少工作量。

一些图形可视化编写工具，如Cytoscape.js和Sigma.js，通过封装图形可视化的相关接口，为开发人员隐藏不相关的接口(如控制链接的位置)，以及暴露与图形相关的接口(如访问节点的邻近区域)，为开发提供了极大的方便。然而，大多数工具在实时显示图形数据方面的能力有限。如第5节所述，在可视化节点数大于5000的图形时会出现严重的延迟，从而导致用户体验不佳。

没有现成的工具能同时满足编写可用性和用户可访问性的要求。我们分析了节点链接图可视化设计需求，并贡献了NetV.js (https: //netv.zjuvag.org/)，一个基于web的高性能可视化库。它通过一套与节点链接相关的特性和接口提供了高可用性，并利用GPU的高性能渲染能力增加了用户的可访问性。我们使用比较实验来评估我们的系统。

1.3 文章脉络

• 引言 Introduction
• 相关工作 Related Work
• 库的设计 Design
• 使用案例 Examples
• 实验 Experiment
• 结论 Conclusion

2 相关工作

许多库(工具，语法和框架)已经为基于图的应用程序所提供。一开始，开发人员使用传统的编程语言来构建图形可视化应用程序，如C Sharp、c++、javaScript和Python。开发人员需要具备熟练的编程技能，并理解实现机制。与此同时，他们花了大量时间进行开发和调试。为了使这个过程更容易，可视化语法和框架允许在可视化的可视化通道上进行详细配置，代表包括D3.js [10], ECharts [20],Vega [28], and Vega-Lite [29]。

然而，开发人员仍然需要仔细地选择复杂的API来构建图形，因为api是为通用的可视化而不是图可视化应用程序设计的。另外，图可视化工具，如Cytoscape.js [18]， Sigma.js[19]，和Gephi[30]，设计和实现特定的功能，以简化构建过程。

同时，数据量在效率方面也带来了很大的挑战。有些库[30,31,32]使用HTML canvas来绘制可视元素，因此性能较低。PixiJS [31]， P5[15]和Stardust[17]都使用基于GPU的技术来适应大量的元素。然而，它们并不是专门为图形可视化设计的，并且包含了对图形可视化来说不必要的冗余APIs。然而，它们的渲染效率有很大的提升潜力。

NetV.js的目标是高效地可视化大规模节点-链接图。它利用基于图形处理器的可视化框架来提高渲染性能和设计友好的简洁编程接口，以有效地操纵图形元素。

3 设计