Holographic London Underground Visualisation
By: Christopher Doughty
Tags: D3js, Visualisation, London Underground, Hologram, Data Visualization

Holographic London Underground Visualisation

Using d3.js and pepper’s ghost as a creative way to present data

In his book “Envisioning Information”, Edward Tufte talks about our visualisations being caught in the two-dimensional flatlands of screen and paper [1]. I wanted to explore an alternative way to visualise data, so I looked for a creative method to induce excitement in the viewer and escape the flatland of a computer screen. Techniques such as augmented reality achieve this by adding layers to what already exists; however, I opted for something far easier and cheaper. Using a sheet of plastic, I created a holographic illusion of a data visualisation.

The final visualisation can be viewed on the following page (requires a viewer): https://penguinstrikes.github.io/content/pepper_ghost/index.html

Me interacting with the visualisation on an iPad

Pepper’s Ghost

The visualisation technique that I wanted to take advantage of works using an illusion known as Pepper’s Ghost. It was first described in the 1860’s by a lecturer called John H. Pepper. The effect was used in theatres to create on-stage apparitions and involved angling a piece of glass from the audience and the object to be projected. The following figure shows how the illusion works.

Diagram explaining how Pepper’s Ghost works

For the effect to work from a screen, a viewer must be built. This can be done by creating a pyramid from four trapeziums of plastic to create a viewer, as shown in the following image.

My pyramid placed on an iPad

London Underground data

Armed with the hologram technique and a viewer, I searched for some data to display. Having already downloaded several open source datasets, I decided to use the London Underground stations and depths data [2].

D3.js implementation

The trickiest part was building the visualisation. I opted to use D3.js and create four SVG all showing the same data but rotated to form each side of a square. The image below is captured from the browser rendering all four data sets at the different projected angles.

D3.js visualisation showing the same data at 0, 90, 180, and 270 degrees

The reason I wanted to use D3.js for the presentation layer was to provide the functionality for interacting with the data, whereas all I’d seen previously for Pepper’s Ghost online were demonstration videos.

Final result

You can view the D3.js visualisation on the following link https://penguinstrikes.github.io/content/pepper_ghost/index.html, but you will need your own viewer to see the effect in action. Note that if you’re browsing on a tablet or mobile then you will need to rotate the display horizontally and reload the page for the formatting to be correct.

Whilst I can’t see this becoming a revolutionary way of presenting data, the projection does work to instantly make the information more physical as it is lifted off the screen. The main downside is that the size of the hologram makes it almost impossible to understand what the data is showing you. I know that is a major violation of data visualisation principles, but it was worth it to try something creative!

References

[1] Tufte, E. R., & Graphics Press,. (1990). Envisioning Information

[2] Available under the Open Government Licence v3.0