feat(plotly): implement network-force-directed (#5434)

## Implementation: `network-force-directed` - python/plotly

Implements the **python/plotly** version of `network-force-directed`.

**File:**
`plots/network-force-directed/implementations/python/plotly.py`

**Parent Issue:** #990

---
:robot: *[impl-generate
workflow](https://github.com/MarkusNeusinger/anyplot/actions/runs/24952565979)*

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

plots/network-force-directed/implementations/python/plotly.py

@@ -1,23 +1,32 @@
-""" pyplots.ai
+""" anyplot.ai
 network-force-directed: Force-Directed Graph
-Library: plotly 6.5.0 | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: plotly 6.7.0 | Python 3.14.4
+Quality: 89/100 | Updated: 2026-04-26
 """
 
+import os
+
 import numpy as np
 import plotly.graph_objects as go
 
 
-# Set seed for reproducibility
+# Theme-adaptive chrome tokens
+THEME = os.getenv("ANYPLOT_THEME", "light")
+PAGE_BG = "#FAF8F1" if THEME == "light" else "#1A1A17"
+ELEVATED_BG = "#FFFDF6" if THEME == "light" else "#242420"
+INK = "#1A1A17" if THEME == "light" else "#F0EFE8"
+INK_SOFT = "#4A4A44" if THEME == "light" else "#B8B7B0"
+
+# Okabe-Ito categorical palette (positions 1-3)
+OKABE_ITO = ["#009E73", "#D55E00", "#0072B2"]
+
 np.random.seed(42)
 
-# Data: A social network with 50 nodes in 3 communities
-# Demonstrates force-directed layout with clear community structure
+# A social network with 50 nodes in 3 communities
 nodes = []
 edges = []
 
-# Create 3 communities
-community_sizes = [18, 17, 15]  # Total: 50 nodes
+community_sizes = [18, 17, 15]
 community_names = ["Engineering", "Marketing", "Sales"]
 node_id = 0
 
@@ -27,40 +36,35 @@
         node_id += 1
 
 # Intra-community edges (dense connections within communities)
-# Engineering: nodes 0-17
 for i in range(18):
     for j in range(i + 1, 18):
         if np.random.random() < 0.3:
             edges.append((i, j))
 
-# Marketing: nodes 18-34
 for i in range(18, 35):
     for j in range(i + 1, 35):
         if np.random.random() < 0.3:
             edges.append((i, j))
 
-# Sales: nodes 35-49
 for i in range(35, 50):
     for j in range(i + 1, 50):
         if np.random.random() < 0.3:
             edges.append((i, j))
 
-# Inter-community edges (sparse bridges between communities)
+# Inter-community bridge edges
 bridge_edges = [(0, 18), (5, 20), (10, 25), (18, 35), (22, 40), (30, 45), (8, 38), (15, 48)]
 edges.extend(bridge_edges)
 
-# Force-directed layout algorithm (Fruchterman-Reingold)
+# Force-directed layout (Fruchterman-Reingold)
 n = len(nodes)
-positions = np.random.rand(n, 2) * 2 - 1  # Initial random positions
+positions = np.random.rand(n, 2) * 2 - 1
 
-# Optimal distance parameter
 k = 0.5
 iterations = 200
 
 for iteration in range(iterations):
     displacement = np.zeros((n, 2))
 
-    # Repulsive forces between all node pairs (nodes push apart)
     for i in range(n):
         for j in range(i + 1, n):
             diff = positions[i] - positions[j]
@@ -69,41 +73,33 @@
             displacement[i] += repulsive_force
             displacement[j] -= repulsive_force
 
-    # Attractive forces along edges (connected nodes pull together)
     for src, tgt in edges:
         diff = positions[src] - positions[tgt]
         dist = max(np.linalg.norm(diff), 0.01)
         attractive_force = (dist * dist / k) * (diff / dist)
         displacement[src] -= attractive_force
         displacement[tgt] += attractive_force
 
-    # Apply displacement with cooling (decreasing temperature)
     temperature = 1 - iteration / iterations
     for i in range(n):
         disp_norm = np.linalg.norm(displacement[i])
         if disp_norm > 0:
-            # Limit movement by temperature
             positions[i] += (displacement[i] / disp_norm) * min(disp_norm, 0.15 * temperature)
 
-# Normalize positions to [0.05, 0.95] range
 pos_min = positions.min(axis=0)
 pos_max = positions.max(axis=0)
 positions = (positions - pos_min) / (pos_max - pos_min + 1e-6) * 0.9 + 0.05
 pos = {node["id"]: positions[i] for i, node in enumerate(nodes)}
 
-# Calculate node degrees (number of connections)
+# Node degrees
 degrees = {node["id"]: 0 for node in nodes}
 for src, tgt in edges:
     degrees[src] += 1
     degrees[tgt] += 1
 
-# Community colors (Python Blue first, then Python Yellow, then accessible third color)
-community_colors = ["#306998", "#FFD43B", "#FF6B6B"]
-
-# Create figure
 fig = go.Figure()
 
-# Draw edges first
+# Edge trace (single trace via None separators — classic plotly network pattern)
 edge_x = []
 edge_y = []
 for src, tgt in edges:
@@ -117,21 +113,19 @@
         x=edge_x,
         y=edge_y,
         mode="lines",
-        line={"width": 1.5, "color": "#AAAAAA"},
-        opacity=0.4,
+        line={"width": 1.5, "color": INK_SOFT},
+        opacity=0.35,
         hoverinfo="none",
         showlegend=False,
     )
 )
 
-# Draw nodes by community (for legend grouping)
+# Nodes grouped by community for legend
 for comm_idx, comm_name in enumerate(community_names):
     comm_nodes = [node for node in nodes if node["community"] == comm_idx]
     x_vals = [pos[node["id"]][0] for node in comm_nodes]
     y_vals = [pos[node["id"]][1] for node in comm_nodes]
-    sizes = [20 + degrees[node["id"]] * 5 for node in comm_nodes]  # Scale size by connections
-
-    # Hover text showing degree
+    sizes = [20 + degrees[node["id"]] * 5 for node in comm_nodes]
     hover_text = [f"Node {node['id']}<br>Connections: {degrees[node['id']]}" for node in comm_nodes]
 
     fig.add_trace(
@@ -141,36 +135,48 @@
             mode="markers",
             marker={
                 "size": sizes,
-                "color": community_colors[comm_idx],
-                "line": {"width": 2, "color": "#333333"},
-                "opacity": 0.85,
+                "color": OKABE_ITO[comm_idx],
+                "line": {"width": 2, "color": PAGE_BG},
+                "opacity": 0.9,
             },
             name=comm_name,
             text=hover_text,
             hoverinfo="text",
         )
     )
 
-# Add "Hub" labels for high-degree nodes
+# Hub annotations: label only the single highest-degree node per community
 hub_annotations = []
-for node in nodes:
-    if degrees[node["id"]] >= 7:
-        x, y = pos[node["id"]]
-        hub_annotations.append(
-            {
-                "x": x,
-                "y": y + 0.04,
-                "text": "Hub",
-                "showarrow": False,
-                "font": {"size": 14, "color": "#333333", "family": "Arial Black"},
-                "xanchor": "center",
-                "yanchor": "bottom",
-            }
-        )
+for comm_idx, comm_name in enumerate(community_names):
+    comm_nodes = [node for node in nodes if node["community"] == comm_idx]
+    top_node = max(comm_nodes, key=lambda node: degrees[node["id"]])
+    x, y = pos[top_node["id"]]
+    hub_annotations.append(
+        {
+            "x": x,
+            "y": y + 0.04,
+            "text": f"{comm_name} hub",
+            "showarrow": False,
+            "font": {"size": 16, "color": INK, "family": "Arial Black"},
+            "bgcolor": ELEVATED_BG,
+            "bordercolor": INK_SOFT,
+            "borderwidth": 1,
+            "borderpad": 4,
+            "xanchor": "center",
+            "yanchor": "bottom",
+        }
+    )
 
-# Layout
 fig.update_layout(
-    title={"text": "network-force-directed · plotly · pyplots.ai", "font": {"size": 28}, "x": 0.5, "xanchor": "center"},
+    title={
+        "text": "network-force-directed · plotly · anyplot.ai",
+        "font": {"size": 28, "color": INK},
+        "x": 0.5,
+        "xanchor": "center",
+    },
+    paper_bgcolor=PAGE_BG,
+    plot_bgcolor=PAGE_BG,
+    font={"color": INK},
     xaxis={"showgrid": False, "zeroline": False, "showticklabels": False, "range": [-0.05, 1.05]},
     yaxis={
         "showgrid": False,
@@ -180,20 +186,18 @@
         "scaleanchor": "x",
         "scaleratio": 1,
     },
-    template="plotly_white",
     legend={
-        "title": {"text": "Teams", "font": {"size": 20}},
-        "font": {"size": 18},
+        "title": {"text": "Teams", "font": {"size": 20, "color": INK}},
+        "font": {"size": 16, "color": INK_SOFT},
         "x": 0.02,
         "y": 0.98,
-        "bgcolor": "rgba(255,255,255,0.9)",
-        "bordercolor": "#333333",
+        "bgcolor": ELEVATED_BG,
+        "bordercolor": INK_SOFT,
         "borderwidth": 1,
     },
     annotations=hub_annotations,
     margin={"l": 20, "r": 20, "t": 80, "b": 20},
 )
 
-# Save as PNG and HTML
-fig.write_image("plot.png", width=1600, height=900, scale=3)
-fig.write_html("plot.html", include_plotlyjs="cdn")
+fig.write_image(f"plot-{THEME}.png", width=1600, height=900, scale=3)
+fig.write_html(f"plot-{THEME}.html", include_plotlyjs="cdn")