Interaction

Following data sets are distinguished with respect to the user interaction:

all data

the full graph with all profiles, components, elements and data categories and links between them. Currently this amounts to roughly 4.600 nodes and 7.500 links.

selected nodes

nodes explicitely selected by the user (see below how to select nodes).

data to show

the subset of data that shall be displayed.

Starting from the selected nodes, connected nodes (and connecting edges) are determined based on the options (depth-before, depth-after).

The nodes are colour-coded by type:

There are multiple ways to select/unselect nodes:

select from index

by clicking individual items in the index list, the item will be added to the selected nodes

clicking on an already selected item unselects it

select in graph

by clicking on a visible node in the graph, the node will be added to the selected nodes

clicking on an already selected node unselects it

select area in graph

by dragging (hold mouse button down and pull) a rectangle in the graph pane, all nodes within that rectangle get selected all other nodes will be unselected

unselect in detail pane

clicking on an item in the detail pane unselects it

select in statistics

as mentioned in Data (some) numbers in the statistics reveal a list of corresponding terms. Clicking on these terms in the statistics page leads to the browser, with given term as selected node (and default settings)

select in statistics in the detail pane

the numbers from statistics page are shown also in the detail pane for selected nodes. Here, clicking on a term from these lists adds it to the graph, as a selected node.

mouseover

on mouse over a node, all connected nodes to given node (and connecting links) within the visible sub-graph are highlighted and all other nodes and links are faded

drag a node

click and hold on a node, one can move the node around, however usually the layout is stronger and puts the node back to its original position. Not so with the freeze-layout, that freezes all the nodes and lets you move them around freely

Options

The navigation pane provides the following options to control the rendering of the graph:

graph

select data source

depth-before

how many levels of connected ancestor nodes shall be displayed

depth-after

how many levels of connected descendant nodes shall be displayed

link-distance

approximate distance between individual nodes (not exact, because it is just one of multiple factor for the layouting of the graph)

charge

the higher the charge, the more the nodes tend to drift apart

friction

factor for "cooling down" the layout, lower numbers (50-70) stabilize the graph more quickly, but it may be too early, with higher numbers (95-100) the layout has more time/freedom to arrange, but may get jittery

node-size

N = all nodes have given diameter N;

usage = node is scaled based on how often the node appears in the complete dataset i.e. often reused elements (like description or language) will be bigger

labels

show/hide all labels hiding the labels accelerates the rendering significantly, which may be an issue if more nodes are displayed. irrespective of this option, on hover labels for all and only the highlighted nodes are displayed

curve

straight or arc (better visibility), arrow or line

layout

There are a few layouting algorithms provided. They are all not optimal in any way, but most of the time, they deliver quite good results. For different data displayed other algorithm may be more appropriate:

force

undirected layout, trying to spread the nodes in the pane optimally, equally in all directions This is the underlying layouting algorithm. All the other layouts build on top of it, by just adding further constraints.

vertical-tree

top-down layout respect the direction of the edges, children are always below the parents

horizontal-tree

left-right layout respect the direction of the edges, children are always right to the parents (at least they should be, currently, in certain configurations, the layout does not get the orientation for some links right)

weak-tree

a layout that "tends" towards left to right arrangement, but not strictly so (experimental)

dot

strict left to right reusing the x-positioning as determined by dot Arranges the nodes in strict ranks (typical for dot layout) This is done in a separate preprocessing step for the whole graph, so the positioning may be suboptimal for a given subgraph. The y-coordinate is approximated on the fly by the base algorithm.

freeze

this is actually a "no-layout" - the nodes just stay fixed in their last position, However, individual nodes still can be dragged around, so this can be used to adjust a few nodes for better legibility (or aesthetics), but only when you start moving around inividual nodes, you will learn to appreciate the great (and tedious) work of the layouting algorithms, so generally you want to try to play around with the other settings to achieve a satisfying result.

Linking, Export

The navigation pane exposes a link, that captures the exact current state of the interface (just the options and the selection, not the positioning of the elements), so that it can be bookmarked, emailed etc.

Furthermore, there is the download, that allows to export the current graph as SVG. This is accomplished without a round trip to the server, with a javascript trick serializing the svg as base64-data into the url (so you don't want to save (or see) the exported url). But you can both, right click the link and [Save link as...], or click on the link, which opens the SVG in a new tab where you can view, resize, print and save it. Employing this simple method also means, that there is no possibility to export the graph in PNG, PDF or any other format, because this would require server-side processing. (However this is a planned future enhancement.)