Logo

Interactive Visualizations for Dynamic and Multivariate Networks. Free, online, and open source.


Overview

Home
Try
Visualizations
Formatting Data

Learning

Getting Started
Courses new courses
Workshop
Troubleshooting
Resources

Context

Research & VistorianLab
Publications
Contribute
Team
Contact








Visualizations

Node Link

image

Node-link diagrams show nodes in the network as points (dots) and (multiple) relations between nodes as straight lines. Moving the time slider on the top of the visualization filters links between nodes according to their presence in time.

Visual Encoding

Layout: The node-link diagram uses the simple default force-directed layout, implemented in D3. Nodes with many common neighbors are drawn closer to each other, while nodes with few connections are drawn at the periphery of the layout.

Interaction

Visual Patterns

Visual Patterns

Often, we look at visualizations with preconceptions. That means, we’re seeing just what we want to see. That also means that we do not see new things. Exploring a network means to see new things. The network below shows letter correspondences between persons. Colors indicate types of letters.

image

Below, a list of patterns we can find in this network.

2 Adjacency Matrix

image

Adjacency matrices (or simply matrices) are table representations of networks. Nodes are represented both as rows and columns, connections are shown as marks in the corresponding cells at the intersection of row and column. Contrary to node-link representations, matrices do not suffer from visual clutter if the network is dense (i.e. contains many links). Matrices help you exploring dense networks that would look too cluttered with node-link diagrams.

The above picture shows a cluster of connections of the same type (red). The first row in the matrix, featuring cells of different types (colors), indicates a highly connected node.

Node labels are shown for rows and columns. A small overview on the left shows the entire matrix and the currently visible part when panning and zooming.

Visual Encodings

Interaction

Parameters

Visual Patterns

Visual patterns inside the matrix are defined by a reordering algorithm, optimizing row and column ordering of the matrix. Vistorian uses one of these algorithms called Leaf-ordering, implemented in reorder.js. Choosing ‘Similarity’ from the order menu optimizes row and column ordering, based no the currently visible links. I.e., only links present in the current temporal selection will be taken as basis for the reordering. That means that the ordering can be optimized for individual time periods as clusters might be present at specific periods only.

Matrices contain potentially a variety of patterns. The four most important are the following ones:

Time Arcs

image

Time arcs shows nodes as vertical list (top left) and time along the horizontal axis. Arcs represent links between two nodes at different locations. Clicking a node label on the left side, enters into the ego mode. A ego network shows a node in a network (ego) and its immediate neighbors (alters), as well as connections between the alters. A dynamic ego network shows only these connections over time.  Clicking the ego node a second time, returns to the full view.

Visual Encoding

Interaction

Map

The map visualization shows a dynamic network with nodes having geographic node positions. This requires that nodes have geographic coordinates associated with them in the data model. Every dot-node on the map represents a position of an actual node in the network. In other words, for every geographical position that one node occupies during its lifetime, there is one node rendered on the map. Hovering a node on the map, shows all the nodes belonging to the same node in the network. For example, if a person in a social network moves between threedifferent positions over time, there will be three nodes rendered on the map and highlighted if one of them is hovered.

All locations that are occupied by some node over time, are rendered as black transparent squares. Hovering, reveals the location’s name as well as the names of the present nodes.

Nodes without any geographic position (free nodes) will be placed as close as possible to all their connected neighbors. Free nodes are rendered transparent, which can be adjusted using the corresponding slider on the top of the map visualization.

One common problem with geographic positions is, that multiple nodes are present at the same location. The map visualization allows to specify an offset between these nodes (slider on the top of the visualization) that nodes at the same geographical position slightly apart.

The visual encoding of the network is otherwise the same as for the node link visualization.

Visual encodings

Element Browser

If you have multiple types of links, the browser contains a legend for each type of link. You can hide and recolor links.

The browser has also a search option.