1 .介绍
简而言之，数据可视化是数据的图形表示。 今天，它已成为数据科学的重要组成部分。 重要利益相关者对清洁清晰的视觉效果而不是原始数据有很好的反应，因为它们有助于快速有效地理解信息。 matplotlib(python )和ggplot2(R )是当前的领导者，目前有许多可视化库。
但是，这些库还没有在虚拟现实领域取得重大突破。 随着技术对虚拟现实和增强现实的巨大希望，用户也通过AR/VR体验数据可视化至关重要。 考虑到这一点，这个项目的目标是在虚拟现实中探索和创建数据可视化。
1.1网络虚拟机
目的是帮助每个人(无论使用什么设备)获得虚拟现实体验。 因此，WebVR被选为最佳媒体。 WebVR是一个实验性的JavaScript APP应用编程接口(API )，支持虚拟现实设备。 这是开放的规格，也可以在浏览器中体验VR。 要体验WebVR，需要两件事：与耳机兼容的浏览器。
1.2 A-Frame
A-Frame是构建虚拟现实体验的Web框架。 A-Frame基于HTML之上，所以入门很简单。 但是，A-Frame不仅是3D场景和标记语言，还包括核心是强大的物理组件框架。 该框架为Three.js提供了声明性、可扩展和可组合的结构。 可以从纯HTML文件开发A-Frame。 不需要安装工具。 或者，创建一个HTML文件
包含A-Frame，如图1所示。 1.3 D3.js
A-Frame构建在DOM上，因此大多数库和框架都可用。 这包括D3.js，它是一个用于基于数据处理文档的JavaScript库。 使用HTML、SVG和CSS生动地再现数据。 通过强调D3网络标准，为用户提供了现代浏览器的所有功能，结合了强大的可视化组件和数据驱动的文档对象模型(DOM )操作方法，而不受其自身框架的限制。 例如，可以使用D3从数字数组生成HTML表，也可以使用相同的数据创建与平滑过渡交互的交互式SVG条形图。
2 .实现可视化I
的可视化目的是从包含静态JSON文件的URL中读取数据，并在VR中创建条形图。 相机的起点位于图表的中心，周围有各种条形图。 要构建可视化，需要两个文件：在A-Frame实例中定义页面正文的HTML文件和在导入数据后运行可视化的Javascript文件。 包含可视化数据的JSON文件如图2所示。
2.1xmlhttprequest(xhr )
必须使用XMLHttpRequest才能从URL读取上面的JSON文件等数据。 XMLHttpRequest是内置的浏览器对象，可以使用JavaScript发出HTTP请求。 名称中包含“XML”一词，但可以对任何数据进行操作，包括JSON、HTML和纯文本。 您可以上传/下载文件、跟踪进度和使用xmlhttprequest(xhr )对象与服务器进行交互。 用户可以从URL检索数据，而无需进行完整的页面更新。 这样，可以在不中断用户操作的情况下更新网页的一部分。
在上面的图3中，执行以下步骤：
创建XMLHttpRequest对象
2 .所需的URL已分配给变量
3. XHR对象使用GET方法和指定的URL初始化
4 .连接已打开，请求已发送到服务器
5 .听完应答后，读取应答文本
使用JSON.parse将响应文本从字符串转换为JSON，并存储在变量中
7 .此变量用于处理数据可视化的函数
2.2浏览器
在创建可视化功能并将Javascript文件链接到HTML文件后也会发生错误。 这是因为代码片段的第一行中存在" require "方法。 require方法将模块包含在项目中，并将其用作基于浏览器的XHR对象。 问题是，浏览器中没有Node.js定义了" require "方法。 使用Browserify，可以编写与在Node中使用的代码一样使用" require "的代码。 要使用此功能，请执行以下步骤：
1 .使用NPM从命令行安装" xmlhttprequest "
2 .从所有必需的模块中，用main.js (有效的js文件)递归捆绑到名为bundle.JS的文件中，并使用browserify命令
3. HTML文件包含
2.3可视化功能
负责DOM操作和数据可视化的功能是从XHR API获取数据。 数据被推入数组中，并缩放到适合屏幕。 选择了A-Frame“ a-scene”，然后添加了“a-cube”栏。 然后定义栏的各种属性，如高度、宽度、位置和旋转。 此外，" mouseenter "和" mouseleave "动画也是使用“过渡”方法定义的。 这样可以方便地将鼠标放在上面进行扩展和点亮。 最后，配置可视化图条形下的标签和所需属性。 最终可视化的快照如图4所示。
3 .实现可视化
p>第一次可视化只能从静态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文件中包含一个
下面图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上共享可视化效果，并且还可以促进协作。
在该项目的过程中，发现手头上的材料很少。由于数据可视化尚未真正进入虚拟现实和增强现实领域，因此该研究项目有望在不久的将来推动对话。
更多高质量科技类原创文章，请访问数据应用学院官网Blog：https://www.dataapplab.com/