Graphviz Layout support

[fabiogra]

• Add support for layout using graphviz and pygraphviz (see how to install both https://pygraphviz.github.io/documentation/stable/install.html)
• Add example using tree layout (inspired from https://scikit-learn.org/stable/modules/tree.html#classification)
  

#15

[ChrisDelClea]

Awesome, thank you @fabiogra!

[fabiogra]

Thank you @chrischross for creating this streamlit component!

[atakanokan]

This is awesome @fabiogra! One question I have on this is if I was to not use the DOT formatted data, how would one incorporate just the X & Y coordinates into your example script iris_decision_tree.py? I am thinking of either doing T-SNE or manual coordinates for my work.

[fabiogra]

Hi @atakanokan! Interesting question, it could be nice to visualize data transformed by T-SNE (I'm thinking an use case for Image Similarity). So here's what you need to do it with streamlit-agraph:

1. Use x and y argument to pass each Node their coordinates
2. Set d3 = {'disableLinkForce': True} in Config

Here's an example using this data (https://scipy-lectures.org/packages/scikit-learn/auto_examples/plot_tsne.html) from Scikit-learn T-SNE algorithm:

import streamlit as st
from sklearn import datasets
from sklearn.manifold import TSNE
from streamlit_agraph import Config, Edge, Node, agraph

digits = datasets.load_digits()
X = digits.data[:500]
y = digits.target[:500]

tsne = TSNE(n_components=2, random_state=0)
X_2d = tsne.fit_transform(X)

target_ids = range(len(digits.target_names))

GRAPH_WIDTH = 1200
GRAPH_HEIGHT = 500

colors = 'red', 'green', 'blue', 'cyan', 'pink', 'yellow', 'gray', 'black', 'orange', 'purple'

nodes = []
j=0

for i, c, label in zip(target_ids, colors, digits.target_names):
    for elem in X_2d[y==i].tolist():
        nodes.append(Node(id=j, 
                            size=1, 
                            color=c,
                            renderLabel=False, 
                            x=GRAPH_WIDTH/4+float(elem[0]), 
                            y=GRAPH_HEIGHT/2+float(elem[1])
                            )
                     )
        j+=1

# You need to pass some Edge, so you can fake it and don't get some error:
edges = [Edge(source=0, 
              target=0,               
              type="CURVE_SMOOTH", 
              staticGraphWithDragAndDrop=False,
              staticGraph=False
              )]

config = Config(width=GRAPH_WIDTH, 
                height=GRAPH_HEIGHT, 
                directed=True,
                nodeHighlightBehavior=True, 
                highlightColor="#F7A7A6",
                collapsible=True,
                node={'labelProperty':'label'},
                link={'labelProperty': 'label', 'renderLabel': True},
                maxZoom=10,
                minZoom=0.1,
                staticGraphWithDragAndDrop=False,
                staticGraph=False,
                initialZoom=1,
                d3 = {'disableLinkForce': True}
                ) 

return_value = agraph(nodes=nodes, 
                      edges=edges, 
                      config=config)

Results:

[atakanokan]

Great solution to manual positioning of the nodes using the x and y arguments. Where can I find a comprehensive list of kwargs that I can pass to Node or Edge classes?

[fabiogra]

This component is based on react-d3-graph, so you should look on https://danielcaldas.github.io/react-d3-graph/docs/index.html#config-node

[atakanokan]

Thanks @fabiogra!