GLO (Graph-Level Operations)¶

A visualization framework that treats the data like nodes of a graph, and uses positioning and visual commands to arrange them into different formats to implement different visualizations.

The nodes table contains a list of objects, each with an id field containing a unique identifier, along with any other data attributes needed. The edges table contains source and target fields referring to id values from the nodes table, an optional type field reading either Undirected or Directed, an id field identifying each edge, and an optional weight value. width and height control the size of the canvas used for rendering the visualization.

This component can be found in the candela/plugins/glo plugin.

Example¶

JavaScript

<body>
<script src="//unpkg.com/candela/dist/candela.min.js"></script>
<script>
  var el = document.createElement('div')
  el.setAttribute('width', 700);
  el.setAttribute('width', 700);

  document.body.appendChild(el);

  var alphabet = 'abcdefghijklmnopqrstuvwxyz';
  var vowels = 'aeiou'.split('');

  var nodes = [];
  for (var i = 0; i < 26; i++) {
    var letter = {
      id: i,
      label: alphabet[i],
      vowel: vowels.indexOf(alphabet[i]) > 0 ? 'vowel' : 'consonant'
    };

    for (var j = 0; j < 26; j++) {
      letter[alphabet[j]] = Math.abs(j - i);
    }

    nodes.push(letter);
  }

  var edges = [];
  var counter = 0;
  for (var i = 0; i < 26; i++) {
    for (var j = i + 1; j < 26; j++) {
      if (nodes[i][alphabet[j]] > 20) {
        edges.push({
          source: i,
          target: j,
          type: 'Undirected',
          id: counter++,
          weight: 1
        });
      }
    }
  }

  var vis = new candela.components.Glo(el, {
    nodes: nodes,
    edges: edges,
    width: 700,
    height: 200
  });

  vis.render();

  vis.distributeNodes('x');
  vis.colorNodesDiscrete('vowel');
  vis.curvedEdges();
</script>
</body>

Python

import pycandela

data = [
  {'id': 0, 'label': 'A', 'class': 0},
  {'id': 1, 'label': 'B', 'class': 1},
  {'id': 2, 'label': 'C', 'class': 1}
]

edges = [
  {'id': 0, 'source': 0, 'target': 1},
  {'id': 1, 'source': 0, 'target': 2},
  {'id': 2, 'source': 2, 'target': 1}
]

glo = pycandela.components.Glo(nodes=nodes, edges=edges)
glo.render()
glo.distributeNodes('x');
glo.colorNodesDiscrete('class');
glo.curvedEdges();

R

library(candela)

id = c(0, 1, 2)
label = c('A', 'B', 'C')
class = c(0, 1, 1)
nodes = data.frame(id, label, class)

source = c(0, 0, 2)
target = c(1, 2, 1)
edges = data.frame(id, source, target)

glo = candela('SimilarityGraph', nodes=nodes, edges=edges)
glo.render()
glo.distributeNodes('x')
glo.colorNodesDiscrete('class')
glo.curvedEdges()

Options¶

nodes (Table): The node table.
edges (Table): The edge table.
width (number): The width of the drawing area.
height (number): The height of the drawing area.

Methods¶

colorNodesDiscrete(field)¶

Arguments:	field (string) – The field to color by

Use a categorical colormap to color the nodes by the values in field.

colorNodesContinuous(field)¶

Arguments:	field (string) – The field to color by

Use a continuous colormap to color the nodes by the values in field.

colorNodesDefault()¶: Revert the node color to the default state (no colormap).

sizeNodes(field)¶

Arguments:	field (string) – The field to size by

Size the nodes according to the values in field.

sizeNodesDefault()¶: Revert the node size to the default state (constant sized).

distributeNodes(axis[, attr])¶

Arguments:	string (attr) – The axis on which to distribute the nodes string – The field to use for grouping the nodes

Position the nodes evenly along axis, which must be one of "x", "y", "rho" (radial axis), or "theta" (angle axis). If attr is given, the nodes will be partitioned and grouped according to it.

positionNodes(axis, value)¶

Arguments:	axis (string) – The axis on which to distribute the nodes value (string\|number) – The field to draw position data from, or a constant

Position the nodes along axis (see distributeNodes()) according to the data in value. If value is a string, it refers to a column of data frome the nodes table; if it is a number, then all nodes will be positioned at that location.

forceDirected()¶: Apply a force-directed positioning algorithm to the nodes.

showEdges()¶: Display all edges between nodes.

hideEdges()¶: Hide all edges between nodes.

fadeEdges()¶: Render edges using a transparent gray color.

solidEdges()¶: Render edges using black.

incidentEdges()¶: Only render edges incident on a node when the mouse pointer is hovering over that node.

curvedEdges()¶: Render edges using curved lines.

straightEdges()¶: Render edges using straight lines.