HW6 Viz 1 Update

app.py

@@ -31,12 +31,52 @@ def load_data():
         'degree': list(degrees.values()),
         'clustering_coefficient': [clustering[n] for n in degrees.keys()]
     })
-    return df
+    return df, G
 
-df = load_data()
+df, G = load_data()
 
-# --- Visualization 1: Degree Histogram ---
-st.subheader("Visualization 1: Degree Distribution Histogram")
+# --- Visualization 1: Interactive Network Graph ---
+st.subheader("Visualization 1: Interactive Network Graph")
+
+from pyvis.network import Network
+import streamlit.components.v1 as components
+import tempfile
+import os
+
+# Limit size for performance
+G_sub = G.subgraph(list(df.sort_values(by='degree', ascending=False).head(100)['node']))
+
+# Create Pyvis Network
+net = Network(height="500px", width="100%", notebook=False, bgcolor="#222222", font_color="white")
+net.from_nx(G_sub)
+
+# Save to temp file and embed
+with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as tmp_file:
+    net.save_graph(tmp_file.name)
+    HtmlFile = open(tmp_file.name, 'r', encoding='utf-8')
+    components.html(HtmlFile.read(), height=550)
+    HtmlFile.close()
+    os.unlink(tmp_file.name)
+
+# --- Write-Up for Visualization 1 ---
+st.markdown("""
+**What is being visualized:**  
+This interactive diagram shows a subgraph of the 100 most connected nodes in the Facebook network.
+
+**Why it’s interesting:**  
+It reveals tightly knit clusters, central hubs, and bridges visually — which can’t be seen in numeric plots.
+
+**Design choices:**  
+- `pyvis` enables force-directed layout with drag-zoom
+- High-degree nodes selected for visibility and clarity
+- Dark theme for contrast and style
+
+**What I'd improve with more time:**  
+I’d explore community detection and color nodes by cluster, or allow node attribute filtering live in the app.
+""")
+
+# --- Visualization 2: Degree Histogram ---
+st.subheader("Visualization 2: Degree Distribution Histogram")
 
 hist = alt.Chart(df).mark_bar().encode(
     alt.X('degree:Q', bin=alt.Bin(maxbins=50), title='Degree (Number of Friends)'),
@@ -68,8 +108,8 @@ It reveals that most users have a low-to-medium number of friends, while a few n
 I'd add interactive sliders to explore bin size and consider fitting a power-law model.
 """)
 
-# --- Visualization 2: Scatter Plot Degree vs. Clustering ---
-st.subheader("Visualization 2: Degree vs Clustering Coefficient")
+# --- Visualization 3: Scatter Plot Degree vs. Clustering ---
+st.subheader("Visualization 3: Degree vs Clustering Coefficient")
 
 scatter = alt.Chart(df).mark_circle(size=60, opacity=0.6).encode(
     x=alt.X('degree:Q', title='Degree (Number of Friends)'),
@@ -83,7 +123,7 @@ scatter = alt.Chart(df).mark_circle(size=60, opacity=0.6).encode(
 
 st.altair_chart(scatter, use_container_width=True)
 
-# --- Write-Up for Visualization 2 ---
+# --- Write-Up for Visualization 3 ---
 st.markdown("""
 **What is being visualized:**  
 This scatter plot shows how the clustering coefficient (a measure of how connected a node's neighbors are) varies with degree.

requirements.txt

@@ -2,3 +2,4 @@ streamlit
 altair
 pandas
 networkx
+pyvis