Interactive visualization

The interactive visualization gives the user an intuitive interface through which to manipulate and style their networks. Most of the parameters are intuitive, and each one has a short tooltip explanation that is revealed upon hovering. The control panel is scrollable and sections can be collapsed.

Physics

../_images/physics.png

The network layout is computed using the d3-force module. In the interactive visualization users can control its three main parameters:

  • Charge: Implemented with the d3.forceManyBody. The lower (more negative) the charge the more nodes, like electrons, repel each other.
  • Gravity: Implemented with the d3.forceManyBody. Gravity pulls nodes towards the canvas center. Zero gravity lets connected components and single nodes float away entirely.
  • Link distance. Implemented with d3.forceLink. Sets the optimal distance of links.

The user is not given control over the link.strength because changing it from default rarely benefits the layout (though, in an earlier version the ‘Link strength exponent’ was a control parameter that users could tweak to change variation in link strengths).

Other physics parameters are:

  • Link distance variation. Shortens the optimal distance of strong links. This is mostly useful in sparse networks as the link strengths in dense networks are small. Works well when link distance is large.
  • Collision: Implemented with d3.forceCollide with default strength (0.7) and makes overlapping nodes more unlikely.
  • Wiggle: Sets the simulation alphaTarget to 1, causing nodes to move more freely. Useful for “wiggling” nodes out of place if the layout seems stuck in a local minumum.
  • Freeze: Stops the force simulation. The simulation is restarted when this is untoggled. When the network nodes have initial positions (given as node-attributes “x” and “y”), “Freeze” is enabled at launch, so that the initial positions are respected.

Nodes

../_images/nodes.png
  • Fill: The color of nodes. If nodes have a “group” attribute, each group had its own random color, and changing Fill changes the colors of all groups continuously. Users, therefore, cannot control the exact colors that groups have inside of the interaction visualization. If this is desired, the “group” attribute should be an accepted color suck as “red” or “#4b23df”.
  • Stroke: The color of the ring around each node.
  • Label color: Specified the color of labels. Labels are only visible if they are toggled or if nodes are clicked.
  • Size: The size of the largest node.
  • Stroke width: Width of the ring around each node.
  • Size variation: The variation of node sizes. Makes larger nodes larger and smaller nodes smaller. Only effective when nodes have a “size” attribute, or Size by strength is toggled.
  • Display labels: Display all node labels. Then untoggled, all node labels are cleared, also on nodes that were clicked.
  • Size by strength: Compute the strength of each node (i.e. weighted degree), and size each node by this value. If untoggled, nodes are either uniformly sized or sized after the “size” attribute optionally specified on each node.

Thresholding

../_images/thresholding.png
  • Singleton nodes: Display nodes that are not connected to any other nodes. Per default this is untoggled.
  • Min. link percentile: The lower threshold on link weights. Thresholds on percentiles and not actual weights (since link weight distributions are often heavy-tailed). For example, if Min. link percentile is 0.25, the 25% weakest links are removed.
  • Max. link percentile: The upper threshold on link weights.

Online version

An online version of the interactive visualization exists here. It allows users to upload or specify a URL to a network in either JSON or CSV format. JSON formatted networks have at minimum two keys: “nodes” and “links”. Each contains a list with nodes and links, respectively. See our example JSON and CSV files. An alternative CSV format is

source,target
node0,node1
node2,node2

This data represents a network of three nodes with an edge between node0 and node1 and an isolated node node2.

In the online version, users can save, export and reset parameter presets using the top bar control panel:

../_images/control_panel.png

It’s useful if you have found a style you like and want save it for later. What you can do then, is click ‘New’ and give that parameter preset a name. When you load a new network (or close the browser and come back) your browser will remember those values. If you want to export your preset as JSON, you can click the “gears” icon.