C4.36. Element pl-graph: Displaying graphs from data

Here's a static graph that was created by hand with DOT markup:

1
2
3
4
5
6

<pl-graph>
digraph G {
  A -> B
  B -> C
}
</pl-graph>

Here's a graph with randomly-generated edge weights. Because here the graph is specified in the question.html, parameters can be templated using Mustache.

1
2
3
4
5
6

<pl-graph>
digraph G {
  A -> B [label="{{ params.weight1 }}"]
  B -> C [label="{{ params.weight2 }}"]
}
</pl-graph>

Here's a graph created from a randomly-generated adjacency matrix. By default, weights will be displayed when they are not 0 or 1. The matrix and labels can be specified with params-name and params-name-labels, respectively.

1
2
3
4

mat = np.random.random((3, 3))
mat = mat / la.norm(mat, 1, axis=0)
data['params']['labels'] = pl.to_json(['A', 'B', 'C'])
data['params']['matrix'] = pl.to_json(mat)

1
2

<pl-matrix-latex params-name="matrix"></pl-matrix-latex>
<pl-graph params-name="matrix" params-name-labels="labels"></pl-graph>

To force no weights being displayed, the attribute weights can be set to "false". Here is the same graph with no edge weights.

To force the graph to be undirected, the attribute directed can be set to "false". Here is an undirected graph. The input matrix must be symmetric in this case.

The formatting of the weight labels can also be changed with the weights-digits and weights-presentation-type attributes. This example has weights-digits="5".

Here is another graph with binary 0 or 1 weights. These weights will not be displayed unless specified with weights="true".

Here is a graph with negative weights. These weights will not be displayed unless specified with negative-weights="true". In the input matrix, to hide an edge, simply set the corresponding entry to None.

1
2
3

array([[None, 2, -1.5],
       [-1.1, -1.4, None],
       [None, 4, -2]], dtype=object)

The pl-graph element has the ability to be extended on a course level to create graphs based on custom inputs. This course extension located in elementExtensions/pl-graph/edge-inc-matrix adds the capability of rendering edge-incidence matrices as graphs.

For more information on how to create extensions, check the extension documentation and graph element documentation.

Here's a graph created from a randomly-generated networkx graph. To specify the use of a networkx graph, set params-type="networkx". The graph can be specified with params-name. To make it accessible to screen readers, set aria-label to a description of the graph; since a static label can't describe a randomly-generated graph, that description is generated in server.py from the graph data.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

random_graph = nx.gnm_random_graph(5, 6)

for in_node, out_node, edge_data in random_graph.edges(data=True):
    edge_data['label'] = random.choice(string.ascii_lowercase)

data['params']['random-graph'] = pl.to_json(random_graph)

edges = ", ".join(
    f"{in_node} to {out_node} (labeled {edge_data['label']})"
    for in_node, out_node, edge_data in random_graph.edges(data=True)
)
data['params']['random_graph_alt'] = (
    f"Undirected graph with {random_graph.number_of_nodes()} nodes "
    f"and {random_graph.number_of_edges()} edges: {edges}."
)

1

<pl-graph params-type="networkx" params-name="random-graph" aria-label="{{ params.random_graph_alt }}"></pl-graph>

Rendering directed graphs and multigraphs is supported natively with networkx. Here, we also set rankdir="LR" in the constructor for the graph.

The color of each node or edge in a networkx graph can be set by assigning the 'color' attribute in the associated data dictionary for each object. In the example below, we've set the color of each edge to 'blue' and used different colors for nodes in different layers.

The source-file-name attribute allows loading graph content from an external file. This is particularly useful for graphs with complex DOT syntax, such as record-based nodes that use angle brackets <>, which can cause issues when embedded directly in HTML.

1

<pl-graph source-file-name="record-graph.dot"></pl-graph>

The file record-graph.dot contains:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// Example of record-based nodes
// Reference: https://graphviz.org/doc/info/shapes.html#record
digraph structs {
    node [shape=record];
    struct1 [label="<f0> left|<f1> middle|<f2> right"];
    struct2 [label="<f0> one|<f1> two"];
    struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"];
    struct1:f1 -> struct2:f0;
    struct1:f2 -> struct3:here;
}