前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自制全息伦敦地铁站数据可视化

自制全息伦敦地铁站数据可视化

作者头像
代码医生工作室
发布2019-08-15 18:59:28
1.1K0
发布2019-08-15 18:59:28
举报
文章被收录于专栏:相约机器人相约机器人
作者 | Doughty

来源 | Medium

编辑 | 代码医生团队

爱德华·图夫特(Edward Tufte)在他的“展望信息”(Envisioning Information)一书中谈到了视觉形象被捕获在屏幕和纸张的二维平原中[1]。想探索另一种可视化数据的方法,因此寻找一种创造性的方法来激发观众的兴奋,逃离计算机屏幕的平地。诸如增强现实之类的技术通过向已经存在的内容添加层来实现这一点; 但是选择了更简单,更便宜的东西。使用一张塑料片,创造了一个数据可视化的全息幻觉。

最终的可视化可以在以下页面上查看(需要查看者):

https://penguinstrikes.github.io/content/pepper_ghost/index.html

在iPad上与可视化进行交互

Pepper's Ghost

想利用可视化技术使用一种叫做Pepper's Ghost的幻觉。它首先由一位名叫John H. Pepper的讲师在1860年代描述。这种效果在剧院中用于创建舞台上的幻影,并涉及从观众和要投射的物体中倾斜一块玻璃。下图显示了幻觉是如何工作的。

图解释了Pepper's Ghost的工作原理

为了使效果从屏幕起作用,必须构建一个观察者。这可以通过从四个塑料梯形创建金字塔来创建一个查看器来完成,如下图所示。

金字塔放在iPad上

伦敦地铁数据

利用全息技术和观察者,搜索了一些数据来显示。已经下载了几个开源数据集,决定使用伦敦地铁站和深度数据。

http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/

D3.js实施

最棘手的部分是构建可视化。选择使用D3.js并创建四个SVG,所有SVG都显示相同的数据,但旋转形成一个正方形的每一边。从浏览器捕获下面的图像,以不同的投影角度渲染所有四个数据集。

D3.js可视化显示0度,90度,180度和270度的相同数据

想将D3.js用于表示层的原因是为了提供与数据交互的功能,而以前在Pepper's Ghost

在线上看到的只是演示视频。

最后结果

可以在以下链接

https://penguinstrikes.github.io/content/pepper_ghost/index.html

上查看D3.js可视化,但需要自己的查看器才能看到效果。请注意,如果在平板电脑或手机上浏览,则需要水平旋转显示并重新加载页面以使格式正确。

虽然无法看到这成为一种呈现数据的革命性方式,但投影确实能够在信息从屏幕上抬起时立即使信息更加物理化。主要缺点是全息图的大小几乎不可能理解数据显示的内容。这是对数据可视化原则的严重违反,但尝试创造性的东西是值得的!

推荐阅读

Jeff Dean强推:可视化Bert网络,发掘其中的语言、语法树与几何学

点击“阅读原文”图书配套资源

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-08-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 相约机器人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档