Hello, networks

A first post: an interactive networkx graph rendered with Plotly.

Posts can be written as .qmd files like this one, or as Jupyter notebooks (.ipynb) dropped into a folder under posts/. Code runs at build time and interactive output is embedded in the page.

import networkx as nx
import plotly.graph_objects as go

G = nx.karate_club_graph()
pos = nx.spring_layout(G, seed=42)

edge_x, edge_y = [], []
for u, v in G.edges():
    edge_x += [pos[u][0], pos[v][0], None]
    edge_y += [pos[u][1], pos[v][1], None]

clubs = [G.nodes[n]["club"] for n in G.nodes()]
fig = go.Figure(
    [
        go.Scatter(x=edge_x, y=edge_y, mode="lines",
                   line=dict(width=0.6, color="#999"), hoverinfo="skip"),
        go.Scatter(
            x=[pos[n][0] for n in G.nodes()],
            y=[pos[n][1] for n in G.nodes()],
            mode="markers",
            marker=dict(size=[6 + 2 * G.degree(n) for n in G.nodes()],
                        color=[0 if c == "Mr. Hi" else 1 for c in clubs],
                        colorscale=[[0, "#2a78d6"], [1, "#e0712c"]]),
            text=[f"Node {n}<br>Club: {c}<br>Degree: {G.degree(n)}"
                  for n, c in zip(G.nodes(), clubs)],
            hoverinfo="text",
        ),
    ],
    layout=go.Layout(showlegend=False, hovermode="closest",
                     margin=dict(l=0, r=0, t=0, b=0),
                     xaxis=dict(visible=False), yaxis=dict(visible=False),
                     paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)"),
)
fig.show()

Figure 1: Zachary’s karate club, coloured by faction. Hover a node for details.

The graph has 34 nodes and 78 edges.

For live data from Neo4j, see the Graph Explorer.