d3graph 2.9.5__tar.gz → 2.9.6__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.9.5
+Version: 2.9.6
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause

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

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

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

@@ -65,9 +65,9 @@ class d3graph:
     def __init__(self,
                  collision: float = 0.5,
                  charge: int = 600,
+                 link_tension: float = 1,
                  slider=None,
                  support: str = 'text',
-                 link_tension: float = 1,
                  sticky: bool = True,
                  verbose: int = 20) -> None:
         """Initialize d3graph.
@@ -106,7 +106,7 @@ class d3graph:
         if clean_config and hasattr(self, 'config'): del self.config
 
     def show(self,
-             figsize=[1500, 800],
+             figsize=[None, None],
              title: str = 'd3graph',
              filepath: str = None,
              showfig: bool = True,
@@ -115,7 +115,7 @@ class d3graph:
              set_slider: bool = 0,
              click={'fill': None, 'stroke': 'black', 'size': 1.3, 'stroke-width': 3},
              background_color = '#FFFFFF',
-             dark_mode = False,
+             dark_mode = True,
              notebook: bool = False,
              save_button: bool = True,
              link_tension: float = None,
@@ -126,15 +126,15 @@ class d3graph:
              canvas_edge_threshold: int = 2000,
              show_density: bool = False,
              density_grid_size: int = 60,
-             density_blur: int = 10,
-             density_opacity: float = 0.6,
+             density_blur: int = 15,
+             density_opacity: float = 0.8,
              show_controls: bool = True,
              ) -> None:
         """Build and show the graph.
 
         Parameters
         ----------
-        figsize : tuple, (default: (1500, 800))
+        figsize : tuple, (default: (None, None))
             Size of the figure in the browser, (width, height).
             (None, None): Use the screen resolution.
         title : String, (default: None)
@@ -848,8 +848,8 @@ class d3graph:
         # Hide slider
         show_slider = ['', ''] if self.config['show_slider'] 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]
+        width = 'window.innerWidth' if self.config['figsize'][0] is None else self.config['figsize'][0]
+        height = 'null' if self.config['figsize'][1] is None else self.config['figsize'][1]
         # Get support
         support = self.config.get('support')
         if support is None: support = get_support('text')
@@ -897,7 +897,6 @@ class d3graph:
         html = index_template.render(content)
 
         index_file = self.config['filepath']
-        # index_file.write_text(index_template.render(content))
         if overwrite and index_file:
             logger.info(f'Write to path: [{index_file.absolute()}]')
             logger.info(f'File already exists and will be overwritten: [{index_file}]')

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

@@ -21,8 +21,19 @@ function d3graphscript(config = {
     }) {
     
     //Constants for the SVG
+    //var width = config.width;
+    //var height = config.height;
+
+    // Constants for the SVG
     var width = config.width;
     var height = config.height;
+    // When height is null, fill the remaining viewport below the header.
+    if (height === null) {
+        var header = document.querySelector(".header-row");
+        var headerHeight = header ? header.offsetHeight : 0;
+        height = window.innerHeight - headerHeight;
+    }
+
     var background_color = config.background_color || '#FFFFFF';
     var sticky = config.sticky || false;
     // Cap how many simulation ticks run before auto-stopping, instead of
@@ -55,12 +66,31 @@ function d3graphscript(config = {
     // 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.
+    // 'network_clustering' is the one exception: instead of a precomputed
+    // per-node number, it's derived client-side (connected components over
+    // whatever edges are currently visible past the weight-threshold slider)
+    // so it always reflects the network's live, filtered state rather than
+    // a static server-side clustering. networkClusters maps node index ->
+    // small integer cluster id, recomputed on every applyStatStyling() call
+    // while that mode is active.
     var currentStatKey = null;
+    var networkClusters = {};
+    
+    // ---- LAYOUT MENU ----
+    // 'force' (default) is the existing physics simulation, unchanged.
+    // 'circular' / 'grid' are static, one-shot arrangements: force is
+    // stopped, positions are computed directly, and updatePositions() draws
+    // them once (no tick loop is running to do it automatically).
+    var currentLayout = 'force';
 
     // COLOR SCHEME
     var statColorScale = d3.scale.linear()
     .domain([0, 0.5, 1])
     .range(["#2166ac", "#f7f7f7", "#b2182b"]);
+
+    // Categorical palette for network-clustering mode — one color per
+    // connected-component id, cycling every 20 clusters.
+    var clusterColorScale = d3.scale.category20();
     
     // While a stat is active, nodes/edges get a visibility boost (bigger nodes,
     // thicker/more opaque edges) so the highlighted structure reads clearly.
@@ -104,7 +134,7 @@ function d3graphscript(config = {
     function dragstarted(d) {
       d3.event.sourceEvent.stopPropagation();
       d3.select(this).classed("dragging", true);
-      if (sticky) {
+      if (sticky && currentLayout === 'force') {
         d.fixed = true;
         tickCount = 0;
         force.start();
@@ -118,6 +148,9 @@ function d3graphscript(config = {
       } else {
         d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
       }
+      // With the force simulation stopped (static layouts), there's no tick
+      // to refresh connected edges/labels — update them directly here.
+      if (currentLayout !== 'force') updatePositions();
       if (densityVisible) drawDensityLayer();
     }
     
@@ -592,15 +625,11 @@ function d3graphscript(config = {
         )
     
     //Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
-    force.on("tick", function() {
-      // Auto-stop after maxTicks so a large graph doesn't keep re-running
-      // collision detection / layout math for thousands of frames while
-      // settling. maxTicks <= 0 disables the cap (run to natural cooldown).
-      if (maxTicks > 0 && ++tickCount > maxTicks) {
-        force.stop();
-        return;
-      }
-
+    // Draws nodes/links/labels at their current (d.x, d.y). Called every
+    // force tick, and also directly by static layouts (circular/grid) that
+    // set positions once instead of simulating — those need a render call
+    // since there's no tick to trigger it.
+    function updatePositions() {
       if (useCanvasEdges) {
         drawCanvasEdges();
       } else {
@@ -632,10 +661,21 @@ function d3graphscript(config = {
       linkText.attr("x", function(d) { return (d.source.x + d.target.x) / 2; })  // ADD TEXT ON THE EDGES (PART 2/2)
         .attr("y", function(d) { return (d.source.y + d.target.y) / 2; })
         .attr("text-anchor", "middle");
-    
-      node.each(collide(config.collision)); //COLLISION DETECTION. High means a big fight to get untouchable nodes (default=0.5)
 
       if (densityVisible) drawDensityLayer();
+    }
+
+    force.on("tick", function() {
+      // Auto-stop after maxTicks so a large graph doesn't keep re-running
+      // collision detection / layout math for thousands of frames while
+      // settling. maxTicks <= 0 disables the cap (run to natural cooldown).
+      if (maxTicks > 0 && ++tickCount > maxTicks) {
+        force.stop();
+        return;
+      }
+
+      updatePositions();
+      node.each(collide(config.collision)); //COLLISION DETECTION. High means a big fight to get untouchable nodes (default=0.5)
 
   });
 
@@ -806,6 +846,13 @@ function d3graphscript(config = {
   function threshold() {
     let thresh = this.value;
 
+    // Reflect the current slider value in the header label. Kept inside
+    // threshold() itself (not a separate handler) so it stays in sync with
+    // every path that sets the network state: the initial load call below,
+    // and the "change" listener — no risk of the two drifting apart.
+    var thresholdValueEl = document.getElementById('thresholdValue');
+    if (thresholdValueEl) thresholdValueEl.textContent = thresh;
+
     graph.links.splice(0, graph.links.length);
     linkText = linkText.data([]);   // CLEAR EDGE-LABELS: Clear the linkText selection
     linkText.exit().remove();       // CLEAR EDGE-LABELS: Clear the linkText elements from the DOM
@@ -825,6 +872,18 @@ function d3graphscript(config = {
 
   d3.select("#thresholdSlider").on("change", threshold);
 
+  // Live-update the label while dragging, without paying for a full
+  // restart() (network refilter + recompute of whichever stat is active)
+  // on every intermediate value — that still only happens on "change"
+  // (drag release), same as before.
+  var thresholdValueLiveEl = document.getElementById('thresholdValue');
+  var thresholdSliderEl = document.getElementById('thresholdSlider');
+  if (thresholdValueLiveEl && thresholdSliderEl) {
+    thresholdSliderEl.addEventListener('input', function() {
+      thresholdValueLiveEl.textContent = this.value;
+    });
+  }
+
   // Master edges on/off toggle — independent of the weight slider, purely
   // visual, doesn't touch the underlying filtered data.
   var edgeToggleBtn = document.getElementById('edgeToggleButton');
@@ -838,6 +897,7 @@ function d3graphscript(config = {
 
   // Density (clustering heatmap) layer toggle.
   var densityToggleBtn = document.getElementById('densityToggleButton');
+  var densityPanelEl = document.getElementById('densityPanel');
   if (densityToggleBtn) {
     densityToggleBtn.addEventListener('click', function() {
       densityVisible = !densityVisible;
@@ -849,7 +909,14 @@ function d3graphscript(config = {
         densityCtx.setTransform(1, 0, 0, 1, 0, 0);
         densityCtx.clearRect(0, 0, densityCanvasEl.width, densityCanvasEl.height);
       }
+      // The density tuning panel (grid size / blur / opacity) is only
+      // useful while the layer is actually visible.
+      if (densityPanelEl) densityPanelEl.style.display = densityVisible ? '' : 'none';
+      // Re-stack the remaining side panels now that one changed size/visibility.
+      if (typeof positionSidePanels === 'function') positionSidePanels();
     });
+    // Reflect the initial show_density state on load, in case it started true.
+    if (densityPanelEl) densityPanelEl.style.display = densityVisible ? '' : 'none';
   }
 
   // Called from the dark-mode toggle (outside this function's scope, in the
@@ -860,14 +927,337 @@ function d3graphscript(config = {
     if (densityVisible) drawDensityLayer();
   };
 
+  // ---- DYNAMIC STAT RECOMPUTATION ----
+  // PageRank / HITS / degree / closeness / betweenness centrality arrive
+  // precomputed server-side (networkx), since that's the only graph that
+  // exists at render time. But the weight-threshold slider changes which
+  // edges are actually "in" the network, and a statistic computed on
+  // since-removed edges is stale. So these are recomputed client-side from
+  // graph.links (the currently filtered edge set) every time
+  // applyStatStyling() runs — i.e. on stat selection AND on every slider
+  // change (restart() -> applyStatStyling()) — overwriting d[<stat key>]
+  // on each node so the rest of the styling pipeline needs no changes.
+  var DYNAMIC_STAT_KEYS = ['node_pagerank', 'node_hits_hub', 'node_hits_authority',
+    'node_degree_centrality', 'node_closeness_centrality', 'node_betweenness_centrality'];
+
+  // Adjacency built fresh from the CURRENT graph.nodes/graph.links.
+  //
+  // IMPORTANT: this always follows edges source -> target, never
+  // symmetrized — regardless of config.directed. config.directed only
+  // controls whether arrowheads are drawn (it's a display setting); the
+  // underlying graph object these stats need to match is the one built
+  // server-side by make_graph(), which is unconditionally an nx.DiGraph
+  // (see d3graph.py). Treating the network as undirected here (as an
+  // earlier version of this code did whenever config.directed was false,
+  // which is also the default) was the actual bug behind mismatched
+  // HITS hub/authority and skewed degree/closeness/betweenness scores —
+  // it silently added a reverse edge for every edge, which networkx's
+  // computation never does.
+  function buildAdjacency() {
+    var indices = graph.nodes.map(function(d) { return d.index; });
+    var out = {}, inn = {};
+    indices.forEach(function(i) { out[i] = []; inn[i] = []; });
+
+    graph.links.forEach(function(l) {
+      var s = (l.source && l.source.index !== undefined) ? l.source.index : l.source;
+      var t = (l.target && l.target.index !== undefined) ? l.target.index : l.target;
+      if (out[s] === undefined || out[t] === undefined) return; // safety
+      out[s].push(t);
+      inn[t].push(s);
+    });
+
+    return { indices: indices, out: out, inn: inn, n: indices.length };
+  }
+
+  function computeDegreeCentrality(adj) {
+    var result = {};
+    var n = adj.n;
+    adj.indices.forEach(function(i) {
+      // Matches networkx's degree_centrality on a DiGraph: total (in + out)
+      // degree / (n - 1).
+      var deg = adj.out[i].length + adj.inn[i].length;
+      result[i] = (n > 1) ? deg / (n - 1) : 0;
+    });
+    return result;
+  }
+
+  function bfsDistances(adj, sourceIdx, neighborsOf) {
+    var dist = {};
+    dist[sourceIdx] = 0;
+    var queue = [sourceIdx];
+    var head = 0;
+    while (head < queue.length) {
+      var u = queue[head++];
+      var neighbors = neighborsOf[u];
+      for (var k = 0; k < neighbors.length; k++) {
+        var v = neighbors[k];
+        if (dist[v] === undefined) {
+          dist[v] = dist[u] + 1;
+          queue.push(v);
+        }
+      }
+    }
+    return dist;
+  }
+
+  function computeClosenessCentrality(adj) {
+    var result = {};
+    var n = adj.n;
+    adj.indices.forEach(function(i) {
+      // networkx's closeness_centrality reverses directed graphs before
+      // computing shortest paths, so a node's score reflects how reachable
+      // it is FROM the rest of the network (incoming paths), not how far
+      // it can reach outward. Traverse via `inn` (in-edges) to match —
+      // using `out` here was inverting the metric for any graph with real
+      // directionality.
+      var dist = bfsDistances(adj, i, adj.inn);
+      var reachable = Object.keys(dist).length; // includes i itself
+      var totalDist = 0;
+      for (var key in dist) totalDist += dist[key];
+      if (reachable > 1 && totalDist > 0 && n > 1) {
+        // Wasserman-Faust "improved" formula (networkx default): scales by
+        // the fraction of the graph actually reached, so a node stuck in a
+        // small component doesn't get an inflated score just for being
+        // close to the few nodes it can see.
+        result[i] = ((reachable - 1) / totalDist) * ((reachable - 1) / (n - 1));
+      } else {
+        result[i] = 0;
+      }
+    });
+    return result;
+  }
+
+  // Brandes' algorithm, unweighted — O(V*E), single pass computes
+  // betweenness for every node at once.
+  function computeBetweennessCentrality(adj) {
+    var n = adj.n;
+    var betweenness = {};
+    adj.indices.forEach(function(i) { betweenness[i] = 0; });
+
+    adj.indices.forEach(function(s) {
+      var S = [];
+      var P = {}, sigma = {}, dist = {};
+      adj.indices.forEach(function(i) { P[i] = []; sigma[i] = 0; dist[i] = -1; });
+      sigma[s] = 1;
+      dist[s] = 0;
+      var queue = [s];
+      var head = 0;
+      while (head < queue.length) {
+        var v = queue[head++];
+        S.push(v);
+        var neighbors = adj.out[v];
+        for (var k = 0; k < neighbors.length; k++) {
+          var w = neighbors[k];
+          if (dist[w] < 0) {
+            queue.push(w);
+            dist[w] = dist[v] + 1;
+          }
+          if (dist[w] === dist[v] + 1) {
+            sigma[w] += sigma[v];
+            P[w].push(v);
+          }
+        }
+      }
+      var delta = {};
+      adj.indices.forEach(function(i) { delta[i] = 0; });
+      while (S.length) {
+        var w = S.pop();
+        for (var k = 0; k < P[w].length; k++) {
+          var v = P[w][k];
+          delta[v] += (sigma[v] / sigma[w]) * (1 + delta[w]);
+        }
+        if (w !== s) betweenness[w] += delta[w];
+      }
+    });
+
+    // Normalize (networkx defaults, normalized=True, directed graph): scale
+    // by 1/((n-1)(n-2)) — no halving, since directed pairs (s,t) and (t,s)
+    // are distinct and each is only ever visited once as a source here.
+    var scale = (n > 2) ? 1 / ((n - 1) * (n - 2)) : 0;
+    adj.indices.forEach(function(i) { betweenness[i] = betweenness[i] * scale; });
+
+    return betweenness;
+  }
+
+  // Power-iteration PageRank (damping 0.85), with dangling nodes (no
+  // out-edges) leaking their rank uniformly to every node, same as
+  // networkx's default handling.
+  function computePageRank(adj) {
+    var n = adj.n;
+    if (n === 0) return {};
+    var alpha = 0.85, maxIter = 100, tol = 1e-8;
+    var rank = {};
+    adj.indices.forEach(function(i) { rank[i] = 1 / n; });
+    var outDegree = {};
+    adj.indices.forEach(function(i) { outDegree[i] = adj.out[i].length; });
+
+    for (var iter = 0; iter < maxIter; iter++) {
+      var newRank = {};
+      adj.indices.forEach(function(i) { newRank[i] = (1 - alpha) / n; });
+
+      var danglingSum = 0;
+      adj.indices.forEach(function(i) { if (outDegree[i] === 0) danglingSum += rank[i]; });
+      adj.indices.forEach(function(i) { newRank[i] += alpha * danglingSum / n; });
+
+      adj.indices.forEach(function(u) {
+        if (outDegree[u] === 0) return;
+        var share = alpha * rank[u] / outDegree[u];
+        adj.out[u].forEach(function(v) { newRank[v] += share; });
+      });
+
+      var diff = 0;
+      adj.indices.forEach(function(i) { diff += Math.abs(newRank[i] - rank[i]); });
+      rank = newRank;
+      if (diff < tol) break;
+    }
+
+    return rank;
+  }
+
+  // Power-iteration HITS. Hub and authority are computed together since
+  // they're mutually dependent either way.
+  function computeHITS(adj) {
+    var hub = {}, auth = {};
+    adj.indices.forEach(function(i) { hub[i] = 1; auth[i] = 1; });
+    var maxIter = 100, tol = 1e-8;
+
+    for (var iter = 0; iter < maxIter; iter++) {
+      var newAuth = {};
+      adj.indices.forEach(function(i) { newAuth[i] = 0; });
+      adj.indices.forEach(function(u) {
+        adj.out[u].forEach(function(v) { newAuth[v] += hub[u]; });
+      });
+      var authNorm = Math.sqrt(adj.indices.reduce(function(s, i) { return s + newAuth[i] * newAuth[i]; }, 0)) || 1;
+      adj.indices.forEach(function(i) { newAuth[i] /= authNorm; });
+
+      var newHub = {};
+      adj.indices.forEach(function(i) { newHub[i] = 0; });
+      adj.indices.forEach(function(u) {
+        adj.out[u].forEach(function(v) { newHub[u] += newAuth[v]; });
+      });
+      var hubNorm = Math.sqrt(adj.indices.reduce(function(s, i) { return s + newHub[i] * newHub[i]; }, 0)) || 1;
+      adj.indices.forEach(function(i) { newHub[i] /= hubNorm; });
+
+      var diff = 0;
+      adj.indices.forEach(function(i) { diff += Math.abs(newHub[i] - hub[i]) + Math.abs(newAuth[i] - auth[i]); });
+      hub = newHub;
+      auth = newAuth;
+      if (diff < tol) break;
+    }
+
+    return { hub: hub, authority: auth };
+  }
+
+  // Min-max normalize a {index -> value} map to [0,1] — matches d3graph.py's
+  // server-side _normalize_dict() exactly, which is applied uniformly to
+  // ALL six stats there. Doing the same here (rather than the previous
+  // divide-by-max, and rather than leaving degree/closeness/betweenness
+  // unnormalized) keeps the color scale's [0, 0.5, 1] domain fully used
+  // regardless of which stat is active or how the slider has filtered the
+  // network — a stat whose raw scores are all clustered near 0 (e.g.
+  // betweenness on a sparse graph) still stretches across the full range
+  // instead of rendering as a single flat color.
+  function normalizeMinMax(values, indices) {
+    var vmin = Infinity, vmax = -Infinity;
+    indices.forEach(function(i) {
+      var v = values[i];
+      if (v < vmin) vmin = v;
+      if (v > vmax) vmax = v;
+    });
+    var range = vmax - vmin;
+    var result = {};
+    indices.forEach(function(i) {
+      result[i] = (range < 1e-12) ? 0 : (values[i] - vmin) / range;
+    });
+    return result;
+  }
+
+  function computeDynamicStatValues(key, adj) {
+    var raw;
+    switch (key) {
+      case 'node_degree_centrality':     raw = computeDegreeCentrality(adj); break;
+      case 'node_closeness_centrality':  raw = computeClosenessCentrality(adj); break;
+      case 'node_betweenness_centrality':raw = computeBetweennessCentrality(adj); break;
+      case 'node_pagerank':              raw = computePageRank(adj); break;
+      case 'node_hits_hub':              raw = computeHITS(adj).hub; break;
+      case 'node_hits_authority':        raw = computeHITS(adj).authority; break;
+      default: return null;
+    }
+    return normalizeMinMax(raw, adj.indices);
+  }
+
+  // Groups nodes into connected components using ONLY the edges currently
+  // in `graph.links` — i.e. whatever survives the weight-threshold slider
+  // right now. Re-run every time applyStatStyling() is called while
+  // 'network_clustering' is the active stat, so the coloring always
+  // reflects the live, filtered network rather than a one-time snapshot.
+  // Cheap union-find over nodes/links; fine at interactive graph sizes.
+  function computeNetworkClusters() {
+    var parent = {};
+    function find(x) {
+      while (parent[x] !== x) {
+        parent[x] = parent[parent[x]]; // path halving
+        x = parent[x];
+      }
+      return x;
+    }
+    function union(a, b) {
+      var ra = find(a), rb = find(b);
+      if (ra !== rb) parent[ra] = rb;
+    }
+
+    graph.nodes.forEach(function(d) { parent[d.index] = d.index; });
+    graph.links.forEach(function(l) {
+      var s = (l.source && l.source.index !== undefined) ? l.source.index : l.source;
+      var t = (l.target && l.target.index !== undefined) ? l.target.index : l.target;
+      union(s, t);
+    });
+
+    // Re-number component roots to small, dense integers (0, 1, 2, ...) so
+    // they map cleanly onto the categorical color scale.
+    networkClusters = {};
+    var rootToClusterId = {};
+    var nextId = 0;
+    graph.nodes.forEach(function(d) {
+      var root = find(d.index);
+      if (!(root in rootToClusterId)) rootToClusterId[root] = nextId++;
+      networkClusters[d.index] = rootToClusterId[root];
+    });
+  }
+
   // 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.
+  //
+  // 'network_clustering' is handled as a variant of this same flow: it has
+  // no single [0,1] value to size nodes by (cluster ids are categorical,
+  // not a magnitude), so size stays at the default scale, but fill color
+  // still comes from the stat — just from the categorical cluster palette
+  // instead of statColorScale. Clusters are recomputed here every call, so
+  // switching the weight-threshold slider (which rebuilds graph.links and
+  // calls restart() -> applyStatStyling()) immediately updates node colors
+  // to match the new connected-component structure.
+  //
+  // The other stats (PageRank, HITS, degree/closeness/betweenness
+  // centrality) get the same live-recompute treatment: DYNAMIC_STAT_KEYS
+  // are recalculated from the current graph.links before being read below,
+  // so they also update immediately on every slider change.
   function applyStatStyling() {
-    statHighlightActive = !!currentStatKey;
+    var isClustering = (currentStatKey === 'network_clustering');
+    statHighlightActive = !!currentStatKey && !isClustering;
+
+    if (isClustering) computeNetworkClusters();
+
+    if (currentStatKey && DYNAMIC_STAT_KEYS.indexOf(currentStatKey) !== -1) {
+      var adj = buildAdjacency();
+      var values = computeDynamicStatValues(currentStatKey, adj);
+      if (values) {
+        graph.nodes.forEach(function(d) { d[currentStatKey] = values[d.index]; });
+      }
+    }
 
     node.select(".node-shape").each(function(d) {
       var el = d3.select(this);
@@ -877,7 +1267,12 @@ function d3graphscript(config = {
       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;
+      // Clustering has no [0,1] magnitude to size by, but it does have a
+      // categorical color per component — use that for fill instead of
+      // falling back to the node's original color.
+      var fillColor = isClustering
+        ? clusterColorScale(networkClusters[d.index] % 20)
+        : ((statHighlightActive && hasVal) ? statColorScale(v) : d.node_color);
 
       if (tag === 'circle') {
         el.attr('r', baseR * scale);
@@ -902,6 +1297,17 @@ function d3graphscript(config = {
       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;
     });
+
+    // Node label color: cluster color while clustering mode is active (so
+    // the label visibly matches its node's cluster), otherwise each node's
+    // own configured font color. Always set explicitly (rather than
+    // clearing the inline style) so switching away from clustering cleanly
+    // restores the original per-node color instead of falling through to
+    // the CSS default.
+    node.select("text").style("fill", function(d) {
+      return isClustering ? clusterColorScale(networkClusters[d.index] % 20) : d.node_fontcolor;
+    });
+
     if (useCanvasEdges) drawCanvasEdges();
   }
 
@@ -915,6 +1321,193 @@ function d3graphscript(config = {
     });
   }
 
+  // Arranges nodes evenly around a circle. Order follows each node's stable
+  // .index (assignment order), not the current force-settled position, so
+  // the arrangement is deterministic and doesn't depend on prior layout.
+  function layoutCircular() {
+    var nodesData = graph.nodes;
+    var n = nodesData.length;
+    if (!n) return;
+    var cx = width / 2, cy = height / 2;
+    var r = Math.min(width, height) * 0.4;
+    nodesData.forEach(function(d, i) {
+      var angle = (i / n) * 2 * Math.PI;
+      d.x = d.px = cx + r * Math.cos(angle);
+      d.y = d.py = cy + r * Math.sin(angle);
+    });
+  }
+
+  // Arranges nodes in a roughly-square grid.
+  function layoutGrid() {
+    var nodesData = graph.nodes;
+    var n = nodesData.length;
+    if (!n) return;
+    var cols = Math.max(1, Math.ceil(Math.sqrt(n)));
+    var rows = Math.max(1, Math.ceil(n / cols));
+    var spacingX = width / (cols + 1);
+    var spacingY = height / (rows + 1);
+    nodesData.forEach(function(d, i) {
+      var col = i % cols;
+      var row = Math.floor(i / cols);
+      d.x = d.px = spacingX * (col + 1);
+      d.y = d.py = spacingY * (row + 1);
+    });
+  }
+
+  // Switches between the physics-simulated force layout (default) and
+  // static, one-shot arrangements. Static layouts stop the simulation so
+  // they don't get pulled back out of shape by ongoing forces; switching
+  // back to 'force' just resumes the simulation from wherever nodes
+  // currently are.
+  function setLayout(layoutName) {
+    currentLayout = layoutName;
+
+    if (layoutName === 'force') {
+      tickCount = 0;
+      force.resume();
+      return;
+    }
+
+    force.stop();
+    if (layoutName === 'circular') {
+      layoutCircular();
+    } else if (layoutName === 'grid') {
+      layoutGrid();
+    }
+    updatePositions();
+  }
+
+  var layoutRadios = document.querySelectorAll('input[name="layoutMode"]');
+  if (layoutRadios.length) {
+    layoutRadios.forEach(function(radio) {
+      radio.addEventListener('change', function() {
+        setLayout(this.value);
+      });
+    });
+  }
+
+  // ---- PHYSICS PANEL (charge / collision / link tension sliders) ----
+  // Snapshot the values the graph was generated with, so Reset can restore
+  // them exactly — not some hardcoded JS default, but whatever was actually
+  // passed into show().
+  var DEFAULT_CHARGE = config.charge;
+  var DEFAULT_COLLISION = config.collision;
+  var DEFAULT_LINK_TENSION = (config.link_tension !== undefined && config.link_tension !== null) ? config.link_tension : 1;
+
+  // Only reheats the simulation if the force layout is actually the one
+  // active — if a static layout (circular/grid) is selected, the new value
+  // is stored and takes effect next time the user switches back to it,
+  // rather than yanking them out of the layout they chose.
+  function reheatIfForceActive() {
+    if (currentLayout === 'force') {
+      tickCount = 0;
+      force.start();
+    }
+  }
+
+  function setCharge(value) {
+    config.charge = value;
+    force.charge(value);
+    reheatIfForceActive();
+  }
+  function setCollision(value) {
+    // Read live every tick via node.each(collide(config.collision)) — no
+    // force.* setter call needed, just update the value it reads.
+    config.collision = value;
+    reheatIfForceActive();
+  }
+  function setLinkTension(value) {
+    config.link_tension = value;
+    force.linkStrength(value);
+    reheatIfForceActive();
+  }
+
+  function wirePhysicsSlider(sliderId, valueId, onChange) {
+    var slider = document.getElementById(sliderId);
+    var valueLabel = document.getElementById(valueId);
+    if (!slider) return;
+    slider.addEventListener('input', function() {
+      var v = parseFloat(this.value);
+      if (valueLabel) valueLabel.textContent = v;
+      onChange(v);
+    });
+  }
+  wirePhysicsSlider('chargeSlider', 'chargeValue', setCharge);
+  wirePhysicsSlider('collisionSlider', 'collisionValue', setCollision);
+  wirePhysicsSlider('linkTensionSlider', 'linkTensionValue', setLinkTension);
+
+  var physicsResetBtn = document.getElementById('physicsResetButton');
+  if (physicsResetBtn) {
+    physicsResetBtn.addEventListener('click', function() {
+      setCharge(DEFAULT_CHARGE);
+      setCollision(DEFAULT_COLLISION);
+      setLinkTension(DEFAULT_LINK_TENSION);
+
+      var chargeSlider = document.getElementById('chargeSlider');
+      var collisionSlider = document.getElementById('collisionSlider');
+      var tensionSlider = document.getElementById('linkTensionSlider');
+      if (chargeSlider) chargeSlider.value = DEFAULT_CHARGE;
+      if (collisionSlider) collisionSlider.value = DEFAULT_COLLISION;
+      if (tensionSlider) tensionSlider.value = DEFAULT_LINK_TENSION;
+
+      var chargeVal = document.getElementById('chargeValue');
+      var collisionVal = document.getElementById('collisionValue');
+      var tensionVal = document.getElementById('linkTensionValue');
+      if (chargeVal) chargeVal.textContent = DEFAULT_CHARGE;
+      if (collisionVal) collisionVal.textContent = DEFAULT_COLLISION;
+      if (tensionVal) tensionVal.textContent = DEFAULT_LINK_TENSION;
+    });
+  }
+
+  // ---- DENSITY PANEL (grid size / blur / opacity sliders) ----
+  // Snapshot the values the graph was generated with, so Reset restores
+  // exactly those, not a hardcoded JS default.
+  var DEFAULT_DENSITY_GRID_SIZE = densityGridSize;
+  var DEFAULT_DENSITY_BLUR = densityBlur;
+  var DEFAULT_DENSITY_OPACITY = densityOpacity;
+
+  // Only visually matters while the density layer is toggled on, but the
+  // values are stored either way (so turning the layer on later reflects
+  // whatever the sliders were last set to).
+  function setDensityGridSize(value) {
+    densityGridSize = value;
+    if (densityVisible) drawDensityLayer();
+  }
+  function setDensityBlur(value) {
+    densityBlur = value;
+    if (densityVisible) drawDensityLayer();
+  }
+  function setDensityOpacity(value) {
+    densityOpacity = value;
+    if (densityVisible) drawDensityLayer();
+  }
+  wirePhysicsSlider('densityGridSizeSlider', 'densityGridSizeValue', setDensityGridSize);
+  wirePhysicsSlider('densityBlurSlider', 'densityBlurValue', setDensityBlur);
+  wirePhysicsSlider('densityOpacitySlider', 'densityOpacityValue', setDensityOpacity);
+
+  var densityResetBtn = document.getElementById('densityResetButton');
+  if (densityResetBtn) {
+    densityResetBtn.addEventListener('click', function() {
+      setDensityGridSize(DEFAULT_DENSITY_GRID_SIZE);
+      setDensityBlur(DEFAULT_DENSITY_BLUR);
+      setDensityOpacity(DEFAULT_DENSITY_OPACITY);
+
+      var gridSlider = document.getElementById('densityGridSizeSlider');
+      var blurSlider = document.getElementById('densityBlurSlider');
+      var opacitySlider = document.getElementById('densityOpacitySlider');
+      if (gridSlider) gridSlider.value = DEFAULT_DENSITY_GRID_SIZE;
+      if (blurSlider) blurSlider.value = DEFAULT_DENSITY_BLUR;
+      if (opacitySlider) opacitySlider.value = DEFAULT_DENSITY_OPACITY;
+
+      var gridVal = document.getElementById('densityGridSizeValue');
+      var blurVal = document.getElementById('densityBlurValue');
+      var opacityVal = document.getElementById('densityOpacityValue');
+      if (gridVal) gridVal.textContent = DEFAULT_DENSITY_GRID_SIZE;
+      if (blurVal) blurVal.textContent = DEFAULT_DENSITY_BLUR;
+      if (opacityVal) opacityVal.textContent = DEFAULT_DENSITY_OPACITY;
+    });
+  }
+
   // 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
@@ -959,9 +1552,52 @@ function d3graphscript(config = {
 
     node = node.data(graph.nodes);
     node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
-    tickCount = 0;
-    force.start();
+
+    if (currentLayout === 'force') {
+      tickCount = 0;
+      force.start();
+    } else {
+      // Static layout active: re-apply it (new/changed nodes need positions
+      // too) instead of reheating the physics simulation.
+      if (currentLayout === 'circular') layoutCircular();
+      else if (currentLayout === 'grid') layoutGrid();
+      updatePositions();
+    }
     applyStatStyling();
   }
 
+    function resizeGraph() {
+    
+        if (config.width === window.innerWidth) {
+            width = window.innerWidth;
+        }
+    
+        if (config.height === null) {
+            var header = document.querySelector(".header-row");
+            var headerHeight = header ? header.offsetHeight : 0;
+            height = window.innerHeight - headerHeight;
+        }
+    
+        container
+            .style("width", width + "px")
+            .style("height", height + "px");
+    
+        container.select("svg")
+            .attr("width", width)
+            .attr("height", height);
+    
+        canvasEl.width = width;
+        canvasEl.height = height;
+    
+        densityCanvasEl.width = width;
+        densityCanvasEl.height = height;
+    
+        force.size([width, height]).resume();
+    
+        drawCanvasEdges();
+        drawDensityLayer();
+    }
+    
+    window.addEventListener("resize", resizeGraph);
+
 }

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

@@ -13,8 +13,21 @@
 </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 -->
+<!-- Top row: edge-threshold slider (centered) + top-panel buttons (right) -->
 {% if show_controls %}
+<div class="header-row">
+    {% if max_slider > min_slider %}
+    {{ slider_comment_start }}
+    <div class="slider-container">
+        <form style="margin:0;">
+            <span class="slider-label">Edge Threshold: <span id="thresholdValue">{{ SET_SLIDER }}</span></span>
+            <span class="slider-label">{{ min_slider }}</span>
+            <input type="range" autocomplete="off" id="thresholdSlider" value="{{ min_slider }}" min="{{ min_slider }}" max="{{ max_slider }}" class="styled-slider">
+            <span class="slider-label">{{ max_slider }}</span>
+        </form>
+    </div>
+    {{ slider_comment_stop }}
+    {% endif %}
 <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>
@@ -22,20 +35,65 @@
     <button id="exportDataButton" class="button-switch">Export Data</button>
     {% if save_button %}<button id="saveButton" class="button-switch">Save</button>{% endif %}
 </div>
-1
+</div>
+
 <!-- 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="user_default" 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>
+    <label><input type="radio" name="statMetric" value="network_clustering"> Network Clustering</label>
+</div>
+
+<!-- Layout panel (Force-directed / Circular / Grid) removed from the UI -
+     circular/grid felt too static to be useful. The underlying setLayout()/
+     layoutCircular()/layoutGrid() functions are still in d3graphscript.js,
+     just unwired, in case this is worth revisiting later. -->
+
+<!-- Side panel: interactively tune the force simulation -->
+<div class="stats-panel" id="physicsPanel">
+    <div class="stats-panel-title">Physics</div>
+    <div class="physics-control">
+        <label for="chargeSlider">Network Tension <span id="chargeValue">{{ charge }}</span></label>
+        <input type="range" id="chargeSlider" min="-2000" max="200" step="10" value="{{ charge }}">
+    </div>
+    <div class="physics-control">
+        <label for="collisionSlider">Collision <span id="collisionValue">{{ collision }}</span></label>
+        <input type="range" id="collisionSlider" min="0" max="2" step="0.05" value="{{ collision }}">
+    </div>
+    <div class="physics-control">
+        <label for="linkTensionSlider">Edge Tension <span id="linkTensionValue">{{ link_tension }}</span></label>
+        <input type="range" id="linkTensionSlider" min="0" max="5" step="0.1" value="{{ link_tension }}">
+    </div>
+    <button id="physicsResetButton" class="button-switch">Reset to Default</button>
 </div>
+
+<!-- Side panel: interactively tune the density heatmap layer -->
+<div class="stats-panel" id="densityPanel">
+    <div class="stats-panel-title">Density Layer</div>
+    <div class="physics-control">
+        <label for="densityGridSizeSlider">Grid Size <span id="densityGridSizeValue">{{ density_grid_size }}</span></label>
+        <input type="range" id="densityGridSizeSlider" min="5" max="120" step="5" value="{{ density_grid_size }}">
+    </div>
+    <div class="physics-control">
+        <label for="densityBlurSlider">Blur <span id="densityBlurValue">{{ density_blur }}</span></label>
+        <input type="range" id="densityBlurSlider" min="0" max="30" step="1" value="{{ density_blur }}">
+    </div>
+    <div class="physics-control">
+        <label for="densityOpacitySlider">Opacity <span id="densityOpacityValue">{{ density_opacity }}</span></label>
+        <input type="range" id="densityOpacitySlider" min="0" max="1" step="0.05" value="{{ density_opacity }}">
+    </div>
+    <button id="densityResetButton" class="button-switch">Reset to Default</button>
+</div>
+
 {% endif %}
 
+
     <script>
         {% include "d3.v3.js" %}
         {% include "d3graphscript.js" %}
@@ -63,8 +121,30 @@
                 show_density: {{ show_density | lower }},
                 dark_mode: {{ 'true' if dark_mode else 'false' }},
             })
+            positionSidePanels();
         });
 
+        // Stacks every .stats-panel element (Network Statistic, Layout, ...)
+        // below the header row (edge-threshold slider + top-panel buttons),
+        // using its actual measured height rather than a hardcoded pixel
+        // guess guessed offset breaks the moment the row wraps onto two
+        // lines on a narrower screen, which is exactly what caused this
+        // panel's earlier positioning bugs. Scales to any number of panels
+        // automatically. Falls back to .top-panel alone if .header-row isn't
+        // present (e.g. no edge-threshold slider to show).
+        function positionSidePanels() {
+            var headerRow = document.querySelector('.header-row') || document.querySelector('.top-panel');
+            var panels = document.querySelectorAll('.stats-panel');
+            if (!headerRow || !panels.length) return;
+            var y = headerRow.getBoundingClientRect().bottom + 8;
+            panels.forEach(function (panel) {
+                panel.style.top = y + 'px';
+                panel.style.left = '10px';
+                y += panel.getBoundingClientRect().height + 8;
+            });
+        }
+        window.addEventListener('resize', positionSidePanels);
+
         // Dark mode toggle logic
         const darkSwitch = document.getElementById('darkModeSwitch');
         let darkMode = {{ 'true' if dark_mode else 'false' }};
@@ -118,22 +198,6 @@
 
 
 
-<!-- SLIDER -->
-{{ slider_comment_start }}
-
-    {% if max_slider > min_slider %}
-	<div style="max-width:{{ width }}px;" class="slider-container">
-        <form style="margin:0;">
-            <span class="slider-label">Edge Threshold</span>
-            <span class="slider-label">{{ min_slider }}</span>
-            <input type="range" autocomplete="off" id="thresholdSlider" value="{{ min_slider }}" min="{{ min_slider }}" max="{{ max_slider }}" class="styled-slider">
-            <span class="slider-label">{{ max_slider }}</span>
-        </form>
-	</div>
-    {% endif %}
-
-{{ slider_comment_stop }}
-
 </body>
 </html>
 

{d3graph-2.9.5 → d3graph-2.9.6}/d3graph/d3js/style.css

@@ -1,3 +1,19 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
 .node text {
   font-size: 10px;
   font-family: "Helvetica";
@@ -44,15 +60,17 @@ h3 {
   display: none;
 }
 
-/* Stats side panel (PageRank / HITS / centrality toggles). Deliberately NOT
-   position:fixed/absolute — this codebase has twice hit bugs from
-   floating-overlay panels landing behind or on top of other content in ways
-   that depend on the exact height of the (wrapping) top-panel row. Normal
-   document flow sidesteps that whole category of bug: it always renders
-   directly below the top-panel, full stop. */
+/* Stats/layout side panels. Positioned via JS (positionSidePanels(), in
+   index_html.j2) rather than a hardcoded pixel offset — this codebase has
+   twice hit bugs from guessed offsets that assumed a fixed top-panel height,
+   which breaks the moment the top-panel wraps onto two lines on a narrower
+   screen. JS measures the top-panel's actual rendered height at runtime and
+   stacks every .stats-panel element below it in DOM order, so this scales
+   to any number of panels on any screen size. top/left below are just the
+   pre-JS fallback (first paint, before the script runs). */
 .stats-panel {
-  position: absolute;
-  top: 70px;       /* Adjust to place it below the top controls */
+  position: fixed;
+  top: 10px;
   left: 10px;
   z-index: 1000;
 
@@ -83,6 +101,31 @@ h3 {
   cursor: pointer;
 }
 
+.stats-panel .physics-control {
+  margin: 10px 0;
+}
+
+.stats-panel .physics-control label {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 3px;
+  cursor: default;
+  font-weight: normal;
+}
+
+.stats-panel .physics-control input[type="range"] {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.stats-panel .button-switch {
+  display: block;
+  width: 100%;
+  text-align: center;
+  margin: 10px 0 0 0;
+  box-sizing: border-box;
+}
+
 
 .dark-mode {
     background-color: #222 !important;
@@ -109,12 +152,32 @@ h3 {
     font-family: inherit, Arial, sans-serif;
     transition: background 0.2s, color 0.2s;
 }
+/* Header row: top-panel buttons (right) + edge-threshold slider (centered)
+   share one line. Grid with equal 1fr flanks keeps the slider centered on
+   the row regardless of how wide the button group is; align-items:start
+   keeps both children measured from the same top edge so
+   positionSidePanels() (which measures .header-row, not .top-panel alone)
+   gets an accurate height even if the slider and buttons differ in height. */
+.header-row {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: start;
+    gap: 8px;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+.header-row .slider-container {
+    grid-column: 2;
+    margin: 0;
+}
 .top-panel {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
+    align-content: start;
     gap: 8px;
-    padding: 10px;
+    grid-column: 3;
 }
 .slider-container {
     display: flex;
@@ -170,4 +233,4 @@ h3 {
 .dark-mode .styled-slider::-moz-range-thumb {
     background: #222;
     border: 2px solid #eee;
-}
+}

{d3graph-2.9.5 → d3graph-2.9.6}/d3graph/examples.py

@@ -6,7 +6,7 @@ d3 = d3graph()
 # Load example data
 df = d3.import_example('socialmedia')
 # Slice first 10000 rows
-df = df[0:10000]
+df = df[0:5000]
 # Create adjmat
 adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
 # Update matrix with random weights
@@ -14,15 +14,12 @@ tmpadjmat = np.random.randint(1, 10, size=adjmat.shape)
 adjmat = adjmat*tmpadjmat
 
 # Create graph
-d3.graph(adjmat)
-
-# Show graph with default settings
-# d3.show()
+d3.graph(adjmat, opacity=None)
 
 # Show graph with custom specific settings
 d3.show(density_grid_size=60,
-        density_blur=100,
-        density_opacity=0.6,
+        density_blur=15, # Smaller is more dense heatmap
+        density_opacity=0.8,
         dark_mode=True,
         show_density=True,
         show_slider=True,
@@ -85,7 +82,10 @@ d3.graph(adjmat)
 # Mix shapes per node
 markers = ['circle', 'star', 'diamond', 'square', 'pentagon', 'hexagon', 'rectangle', 'triangle-down', 'triangle'] * 8
 d3.set_node_properties(marker=markers[:len(adjmat.columns)], color=df['label'].values, cmap='Set1')
-d3.show(filepath="d:/repos/erdogant.github.io/docs/d3graph/d3graph/node_shapes.html")
+# d3.show(filepath="d:/repos/erdogant.github.io/docs/d3graph/d3graph/node_shapes.html")
+
+d3.node_properties
+d3.edge_properties
 
 # %%
 from d3graph import d3graph, import_example
@@ -422,7 +422,7 @@ d3.set_node_properties(marker=['circle', 'circle', 'circle', 'rect', 'rect', 're
 
 d3.show(filepath=r'c:\temp\\d3graph\circle.html', set_slider=5, save_button=False)
 
-
+d3.node_properties
 
 # %% Edge distance
 
@@ -566,6 +566,8 @@ html = d3.show(click={'fill': 'green', 'stroke': 'black', 'size': 2, 'stroke-wid
 html = d3.show(click=None, filepath=r'c:\temp\d3graph\d3graph.html')
 html = d3.show(filepath=r'c:\temp\d3graph\d3graph.html')
 
+d3.edge_properties
+d3.node_properties
 
 # %% notebook examples
 from d3graph import d3graph

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.9.5
+Version: 2.9.6
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause