Question

This question was created to show the graph rendering capabilities of the pl-graph element.

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

<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.

<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.

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)

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

\begin{bmatrix} 0.10 & 0.22 & 0.74\\ 0.18 & 0.42 & 0.10\\ 0.73 & 0.36 & 0.16\\\end{bmatrix}

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.

\begin{bmatrix} 0.10 & 0.22 & 0.74\\ 0.22 & 0.42 & 0.36\\ 0.74 & 0.36 & 0.16\\\end{bmatrix}

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".

\begin{bmatrix} 0 & 1 & 1\\ 1 & 1 & 0\\ 0 & 0 & 1\\\end{bmatrix}

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.

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.

\begin{bmatrix} -1 & 0 & 1 & 0\\ 0 & -1 & 1 & 0\\ 1 & 0 & 0 & -1\\ 0 & 1 & -1 & 0\\\end{bmatrix}

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.

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)

1	<pl-graph params-type="networkx" params-name="random-graph"></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.

Staff user:

Question: