大屏幕高清显示器上的数据可视化软件—DataV

视觉信息学4（2020）12DataV：在大型高分辨率显示器上实现数据可视化梅红辉a，管惠华a，辛成业a，肖文a，陈伟b，c，陈伟a中国阿里巴巴集团b浙江大学CAD CG国家重点实验室c阿里巴巴-浙江大学前沿技术联合研究院ar t i cl e i nf o文章历史记录：收到2020年2020年6月30日收到修订版2020年在线预订2020年MSC：00-0199-00保留字：信息可视化大型高分辨率显示器交互式设计Software-as-a-servicea b st ra ct近年来，大屏幕高分辨率显示器（LHD）的可视化技术及其应用因其感知效益和提高生产率而受到广泛关注。然而，现有的工作对LHD可视化缺乏全面的指导设计要求和工具，其特定的使用场景。在本文中，我们提出的方案，设计和实现的DataV，软件即服务（SaaS）的可视化部署工具，使快速建设和跨平台发布的交互式可视化LHD。我们的框架可以支持多源异构数据的高性能渲染丰富的组件。DataV提供了一个成熟的工具链来帮助用户有效地指定布局和交互。我们通过示例以及与Tableau、Power BI、VisComposer和iVisDesigner的比较来展示其可访问性和令人印象深刻的视觉效果。我们还报告了使用DataV进行3D地图渲染的性能，并将其与deck. gl进行了比较。©2020作者（S）。由爱思唯尔公司出版我代表浙江大学和浙江大学出版社有限公司这是一个在CC BY-NC-ND许可证下的开放获取文章（http://creativecommons.org/licenses/by-nc-nd/4.0/）。1. 介绍随着越来越多地使用大型高分辨率显示器（LHD），在这种显示器上进行可视化和视觉分析的感知和认知益处设计良好的LHD可视化界面可以促进协作可视化分析（Bradel等人，，2013），刺激探索行为（Reda et al. ，2015），以及扩展感知可扩展性（Yost和North，2006）。然而，高效的LHD应用的设计需要各种非试验步骤。尽管可视化社区和商业开发人员已经为可视化构建工具提供了多种选择（Mei et al. ，2018 b），仍然缺乏明确设计用于LHD可视化的工具。在本文中，我们分析的可视化LHD的要求，并探讨适当的建设方法，以填补这一空白。在大显示尺寸和促进物理导航的驱动下（Ball et al. ，2007年），LHD可视化显示了独特的设计要求，在许多方面相比，传统的信息可视化或商业智能（BI）仪表板。在设计LHD可视化时，设计者必须考虑大量因素，包括多源异构数据，数据与上下文之间的联系，以及任务驱动设计与美学之间的平衡。大量的*通讯作者。电子邮件地址：honghui. alibaba-inc.com（H.梅），huihua. alibaba-inc.com（H.Guan），taobao.com（C.Xin），ninglang. taobao.com（X.Wen），chenwei@cad.zju.edu.cn（W.陈）。https://doi.org/10.1016/j.visinf.2020.07.001研究LHD上的认知过程和意义构建的研究论文已经提出了有用的设计指南（Yost和North，2006; Ball等人，2008）。，2007;Bradel et al. ，2013; Reda et al. ，2015）。然而，由于缺乏将这些概念转换为可靠解决方案的工具，用户在实践中仍然难以构建有效的LHD可视化。在这一点上，我们认为，这些设备具有巨大的，但尚未开发的潜力，数据融合，协同设计，和通信可视化。在本文中，我们总结了LHD可视化的设计准则，并提出了DataV，一个有效的工具，产生软件即服务（SaaS）的可视化LHD。我们的主要贡献是一个基于模板的框架，在其中我们提出了各种设计范式，利用LHD应用程序。DataV框架可以通过以下主要特性来表征：为多源异构数据和业务驱动表示收集的丰富组件;为地图和3D视图设计的高性能渲染，其中分析嵌入到空间环境中;一个成熟的工具链，使灵活的布局和令人印象深刻的显示美学乐趣，同时保持可访问性;使用DataV构建的可视化可以轻松发布为SaaS应用程序，提供方便的跨平台访问和跨设备可视化分析。其余各节组织如下。我们首先总结了相关文献。然后我们进行设计2468- 502 X/©2020作者。由爱思唯尔公司出版代表浙江大学和浙江大学出版社。这是一个在CC BY-NC-ND许可证下的开放获取文章（http://creativecommons.org/licenses/by-nc-nd/4.0/）。可在ScienceDirect上获得目录列表视觉信息学期刊主页：www.elsevier.com/locate/visinf····H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1213决策从以前的指导方针为LHD可视化和在实践中的使用情况。在此基础上，介绍了DataV的框架和接口。为了评估DataV范例的有效性，我们报告了现实世界中的一些案例。我们还讨论了设计决策的权衡以及DataV的局限性和我们未来的工作。2. 相关工作2.1. LHD上的可视化最近，LHD变得越来越受欢迎，并被广泛部署用于研究、数据分析、决策制定、演示和教育。它的商业成功进一步推动了显示技术的发展，更多的用户。与典型的桌面显示器相比，增加的显示面积和像素可以提高用户参与度和LHD上可视化的可扩展性许多研究者对LHD视觉分析的认知过程和意义建构进行了研究。更大的显示尺寸允许观众应用物理导航，而不是必须同步的虚拟导航（Ball et al. ，2007）。因此，不同的阅读速度和分析策略可以在合作中实现（Bradel et al. ，2013）。许多研究已经表明，这些显示器在通过刺激探索性行为执行视觉分析任务时提供感知和认知益处（Reda等人，2009）。，2015）和扩展感知可扩展性（Yost和North，2006）。现有的研究提出了在LHD上创建可视化的建议，包括图表风格（Yost和North，2006年）、界面布局（Bradel等人，2007年）、界面布局（Bradel等人，2008年）、界面布局（Bradel等人，2009年）和界面布局（Bradel等人，2009年）。，2013）、视觉编码（Bezerianos和Isenberg，2012）等。然而，在现有的工作中研究的LHD应用程序是很大的不同，在工业上常见的LHD可视化。与实验中研究的平铺单一类型图表、地图上的小倍数或排列的文档相比，实际使用中的LHD可视化由具有不同数据和类型的更多图表组成这些可视化应用程序类似于商业智能（BI）应用程序（如Tableau1和PowerBI）中通常创建的仪表板。2LHD可视化和仪表板同时显示多个数据源，并突出显示它们的关联，以支持决策和实时监控（Sarikaya等人，，2018年）。这些数据来源具有很强的行业或领域特定性（Stodder，2013）。然而，尽管它们具有相似的组织形式和功能，但其独特的感知特性使得LHD上的可视化遵循了不同于BI仪表板的设计原则。例如，更大的视角要求观看者移动他们的眼睛以查看不同的图表。在LHD上执行刷动和连接操作时，高亮区域通常被忽略，因此无法捕获正确的洞察力（Andrews等人，，2011年）。由于显示设备的使用场景和属性的差异，LHD上的可视化在许多方面“偏离”传统的可视化原理，特别是在美学和注意力管理方面。在这项工作中，我们研究的独特设计要求的铲运机可视化结合现有的研究和实践经验。1 Tableau：商业智能和分析软件，https://www.tableau。com/.2 Power BI：Microsoft Power Platform，https://powerbi.microsoft.com/。2.2. 可视化构造工具随着信息可视化的广泛应用，研究人员和商业开发人员已经设计了各种可视化构建工具，以减少设计可视化图所需的专业知识和工作量（Mei et al. ，2018 b）。与需要编程技能的图形库或更容易学习但仍然需要文本规范的声明性语法相比，大多数用户仍然喜欢使用交互式创作工具（Satyanarayan et al. ，2019）。其中，基于图表类型学开发的基于模板的图表由于其最容易使用而被广泛使用。这些工具通过直接在控制面板上操作，为用户提供了对数据、视觉映射和颜色编码的控制。Microsoft Excel是最常见的示例，它允许用户通过选择图表 类型并分配数 据列来创建 图表。Tableau（ 原Polaris（Stolte et al. ，2002））和Microsoft PowerBI支持可视属性映射的更灵活的配置，但是仍然基于选择预定义的图表类型。在最近几年的研究中出现了新一代的交互式创作工具，它们可以提供更灵活的视觉效果设计（Satyanarayan et al. ，2019）。然而，灵活性的代价是较高的学习成本和独特的使用模式，这阻碍了这些工具的推广另一个想法是扩展原始的基于模板的范例，以提 供 更 灵 活 的 视 觉 设 计 功 能 ， 同 时 保 持 原 始 的 可 用 性 。VisComposer（Mei et al. ，2018a）允许用户修改图表下面的底层图表，以进行更复杂的数据处理和视觉绑定。数据驱动指南（Kim et al. ，2017）允许导入SVG图形作为生成信息图形的基础。Saket et al.（Saket et al. ，2016）开发了一种交互范例，其可以在用户在散点图中排列几个点之后推荐图表类型或视觉映射上的变换然而，尽管这些工具在创建信息可视化图表方面进行了成功的尝试，但它们都是针对桌面显示设备设计的，并且大多数都只适合构建单个图表。大量非专业用户在使用现有工具构建LHD可视化时面临多个困难，包括多源异构数据的呈现、灵活的布局和复杂的因此，我们开发了DataV，它提供了支持不同类型数据的各种图表，允许灵活规范布局和交互的编辑器，以及快速的SaaS发布。3. 设计理念3.1. 使用场景我们收集了使用DataV构建的LHD可视化项目，以及用户如何展示和交流这些可视化的实际案例。从收集的项目和案例中，我们总结了以下典型的使用场景，这些场景可以反映LHD上视觉设计的关键点S1. 数据融合。数据科学家喜欢在LHD上显示各种数据以供讨论。他们的任务包括数据融合、数据治理和数字产品的协作迭代。对于呈现的可视化，他们更关心数据的来源，而不是可视化结果。有时还讨论了数据采集方法和数据传输接口.他们经常获得新的见解，H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1214取决于他们对所熟悉的数据的理解以及它如何与其他显示的数据相关联。例如，在数据驱动的LHD演示的设计迭代过程中，频繁的讨论包括“数据是否实时更新？”，“如何收集和上传温度数据？”，‘‘We must sub- divide power usage data into preciseregions to supportS2. 讲故事通过LHD可视化成功演示的关键是描绘故事并展示数字背后的状态。在我们与几位负责不同LHD项目的设计师的讨论中，我们发现他们通常首先设定要讲述的故事情节。他们在主要思路的基础上，逐步添加所需数据，设计视觉效果来展示数据，最后进行整体布局。以LHD演示为例，展示了会议场地的概况，设计师从确定要演示的多个主题开始。所涉及的主题包括与会者信息、主会场状态、展区状态、入口和停车场监控等，然后设计师考虑每个主题要讲述的故事。例如，参会信息故事主要以参会人员的签到状态和在不同展区的人气为主，辅以WiFi连接、流量、用电量等内容的信息。这些内容以表格的形式列出，以指导后续的数据采集和可视化设计。这样一个基于故事的视觉设计有助于吸引观众关注各种数据和见解。S3. 双向沟通。虽然LHD可视化通常是为演示而设计的，这是一个单向过程，但观众仍然会提出自己的见解。这种与观众互动的双向交流对主持人和观众都非常有益。这通常发生在观众看到令人印象深刻的视觉效果或与其专业领域相关的数据时。其中，基于地理空间视图的演示最能吸引观众的兴趣，激发他们的讨论热情。这是因为地理信息是演讲者和所有听众之间的共享知识。在展示地理信息时，观众往往可以与自己的生活和工作经验联系起来，从而引发激烈的讨论或激发更多的见解。例如，一位来自高原地区的游客在看到一张显示地形的三维地图后，分享了她所在地区的独特习俗，然后引发了关于城市规划、交通和教育的讨论S4. 跨平台部署。DataV的产品经理分享了客户在实际生产中的需求。我们发现LHD可视化与传统分析应用程序的一个重要区别，即产品的开发和部署在不同的平台上。出于成本和便利性的考虑，LHD可视化通常在设计期间在桌面显示器上查看，并且仅在接近完成时才在实际设备上部署和测试。此外，由于许多LHD被用作长期显示器，因此它们需要快速无缝地更新，而无需在发布新版本时重新启动。LHD可视化的另一个要求是支持跨设备交互，因为演示者通常需要便携式设备（例如，平板电脑）以帮助由于大的物理尺寸而进行的交互。例如，活动组织者希望最初设计用于在LHD上呈现的仪表板也可以 可在手机上访问，并具有报告和处理紧急情况的功能。3.2. 铲运机可视化基于实践中的场景和以前的研究，我们制定了一套指导方针，促进LHD的优势。我们从实际案例和现有研究中探讨了LHD可视化的主要优势和用户的需求。在收集先前的研究以提供指导时，我们更多地关注对实际场景中出现的现象的可能解释，以便更清楚地理解所体现的原则。通过这种方式，我们将理论与实践相结合，以指导我们的建设工具的可视化LHD的设计G1级。在显示屏上组织更多信息。关于铲运机，来自不同来源的数据应同时、详细、有序地提供。大型显示器的优势显而易见：更多的数据、更多的细节和更多的异质性。更大的显示区域使得可以同时显示更多的内容，从而不再需要传统信息可视化中常用的一些聚合和交互，例如按需细节、可滚动或可缩放画布以及多级渐进显示。建议设计者在显示器上传播数据和信息（Bradel etal. ，2013）。以这种方式，用户可以更好地利用物理导航而不是虚拟导航来进行并行信息获取，建立不同数据源之间的相互关系，并在需要时快速查看先前查看的信息（S1）。这使得LHD成为可视化多源、非结构化和松散连接数据集的理想选择，这些数据集符合最近的可视化分析趋势（Heer et al. ，2008年）。要考虑的主要问题是如何安排在一个有效的组织在屏幕上的大量信息。不同的数据类型需要以不同的方式呈现。这依赖于对各种数据源的支持和丰富的图表类型选择。有时，用户需要 使 用 与 行 业 或 特 定 数 据 源 相 关 的 某 些 可 视 化 类 型（Stodder，2013）。另一方面，一个合理的设计也包含了对不同图表的布局的不同要求，以支持比较，通信和合作（S2）。空间组织可以是影响意义构建的元数据的一种形式。通过分组或形成时间轴，可以有效地突出数据之间的语义关联，从而增强对数据细节的认知（Andrews et al. ，2011;Bradel et al. ，2013）。相反，由于较长的距离会影响视觉编码的识别和比较（Bezerianos和Isenberg，2012），因此不正确的布局可能会妨碍相关数据的分析G2 用令人印象深刻的视觉效果吸引观众的注意力。 LHD可视化设计的一个挑战是根据分析过程捕获、维护和及时转移观众的注意力，并具有令人印象深刻的视觉效果。LHD可视化可以同时显示更多数据，并消除上下文切换的成本，从而提供沉浸式视觉演示。Reda等人显示H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1215大的物理尺寸和高分辨率可以提高观众的视觉分析参与度，并在更长的时间内保持他们的注意力（Reda et al. ，2015）。然而，巨大的视角使观众很难在大显示屏上提到所有的变化。例如，当设计刷动和链接操作时，设计者必须避免观众在寻找高亮部分时扫描整个复杂可视化的需要（Andrews et al. ，2011年）。此外，由于它通常用于报告和演示，因此这种可视化的设计考虑到更多的社会问题，例如隐私和美学（Ni et al. ，2006年）。这些因素使得LHD上的可视化更加注重视觉效果。渐变颜色、三维视图和复杂动画在传统信息可视化中很少使用，但在LHD可视化中不可或缺。令人印象深刻的视觉效果可以帮助吸引观众G3. 参考地理空间信息。将数据嵌入到基于地理空间的可视化中对于扩展感知可伸缩性是有效的。当在更大的显示器上以更高的分辨率呈现可视化时，嵌入式设计被证明比小倍数更有效（Yost和North，2006）。嵌入式可视化使用增加的显示区域和像素来在单个更大的视图中嵌入更多数据，而不是显示多个视图。这可以实现更好的可伸缩性，因为它可以在相同的显示大小下呈现更多的属性（Andrewset al. ，2011年）。最常见和最重要的嵌入式设计是基于地理空间信息的。我们关注地理空间信息的原因如下。首先，地理是所有设计师和受众共享的领域知识。因此，空间隐喻可以为受众提供沉浸式的意义构建和更高水平的知识共享（Robinson，2008）。这使得嵌入在地理空间显示中的信息具有最佳语义组织（G1）。其次，基于地理分析的应用与大屏幕可视化的使用场景有很大的重叠。成功的例子包括气象数据可视化（Mei et al. ，2016），城市规划（Chenet al. ，2017）、网络异常检测（Zhang et al. ，2017）和销售数据分析（Liu et al. ，2018年）。第三，如上所述（S3），在沉浸式城市场景中显示的数据可以与大多数观众的生活和工作体验相关，从而获得更好的参与度。此外，基于3D渲染的地理空间显示具有最具影响力的视觉效果（G2）。3.3. 设计决策有了这些指导方针，我们清楚地了解了在设计LHD可视化时什么是必要的，什么不是，从而指导我们的方法的合理设计尝试。我们构建我们的方法的基础上确定的关键点，以下五个设计决策。D1. 支持丰富的数据和图表类型。LHD可视化通常由多种多源异构数据（G1）组成。DataV必须能够处理不同的数据类型和数据接口，并使用合适的可视化映射来表示它们。此外，由于不同的业务场景，即使是同一类型的数据也可能有不同的设计要求，以更好地激发行业（G2）人员的分析能力。为此，DataV旨在支持不同的数据源，并提供业务驱动的可视化组件库。D2. 启用灵活布局。 传统的BI界面通常使用基于网格的布局，无法满足LHD可视化（G1）的需求。DataV旨在实现用户可以自由控制的灵活布局D3. 强调地理空间背景和联系。DataV强调地理空间场景的显示，作为地图和3D空间（G3）。为了更好地呈现数据和上下文之间的联系，对交互和链接视图的支持也是需要考虑的关键点。D4。 提供令人印象深刻的介绍。 DataV为用户提供了丰富和精心设计的图表模板，以创建有影响力的视觉效果（G2）。这需要在任务驱动设计和美学之间取得平衡此外，DataV还提供了一个高性能的3D渲染引擎，以支持地理空间场景（G3）的构建。D5。允许使用SaaS进行易于使用的构建和发布。可访问性对于可视化查询工具至关重要。为此，DataV提出了一个基于模板的范式，遵循图表类型学（Wilkinson，2006），并由一个成熟的工具链补充。此外，为了更好地支持跨平台部署和跨设备交互（S4），DataV允许用户将设计的可视化作为SaaS应用程序发布。SaaS发布也是BI工具的常见做法，因为它可以通过云服务提供方便的访问和传输。4. 数据V在本节中，我们将介绍DataV的设计细节和我们的LHD构造范例。4.1. 框架我们首先简要介绍DataV框架，这是一个基于模板的构造工具。如示于图1、DataV由数据导入、可视化组件、编辑器工具链和应用发布四部分组成。当使用DataV进行LHD可视化创建时，用户首先将数据加载到数据中心，然后添加组件进行可视化映射。添加的组件可以在编辑器工具链中进行编辑，其中包括三个不同的编辑器。视图编辑器控制组件的属性及其布局。Blueprint编辑器使设计流程和交互成为可能。3D编辑器允许用户修剪地图和3D场景。最后，DataV提供了创建的可视化的一键SaaS发布4.2. 数据中心LHD可视化被用作数据显示和通信的平台，通常集成多源和异构数据（D1）。然而，未经处理的原始数据的格式总是无法匹配要绘制的图表。对于不同数据源的统一访问、清洗和转换，DataV为每个用户建立了一个数据中心在数据中心，用户可以通过上传本地文件或连接到在线数据库来导入和管理其数据源不同LHD项目中的组件可以访问这些数据源;因此，数据可以重用。DataV使用过滤器（用JavaScript函数编写的一段代码原始数据可以通过一系列过滤器进行处理，并转换为不同组件所需的数据格式其中，一些可重用的过滤器可以保存为代码片段，在数据中心统一管理，以备将来重用。DataV支持多种类型的数据源，包括数据库、文件、Web API等。DataV允许用户通过单击连接到这些数据源，并为用户提供熟悉的数据获取方法，如SQL查询（D5）。H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）12164.3. 组件Fig. 1. DataV框架4.4.2. 蓝图编辑器蓝图编辑器支持灵活的交互编织组件是DataV项目的基本单元。组件是指独立的视图，如条形图或折线图。用户选择适当的组件并修改组件的样式、数据和交互以组成LHD可视化。组件的一些示例如图所示。 二、铲运机可视化的主要特点之一是其应用的多样性。在不同的场景或不同的行业中，组件的数据、格式和交互要求都是不同的。为了扩大受众，DataV开发了各种组件，可以在组件中心（D1）找到。组件中心是一个在线共享市场。用户可以浏览和选择最能满足其需求的组件，并将其添加到自己的可视化中。除了默认组件之外，DataV还与其他可视化库的开发人员合作，以利用他们的组件包，例如作为Echarts（图）。3（d））。用户还可以开发自己的组件包，并将其上传到组件市场进行销售。DataV已经部署了自动化测试工具，以确保上传组件的质量。所有可能的错误和异常都将在组件上架之前捕获。此外，DataV还建立了运行时监控机制，为用户提供高质量的服务。组件中心可以很好地整合现有的图表资源，形成良好的组件生态和社区环境（D5）。4.4. 工具链DataV提供了一个完整的工具链来管理创建的组件，以实现灵活的布局和令人印象深刻的显示，从而在保持可访问性的同时获得美学乐趣工具链包含三个编辑器：视图编辑器、蓝图编辑器和3D编辑器。4.4.1. 视图编辑器视图编辑器是一个可视化规范的交互式编辑器，主要用于修改组件的布局和视觉效果。视图编辑器可以灵活地布局LHD可视化（D2）。使用视图编辑器，用户可以添加适当的组件，调整其大小，并通过单击和拖动修改布局。侧面的控制面板提供了直接操作来调整覆盖，访问数据和指定颜色映射（图。 7）。组件之间的可视化编程作为一个节点链接结构（图。4）.蓝图编辑器将组件和逻辑操作抽象为两种不同类型的节点，即一个组件节点（图。 4（a）（d））包含事件（图。4（b））由变化触发（例如，点击或动画完成）的组件和动作（图。4（e））控制组件的变化。数据流由从事件到动作的连线表示，当不同事件发生时，连线通过控制组件的响应动作来指定交互逻辑节点（图4（c））规定了数据映射和数据流转换，实现过程控制、数据处理和设备输入等。允许用户通过创建不同的节点和通过导线连接节点来指定复杂的交互。通过这种方式，DataV摆脱了文本编程的需要，并减少了用户4.4.3. 3D编辑器3D编辑器是LHD上3D场景中3D组件的设计工具3D场景通常与时空数据相关，可以帮助构建上下文并增强沉浸感（D3）。然而，3D场景的构建非常复杂，涉及到需要图形专业知识的多个转换。为了降低用户学习成本，DataV提供了3D编辑器。在3D编辑器中，用户可以创建多个场景，添加视觉效果，并控制动画帧。如图5所示，3D编辑器还支持通过在2D地图上的简单选择、视觉元素叠加（例如，线条、字形、热图颜色），和摄影机路径设置。通过3D编辑器创建的组件还支持允许在蓝图编辑器中指定交互的事件和操作。易于使用的编辑器使用户可以更专注于场景和数据的表达，而不必考虑实现，这是通过专业设计师设计的预定义的令人印象深刻的效果来实现的（D4）。4.5. 出版DataV提供了作为SaaS应用程序（D5）的LHD可视化设计的一键发布，以允许用户轻松地共享和交流数据。用户可以通过网页访问生成的可视化。这使得可视化可以在任何设备上使用，包括LHD、个人计算机和H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1217图二、 按数据类型分组的组件的一些示例，包括（a）表 格 数 据 的 常规图表，（b）文本，（c）地图和（d）网络。图3.第三章。 不同样式的 条形图的示例，包括（a）基本条形图，（b）圆形条形图，（c）条纹条形图和（d）具有自定义形状的条形图。见图4。 蓝图编辑器中节点链接结构的示例。“蓝图"由（a）组件节点组成，（b）处理事件以启动逻辑节点，（c）逻辑节点，以及（d）逻辑节点结束并触发（e）动作的组件节点。该蓝图指定了第6.1.2节中所示的可视化的交互。H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1218图五. 3 D 编辑器此场景是通过在中国杭州地图上选择一个矩形区域创建的。 添加了用于标识商店的点、道路上的线、商业圈的区域以及显示公共汽车站位置的字形右上角的控制面板允许用户快速设置相机路径智能手机DataV还提供了一个选项，可以在可视化之前通过密码或令牌强制进行身份验证，以保持用户DataV的SaaS发布基于快照;因此，在线更改不会影响发布的内容。这样， 用于长期显示的LHD上的可视化的新版本可以快速且无缝地更新5. 执行在本节中，我们将讨论DataV的实现和用户界面。DataV是用HTML5和云计算技术实现的。用户通过网页访问DataV，他们创建的可视化通过云服务存储和发布。5.1. 整个过程首先，我们讨论使用DataV创建和呈现LHD可视化的整个过程，如图6所示。此过程中有多个参与者，包括开发自定义组件的开发人员、通过交互式界面创建LHD可视化的作者以及展示最终产品的演示者。开发人员可以对定制小部件进行编程或封装来自现有库的视觉效果（例如，ECarts（Li et al. ，2018年））用于DataV中作为组件。他们开发的定制组件由统一组件中心管理。DataV提供的自动测试确保了这些自定义组件的可用性和稳定性。作者是DataV提供的工具链的主要用户他们使用DataV提供的编辑器导入数据、添加组件和设计LHD可视化可视化的规范然后由云服务存储和发布DataV为云服务提供了两个主要模块：用于存储数据和可视化规范的对象存储服务（OSS）;以及用于跨平台访问的Web托管。演示者可以通过可以访问不同数据源、显示指定的视觉效果并支持用户交互的网页来访问所创建的可视化。DataV还支持在访问相应的网页。5.2. 界面和交互除了通过文本编程处理的自定义小部件开发和库扩展之外，DataV提供了一个成熟的接口和交互，以支持整个过程中的其他步骤。5.2.1. 控制台桌所有用户都可以从一个控制台开始，该控制台集成了数据中心、组件中心以及对OSS上存储的所有项目的访问。登录DataV控制台后，用户可以查看教程，管理数据源或自定义组件，以及添加或编辑LHD项目。项目工作区支持对项目进行分组、排序和搜索。5.2.2. 编辑器画布用户可以创建或选择一个项目，并进入编辑器画布，默认情况下，它作为视图编辑器启动（图1）。 7）。在视图编辑器中，用户可以指定布局和调色板，调整每个组件的位置和大小，并预览通过画布创建的LHD可视化。DataV在右下角提供缩略图视图， 用户可以预览或调整布局的画布。选择单个或多个组件后，用户可以执行以下操作：拖动：拖动以移动。调整大小：在组件的边界周围移动鼠标. 显示调整大小图标后，拖动以调整大小。旋转：围绕组件的边界移动鼠标. 出现旋转图标后，拖动即可旋转。对齐：点按右侧控制面板上的对齐或分布图标。成组元件：通过右键单击菜单进行成组。 添加到蓝图编辑器：通过右键单击菜单添加。当一个组件被添加到蓝图编辑器中时，将生成具有所有可用事件和操作的相应组件节点在组件节点的基础上，用户连接或添加逻辑节点来指定交互（图11）。4）. 3D编辑器嵌入在编辑器画布中。选择3D组件后，右侧的控制面板将自动切换到模型导入、着色器选择和动画管理等选项······H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1219图六、使用Da ta V 创建和呈现LHD可视化的 整 个 过 程 。5.3. SaaS访问见图7。视图编辑器的界面。6.1.2. 交互式可视化接下来，我们将给出一个示例，说明如何指定inter-用户添加的所有静态数据和可视化规范在DataV中存储在OSS中。当用户点击发布时，DataV会通过云的Web托管服务生成一个指向可访问网页的链接。用户可以通过Web浏览器打开此链接以显示结果可视化。该网页采用HTML5技术实现，通过SVG显示组件，并利用WebGL加速三维场景的渲染。此外，生成的Web页面可以通过Web套接字与云服务器通信，从而实现对在线远程数据的请求和跨设备交互。6. 案例和比较6.1. 例6.1.1.预定义模板DataV提供了多种预定义的模板，供用户轻松快速地构建LHD可视化。如示于图DataV支持丰富的组件类型、灵活的布局和令人印象深刻的地理空间表示。示例包括网格对齐的仪表板、以地图为中心的显示以及嵌入在3D场景中的视觉使用Blueprint编辑器。杭州市中小学地理及其他信息在这个例子中显示（图）。 9）。通过在蓝图编辑器中创建节点和线，创建的LHD可视化可以提供多种方式来更改数据以交互式显示。顶部的选项卡用于在小学和中学之间切换。用户可以通过单击单选框在地图上设置不同类型学校的可见性。当在地图上悬停区域时，显示与每个区域相对应的学校信息此外，当点击列表中的学校名称时，将显示每个学校的详细信息。以悬停为例，图。4展示了如何在蓝图编辑器中实现这种交互。当光标进入地图上的一个区域时，事件“on regionmouse in”（图2）。（4）（b）被触发。该事件传递了与悬停区域相关的数据，其中属性被提取（图4（c））并传递给其他组件（图4（c））。 4（d））以更新细节视图。6.1.3. 地理空间数据表示3D编辑器可以提供逼真的3D场景的简单构造，其中可以嵌入数据表示。图图10示出了建立在机场的交通数据上的示例。在构建此场景时，3D编辑器允许用户在导入原始模型后拆分机场的不同楼层，H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1220见图8。 DataV提供的预定义模板的一些示例，包括（a）网格对齐的仪表板，（b）以地图为中心的显示，以及（c）嵌入的视觉效果。在3D场景中。见图9。由蓝图编辑器指定的交互式可视化示例。两侧的局部视图将随用户交互而更新。相应的蓝图编辑器界面的 一 部 分 如图所示 。 四、更好地显示数据。然后，显示人群流的粒子将附着到每个楼层。6.2. 比较在本节中，我们将DataV与其他现有的BI工具和研究成果进行比较，包括Tableau、Power BI、VisComposer和iVisDesigner（Renet al. ，2014年）。所有这些方法都支持在屏幕上创作多个图表。我们比较这些方法的基础上确定的LHD可视化设计准则（表1）。首先是不同工具支持的数据类型和布局（G1）。DataV和BI工具都支持多种类型的数据源，而研究工作中的原型系统通常从文件中导入数据。这些方法都支持浮动布局，以自由控制图表位置。此外，DataV和Tableau还支持平铺布局，可以根据整个画布自动DataV和Power BI还支持自动调整大小选项，例如适合页面和适合这提高了在具有不同屏幕尺寸和纵横比的不同设备柔性H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1221×图10个。 由3D编辑器构造的3D场景的示例。导入的模型将拆分为多个楼层，以更好地显示模型内的数据表1制作多个图表的不同方法的比较Tableau PowerBI VisComposer iVisDesigner DataV表2在deck.gl渲染图中的场景时，比较www.example.com和DataV的平均帧速率。11、互动的时候数据源都所有文件文件所有数据Vdeck.gl平铺布局✓✗✗✗✓渲染（概述）55.1 fps23.8 fps浮动布局✓✓✓✓✓平移（概述）29.5 fps4.8 fps自动拟合✗✗✓✗✓变焦16.4 fps2.1 fps风格化图表✗✗✗✗✓渲染（缩放视图）每秒44.2帧18.7 fps动画排行榜✗✗✗✗✓平移（缩放视图）36.4 fps7.5 fps相互作用固定固定✗固定柔性3d地图扩展b 延 伸 部分c✗✗✓a所有通用数据源，包括数据库、文本文件（例如，csv文件）和Web API。bMapbox Geospatial Analytics Extension for Tableau。cMapbox Visual for Power BI。对数据源和布局的支持使DataV易于显示不同的数据（G1）。其次，在视觉效果方面，DataV提供了比传统BI和可视化分析工具更多的例如，条形图有各种风格，如圆角，自定义形状的条形图（图10）。3）。此外，DataV还支持动画图表，如旋转木马列表。借助蓝图编辑器，DataV可以实现灵活的交互规范。相比之下，大多数交互工具只提供固定的交互，如刷和链接。这些差异使DataV能够以更灵活和有趣的方式（G2）显示数据，使其更适合演示。第三，在显示地理信息（G3）方面，DataV具有对3D场景的原生支持，而Tableau和Power BI需要扩展来提供绘制3D地图的能力我们还测试了DataV的3D渲染性能 我们构建了一个包含上海430，000栋建筑物的场景（图1）。第十一章并测试了使用deck.gl（基于Mapbox）和DataV渲染此场景或交互时的平均帧速率（表2）。所有的测试都是在配备2.7 GHz 4核Intel i7（Gen8）CPU的MacBook Pro上运行的Chrome，分辨率设置为19201080像素。与deck.gl相比，我们可以发现DataV具有更好的性能，反映在平均帧速率上。7. 讨论7.1. 设计备选方案从使用场景和设计需求中，我们可以得出结论，LHD可视化工具的主要目标是是通过简单的操作为不同的观众提供支持。然而，有不止一种设计可以实现类似的目标。在这里，我们有一些简短的讨论，参考其他同类软件的成功实践和研究成果，分析现有的设计方案和我们的决策原因7.1.1. 模板化施工在开发DataV时，我们考虑了许多不同模式的虽然声明性语言和那些具有高度可定制性的交互式工具（Satyanarayanet al. ，2019）可以提供更大的设计灵活性，但它们并不适用于所有人群。对于缺乏可视化专业知识和使用这些工具的经验的用户相比之下，让用户从专业设计师设计的模板中进行选择，然后进行定制，则更加实用。因此，我们采用了基于模板的设计模式，然后根据预定义的组件进行扩展。特别是，我们发现基于模板的构造在实践中有利于冷启动如上所述，LHD可视化可以极大地激励用户利用他们的领域知识探索和产生因此，允许用户利用模板快速构建初步结果以查看和修改可以提高效率。7.1.2. 蓝图编辑器蓝图编辑器旨在提供灵活的交互指定。在开发蓝图编辑器之前，DataV利用回调函数来指定对交互的响应。基于JavaScript的灵活性，回调是高效的，并且广泛用于基于Web的可视化（例如，D3）。然而，对于同步显示多个图表的LHD可视化，事件和响应之间的关系变得更加复杂。H. Mei，H.关角，澳-地Xin等人视觉信息学4（2020）1222见图11。用于比