d3graph 2.9.3__tar.gz → 2.9.5__tar.gz

{d3graph-2.9.3/d3graph.egg-info → d3graph-2.9.5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.9.3
+Version: 2.9.5
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause
@@ -103,6 +103,14 @@ from d3graph import d3graph
   </a>
 </p>
 
+
+<p align="left">
+  <a href="https://erdogant.github.io/docs/d3graph/titanic_example/index.html">
+     <img src="https://github.com/d3blocks/d3blocks/blob/main/docs/figs/d3graph/socialmedia.gif" width="1000"/>
+  </a>
+</p>
+
+
 <hr>
 
 ### Contributors

{d3graph-2.9.3 → d3graph-2.9.5}/README.md

@@ -72,6 +72,14 @@ from d3graph import d3graph
   </a>
 </p>
 
+
+<p align="left">
+  <a href="https://erdogant.github.io/docs/d3graph/titanic_example/index.html">
+     <img src="https://github.com/d3blocks/d3blocks/blob/main/docs/figs/d3graph/socialmedia.gif" width="1000"/>
+  </a>
+</p>
+
+
 <hr>
 
 ### Contributors

{d3graph-2.9.3 → d3graph-2.9.5}/d3graph/__init__.py

@@ -17,7 +17,7 @@ from d3graph.d3graph import (
 
 __author__ = 'Erdogan Tasksen'
 __email__ = 'erdogant@gmail.com'
-__version__ = '2.9.3'
+__version__ = '2.9.5'
 
 # Setup root logger
 _logger = logging.getLogger('d3graph')

{d3graph-2.9.3 → d3graph-2.9.5}/d3graph/d3graph.py

@@ -128,6 +128,7 @@ class d3graph:
              density_grid_size: int = 60,
              density_blur: int = 10,
              density_opacity: float = 0.6,
+             show_controls: bool = True,
              ) -> None:
         """Build and show the graph.
 
@@ -207,6 +208,14 @@ class d3graph:
             blocky grid.
         density_opacity : float, (default: 0.6)
             Maximum heatmap opacity, reached at the highest-density grid cell.
+        show_controls : bool, (default: True)
+            Whether to render the top-panel buttons (Dark Mode, Hide Edges, Show Density,
+            Save) at all. Set to False when embedding the generated HTML into an existing
+            page/app that provides its own UI chrome and doesn't need d3graph's built-in
+            controls - the buttons (and their JS wiring) are omitted entirely rather than
+            just hidden, so there's no extra DOM/clutter in the embed. The weight/component
+            sliders are controlled separately via show_slider; the Save button specifically
+            is also controlled via save_button, independent of this.
 
         Returns
         -------
@@ -236,6 +245,7 @@ class d3graph:
         self.config['density_grid_size'] = density_grid_size
         self.config['density_blur'] = density_blur
         self.config['density_opacity'] = density_opacity
+        self.config['show_controls'] = show_controls
 
         # Allow show() to override the link_tension set at __init__ time
         if link_tension is not None:
@@ -252,7 +262,7 @@ class d3graph:
         # Make slider
         self.setup_slider()
         # Create json
-        json_data = json_create(self.G)
+        json_data = json_create(self.G, compute_stats=self.config.get('show_controls', True))
         # Create html with json file embedded
         html = self.write_html(json_data, overwrite=overwrite)
         # Display the chart
@@ -837,7 +847,6 @@ class d3graph:
 
         # Hide slider
         show_slider = ['', ''] if self.config['show_slider'] else ['<!--', '-->']
-        show_save_button = ['', ''] if self.config['save_button'] else ['<!--', '-->']
         # Set width and height to screen resolution if None.
         width = 'window.screen.width' if self.config['figsize'][0] is None else self.config['figsize'][0]
         height = 'window.screen.height' if self.config['figsize'][1] is None else self.config['figsize'][1]
@@ -864,6 +873,8 @@ class d3graph:
                    'density_grid_size': self.config.get('density_grid_size', 40),
                    'density_blur': self.config.get('density_blur', 8),
                    'density_opacity': self.config.get('density_opacity', 0.6),
+                   'show_controls': self.config.get('show_controls', True),
+                   'save_button': self.config['save_button'],
                    'node_text_inside': self.config.get('node_text_inside', False),
                    'CLICK_COMMENT': CLICK_COMMENT,
                    'CLICK_FILL': click_properties['fill'],
@@ -872,8 +883,6 @@ class d3graph:
                    'CLICK_STROKEW': click_properties['stroke-width'],
                    'slider_comment_start': show_slider[0],
                    'slider_comment_stop': show_slider[1],
-                   'save_button_comment_start': show_save_button[0],
-                   'save_button_comment_stop': show_save_button[1],
                    'SET_SLIDER': self.config['set_slider'],
                    'SUPPORT': support,
                    'background_color': self.config['background_color'],
@@ -1040,13 +1049,20 @@ def check_logger(verbose: [str, int] = 'info'):
 
 
 # %% Write network in json file
-def json_create(G: nx.Graph) -> str:
+def json_create(G: nx.Graph, compute_stats: bool = True) -> str:
     """Create json from Graph.
 
     Parameters
     ----------
     G : Networkx object
         Graph G
+    compute_stats : bool, (default: True)
+        Compute PageRank, HITS (hub/authority), degree/closeness/betweenness centrality
+        per node and embed them as node_pagerank / node_hits_hub / node_hits_authority /
+        node_degree_centrality / node_closeness_centrality / node_betweenness_centrality,
+        normalized to [0, 1], for the interactive stats side panel. Skipped when the
+        panel won't be shown (show_controls=False) to avoid the wasted computation.
+        Betweenness is approximated (sampled) above 500 nodes to bound generation time.
 
     Returns
     -------
@@ -1063,6 +1079,59 @@ def json_create(G: nx.Graph) -> str:
         source.append(node_id[edge[0] == node_ui][0])
         target.append(node_id[edge[1] == node_ui][0])
 
+    # Common network statistics for the optional interactive stats panel
+    # (recolors nodes by the selected metric). Computed once here, server-side,
+    # rather than in the browser, since networkx already has these and it keeps
+    # the JS side simple (just reads a precomputed per-node number).
+    if compute_stats and len(node_ui) > 0:
+        def _normalize_dict(d):
+            vals = np.array(list(d.values()), dtype=float)
+            vmin, vmax = vals.min(), vals.max()
+            if (vmax - vmin) < 1e-12:
+                return {k: 0.0 for k in d}
+            return {k: float((v - vmin) / (vmax - vmin)) for k, v in d.items()}
+
+        try:
+            pagerank_norm = _normalize_dict(nx.pagerank(G, weight='weight'))
+        except Exception:
+            pagerank_norm = {n: 0.0 for n in G.nodes()}
+
+        try:
+            hubs, authorities = nx.hits(G, max_iter=1000)
+            hubs_norm = _normalize_dict(hubs)
+            authorities_norm = _normalize_dict(authorities)
+        except Exception:
+            hubs_norm = {n: 0.0 for n in G.nodes()}
+            authorities_norm = {n: 0.0 for n in G.nodes()}
+
+        try:
+            degree_norm = _normalize_dict(nx.degree_centrality(G))
+        except Exception:
+            degree_norm = {n: 0.0 for n in G.nodes()}
+
+        try:
+            closeness_norm = _normalize_dict(nx.closeness_centrality(G))
+        except Exception:
+            closeness_norm = {n: 0.0 for n in G.nodes()}
+
+        try:
+            # Betweenness is O(V*E) (Brandes) - exact for smaller graphs, but that
+            # gets slow fast on larger ones. Above 500 nodes, approximate via a
+            # fixed-seed sample of source nodes so generation time stays bounded.
+            n_nodes = G.number_of_nodes()
+            k = min(100, n_nodes) if n_nodes > 500 else None
+            betweenness_norm = _normalize_dict(
+                nx.betweenness_centrality(G, k=k, weight='weight', seed=42 if k else None))
+        except Exception:
+            betweenness_norm = {n: 0.0 for n in G.nodes()}
+    else:
+        pagerank_norm = {n: 0.0 for n in G.nodes()}
+        hubs_norm = {n: 0.0 for n in G.nodes()}
+        authorities_norm = {n: 0.0 for n in G.nodes()}
+        degree_norm = {n: 0.0 for n in G.nodes()}
+        closeness_norm = {n: 0.0 for n in G.nodes()}
+        betweenness_norm = {n: 0.0 for n in G.nodes()}
+
     # Set edge properties
     links = pd.DataFrame([*G.edges.values()]).T.to_dict()
     links_new = []
@@ -1099,6 +1168,14 @@ def json_create(G: nx.Graph) -> str:
         nodes[i]['node_color_edge'] = nodes[i].pop('edge_color')
         nodes[i]['node_fontcolor'] = nodes[i].pop('fontcolor')
         nodes[i]['node_fontsize'] = nodes[i].pop('fontsize')
+        # Stats for the interactive side panel (see compute_stats above)
+        nid = node_ui[i]
+        nodes[i]['node_pagerank'] = pagerank_norm.get(nid, 0.0)
+        nodes[i]['node_hits_hub'] = hubs_norm.get(nid, 0.0)
+        nodes[i]['node_hits_authority'] = authorities_norm.get(nid, 0.0)
+        nodes[i]['node_degree_centrality'] = degree_norm.get(nid, 0.0)
+        nodes[i]['node_closeness_centrality'] = closeness_norm.get(nid, 0.0)
+        nodes[i]['node_betweenness_centrality'] = betweenness_norm.get(nid, 0.0)
         # Combine all information into new list
         nodes_new[i] = nodes[i]
     data = {'links': links_new, 'nodes': nodes_new}

{d3graph-2.9.3 → d3graph-2.9.5}/d3graph/d3js/d3graphscript.js

@@ -51,6 +51,23 @@ function d3graphscript(config = {
     // node structure/clustering without redrawing or refiltering anything.
     var edgesVisible = true;
 
+    // ---- STATS PANEL (recolor nodes by a network statistic) ----
+    // node_pagerank / node_hits_hub / node_hits_authority are precomputed
+    // server-side (networkx) and normalized to [0, 1]; the panel just picks
+    // which one (if any) drives node fill color. null = original node colors.
+    var currentStatKey = null;
+
+    // COLOR SCHEME
+    var statColorScale = d3.scale.linear()
+    .domain([0, 0.5, 1])
+    .range(["#2166ac", "#f7f7f7", "#b2182b"]);
+    
+    // While a stat is active, nodes/edges get a visibility boost (bigger nodes,
+    // thicker/more opaque edges) so the highlighted structure reads clearly.
+    var statHighlightActive = false;
+    var EDGE_HIGHLIGHT_WIDTH_MULT = 1.8;
+    var EDGE_HIGHLIGHT_OPACITY_MULT = 1.6;
+
     // ---- DENSITY (clustering heatmap) LAYER ----
     // Grid-binned node density, drawn on its own canvas beneath the edges and
     // nodes. Recomputed from live node positions every tick it's visible, so
@@ -328,8 +345,10 @@ function d3graphscript(config = {
         ctx.moveTo(d.source.x, d.source.y);
         ctx.lineTo(d.target.x, d.target.y);
         ctx.strokeStyle = d.edge_color || '#999';
-        ctx.globalAlpha = (d.edge_opacity !== undefined && d.edge_opacity !== null) ? d.edge_opacity : 0.6;
-        ctx.lineWidth = d.edge_width || 1;
+        var baseOpacity = (d.edge_opacity !== undefined && d.edge_opacity !== null) ? d.edge_opacity : 0.6;
+        var baseWidth = d.edge_width || 1;
+        ctx.globalAlpha = statHighlightActive ? Math.min(1, baseOpacity * EDGE_HIGHLIGHT_OPACITY_MULT) : baseOpacity;
+        ctx.lineWidth = statHighlightActive ? baseWidth * EDGE_HIGHLIGHT_WIDTH_MULT : baseWidth;
         ctx.setLineDash(d.edge_style === 'dashed' ? [6, 3] : d.edge_style === 'dotted' ? [1.5, 3] : []);
         ctx.stroke();
       }
@@ -702,49 +721,64 @@ function d3graphscript(config = {
 
   // COLOR ON CLICK
   function color_on_click() {
-    // Reset all nodes to their original styles
-    d3.selectAll(".node")
-    .select(".node-shape")
-    .style("fill", function(d) {return d.node_color;})
-    .style("opacity", function(d) {return d.node_opacity;})
-    .style("stroke", function(d) {return d.node_color_edge;})
-    .style("stroke-width", function(d) {return d.node_size_edge;})
-    // Restore pinned cue on still-fixed nodes
-    .style("stroke-dasharray", function(d) { return (sticky && d.fixed) ? "4,2" : null; });
-
-    // Reset circle radii
-    d3.selectAll(".node").select("circle.node-shape")
-      .attr("r", function(d) { return d.node_size; });
-
-    // Apply click styling to the selected node's shape
-    var clickedShape = d3.select(this).select(".node-shape");
-    clickedShape
-      .style("fill", {{ CLICK_FILL }})
-      .style("stroke", "{{ CLICK_STROKE }}")
-      .style("stroke-width", {{ CLICK_STROKEW }});
-
-    // Scale up the shape — strategy depends on element type
-    var shapeNode = clickedShape.node();
-    if (!shapeNode) return;
-    var tag = shapeNode.tagName.toLowerCase();
-    if (tag === 'circle') {
-      clickedShape.attr("r", function(d) { return d.node_size * {{ CLICK_SIZE }}; });
-    } else if (tag === 'ellipse') {
-      clickedShape.each(function(d) {
-        var r = parseFloat(d.node_size) || 8;
-        d3.select(this)
-          .attr("rx", r * 1.6 * {{ CLICK_SIZE }})
-          .attr("ry", r * {{ CLICK_SIZE }});
-      });
-    } else {
-      // <path>: re-compute path with a scaled radius
-      clickedShape.each(function(d) {
-        var r = (parseFloat(d.node_size) || 8) * {{ CLICK_SIZE }};
-        d3.select(this).attr("d", shapePathD(d.node_marker, r));
-      });
-    }
-  }
 
+  // First restore the currently active base styling:
+  // - statistic colors/sizes when a radio metric is active
+  // - original node styling when no statistic is active
+  applyStatStyling();
+
+  // Restore pinned cue after applyStatStyling()
+  node.select(".node-shape")
+    .style("stroke-dasharray", function(d) {
+      return (sticky && d.fixed) ? "4,2" : null;
+    });
+
+  // Apply click styling only to the selected node
+  var clickedShape = d3.select(this).select(".node-shape");
+
+  clickedShape
+    .style("fill", {{ CLICK_FILL }})
+    .style("stroke", "{{ CLICK_STROKE }}")
+    .style("stroke-width", {{ CLICK_STROKEW }});
+
+  var shapeNode = clickedShape.node();
+  if (!shapeNode) return;
+
+  var tag = shapeNode.tagName.toLowerCase();
+
+  clickedShape.each(function(d) {
+    var el = d3.select(this);
+    var baseR = parseFloat(d.node_size) || 8;
+
+    // Preserve the statistic-driven size before applying click enlargement
+    var statValue = currentStatKey ? d[currentStatKey] : null;
+    var hasStatValue =
+      currentStatKey &&
+      typeof statValue === "number" &&
+      !isNaN(statValue);
+
+    var statScale = hasStatValue
+      ? 1.2 + statValue * 1.3
+      : 1;
+
+    var clickScale = statScale * {{ CLICK_SIZE }};
+
+    if (tag === "circle") {
+      el.attr("r", baseR * clickScale);
+
+    } else if (tag === "ellipse") {
+      el
+        .attr("rx", baseR * 1.6 * clickScale)
+        .attr("ry", baseR * clickScale);
+
+    } else if (tag === "path") {
+      el.attr(
+        "d",
+        shapePathD(d.node_marker, baseR * clickScale)
+      );
+    }
+  });
+}
 
 
   function connectedNodes() {
@@ -826,6 +860,98 @@ function d3graphscript(config = {
     if (densityVisible) drawDensityLayer();
   };
 
+  // Recolors AND resizes node shapes by the currently selected statistic
+  // (reverting to each node's original color/size/opacity when none is
+  // selected), and boosts edge width/opacity for readability against the
+  // now-emphasized nodes. Handles circle/ellipse/path shapes generically,
+  // same approach as the click-to-highlight scaling. Safe to call even if a
+  // node is missing the stat (e.g. older data) — falls back to defaults.
+  function applyStatStyling() {
+    statHighlightActive = !!currentStatKey;
+
+    node.select(".node-shape").each(function(d) {
+      var el = d3.select(this);
+      var tag = this.tagName.toLowerCase();
+      var baseR = parseFloat(d.node_size) || 8;
+      var v = statHighlightActive ? d[currentStatKey] : null;
+      var hasVal = (typeof v === 'number' && !isNaN(v));
+      // 1.2x–2.5x range: even low scorers get a visibility bump, high scorers stand out more.
+      var scale = (statHighlightActive && hasVal) ? (1.2 + v * 1.3) : 1;
+      var fillColor = (statHighlightActive && hasVal) ? statColorScale(v) : d.node_color;
+
+      if (tag === 'circle') {
+        el.attr('r', baseR * scale);
+      } else if (tag === 'ellipse') {
+        el.attr('rx', baseR * 1.6 * scale).attr('ry', baseR * scale);
+      } else if (tag === 'path') {
+        el.attr('d', shapePathD(d.node_marker, baseR * scale));
+      }
+
+      el.style('fill', fillColor)
+        .style('opacity', statHighlightActive ? 1 : d.node_opacity)
+        .style('stroke-width', statHighlightActive ? (parseFloat(d.node_size_edge) || 1) * 1.5 : d.node_size_edge);
+    });
+
+    // SVG-mode edges: bump width/opacity directly on the current selection.
+    // Canvas-mode edges read statHighlightActive inside drawCanvasEdges().
+    link.style("stroke-width", function(d) {
+      var w = parseFloat(d.edge_width) || 1;
+      return statHighlightActive ? w * EDGE_HIGHLIGHT_WIDTH_MULT : w;
+    });
+    link.style("opacity", function(d) {
+      var o = (d.edge_opacity !== undefined && d.edge_opacity !== null) ? d.edge_opacity : 0.6;
+      return statHighlightActive ? Math.min(1, o * EDGE_HIGHLIGHT_OPACITY_MULT) : o;
+    });
+    if (useCanvasEdges) drawCanvasEdges();
+  }
+
+  var statRadios = document.querySelectorAll('input[name="statMetric"]');
+  if (statRadios.length) {
+    statRadios.forEach(function(radio) {
+      radio.addEventListener('change', function() {
+        currentStatKey = (this.value === 'none') ? null : this.value;
+        applyStatStyling();
+      });
+    });
+  }
+
+  // Exports the currently filtered nodes/edges (respecting the weight and
+  // component sliders — whatever's "in scope" right now, not necessarily
+  // what's on screen if edges are toggled off) together with their
+  // precomputed stats, as a single JSON file.
+  var exportDataBtn = document.getElementById('exportDataButton');
+  if (exportDataBtn) {
+    exportDataBtn.addEventListener('click', function() {
+      var nodesOut = graph.nodes.map(function(d) {
+        return {
+          id: d.index,
+          name: d.node_name,
+          pagerank: d.node_pagerank,
+          hits_hub: d.node_hits_hub,
+          hits_authority: d.node_hits_authority,
+          degree_centrality: d.node_degree_centrality,
+          closeness_centrality: d.node_closeness_centrality,
+          betweenness_centrality: d.node_betweenness_centrality
+        };
+      });
+      var edgesOut = graph.links.map(function(d) {
+        return {
+          source: (d.source && d.source.node_name !== undefined) ? d.source.node_name : d.source,
+          target: (d.target && d.target.node_name !== undefined) ? d.target.node_name : d.target,
+          weight: d.edge_weight
+        };
+      });
+      var payload = { nodes: nodesOut, edges: edgesOut };
+      var blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json;charset=utf-8" });
+      var url = URL.createObjectURL(blob);
+      var a = document.createElement('a');
+      a.href = url;
+      a.download = '{{ title }}_export.json';
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+  }
+
   //Restart the visualisation after any node and link changes
   function restart() {
 
@@ -835,6 +961,7 @@ function d3graphscript(config = {
     node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
     tickCount = 0;
     force.start();
+    applyStatStyling();
   }
 
 }

{d3graph-2.9.3 → d3graph-2.9.5}/d3graph/d3js/index.html.j2

@@ -9,109 +9,32 @@
 
     <style type="text/css">
         {% include "style.css" %}
-        .dark-mode {
-            background-color: #222 !important;
-            color: #eee !important;
-        }
-        .dark-mode #graphContainer {
-            background-color: #222 !important;
-        }
-        .dark-mode .button-switch {
-            background: #333;
-            color: #eee;
-            border: 1px solid #555;
-        }
-        .button-switch {
-            display: inline-block;
-            margin: 8px 4px;
-            padding: 6px 16px;
-            border-radius: 6px;
-            border: 1px solid #ccc;
-            background: #fff;
-            color: #222;
-            cursor: pointer;
-            font-size: 1em;
-            font-family: inherit, Arial, sans-serif;
-            transition: background 0.2s, color 0.2s;
-        }
-        .top-panel {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: flex-end;
-            gap: 8px;
-            padding: 10px;
-        }
-        .slider-container {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 12px 0;
-        }
-        .slider-label {
-            margin: 0 8px;
-            font-size: 1em;
-            font-family: inherit, Arial, sans-serif;
-        }
-        .styled-slider {
-            -webkit-appearance: none;
-            width: 180px;
-            height: 8px;
-            background: #eee;
-            border-radius: 5px;
-            outline: none;
-            transition: background 0.2s;
-            margin: 0 8px;
-        }
-        .styled-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            background: #fff;
-            border: 2px solid #888;
-            cursor: pointer;
-            box-shadow: 0 0 2px #888;
-        }
-        .styled-slider::-moz-range-thumb {
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            background: #fff;
-            border: 2px solid #888;
-            cursor: pointer;
-            box-shadow: 0 0 2px #888;
-        }
-        .styled-slider:focus {
-            background: #ddd;
-        }
-        .dark-mode .styled-slider {
-            background: #444;
-        }
-        .dark-mode .styled-slider::-webkit-slider-thumb {
-            background: #222;
-            border: 2px solid #eee;
-        }
-        .dark-mode .styled-slider::-moz-range-thumb {
-            background: #222;
-            border: 2px solid #eee;
-        }
     </style>
 </head>
 <body style="background-color: {{ background_color }};{% if dark_mode %} color: #eee;{% endif %}"{% if dark_mode %} class="dark-mode"{% endif %}>
 
 <!-- Top right panel with dark mode and save buttons -->
+{% if show_controls %}
 <div class="top-panel">
     <button id="darkModeSwitch" class="button-switch">{% if dark_mode %}☀ Light Mode{% else %}🌙 Dark Mode{% endif %}</button>
     <button id="edgeToggleButton" class="button-switch">Hide Edges</button>
     <button id="densityToggleButton" class="button-switch">{% if show_density %}Hide Density{% else %}Show Density{% endif %}</button>
-    <button id="saveButton" class="button-switch">Save</button>
+    <button id="exportDataButton" class="button-switch">Export Data</button>
+    {% if save_button %}<button id="saveButton" class="button-switch">Save</button>{% endif %}
 </div>
-
-<!-- Create save button (removed old location) -->
-{{ save_button_comment_start }}
-    <!-- Save button now in top-panel -->
-{{ save_button_comment_stop }}
+1
+<!-- Side panel: interactively recolor/resize nodes by common network statistics -->
+<div class="stats-panel" id="statsPanel">
+    <div class="stats-panel-title">Network Statistic</div>
+    <label><input type="radio" name="statMetric" value="none" checked> Default</label>
+    <label><input type="radio" name="statMetric" value="node_pagerank"> PageRank</label>
+    <label><input type="radio" name="statMetric" value="node_hits_hub"> HITS (Hub)</label>
+    <label><input type="radio" name="statMetric" value="node_hits_authority"> HITS (Authority)</label>
+    <label><input type="radio" name="statMetric" value="node_degree_centrality"> Degree Centrality</label>
+    <label><input type="radio" name="statMetric" value="node_closeness_centrality"> Closeness Centrality</label>
+    <label><input type="radio" name="statMetric" value="node_betweenness_centrality"> Betweenness Centrality</label>
+</div>
+{% endif %}
 
     <script>
         {% include "d3.v3.js" %}
@@ -153,29 +76,33 @@
                 document.body.style.color = '#eee';
                 let graphBg = document.getElementById('graphContainer');
                 if (graphBg) graphBg.style.backgroundColor = '#222';
-                darkSwitch.textContent = '☀ Light Mode';
+                if (darkSwitch) darkSwitch.textContent = '☀ Light Mode';
             } else {
                 document.body.classList.remove('dark-mode');
                 document.body.style.backgroundColor = originalBg;
                 document.body.style.color = '';
                 let graphBg = document.getElementById('graphContainer');
                 if (graphBg) graphBg.style.backgroundColor = originalBg;
-                darkSwitch.textContent = '🌙 Dark Mode';
+                if (darkSwitch) darkSwitch.textContent = '🌙 Dark Mode';
             }
             if (window.d3graphSetDarkMode) window.d3graphSetDarkMode(on);
         }
         // Set initial mode
         setDarkMode(darkMode);
-        darkSwitch.addEventListener('click', function () {
-            darkMode = !darkMode;
-            setDarkMode(darkMode);
-        });
+        if (darkSwitch) {
+            darkSwitch.addEventListener('click', function () {
+                darkMode = !darkMode;
+                setDarkMode(darkMode);
+            });
+        }
 
         // Save image to svg
         // Note: when the graph is large enough to switch to canvas-rendered edges
         // (see canvas_edge_threshold), this export will include nodes but not edges,
         // since edges live on a separate <canvas> element, not in the SVG DOM.
-        document.getElementById('saveButton').addEventListener('click', function () {
+        var saveBtn = document.getElementById('saveButton');
+        if (saveBtn) {
+            saveBtn.addEventListener('click', function () {
             var svgData = document.querySelector('svg').outerHTML;
             var blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
             var url = URL.createObjectURL(blob);
@@ -183,7 +110,8 @@
             link.href = url;
             link.download = '{{ title }}.svg';
             link.click();
-        });
+            });
+        }
         
         
     </script>