Vega Test Gallery

From the Vega Example Gallery

Network Diagrams

Hierarchical edge bundling that visualizes dependencies between classes in a software class hierarchy. Dependency curves are routed along the tree path between source and targets nodes in the package hierarchy. This example uses Vega’s tree transform to layout the nodes, and a line mark with bundle interpolation to draw dependencies. Hover over a node to highlight specific linkages.

Network layout by force-directed placement. Uses Vega’s force transform to simulate physical forces such as charge repulsion and edge constraint. Drag nodes to reposition them.

Matrix diagrams visualize a network by treating nodes as rows and columns of a table; cells are colored in if an edge exists between two nodes. This example depicts character co-occurrences in Victor Hugo’s Les Misérables. The underlying data is an undirected graph, and so the matrix is symmetric around the diagonal. The matrix is also reorderable by grabbing a node label to rearrange rows and columns.

An arc diagram visualizes a network using a one-dimensional layout of nodes and circular arcs to represent links. Though an arc diagram may not always convey the overall structure of the graph as effectively as a two-dimensional layout, with a good ordering of nodes one can identify cliques and bridges. Arc diagrams were originally invented to depict repeated musical structures in Martin Wattenberg’s The Shape of Song.

An interactive visualization of connections among major U.S. airports in 2008. Based on a U.S. airports example by Mike Bostock.

Source

click to see code