Datasets

Load one of three datasets, each of different size and complexity, in order to highlight different aspects and advantages of biofabric visualizations: a company network, a logistics (ego) network, or a dynamic (high-frequency) trading network.

Choose a dataset to load:

Styling Options

Try out two different styling options for the visualized biofabric. On the one hand, edge color mode dictates what properties of the data determine each edge's color, i.e., the node groups that said edge connects, the edge group that the edge maps to, or no coloring whatsoever. On the other hand, node-width mode dictates how wide each node is drawn, i.e., the entire width of the canvas, only until its final edge, or only from its first until its final edge.

Choose an edge color mode:

Choose a node-width mode:

Node/Edge Ordering

Biofabrics offer a unique advantage over most node-link diagrammatic representations: the ability to order nodes and edges. Here, you can set how nodes and edges are ordered (within their respective groups). By default, biofabric normally order nodes by their degree (so-called DegreeDescending) and edges by their edge length, but, where applicable, they can also be sorted by their labels.

Choose an edge sorting mode:

Choose an node sorting mode:

Grouping Options

Finally, biofabrics offer the ability to straightforwardly group nodes and edges visually into blocks. Here, you can enable and disable the grouping of nodes and edges as well as determine how these node/edge groups are sorted, i.e., based on the group's label or based on its cardinality (size).

Group Edges:

Choose an edge group sorting mode:

Group Nodes:

Choose a node group sorting mode:

Biofabrics

A simple demonstration of and introduction to biofabric visualizations. A biofabric visualization of some graph, $G = (V, E)$ , represents each node $v \in V$ as a row and each edge $e \in E$ as a column. An edge is visually represented as a vertical line connecting the horizontal lines of its source and target nodes.

The simple (complete) example graph below consists of three nodes, i.e., $A, B, C$ , and three edges, i.e., ${A, B}, {A, C}, {B, C}$ .

Things to Try

Highlight nodes: mouse over a node's horizontal line to highlight its incident edges and adjacent nodes
Highlight edges: mouse over an edge's vertical line to highlight its incident nodes
Highlight groups: mouse over an edge/node group's text label to highlight its edge/node members
Focus+Context: (Un)Collapse a node or edge group by clicking on its text label
Edge Color Modes: Change the edge coloring, i.e., what aspects of the data dictate the color of edges
Edge/Node Sorting Modes: Change the ordering of nodes and, in the case of the biofabric, also edges
Node/Edge Grouping: Enable/disable edge/node groupings and change the ways in which they are sorted

Data Description

Known Issues in Safari

The gradient edge-style is currently not visible in Safari. We kindly request you use another browser, such as Google Chrome or Mozilla Firefox.