feat(highcharts): implement network-force-directed (#5440)

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

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

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

**Parent Issue:** #990

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

---------

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/highcharts.py

@@ -1,9 +1,10 @@
-""" pyplots.ai
+""" anyplot.ai
 network-force-directed: Force-Directed Graph
-Library: highcharts unknown | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-23
+Library: highcharts unknown | Python 3.14.4
+Quality: 83/100 | Updated: 2026-04-26
 """
 
+import os
 import random
 import tempfile
 import time
@@ -14,6 +15,15 @@
 from selenium.webdriver.chrome.options import Options
 
 
+# Theme 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"
+GRID = "rgba(26,26,23,0.10)" if THEME == "light" else "rgba(240,239,232,0.10)"
+LABEL_OUTLINE = PAGE_BG
+
 # Data - Social network with communities
 random.seed(42)
 
@@ -25,13 +35,8 @@
     "Design": ["Amy", "Ben", "Chloe", "Dan", "Emma", "Finn", "Gina", "Hugo"],
 }
 
-# Community colors (colorblind-safe)
-community_colors = {
-    "Tech": "#306998",  # Python Blue
-    "Marketing": "#FFD43B",  # Python Yellow
-    "Finance": "#9467BD",  # Purple
-    "Design": "#17BECF",  # Cyan
-}
+# Community colors — Okabe-Ito positions 1-4
+community_colors = {"Tech": "#009E73", "Marketing": "#D55E00", "Finance": "#0072B2", "Design": "#CC79A7"}
 
 # Build nodes with community info
 nodes = []
@@ -70,21 +75,14 @@
                 edges.append({"from": person1, "to": person2})
                 added_edges.add(edge)
 
-# Prepare series data
-series_data = []
-for edge in edges:
-    series_data.append([edge["from"], edge["to"]])
-
-# Create node configurations with larger markers
+# Create node configurations
 node_configs = []
 for n in nodes:
-    node_configs.append(
-        {"id": n["id"], "color": n["color"], "marker": {"radius": 45}, "dataLabels": {"style": {"fontSize": "28px"}}}
-    )
+    node_configs.append({"id": n["id"], "color": n["color"], "marker": {"radius": 32}})
 
 # Download Highcharts JS and networkgraph module
-highcharts_url = "https://code.highcharts.com/highcharts.js"
-networkgraph_url = "https://code.highcharts.com/modules/networkgraph.js"
+highcharts_url = "https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/highcharts.js"
+networkgraph_url = "https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/modules/networkgraph.js"
 
 with urllib.request.urlopen(highcharts_url, timeout=30) as response:
     highcharts_js = response.read().decode("utf-8")
@@ -95,7 +93,7 @@
 # Build chart configuration as raw JavaScript for better control
 nodes_js = "[\n"
 for n in node_configs:
-    nodes_js += f'    {{id: "{n["id"]}", color: "{n["color"]}", marker: {{radius: 45}}}},\n'
+    nodes_js += f'    {{id: "{n["id"]}", color: "{n["color"]}", marker: {{radius: 32}}}},\n'
 nodes_js += "]"
 
 data_js = "[\n"
@@ -109,38 +107,48 @@
         type: 'networkgraph',
         width: 4800,
         height: 2700,
-        backgroundColor: '#ffffff'
+        backgroundColor: '{PAGE_BG}',
+        style: {{color: '{INK}'}}
     }},
     title: {{
-        text: 'network-force-directed · highcharts · pyplots.ai',
-        style: {{fontSize: '56px', fontWeight: 'bold'}}
+        text: 'network-force-directed · highcharts · anyplot.ai',
+        style: {{fontSize: '56px', fontWeight: 'bold', color: '{INK}'}}
     }},
     subtitle: {{
-        text: 'Social Network with 4 Communities (Tech: Blue, Marketing: Yellow, Finance: Purple, Design: Cyan)',
-        style: {{fontSize: '32px', color: '#666666'}}
+        useHTML: true,
+        text: '<span style="font-size:32px;color:{INK_SOFT};">Communication ties across four departments — dense within, sparse between</span><br/>'
+            + '<span style="font-size:30px;">'
+            + '<span style="color:#009E73;">&#9679;</span> <span style="color:{INK};">Tech</span> &nbsp;&nbsp;&nbsp;'
+            + '<span style="color:#D55E00;">&#9679;</span> <span style="color:{INK};">Marketing</span> &nbsp;&nbsp;&nbsp;'
+            + '<span style="color:#0072B2;">&#9679;</span> <span style="color:{INK};">Finance</span> &nbsp;&nbsp;&nbsp;'
+            + '<span style="color:#CC79A7;">&#9679;</span> <span style="color:{INK};">Design</span>'
+            + '</span>',
+        style: {{fontSize: '32px', color: '{INK_SOFT}'}}
     }},
+    legend: {{enabled: false}},
     plotOptions: {{
         networkgraph: {{
             layoutAlgorithm: {{
                 enableSimulation: true,
                 friction: -0.9,
-                linkLength: 250,
-                gravitationalConstant: 0.02,
+                linkLength: 650,
+                gravitationalConstant: 0.06,
                 integration: 'verlet',
-                maxIterations: 1000
+                maxIterations: 1500
             }},
             dataLabels: {{
                 enabled: true,
                 linkFormat: '',
                 style: {{
                     fontSize: '26px',
                     fontWeight: 'bold',
-                    textOutline: '3px white'
+                    color: '{INK}',
+                    textOutline: '3px {LABEL_OUTLINE}'
                 }}
             }},
             link: {{
                 width: 4,
-                color: '#999999'
+                color: '{GRID}'
             }}
         }}
     }},
@@ -161,14 +169,14 @@
     <script>{highcharts_js}</script>
     <script>{networkgraph_js}</script>
 </head>
-<body style="margin:0; padding:0;">
+<body style="margin:0; padding:0; background:{PAGE_BG};">
     <div id="container" style="width: 4800px; height: 2700px;"></div>
     <script>{chart_js}</script>
 </body>
 </html>"""
 
 # Save HTML file
-with open("plot.html", "w", encoding="utf-8") as f:
+with open(f"plot-{THEME}.html", "w", encoding="utf-8") as f:
     f.write(html_content)
 
 # Take screenshot with Selenium
@@ -186,7 +194,7 @@
 driver = webdriver.Chrome(options=chrome_options)
 driver.get(f"file://{temp_path}")
 time.sleep(12)  # Wait longer for force simulation to stabilize
-driver.save_screenshot("plot.png")
+driver.save_screenshot(f"plot-{THEME}.png")
 driver.quit()
 
 Path(temp_path).unlink()