<jupyter_start><jupyter_text>Tutorial 9. Make interactive graphs in your streamlit app.  This notebook shows how to deploy an Streamlit app on top of Google Colaboratory + Networkx + Pyvis.![](https://github.com/napoles-uach/streamlit_apps/blob/main/Streamlit_Colab/Images/09.png?raw=True) 1) Run all and click the "**Link to web app**" (ignore the output of the last cell). 2) Modify the code in `app.py`  Setup(Do not need to install networkx.)<jupyter_code>#@title -----------> Installation of Streamlit and pyngrok of course!!
!pip -q install streamlit
!pip -q install pyngrok
!pip install pyvis<jupyter_output>Collecting pyvis
  Downloading https://files.pythonhosted.org/packages/77/e1/bee44bc4ec826bb7ed1f1ff52244bca3745b1a7d72033fc84ffeed61725b/pyvis-0.1.8.2-py3-none-any.whl
Requirement already satisfied: networkx>=1.11 in /usr/local/lib/python3.6/dist-packages (from pyvis) (2.5)
Requirement already satisfied: ipython>=5.3.0 in /usr/local/lib/python3.6/dist-packages (from pyvis) (5.5.0)
Collecting jsonpickle>=1.4.1
  Downloading https://files.pythonhosted.org/packages/ee/d5/1cc282dc23346a43aab461bf2e8c36593aacd34242bee1a13fa750db0cfe/jsonpickle-1.4.2-py2.py3-none-any.whl
Requirement already satisfied: jinja2>=2.9.6 in /usr/local/lib/python3.6/dist-packages (from pyvis) (2.11.2)
Requirement already satisfied: decorator>=4.3.0 in /usr/local/lib/python3.6/dist-packages (from networkx>=1.11->pyvis) (4.4.2)
Requirement already satisfied: traitlets>=4.2 in /usr/local/lib/python3.6/dist-packages (from ipython>=5.3.0->pyvis) (4.3.3)
Requirement already satisfied: pexpect; sys_platform != "win32" in[...]<jupyter_text>Here we use the ngrok cloud service. Don't change this!! The following is the `app.py` base code. It can be modified in the cell or in the folder to the left.<jupyter_code>%%writefile app.py
import streamlit as st
import streamlit.components.v1 as components
import networkx as nx
import matplotlib.pyplot as plt
from pyvis.network import Network
import got 
#Network(notebook=True)
st.title('Hello Pyvis')
# make Network show itself with repr_html

#def net_repr_html(self):
#  nodes, edges, height, width, options = self.get_network_data()
#  html = self.template.render(height=height, width=width, nodes=nodes, edges=edges, options=options)
#  return html

#Network._repr_html_ = net_repr_html
st.sidebar.title('Choose your favorite Graph')
option=st.sidebar.selectbox('select graph',('Simple','Karate', 'GOT','Random'))
physics=st.sidebar.checkbox('add physics interactivity?')
got.simple_func(physics)

if option=='Simple':
  HtmlFile = open("test.html", 'r', encoding='utf-8')
  source_code = HtmlFile.read() 
  components.html(source_code, height = 900,width=900)


got.got_func(physics)

if option=='GOT':
  HtmlFile = open("gameofthrones.html", 'r', encoding='utf-8')
  source_code = HtmlFile.read() 
  components.html(source_code, height = 1200,width=1000)



got.karate_func(physics)

if option=='Karate':
  HtmlFile = open("karate.html", 'r', encoding='utf-8')
  source_code = HtmlFile.read() 
  components.html(source_code, height = 1200,width=1000)


got.random_func(physics)

if option=='Random':
  HtmlFile = open("random.html", 'r', encoding='utf-8')
  source_code = HtmlFile.read() 
  components.html(source_code, height = 1200,width=1000)
# Put your Python+Streamlit code here ...
# you can modify it by double cliking on the folder icon at the left<jupyter_output>Writing app.py<jupyter_text>This last cell would keep the app running. If stoped, the app woul be disconnected.<jupyter_code>%%writefile got.py
import networkx as nx
import matplotlib.pyplot as plt
from pyvis.network import Network
import pandas as pd
import streamlit as st


def got_func(physics):
  got_net = Network(height="600px", width="100%", font_color="black",heading='Game of Thrones Graph')

# set the physics layout of the network
  got_net.barnes_hut()
  got_data = pd.read_csv("https://www.macalester.edu/~abeverid/data/stormofswords.csv")
  #got_data = pd.read_csv("stormofswords.csv")
  #got_data.rename(index={0: "Source", 1: "Target", 2: "Weight"}) 
  sources = got_data['Source']
  targets = got_data['Target']
  weights = got_data['Weight']

  edge_data = zip(sources, targets, weights)

  for e in edge_data:
    src = e[0]
    dst = e[1]
    w = e[2]

    got_net.add_node(src, src, title=src)
    got_net.add_node(dst, dst, title=dst)
    got_net.add_edge(src, dst, value=w)

  neighbor_map = got_net.get_adj_list()

# add neighbor data to node hover data
  for node in got_net.nodes:
    node["title"] += " Neighbors:<br>" + "<br>".join(neighbor_map[node["id"]])
    node["value"] = len(neighbor_map[node["id"]])
  if physics:
    got_net.show_buttons(filter_=['physics'])
  got_net.show("gameofthrones.html")
  

def simple_func(physics): 
  nx_graph = nx.cycle_graph(10)
  nx_graph.nodes[1]['title'] = 'Number 1'
  nx_graph.nodes[1]['group'] = 1
  nx_graph.nodes[3]['title'] = 'I belong to a different group!'
  nx_graph.nodes[3]['group'] = 10
  nx_graph.add_node(20, size=20, title='couple', group=2)
  nx_graph.add_node(21, size=15, title='couple', group=2)
  nx_graph.add_edge(20, 21, weight=5)
  nx_graph.add_node(25, size=25, label='lonely', title='lonely node', group=3)


  nt = Network("500px", "500px",notebook=True,heading='')
  nt.from_nx(nx_graph)
  #physics=st.sidebar.checkbox('add physics interactivity?')
  if physics:
    nt.show_buttons(filter_=['physics'])
  nt.show('test.html')


def karate_func(physics): 
  G = nx.karate_club_graph()


  nt = Network("500px", "500px",notebook=True,heading='Zachary’s Karate Club graph')
  nt.from_nx(G)
  #physics=st.sidebar.checkbox('add physics interactivity?')
  if physics:
    nt.show_buttons(filter_=['physics'])
  nt.show('karate.html')


def random_func(physics): 
  G = nx.random_tree(20)


  nt = Network("500px", "500px",directed=True,heading='Random graph')
  nt.from_nx(G)
  #physics=st.sidebar.checkbox('add physics interactivity?')
  if physics:
    nt.show_buttons(filter_=['physics'])
  nt.show('random.html')
#@title This last cell would keep the app running. If stoped, the app would be disconnected.
from pyngrok import ngrok
public_url = ngrok.connect(port='80')
print('Link to web app:')
print (public_url)
!streamlit run --server.port 80 app.py >/dev/null<jupyter_output>Link to web app:
NgrokTunnel: "http://8318e1131c89.ngrok.io" -> "http://localhost:80"
{'fraction_non_alphanumeric': 0.14373040752351096, 'fraction_numerical': 0.038871473354231974, 'mean_word_length': 5.225365853658537, 'pattern_counts': {'":': 0, '<': 12, '<?xml version=': 0, '>': 25, 'https://': 4, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 1, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '3', 'dir': 'jupyter-structured-clean-dedup', 'id': '229661', 'license': 'MIT', 'n_tokens_mistral': 2477, 'n_tokens_neox': 2303, 'n_words': 522, 'path': 'Streamlit_Colab/09_Streamlit__Colab_Networkx_Pyvis.ipynb', 'repo_name': 'napoles-uach/streamlit_apps', 'size': '6380'}