Add examples of Graph/Network rendering

[jbednar]

As of PRs #85 and #88, dot-based graph plots are now supported in Panel, either as SVG representations of GraphViz Graph/DiGraph objects, or as PNG representations of NetworkX objects created by nxpd.draw():

from graphviz import Graph
hw = Graph('hello', format='svg')
hw.edge('Hello', 'World')

import networkx as nx, nxpd
G = nx.cycle_graph(4, create_using=nx.DiGraph())
d = nxpd.draw(G, show='ipynb')

import panel as pn
pn.Row(hw, "Text", d, "Text")

Remaining issues:

• Spacing for these objects is not currently automatically determined
• It would be nice to provide graph examples in the User Guide

[philippjfr]

nxpd seems like a pretty niche library to consider here. I'd just draw the networkx graph using pygraphviz:

from graphviz import Graph
hw = Graph('hello', format='svg')
hw.edge('Hello', 'World')

import networkx as nx
G = nx.complete_graph(5)
A = nx.nx_agraph.to_agraph(G)

import panel as pn
pn.Row(hw, "Text", A.draw(prog='dot', format='svg').decode('utf-8'), "Text")

[jbednar]

A.draw?

[philippjfr]

Fixed.

[MarcSkovMadsen]

Using Panel 0.12.1 The above example does not work for me. The output of A.draw needs to be clean by removing things in front of <svg.

This works

from graphviz import Graph
import panel as pn
import networkx as nx

graphviz_graph = Graph('hello', format='svg')
graphviz_graph.edge('Hello', 'World')

graph = nx.complete_graph(5)
pyviz_graph = nx.nx_agraph.to_agraph(graph)

def clean_svg(svg):
    svg.find("<svg")
    svg_start = svg.find("<svg")
    return svg[svg_start:]

networkx_svg = clean_svg(pyviz_graph.draw(prog='dot', format='svg').decode('utf-8'))

pn.Row(
    graphviz_graph,
    "Text",
    networkx_svg,
    "Text").servable()

[MarcSkovMadsen]

#2732 Should close this one.