# Open Systems Wall Display

_Visualizing network security situations in real time_

Published: 2015-12-15

How do you keep track of security situations on thousands of servers world-wide? The leading enterprise ICT security provider [Open Systems](https://www.open.ch/) commissioned me to produce an ambient, large scale, real-time visualization of security incidents, server statuses and support activities for their offices.

## Key visuals

- Zoom view of an escalated node in Greater Noida, India during an ISP outage, showing its network neighborhood
- Mission Control cube at night, the wall display glowing behind glass with blue LED lighting
- Mission Control engineers at work below the 12-panel wall display showing the globe and 95 open tickets
- Globe view showing 3845 server nodes across 179 countries with colored status dots and team sidebar
- Zoom view of node 23548 with Trouble status, flagged as a proactive incident within its network
- Open Systems Mission Control center at night, wall display glowing behind glass with blue LED lighting
- Zoom view of a Change node in La Paz, Bolivia, a dense hairball of connected services
- Rollout view tracing configuration batch 83117 to 30 platforms worldwide via glowing arcs on the globe
- Zoom view of Trouble node 24203 flagged as a proactive incident, radiating connections to related nodes
- Zoom view of a green Change node encircled by its densely connected peer network
- Zoom view of an escalated node, yellow shell around a pink crystal, linked across its service network

![Open Systems Mission Control center at night, the wall display glowing behind glass with blue LED lighting]()

*The display in situ*

Responsiveness is critical for internet security services. The Open Systems Wall Display provides the [Mission Control team](https://www.open.ch/en/services/index.php) with a constant overview and ambient awareness of the vast network of services they run for their clients. Security events, change of server status and configuration rollouts are visualized in real-time on large displays consisting of 12 full HD panels each.

## Video

## Structure

The application comprises three main views:

* **Globe**: provides the big picture of server statuses around the world and highlights emergency situations
* **Zoom**: highlights the situation around a client single service node, and shows its network environment
* **Rollout**: displays code and cofiguration patches, as they are deployed by the Mission Control engineer

In addition, the sidebar always shows information on the current team activity: who's on staff, number of open tickets, reaction times, …

In the animation sequencing, special emphasis was put on finding a good automatic selection of view successions and "trip planning" around the world. The priority queue takes urgency, novelty, type, travel distance and other parameters into account, in order to select the next — most relevant — focus. Each sequence has slightly variable parameters (such as durations, zoom levels, …) to keep the animations interesting also after repeated watching.

![Three view types side by side: rotating globe of server statuses, single-node zoom network, and rollout deployment arcs]()

*The three view types: Globe, Zoom, Rollout*

## Visual language

![Five mood studies of the visual language, server crystals encased in rings, diamonds and triangles on dark backdrops]()

*Mood designs for formulating the visual language*

At the heart of the visual design is a visual language which encodes server statuses in color (in an escalating color scale from cool to hot) and activities (such as patches, fixes, alerts) as external shell or particle elements around the server symbol. These two language elements can be used in isolation or combined, in a variety of sizes and situations.

![Visual vocabulary legend mapping platform statuses like OK, ISP outage, Trouble and ticket types to colored crystal symbols]()

*The visual vocabulary*

## Implementation

The application runs 24/7 at 30fps in 4k, in a fullscreen Chrome browser. We used [ES2015](https://babeljs.io/docs/learn-es2015/), [react](https://react.dev/), [d3](http://d3js.org), and [pixi.js](http://www.pixijs.com/). [GreenSock TimelineMax](https://gsap.com/docs/v3/GSAP/Timeline/) was a great help for sequencing the animations. It was developed in collaboration with the Open Systems team. Thanks all!

## Credits

Produced for [Open Systems](https://www.open.ch/).
Code support by Fabio Rambone.

---
[View on truth-and-beauty.net](https://truth-and-beauty.net/projects/open-systems-wall-display)