Unoceros’ Interactive Network Visualization at Structure 2015

Unoceros is creating a dynamic, distributed supercomputer from the unused processing power of a large scale network of mobile devices. We’re taking a mobile-based approach to both infrastructure and interface by prioritizing good design and creating a better way for users to interact with computational power.

We see computational power as a necessary element of progress in almost every industry. We aim to empower users by giving them better access to large quantities of computational power by providing them with a usable tool — by improving design, cost, and geographic allowances.

Design Challenge : Designing an interactive visualization of the real-time behavior of a distributed network for our booth at Structure 2015

Design : Marie Sbrocca | Development : Conrad Young

How do we show a group of disparate, decentralized hardware collectively running a parallelizable job/dataset through an algorithm, and then producing results?

This does not objectively lend itself well to being shown. It’s a dynamic process — that is, we’re visualizing action in real time, as well as data.

Additionally, the environment is not particularly conducive to complexity: the context is the display area at a big event, in a room with lots of people milling around. We can assume that the user’s attention is compromised. Additionally, we can assume that the group is cascading: that is, we won’t be presenting this to a singular group with a clear start and end point, but rather to users who will come and go as they like.

The event is topical enough that we can assume users will be an approximation of expert users — that is they will have an above average understanding of computation, parallelization, etc.

Deciding what to focus on and dealing with constraints on user attention:

• We simplified complicated concepts as much as possible.
• We made it visual.
• We made it stand out to pique interest.
• We made it easy to understand no matter which point you start at, which means we made the start and end points irrelevant and instead convey the same information throughout.
• We scaled down: our network is made of thousands of nodes; for this purpose, we decided to only show a tiny fraction of it to keep it simple and manageable.
• We made it interactive, and we built in ways to keep the user engaged and mitigate distraction.

Network Visualization as… Pop-Art?

We devised this beauty:

to be displayed on a large screen. Each small square represents a task. Each outer concentric square represents a device/processor. As a device is given a task, its representative square jumps to the task square. Waiting tasks are grey, actively processing tasks are yellow, completed tasks are green. Tasks and devices are identifiable by a short, four character ID.

Next to this is a simple panel that has a translation of the event stream in our code. This turns:

This is displayed on a big monitor:

We also have ten to fifteen devices that are actively running the job, with a special version of our platform that exposes information about what’s being done to the user.

Users/attendees can pick up a device, look at it, see what it’s processing and what its id is (which will correspond to an id on screen). Additionally, when a device is assigned a new task, or finishes a task, it will vibrate (we want it to be as clear as possible to the user that something is happening- tactile feedback seems like a good way to do this in a high-distraction environment).

The user walks over because they are intrigued by this giant thing that might kind of look like tetris or pop art on a monitor.

We give them a brief explanation.

They pick up a device. They are immediately able to tell the ID and match it to one on screen, and track what the device is doing. When it does something, they are provided with visual feedback (i.e. the id of the task it is processing updates, and also tactile feedback (the device vibrates when it gets or finishes a task).

When results are done the user will receive clear feedback of completion.

Originally published at www.parisoma.com on November 19, 2015.