作者 | 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網絡,發掘其中的語言、文法樹與幾何學
點選“閱讀原文”圖書配套資源