Visualising Wikipedia articles in XR

What is the shape and interaction of an XR version of an information tree?

The challenge

I made a small prototype to answer the question ‘How can we visualise information trees in XR’ ? Of course, there must be a million ways to draw a hierarchical tree in XR! (Manuel Lima wrote a whole book on the subject). This article is just about the lessons learned, the obstacles along the way, and the final approach after those.

You can visit a live demo here, or see the final code here

So, basically, what could be the XR version of the following layout?

Radial Tree showing the Flare class hierarchy (made with D3.js)

I chose to take the hierarchy of the 10.000 most ‘vital’ articles of Wikipedia , since, in some way, tries to ‘encapsulate’ knowledge into a tree. The hierarchy is curated by wikipedia editors, following certain rules. It goes from the most abstract topics (first level entries are ‘People’, ‘History’ or ‘Geography’) to more fine-grained topics, all the way down to ‘level 4’ categories, like ‘Edible Fruits’, ‘Subatomic Particles’ or ‘Social scientists, economists and political writers’.

You can get an idea of the radial ‘flattie’ representation of this hierarchy on the next image:

Radial tree representing the 10.000 vital wikipedia articles, rendered on a 1000x1000 pixel window

As you can see, the density of articles grows as you go down on the hierarchy in such a way that it seems very impractical to even try to label the articles.

You can get an idea about the general shape of the tree, but without a ‘zoom’ implementation (along with mouseover tooltip) it’s very difficult to navigate and understand the tree.

First approach: Organic trees

My first approach was to render very basic ‘organic trees’ to represent the hierarchy. You will have a separate tree for each top-level article (‘People’, ‘Geography’ …) and you can approach each separate tree to navigate and browse the different subcategories. Here’s how it looked like:

‘Organic’ representation of trees

This approach gave rise to the classical problems of 3D information representation: (a) the labels overlapped from the user standpoint and (b) it was time-consuming and impractical on 3DOF devices to ‘navigate’ from tree to tree.

Second approach: Spherical layout

What can we do to avoid label overlapping and see ‘the whole’ tree all at once? One approach can be projecting the 2D radial tree onto a sphere, so that:

  • All labels are at the same distance (the radius of the sphere), but at different positions, so no label occludes other
  • ‘Everything’ is at the same distance from the viewer, and no navigation is needed to see different parts of the tree

If we translate the radius of the radial tree on the latitude of a sphere and the angle on the longitude, we can project the tree onto a sphere. The first tests showed that even on a sphere, we do not have enough space to see the whole tree and the associated labels, so the decision was to only project the first three levels. Also, since the tree was denser down each level, another decision was to put the third level on the equator (since this is the place on the sphere with maximum circumference and this is the denser level) and project only on the upper part of the sphere (or to put it more simply: on a hemisphere).

The tree hemisphere from the outside
The tree hemisphere from the inside: a 360 layout of the hierarchy

You can see in the last image that the ‘equator’ nodes and associated labels take advantage of all the available space. So the interaction now is clear: You can ‘expand’ the equator nodes by pointing at the ‘+’ buttons, and you’ll go down one level on the tree (but to the user it will go ‘up’). The sibling branches will be cleared to let the maximum space at the equator for the node expansion.

You can see an expanded branch (Arts/Music) on the following image:

Arts/Music expanded

Again, if you point at ‘Musical Instruments’, you’ll expand that node:

Arts/Music/Instruments expanded

You can always travel up the tree, pointing at the ‘-’ buttons. Since you have finally reached ‘real articles’, pointing at the ‘i’ buttons, a summary of the wikipedia article will be shown, thanks to Wikipedia’s preview API

Wikipedia preview, with associated image, for the tree node ‘Arts/Music/Instruments/Viola’

Some closing thoughts

The demo is coded using the wonderful WebXR library Aframe. It works on almost every VR device and you can visit it from the device browser. No need to download anything. Also, it’s coded with the Oculus Go in mind (widely adopted and ‘the minimum common denominator’ if you will)

Here’s a list of some final thoughts:

  • Too many labels fry the rendering pipeline on the Oculus Go, so that’s another rationale for showing the minimum amount of information once a node is expanded
  • I coded a first version that animated and transitioned everything (the spherical branches, text placements and rotations) and, although it looked and felt really good on the Vive, it’s hard on the Oculus Go, almost bringing down the rendering pipeline to a halt. WebVR is still slow in this front. I only left the label transitions when you move from the root tree to a child node and viceversa
  • I do not see (from a theoretical data visualisation standpoint) any advantage over a 2D layout that incorporates well-designed zoom/panning controls and a mouseover implementation to see the wikipedia previews. However:
  • What I’ve observed in several users that tested the prototype is that information engagement goes through the roof. People love playing with data when they are immersed into it and I think this is a point we should not disregard. I think this is related to the idea that we internally represent knowledge in a spatial way. You can read about ‘memory palaces’ and the ‘geometry of thought’ on this Twitter thread and this article in Nautilus magazine
  • On the same note, I’m working with ESADE’s Institute for Data-Driven Decisions, Barcelona Super Computing Center and Domestic Data Streamers on a series of workshops on 3D Data Visualisation. In particular, I’m running A/B test batteries on users presented with 3D Data Visualisations and their 2D counterparts, measuring things like accuracy, recall and engagement. We will release results on this experiments soon, along with open source implementations of every test.

You can visit a live demo here, or see the final code here. Feedback is super welcomed, ping me on Twitter here!