Developer: zachkinstner
Created: December 12, 2016
Requires: Windows, Oculus Rift/HTC Vive

This virtual reality app requires the use of an HTC Vive or Oculus Rift, a mounted Leap Motion Controller (using the VR Developer Mount or unofficial alternative), and the Leap Motion Orion software.

Force-Directed Graph with the Hover UI Kit

Immerse yourself in an experimental data-viz demo: an interactive, glowing, bouncing, force-directed graph in virtual reality. Your Leap Motion hands can push the graph nodes around and interact with menu interfaces.

This demo begins with a flattened force-directed graph. Use the buttons on the main menu (attached to your left palm) to progress through the first four steps, which will transition the flattened graph into a 3D, room-scale graph with many nodes. Once these steps are complete, the main menu changes to show the full set of controls. Hit the “spacebar” key to reset the demo back to its initial state.

Interfaces

The menu interfaces in this demo are powered by Hover UI Kit, a development tool for building beautiful, easy-to-use interfaces for use in VR/AR environments. Hover UI Kit is free for open-source and most non-commercial projects, and can support a variety of different 3D input devices. Check it out for your next VR/AR project!

In this demo, there are two types of user interfaces:

  • Main menu: Open/close this menu by selecting the button in the palm of your left hand. Once open, the menu follows the motion (but not rotation) of your left hand.
  • Node menu: Open/close this menu by selecting the button on the front of any node (a sphere in the graph). The node locks into place while the menu is open, so it doesn’t move away from you.

The menu interactions with Hover UI Kit are very simple: move your “cursor” finger very near to a button (or slider handle), and hold it there for a moment. The interactive item fills with a “proximity” color as your cursor approaches it, then the item rapidly fills with a “selection” color once the cursor is close enough. The item selection occurs once the item is filled with the “selection” color.

 

Data-Viz

This demo uses a force-directed graph to visualize data. In this case, the data is generated randomly, but with some more work, the app could be connected to real datasets.

Data visualization in VR/AR is quite exciting, opening up new opportunities for feeling and experiencing the data — not just seeing it. If you’re interested to hear more about this, I often write about it in my blog, and talk about it in my development videos.

Technical

This demo is built with the latest “Orion” version from Leap Motion. It supports both Vive and Oculus VR headsets. If a Leap Motion Controller is not detected, the demo automatically switches to use the Vive controllers.

Links

Get started with Hover UI Kit:
HoverVR.com

Find Zach on Twitter and Medium:
twitter.com/zachkinstner
medium.com/@zachkinstner

Watch “DevUp” (development update) videos:
youtube.com/aestheticinteractive/videos