虚拟现实中的数据可视化
1. 介绍
简而言之,数据可视化是数据的图形表示。今天,它已成为数据科学的重要组成部分。关键利益相关者对清洁和清晰的视觉效果(而不是原始数据)的反应更好,因为它们有助于快速有效地理解信息。matplotlib(Python)和ggplot2(R)是目前的佼佼者,目前有大量的可视化库。
但是,这些库尚未在虚拟现实领域取得重大突破。随着技术向虚拟现实和增强现实迈进的巨大希望,用户也必须在AR / VR中体验数据可视化至关重要。考虑到这一点,该项目的目标是在虚拟现实中探索和创建数据可视化。
1.1 WebVR
目的是使每个人(无论使用何种设备)都更容易获得VR体验。因此,WebVR被选为最佳媒体。WebVR是实验性的JavaScript应用程序编程接口(API),可为虚拟现实设备提供支持。这是一个开放的规范,也使在浏览器中体验VR成为可能。体验WebVR需要两件事:耳机和兼容的浏览器。
1.2 A-Frame
A-Frame是用于构建虚拟现实体验的Web框架。A-Frame基于HTML之上,因此入门起来很简单。但是A-Frame不仅是3D场景图或标记语言,还包括 核心是功能强大的实体组件框架,该框架为Three.js提供了声明性,可扩展和可组合的结构。可以从纯HTML文件开发A-Frame,而无需安装任何工具。或者,可以创建一个HTML文件,并在<head>中包含A-Frame,如图1所示。
1.3 D3.js
A-Frame建立在DOM之上,因此大多数库和框架都可以使用。其中包括D3.js,这是一个JavaScript库,用于根据数据处理文档。D3使用HTML,SVG(可缩放矢量图形)和CSS(级联样式表)帮助使数据栩栩如生。D3强调网络标准,从而为用户提供了现代浏览器的全部功能,而又不会将自己绑定到专有框架,而是结合了强大的可视化组件和数据驱动的DOM(文档对象模型)操作方法。例如,可以使用D3从数字数组生成HTML表格,或使用相同的数据创建具有平滑过渡和交互作用的交互式SVG条形图。
2. 实现可视化I
可视化的目的是从包含静态JSON文件的URL中读取数据,并在VR中创建条形图。相机的起始点将在图表的中心,周围带有各种条形图。构建可视化需要两个文件-一个HTML文件,该文件使用A-Frame实体定义页面的主体,以及一个Javascript文件,该文件在读取数据后执行可视化。包含要可视化的数据的JSON文件如图2所示。
2.1 XMLHttpRequest(XHR)
为了从URL读取上面的JSON文件之类的数据,必须使用XMLHttpRequest。XMLHttpRequest是一个内置的浏览器对象,允许使用JavaScript发出HTTP请求。尽管名称中带有“ XML”一词,但它可以对任何数据进行操作,包括JSON,HTML或纯文本。可以上传/下载文件,跟踪进度并使用XMLHttpRequest(XHR)对象与服务器进行交互。用户可以从URL检索数据,而不必进行完整的页面刷新。这使网页可以更新页面的一部分,而不会中断用户的操作。
在上面的图3中,执行以下步骤:
1. 创建一个XMLHttpRequest对象
2. 所需的URL已分配给变量
3. XHR对象使用GET方法和指定的URL初始化
4. 连接已打开,并且向服务器发送了请求
5. 听完响应后,读取响应文本
6. 使用JSON.parse将响应文本从字符串转换为JSON并存储在变量中
7. 该变量用于处理数据可视化的函数中
2.2 浏览器
制定可视化功能并将Javascript文件与HTML文件链接后,仍然会发生错误。原因是在代码片段的第一行中存在“ require”方法。“ require”方法用于将模块包含在项目中,并将其用作基于浏览器的XHR对象。问题在于,尽管Node.js定义了“ require”方法,但浏览器却没有。借助Browserify,人们可以编写使用“require”的代码,就像在Node中使用它一样。为了使用此功能,请遵循以下步骤:
1. 使用npm从命令行安装“ xmlhttprequest”
2. 从所需的所有模块开始,以main.js(有效的JS文件)递归地捆绑到一个名为bundle.js的文件中,并使用browserify命令
3. HTML文件中包含一个<script>标记,并将bundle.js指定为源
2.3可视化功能
负责DOM操作和数据可视化的功能从XHR API获取数据。数据被推入数组,然后缩放以适合屏幕。选择了A-Frame“ a-scene”,并在其后附加了“ a-cube”栏。此后,定义了条形的各种属性,例如高度,宽度,位置和旋转。还使用“过渡”方法定义了“ mouseenter”和“ mouseleave”动画,这便于将鼠标悬停在其上进行扩展和点亮。最后,组成了可视化图中条形下方的标签以及所需的属性。最终可视化的快照如图4所示。
3. 实现可视化II
第一次可视化只能从静态JSON文件读取数据。如果可视化可以读取动态变化的数据,则将更加实用和有用。这是第二个可视化的目标。它将借鉴可视化I的基本结构和功能,同时增加实时更新自身的功能。
3.1 Cloud Firestore
在此可视化中,由于数据不是从静态JSON文件中获取的,因此不需要使用XMLHttpRequest和Browserify。而是从Google Firebase的Cloud Firestore获取数据。Cloud Firestore是一个灵活,可扩展的NoSQL云数据库,用于从Firebase和Google Cloud Platform开发移动,Web和服务器。它通过实时侦听器使数据在客户端应用程序之间保持同步,并提供对移动和Web的脱机支持,以便用户可以构建响应性应用程序,而无论网络延迟或Internet连接如何。对于此可视化,使用带有多个文档的“费用”集合,如图5所示。
为了使可视化访问Cloud Firestore数据库中的数据,HTML文件中包含一个<script>。其中指定了用户的网络应用Firebase配置详细信息。初始化数据库,并使用图6中的代码将其作为“ db”访问。
下面图7中的代码说明了程序如何处理数据更改。集合中的每个条目的类型均为“已添加”,“已修改”或“已删除”。代码中的switch语句通过操纵输入数据来处理每种情况。重新定义数据后,会将其传递到处理可视化的函数中。
3.2 可视化功能
如前所述,第二个可视化的主要设计功能是从第一个中借用的。场景,条形图和标签以相似的方式构造并具有相同的属性。附加功能之一是,条形的颜色现在基于条件-如果值大于50,则为紫色,否则为蓝色。但是,此可视化中添加的关键组件是文本注释,该文本注释被构造为第二个标签,可在每个条形上方看到。这些注释代表条的高度,仅当鼠标悬停在条上时才会显示。这使观看者能够理解相对值并更有效地可视化数据。
相同的可视化首先是在常规D3中创建的,而没有使用A-Frame VR。这样做是为了测试与Cloud Firestore数据库的交互,并用作VR可视化的参考。2D可视化效果如图8所示。
一旦观察到上述可视化文件进行了实时更新,便将其转换为虚拟现实空间,如下图9所示:
4. 结论
该项目的目的是研究虚拟现实中数据可视化的可能性。为此,需要理解的关键组件是WebVR,A-Frame和D3。WebVR是用户体验可视化效果的媒介,A-Frame提供了用于设置VR场景和实体的工具,而D3支持DOM操作和各种可视化属性的定义。
在可视化I中,使用XMLHttpRequest和Browserify从静态JSON文件读取数据,并生成了其相应的条形图。可视化II模拟了可视化I的基本功能,但从Google Firebase的Cloud Firestore获取了数据。除了能够从数据库读取动态数据外,可视化II还具有自定义注释,当鼠标悬停在栏上时会出现该注释。这使用户可以理解钢筋的值和相对高度,从而有效地观察数据。因此,可以看出,使用正确的工具和方法,可以在虚拟现实空间中有效地可视化数据。
5. 未来的工作
该项目仅使用A-Frame的“ a-cube”实体处理条形图。使用其他各种实体可以构建许多不同类型的可视化。例如,可以分别使用“ a-cylinder”和“ a-torus”实体制作饼图和甜甜圈图。使用本地目录中的HTML文件在Web上演示了当前的可视化效果。将来,可以使用Google,GitHub,GoDaddy等服务将其作为网站在线发布。这将使他们能够在Internet上共享可视化效果,并且还可以促进协作。
在该项目的过程中,发现手头上的材料很少。由于数据可视化尚未真正进入虚拟现实和增强现实领域,因此该研究项目有望在不久的将来推动对话。
作者:Ishaan Vasant
翻译:Xin Zhang