This notebook demonstrates the various Metro styling options.
In order to apply styling we need to call render_svg by hand with the appropriate renderer and style configuration.
from dagviz import render_svg
from dagviz.style.metro import svg_renderer, StyleConfig
from IPython.display import HTML
import networkx as nx
First we construct a simple graph that demonstrates all the visual aspects a rendering may have.
g = nx.DiGraph()
g.add_node("a", label="switch(value)")
g.add_node("b", label="case 1")
g.add_node("c", label="case 2")
g.add_node("d", label="case 3")
g.add_node("e", label="end")
g.add_edge("a", "b")
g.add_edge("a", "c")
g.add_edge("a", "d")
g.add_edge("b", "e")
g.add_edge("c", "e")
g.add_edge("d", "e")
Without any configuration, we get (of course) the default rendering:
HTML(render_svg(g))
The scale setting determines the amount of space each node has:
HTML(render_svg(g, style=svg_renderer(StyleConfig(scale=20))))
The node radius determines the size of the bubbles:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_radius=10))))
By default the node fill color is automatically selected. This can be overriden by specifying a fixed color:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_fill="black"))))
The node stroke specifies the color of the border of the bubble:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_stroke="black"))))
The node stroke width determines the width of the border of the bubbles:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_stroke="black", node_stroke_width=4))))
The edge stroke width determines the width of the edges:
HTML(render_svg(g, style=svg_renderer(StyleConfig(node_fill="black", edge_stroke_width=10))))
The default font family for labels is "sans-serif". This can be changes too:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_font_family="serif"))))
The label arrow stroke determines the color of the line from node to label:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_arrow_stroke="black"))))
The label arrow dash array determines how the label arrow is dashed:
HTML(render_svg(g, style=svg_renderer(StyleConfig(label_arrow_dash_array="0"))))
The arc radius determines the radius of the arc from vertical line to a node:
HTML(render_svg(g, style=svg_renderer(StyleConfig(arc_radius=5))))