d3graph 2.9.4__tar.gz → 2.9.5__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.9.4
+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

{d3graph-2.9.4 → 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.4'
+__version__ = '2.9.5'
 
 # Setup root logger
 _logger = logging.getLogger('d3graph')

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

@@ -262,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
@@ -1049,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
     -------
@@ -1072,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 = []
@@ -1108,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.4 → 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.4 → d3graph-2.9.5}/d3graph/d3js/index.html.j2

@@ -9,93 +9,6 @@
 
     <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 %}>
@@ -106,8 +19,21 @@
     <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="exportDataButton" class="button-switch">Export Data</button>
     {% if save_button %}<button id="saveButton" class="button-switch">Save</button>{% endif %}
 </div>
+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>

d3graph-2.9.5/d3graph/d3js/style.css

@@ -0,0 +1,173 @@
+.node text {
+  font-size: 10px;
+  font-family: "Helvetica";
+  stroke: none;
+  fill: grey;
+}
+
+.link {
+  stroke: #999;
+  stroke-opacity: .6;
+}
+
+h3 {
+  color: #1ABC9C;
+  text-align: center;
+  font-style: italic;
+  font-size: 14px;
+  font-family: "Helvetica";
+}
+
+/* Sticky / fixed node indicator: dashed outline ring — works for all shape types */
+.node .node-shape.node-fixed {
+  stroke-dasharray: 4, 2;
+  stroke-width: 2.5px;
+}
+
+/* Shared pointer cursor for all node shapes */
+.node .node-shape {
+  cursor: pointer;
+}
+
+/* Zoom-linked label visibility (performance): when zoomed far out, node and
+   edge labels are unreadable anyway, so they're hidden via this single class
+   toggle instead of being permanently removed. Placed after .node text so it
+   wins on specificity ties. */
+.labels-hidden text {
+  display: none;
+}
+
+/* Master edges on/off switch (SVG mode). Canvas mode is handled purely in JS
+   (skips drawing / clears the canvas) since there's no DOM to toggle. */
+.edges-hidden .link,
+.edges-hidden .link-text {
+  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-panel {
+  position: absolute;
+  top: 70px;       /* Adjust to place it below the top controls */
+  left: 10px;
+  z-index: 1000;
+
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 8px;
+  padding: 10px 14px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  font-family: "Helvetica", Arial, sans-serif;
+  font-size: 13px;
+  width: 220px;
+  max-width: calc(100vw - 40px);
+}
+
+.dark-mode .stats-panel {
+  background: rgba(34, 34, 34, 0.92);
+  color: #eee;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+.stats-panel .stats-panel-title {
+  font-weight: bold;
+  margin-bottom: 6px;
+}
+
+.stats-panel label {
+  display: block;
+  margin: 4px 0;
+  cursor: pointer;
+}
+
+
+.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;
+}

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

@@ -6,7 +6,7 @@ d3 = d3graph()
 # Load example data
 df = d3.import_example('socialmedia')
 # Slice first 10000 rows
-df = df[0:1000]
+df = df[0:10000]
 # Create adjmat
 adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
 # Update matrix with random weights

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.9.4
+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

d3graph-2.9.4/d3graph/d3js/style.css

@@ -1,45 +0,0 @@
-.node text {
-  font-size: 10px;
-  font-family: "Helvetica";
-  stroke: none;
-  fill: grey;
-}
-
-.link {
-  stroke: #999;
-  stroke-opacity: .6;
-}
-
-h3 {
-  color: #1ABC9C;
-  text-align: center;
-  font-style: italic;
-  font-size: 14px;
-  font-family: "Helvetica";
-}
-
-/* Sticky / fixed node indicator: dashed outline ring — works for all shape types */
-.node .node-shape.node-fixed {
-  stroke-dasharray: 4, 2;
-  stroke-width: 2.5px;
-}
-
-/* Shared pointer cursor for all node shapes */
-.node .node-shape {
-  cursor: pointer;
-}
-
-/* Zoom-linked label visibility (performance): when zoomed far out, node and
-   edge labels are unreadable anyway, so they're hidden via this single class
-   toggle instead of being permanently removed. Placed after .node text so it
-   wins on specificity ties. */
-.labels-hidden text {
-  display: none;
-}
-
-/* Master edges on/off switch (SVG mode). Canvas mode is handled purely in JS
-   (skips drawing / clears the canvas) since there's no DOM to toggle. */
-.edges-hidden .link,
-.edges-hidden .link-text {
-  display: none;
-}