Schwab Michail, Saffo David, Bond Nicholas, Sinha Shash, Dunne Cody, Huang Jeff, Tompkin James, Borkin Michelle A
IEEE Trans Vis Comput Graph. 2022 Sep;28(9):3219-3234. doi: 10.1109/TVCG.2021.3059294. Epub 2022 Jul 29.
The dominant markup language for Web visualizations-Scalable Vector Graphics (SVG)-is comparatively easy to learn, and is open, accessible, customizable via CSS, and searchable via the DOM, with easy interaction handling and debugging. Because these attributes allow visualization creators to focus on design on implementation details, tools built on top of SVG, such as D3.js, are essential to the visualization community. However, slow SVG rendering can limit designs by effectively capping the number of on-screen data points, and this can force visualization creators to switch to Canvas or WebGL. These are less flexible (e.g., no search or styling via CSS), and harder to learn. We introduce Scalable Scalable Vector Graphics (SSVG) to reduce these limitations and allow complex and smooth visualizations to be created with SVG. SSVG automatically translates interactive SVG visualizations into a dynamic virtual DOM (VDOM) to bypass the browser's slow 'to specification' rendering by intercepting JavaScript function calls. De-coupling the SVG visualization specification from SVG rendering, and obtaining a dynamic VDOM, creates flexibility and opportunity for visualization system research. SSVG uses this flexibility to free up the main thread for more interactivity and renders the visualization with Canvas or WebGL on a web worker. Together, these concepts create a drop-in JavaScript library which can improve rendering performance by 3-9× with only one line of code added. To demonstrate applicability, we describe the use of SSVG on multiple example visualizations including published visualization research. A free copy of this article, collected data, and source code are available as open science at osf.io/ge8wp.
用于网络可视化的主流标记语言——可缩放矢量图形（SVG）——相对容易学习，具有开放性、可访问性，可通过CSS进行定制，可通过文档对象模型（DOM）进行搜索，并且易于进行交互处理和调试。由于这些特性使可视化创建者能够专注于设计和实现细节，基于SVG构建的工具，如D3.js，对可视化社区至关重要。然而，缓慢的SVG渲染可能会通过有效限制屏幕上的数据点数量来限制设计，这可能会迫使可视化创建者转而使用画布（Canvas）或网络图形库（WebGL）。而画布和网络图形库的灵活性较差（例如，无法通过CSS进行搜索或样式设置），且更难学习。我们引入了可缩放可缩放矢量图形（SSVG）来减少这些限制，并允许使用SVG创建复杂而流畅的可视化。SSVG通过拦截JavaScript函数调用，自动将交互式SVG可视化转换为动态虚拟文档对象模型（VDOM），以绕过浏览器缓慢的“符合规范”渲染。将SVG可视化规范与SVG渲染解耦，并获得动态VDOM，为可视化系统研究创造了灵活性和机会。SSVG利用这种灵活性释放主线程以实现更多交互性，并在网络工作线程上使用画布或网络图形库渲染可视化。这些概念共同创建了一个即插即用的JavaScript库，只需添加一行代码就能将渲染性能提高3到9倍。为了证明其适用性，我们描述了SSVG在多个示例可视化中的使用，包括已发表的可视化研究。本文的免费副本、收集的数据和源代码可在osf.io/ge8wp上作为开放科学获取。
