Update Graphviz lesson with further questions and examples on graph layouts.

Author: jonmcalder

Graphviz/customTests.R

@@ -120,4 +120,30 @@ test_subgraph_cluster <- function() {
     ok <- all(t1, t2)
   }, silent = TRUE)
   exists('ok') && isTRUE(ok)
+}
+
+test_node_layout <- function() {
+  # Get e
+  e <- get('e', parent.frame())
+  x <<- e$expr[1]
+  # Test expression from user's script
+  try({
+    t1 <- grepl(pattern = "graph \\[.*layout = neato.*\\]", e$expr[1])
+    t2 <- !grepl(pattern = "graph \\[.*layout = dot.*\\]", e$expr[1])
+    ok <- all(t1, t2)
+  }, silent = TRUE)
+  exists('ok') && isTRUE(ok)
+}
+
+test_node_layout_rankdir <- function() {
+  # Get e
+  e <- get('e', parent.frame())
+  x <<- e$expr[1]
+  # Test expression from user's script
+  try({
+    t1 <- grepl(pattern = "graph \\[.*rankdir = LR.*\\]", e$expr[1])
+    t2 <- !grepl(pattern = "graph \\[.*rankdir = TB.*\\]", e$expr[1])
+    ok <- all(t1, t2)
+  }, silent = TRUE)
+  exists('ok') && isTRUE(ok)
 }

Graphviz/graphviz_node_layout.R

@@ -0,0 +1,25 @@
+node_layout <- grViz("
+digraph node_layout {
+      
+      graph [layout = dot]
+      
+      node [shape = circle,
+      style = filled,
+      color = grey]
+      
+      node [fillcolor = red]
+      a
+      
+      node [fillcolor = green]
+      b c d
+      
+      node [fillcolor = orange]
+      
+      edge [color = grey]
+      a -> {b c d}
+      b -> {e f g h}
+      c -> {i j k l}
+      d -> {m n o p}
+      }")
+
+print(node_layout)

Graphviz/graphviz_node_layout_circo.R

@@ -0,0 +1,25 @@
+node_layout_circo <- grViz("
+digraph node_layout_circo {
+      
+      graph [layout = circo]
+      
+      node [shape = circle,
+      style = filled,
+      color = grey]
+      
+      node [fillcolor = red]
+      a
+      
+      node [fillcolor = green]
+      b c d
+      
+      node [fillcolor = orange]
+      
+      edge [color = grey]
+      a -> {b c d}
+      b -> {e f g h}
+      c -> {i j k l}
+      d -> {m n o p}
+      }")
+
+print(node_layout_circo)

Graphviz/graphviz_node_layout_twopi.R

@@ -0,0 +1,25 @@
+node_layout_twopi <- grViz("
+digraph node_layout_twopi {
+      
+      graph [layout = twopi]
+      
+      node [shape = circle,
+      style = filled,
+      color = grey]
+      
+      node [fillcolor = red]
+      a
+      
+      node [fillcolor = green]
+      b c d
+      
+      node [fillcolor = orange]
+      
+      edge [color = grey]
+      a -> {b c d}
+      b -> {e f g h}
+      c -> {i j k l}
+      d -> {m n o p}
+      }")
+
+print(node_layout_twopi)

Graphviz/lesson.yaml

@@ -220,6 +220,71 @@
     instead of a, b and c.
   Script: subgraph_cluster.R
 
+- Class: text
+  Output: Graphviz layouts can also be modified quite radically by making use of 
+    different Graphviz layouts. Graphviz provides four different layouts - 'dot', 
+    'neato', 'twopi' and 'circo'.
+  
+- Class: figure
+  Output: You'll now see a completely new graph diagram displayed in the viewer. 
+    This graph uses the (default) Graphviz dot layout. The dot layout flows a 
+    directed graph in the direction of rank (i.e., downstream nodes of the same 
+    rank are aligned). By default, the direction is from top to bottom, but this 
+    can be changed with the 'rankdir' setting in the graph statement.
+  Figure: graphviz_node_layout.R
+  FigureType: new
+  
+- Class: script
+  Output: Take a look at the provided script and note in the graph statement 
+    where the rank direction ('rankdir') is specified. This statement isn't 
+    really necessary in this case since top-to-bottom is the default rank 
+    direction, but has been included for the sake of illustration. Update the 
+    script to change the rank direction to be left-to-right ('LR').
+  AnswerTests: test_node_layout_rankdir()
+  Hint: Simply replace the rankdir 'TB' with 'LR' near the top of the graphViz 
+    specification where the graph statement appears.
+  Script: node_layout_rankdir.R
+  
+- Class: text
+  Output: See how the whole graph layout has now been rotated? Let's try one of 
+    the other Graphviz layouts now.
+  
+- Class: script
+  Output: Update the provided script to change the graph layout from 'dot' 
+    to 'neato'.
+  AnswerTests: test_node_layout()
+  Hint: Simply replace 'dot' with 'neato' near the top of the graphViz 
+    specification where the graph layout is defined.
+  Script: node_layout.R
+  
+- Class: text
+  Output: Observe the new layout of the graph diagram. In this case, the result 
+    is a somewhat radial layout, but in general that is not always the case. The 
+    neato layout provides a class of layout sometimes referred to as a spring 
+    model layout. Essentially this layout attempts to minimize a global energy 
+    function, which is equivalent to statistical multi-dimensional scaling. This 
+    is usually a suitable layout if the graph is not too large (less than 100 
+    nodes) and you don't really know anything else in particular about it.
+    
+- Class: text
+  Output: Let's now also have a look at the remaining two Graphviz layouts, 
+    again utilizing the same underlying graph in order to facilitate comparison 
+    with the two layout types we have seen already.
+  
+- Class: figure
+  Output: This graph uses the 'twopi' layout. The twopi layout provides radial 
+    layouts. Nodes are placed on concentric circles depending their distance 
+    from a given root node.
+  Figure: graphviz_node_layout_twopi.R
+  FigureType: new
+  
+- Class: figure
+  Output: And this graph uses the 'circo' layout, which is for circular layout 
+    results. This layout is usually suitable for certain diagrams with multiple 
+    cyclic structures, such as telecommunications networks.
+  Figure: graphviz_node_layout_circo.R
+  FigureType: new
+  
 - Class: text
   Output: Now that we've explored the main elements of Graphviz diagrams, in the 
     next lesson we'll walk explore what's possible with Mermaid diagrams.

Graphviz/scripts/node_layout-correct.R

@@ -0,0 +1,25 @@
+node_layout <- grViz("
+digraph node_layout {
+      
+      graph [layout = neato]
+      
+      node [shape = circle,
+      style = filled,
+      color = grey]
+      
+      node [fillcolor = red]
+      a
+      
+      node [fillcolor = green]
+      b c d
+      
+      node [fillcolor = orange]
+      
+      edge [color = grey]
+      a -> {b c d}
+      b -> {e f g h}
+      c -> {i j k l}
+      d -> {m n o p}
+      }")
+
+print(node_layout)

Graphviz/scripts/node_layout.R

@@ -0,0 +1,25 @@
+node_layout <- grViz("
+digraph node_layout {
+      
+      graph [layout = dot]
+      
+      node [shape = circle,
+      style = filled,
+      color = grey]
+      
+      node [fillcolor = red]
+      a
+      
+      node [fillcolor = green]
+      b c d
+      
+      node [fillcolor = orange]
+      
+      edge [color = grey]
+      a -> {b c d}
+      b -> {e f g h}
+      c -> {i j k l}
+      d -> {m n o p}
+      }")
+
+print(node_layout)

Graphviz/scripts/node_layout_rankdir-correct.R

@@ -0,0 +1,25 @@
+node_layout_rankdir <- grViz("
+digraph node_layout_rankdir {
+      
+      graph [layout = dot, rankdir = LR]
+      
+      node [shape = circle,
+      style = filled,
+      color = grey]
+      
+      node [fillcolor = red]
+      a
+      
+      node [fillcolor = green]
+      b c d
+      
+      node [fillcolor = orange]
+      
+      edge [color = grey]
+      a -> {b c d}
+      b -> {e f g h}
+      c -> {i j k l}
+      d -> {m n o p}
+      }")
+
+print(node_layout_rankdir)

Graphviz/scripts/node_layout_rankdir.R

@@ -0,0 +1,25 @@
+node_layout_rankdir <- grViz("
+digraph node_layout_rankdir {
+      
+      graph [layout = dot, rankdir = TB]
+      
+      node [shape = circle,
+      style = filled,
+      color = grey]
+      
+      node [fillcolor = red]
+      a
+      
+      node [fillcolor = green]
+      b c d
+      
+      node [fillcolor = orange]
+      
+      edge [color = grey]
+      a -> {b c d}
+      b -> {e f g h}
+      c -> {i j k l}
+      d -> {m n o p}
+      }")
+
+print(node_layout_rankdir)