Two Views

Detail View

The detail view offers users the ability to jump into the data. Painful work to connect Sigma.js and Fabric.js brought a fancy solution that is useable on PCs and tablets.
With the help of selection-rectangles different groups and their interconnections can be explored. An additional "Photoshopish" panel can be used to change order and visibility of different selections, enabling the user to further dive into the world of data.

Overview

The Overview offers the user less details, but therefore a better summary of the data. The overview shows nodes that represent the filters of the detail view. Nodes and edges are aggregated inside the high-level overview. Changes from the detail-view or the navigation histograms are propagated to the overview, so information is always up to date. By clicking on a node, a histogram which was created with Chart.js of underlying edge data is displayed.

Bonus information

The paper

Van den Elzen et al. try to revolutionize the exploration of multivariate network data with their idea of Exploration From Detail to Overview via Selections and Aggregations or short DOSA. Visit his page for further inspiration.

The controller

The implementation is all about coordination. Every little change has to be passed to all components. We implemented a controller that is aware of everything that happens.

Open Source

OF COURSE - See here. Smart people will notice that it says MiDOSA. We decided to change that to jDOSA. Nothing more to explain.

The dataset

What immediately comes to mind when thinking about multivariate network data is..
AVIATION of course. While flight prices would be more interesting we only were able to find open data about flight delays and cancellations. The data is from 2015 and available on Kaggle.

The rendering

We offer two possible ways of rendering graphs. Either via Canvas or via WebGL. While WebGL is much faster, Canvas-rendering offers better looks. Curved Edges and arrows are currently not available for sigmas WebGL-renderer and would be hard to create. When considering only performance, WebGL beats Canvas by lengths. While 10.000 elements are a challenge for canvas-rendering, WebGL enables users to explore more than 100.000 elements without experiencing lags.

ScentedWidgets

Mentioned in the original DOSA paper Scented Widgets allow users to easily play around with filters and immediately see changes. The original paper can be found here.