• Dataviz
• Open.io
• ES6
• D3
• Angular
• Stylus

Open.io object storage

Open.io is a french IT company developping an object storage grid solution. The product can be installed on a cluster of commodity servers, and Open.io runs a mutualized cluster on its own.

The grid is logically made of namespaces, functionnal group of servers (mail, videos, pictures...). Namespaces gather physical servers, and servers host services of different kinds.

Prototyping the GUI

Open.io asks me to do a prototype of a management Web application. This application is intended for clients and for the mutualized platform monitoring.

The job was to bootstrap an standalone application (all data mocked up) to visualize namespaces, servers and services. Open.io has only made a light ergonomical study to express their needs. No design expected.

The focus was put on the ability to browse the namespace and accessing contextualized data (number of services on server, CPU usage, available space...) A important part of the work was to try various means to organize all data.

The mission lasted 20 days.

Technologies used

The prototype is a thin AngularJS web application, written in ES6 (transpiled with Traceur) with routing and i18n. Data fixtures are Super heroes and their respective publishing companies

Data visualization is made with D3, with a specify data layout involving Jake Gordon's binary tree packing algorithm. The hexagonal representation of services is inspired by Amit Patel's work.

The build chain is sustained by Gulp, including ES6 and Stylus (CSS preprocessor) transpilation, templates compilation and minification