Periodic Table of the Elements

May 2017, Ecosystem Experience Design | Analog | Microsoft

Periodic Table of the Elements is an open-source sample app from Microsoft’s Mixed Reality Design Labs. With this project, developers and creators can learn how to lay out an array of objects in 3D space with various surface types using an Object collection. Also, it shows how to create interactable objects that respond to standard inputs from HoloLens.

About the app

Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. It incorporates the basic interactions of HoloLens such as gaze and air tap. Users can learn about the elements with animated 3D models. They can visually understand an element’s electron shell and its nucleus – which is composed of protons and neutrons.


After I first experienced HoloLens, a periodic table app was an idea I knew that I wanted to experiment with in mixed reality. Since each element has many data points that are displayed with text, I thought it would be a great subject matter for exploring typographic composition in a 3D space. Being able to visualize the element’s electron model was another interesting part of this project.


For the default view of the periodic table, I imagined three-dimensional boxes that would contain the electron model of each element. The surface of each box would be translucent so that the user could get a rough idea of the element’s volume. With gaze and air tap, the user could open up a detailed view of each element. To make the transition between the table view and detail view smooth and natural, I made it similar to the physical interaction of a box opening in real life.

Idea sketches

In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. The animated 3D electron model is displayed in the center area and can be viewed from different angles.

Prototypes for the element box layout and interaction

The user can change the surface type by air tapping the buttons on the bottom of the table – they can switch between plane, cylinder, sphere and scatter.

Common controls

Interactable Object

Interactable object is an object which can respond to basic HoloLens inputs. It is provided as a prefab/script which you can easily apply to any object. For example, you can make a coffee cup in your scene interactable and respond to inputs such as gaze, air tap, navigation and manipulation gestures.

Object collection

Object collection is an object which helps you lay out multiple objects in various shapes. It supports plane, cylinder, sphere and scatter. You can configure additional properties such as radius, number of rows and the spacing.

Application Examples

Some of the examples that can be created using this project.


Windows Dev Center