d3graph 2.9.2__tar.gz → 2.9.3__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.9.2
+Version: 2.9.3
 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.2 → d3graph-2.9.3}/d3graph/__init__.py

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

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

@@ -123,6 +123,11 @@ class d3graph:
              node_text_inside: bool = False,
              max_ticks: int = 300,
              label_zoom_threshold: float = 0.4,
+             canvas_edge_threshold: int = 2000,
+             show_density: bool = False,
+             density_grid_size: int = 60,
+             density_blur: int = 10,
+             density_opacity: float = 0.6,
              ) -> None:
         """Build and show the graph.
 
@@ -177,6 +182,31 @@ class d3graph:
             Node and edge labels are hidden below this zoom scale (unreadable anyway, and
             costly to keep rendering for large graphs) and reappear once zoomed back in
             past it. Uses a single CSS class toggle, not per-label work. 0: never hide.
+        canvas_edge_threshold : int, (default: 2000)
+            Above this many visible edges, edges are drawn on a <canvas> layer instead of
+            as individual SVG <line> elements. SVG's per-element DOM overhead is what makes
+            tens of thousands of edges freeze the page; canvas draw calls stay cheap
+            regardless of edge count. Nodes always stay SVG (drag/click/tooltips). Only
+            applies once edges exceed this count, so small/medium graphs are unaffected -
+            note that in canvas mode, the "Save as SVG" export won't include edges, since
+            they no longer live in the SVG DOM.
+        show_density : bool, (default: False)
+            Adds a node-clustering heatmap layer (grid-binned density of node positions),
+            drawn on its own canvas beneath the edges and nodes, with a toggle button in
+            the UI ("Show/Hide Density") to turn it on/off regardless of this default.
+            Recomputed from live node positions each frame it's visible, so it tracks the
+            force layout as nodes settle, and it responds to the weight/component sliders
+            since it's based on whichever nodes are currently on screen. Color scheme is
+            a yellow-to-red heat gradient in light mode, single-hue blue in dark mode
+            (updates live when dark mode is toggled).
+        density_grid_size : int, (default: 40)
+            Grid resolution for the density heatmap (cells along the longer axis of the
+            node bounding box). Higher = finer detail on tight clusters, more cells to draw.
+        density_blur : int, (default: 8)
+            Blur radius (px) applied to the heatmap for a smooth look instead of a
+            blocky grid.
+        density_opacity : float, (default: 0.6)
+            Maximum heatmap opacity, reached at the highest-density grid cell.
 
         Returns
         -------
@@ -201,6 +231,11 @@ class d3graph:
         self.config['node_text_inside'] = node_text_inside
         self.config['max_ticks'] = max_ticks
         self.config['label_zoom_threshold'] = label_zoom_threshold
+        self.config['canvas_edge_threshold'] = canvas_edge_threshold
+        self.config['show_density'] = show_density
+        self.config['density_grid_size'] = density_grid_size
+        self.config['density_blur'] = density_blur
+        self.config['density_opacity'] = density_opacity
 
         # Allow show() to override the link_tension set at __init__ time
         if link_tension is not None:
@@ -824,6 +859,11 @@ class d3graph:
                    'sticky': self.config.get('sticky', False),
                    'max_ticks': self.config.get('max_ticks', 300),
                    'label_zoom_threshold': self.config.get('label_zoom_threshold', 0.6),
+                   'canvas_edge_threshold': self.config.get('canvas_edge_threshold', 2000),
+                   'show_density': self.config.get('show_density', False),
+                   '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),
                    'node_text_inside': self.config.get('node_text_inside', False),
                    'CLICK_COMMENT': CLICK_COMMENT,
                    'CLICK_FILL': click_properties['fill'],

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

@@ -12,6 +12,12 @@ function d3graphscript(config = {
     node_text_inside: false,
     max_ticks: 300,
     label_zoom_threshold: 0.6,
+    canvas_edge_threshold: 2000,
+    density_grid_size: 40,
+    density_blur: 8,
+    density_opacity: 0.6,
+    show_density: false,
+    dark_mode: false,
     }) {
     
     //Constants for the SVG
@@ -30,6 +36,34 @@ function d3graphscript(config = {
     // single CSS class, not per-element work) instead of rendering thousands
     // of illegible <text> nodes. They reappear once zoomed back in past it.
     var labelZoomThreshold = (config.label_zoom_threshold !== undefined && config.label_zoom_threshold !== null) ? config.label_zoom_threshold : 0.6;
+    // Above this many visible edges, draw links on a <canvas> instead of as
+    // SVG <line> elements. SVG per-element overhead (DOM node creation,
+    // layout, GC) is what makes tens of thousands of edges freeze the page;
+    // canvas just issues draw calls into a single bitmap each frame, so cost
+    // stays flat regardless of edge count. Nodes stay SVG either way (far
+    // fewer of them, and it keeps drag/click/tooltip interactivity simple).
+    var canvasEdgeThreshold = (config.canvas_edge_threshold !== undefined && config.canvas_edge_threshold !== null) ? config.canvas_edge_threshold : 2000;
+    var useCanvasEdges = false;
+    var canvasEl, ctx;
+    var currentTransform = { scale: 1, translate: [0, 0] };
+    // Master on/off switch for edges (independent of the weight/component
+    // sliders) — lets the user clear visual clutter on large graphs to see
+    // node structure/clustering without redrawing or refiltering anything.
+    var edgesVisible = true;
+
+    // ---- 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
+    // it tracks the force layout as nodes settle/move — cheap since it's a
+    // single O(nodes) pass, unlike the edge count this was never the
+    // bottleneck. Color scheme adapts to dark mode (updated live via
+    // window.d3graphSetDarkMode, called from the dark-mode toggle).
+    var densityGridSize = (config.density_grid_size !== undefined && config.density_grid_size !== null) ? config.density_grid_size : 40;
+    var densityBlur = (config.density_blur !== undefined && config.density_blur !== null) ? config.density_blur : 8;
+    var densityOpacity = (config.density_opacity !== undefined && config.density_opacity !== null) ? config.density_opacity : 0.6;
+    var densityVisible = config.show_density || false;
+    var darkMode = config.dark_mode || false;
+    var densityCanvasEl, densityCtx, densityOffscreen;
     
     // Set the body background color
     document.body.style.backgroundColor = background_color;
@@ -67,6 +101,7 @@ function d3graphscript(config = {
       } else {
         d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
       }
+      if (densityVisible) drawDensityLayer();
     }
     
     function dragended(d) {
@@ -223,19 +258,239 @@ function d3graphscript(config = {
 
     // ---- END SHAPE RENDERING ----
 
-    //Append a SVG to the body of the html page. Assign this SVG as an object to svg
-    var svg = d3.select("body").append("svg")
+    // Layered container: canvas (background + edges, used only above
+    // canvasEdgeThreshold) sits under a transparent SVG (nodes always render
+    // here, for drag/click/tooltip interactivity). The background color lives
+    // on the container so it shows through the transparent SVG either way.
+    var container = d3.select("body").append("div")
+      .attr("id", "graphContainer")
+      .style("position", "relative")
+      .style("width", width + "px")
+      .style("height", height + "px")
+      .style("background-color", background_color);
+
+    // Density (clustering heatmap) layer — created first so it stacks
+    // beneath both the edge canvas and the SVG node layer.
+    densityCanvasEl = container.append("canvas")
       .attr("width", width)
       .attr("height", height)
-      .style("background-color", background_color)
+      .style("position", "absolute")
+      .style("top", 0)
+      .style("left", 0)
+      .style("pointer-events", "none")
+      .style("display", densityVisible ? null : "none")
+      .node();
+    densityCtx = densityCanvasEl.getContext("2d");
+
+    canvasEl = container.append("canvas")
+      .attr("width", width)
+      .attr("height", height)
+      .style("position", "absolute")
+      .style("top", 0)
+      .style("left", 0)
+      .style("pointer-events", "none")
+      .node();
+    ctx = canvasEl.getContext("2d");
+
+    //Append a SVG to the container. Assign this SVG as an object to svg
+    var svg = container.append("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .style("position", "absolute")
+      .style("top", 0)
+      .style("left", 0)
+      .style("background-color", "transparent")
       .call(d3.behavior.zoom().on("zoom", function () {
         svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
         // Single class toggle (cheap) rather than iterating every label on
         // every zoom/pan event — CSS handles hiding all descendant <text>.
         svg.classed("labels-hidden", d3.event.scale < labelZoomThreshold);
+        currentTransform.scale = d3.event.scale;
+        currentTransform.translate = d3.event.translate;
+        drawCanvasEdges();
+        drawDensityLayer();
       }))
       .on("dblclick.zoom", null)
       .append("g")
+
+    // Draws all links onto the canvas layer, matching the SVG group's current
+    // pan/zoom transform. No-ops when the graph is small enough to stay on SVG.
+    function drawCanvasEdges() {
+      if (!useCanvasEdges || !ctx || !edgesVisible) return;
+      ctx.save();
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+      ctx.setTransform(currentTransform.scale, 0, 0, currentTransform.scale, currentTransform.translate[0], currentTransform.translate[1]);
+      for (var i = 0; i < graph.links.length; i++) {
+        var d = graph.links[i];
+        if (!d.source || !d.target || typeof d.source.x !== 'number') continue;
+        ctx.beginPath();
+        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;
+        ctx.setLineDash(d.edge_style === 'dashed' ? [6, 3] : d.edge_style === 'dotted' ? [1.5, 3] : []);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    // Bins the currently visible nodes' live (x, y) positions into a coarse
+    // grid over their bounding box. O(nodes) — cheap enough to recompute
+    // every tick, unlike the edge count this was never the bottleneck.
+    function computeDensityGrid() {
+      var nodesData = node.data();
+      if (!nodesData.length) return null;
+
+      var minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+      for (var i = 0; i < nodesData.length; i++) {
+        var nx = nodesData[i].x, ny = nodesData[i].y;
+        if (typeof nx !== 'number' || typeof ny !== 'number') continue;
+        if (nx < minX) minX = nx;
+        if (nx > maxX) maxX = nx;
+        if (ny < minY) minY = ny;
+        if (ny > maxY) maxY = ny;
+      }
+      if (minX === Infinity) return null;
+
+      var padX = (maxX - minX) * 0.05 || 20;
+      var padY = (maxY - minY) * 0.05 || 20;
+      minX -= padX; maxX += padX; minY -= padY; maxY += padY;
+
+      var w = (maxX - minX) || 1;
+      var h = (maxY - minY) || 1;
+      var cellsX, cellsY;
+      if (w >= h) {
+        cellsX = densityGridSize;
+        cellsY = Math.max(1, Math.round(densityGridSize * h / w));
+      } else {
+        cellsY = densityGridSize;
+        cellsX = Math.max(1, Math.round(densityGridSize * w / h));
+      }
+      var cellW = w / cellsX;
+      var cellH = h / cellsY;
+
+      var grid = new Float32Array(cellsX * cellsY);
+      var maxCount = 0;
+      for (var j = 0; j < nodesData.length; j++) {
+        var d = nodesData[j];
+        if (typeof d.x !== 'number' || typeof d.y !== 'number') continue;
+        var cx = Math.min(cellsX - 1, Math.max(0, Math.floor((d.x - minX) / cellW)));
+        var cy = Math.min(cellsY - 1, Math.max(0, Math.floor((d.y - minY) / cellH)));
+        var idx = cy * cellsX + cx;
+        grid[idx] += 1;
+        if (grid[idx] > maxCount) maxCount = grid[idx];
+      }
+
+      return { grid: grid, cellsX: cellsX, cellsY: cellsY, cellW: cellW, cellH: cellH, minX: minX, minY: minY, maxCount: maxCount };
+    }
+
+    // t in [0, 1] (relative density) -> fill color. Light mode: yellow -> red
+    // heat gradient. Dark mode: single-hue blue, so it reads well against a
+    // dark background instead of clashing with it.
+    function densityColor(t) {
+      if (darkMode) {
+        var l = 25 + t * 45; // 25%..70% lightness
+        return 'hsl(210, 90%, ' + l + '%)';
+      }
+      var hue = 60 - t * 60; // 60=yellow -> 0=red
+      return 'hsl(' + hue + ', 100%, 50%)';
+    }
+
+    // Draws the heatmap: unblurred cells go to an offscreen buffer first,
+    // then get composited onto the visible canvas with a single blurred
+    // drawImage — much cheaper than blurring each cell individually.
+    function drawDensityLayer() {
+      if (!densityVisible || !densityCtx) return;
+      densityCtx.save();
+      densityCtx.setTransform(1, 0, 0, 1, 0, 0);
+      densityCtx.clearRect(0, 0, densityCanvasEl.width, densityCanvasEl.height);
+
+      var data = computeDensityGrid();
+      if (!data || data.maxCount <= 0) { densityCtx.restore(); return; }
+
+      if (!densityOffscreen) densityOffscreen = document.createElement('canvas');
+      densityOffscreen.width = densityCanvasEl.width;
+      densityOffscreen.height = densityCanvasEl.height;
+      var offCtx = densityOffscreen.getContext('2d');
+      offCtx.clearRect(0, 0, densityOffscreen.width, densityOffscreen.height);
+      offCtx.setTransform(currentTransform.scale, 0, 0, currentTransform.scale, currentTransform.translate[0], currentTransform.translate[1]);
+
+      for (var cy = 0; cy < data.cellsY; cy++) {
+        for (var cx = 0; cx < data.cellsX; cx++) {
+          var count = data.grid[cy * data.cellsX + cx];
+          if (count <= 0) continue;
+          var t = count / data.maxCount;
+          offCtx.fillStyle = densityColor(t);
+          offCtx.globalAlpha = densityOpacity * t;
+          offCtx.fillRect(data.minX + cx * data.cellW, data.minY + cy * data.cellH, data.cellW, data.cellH);
+        }
+      }
+
+      densityCtx.filter = 'blur(' + densityBlur + 'px)';
+      densityCtx.drawImage(densityOffscreen, 0, 0);
+      densityCtx.filter = 'none';
+      densityCtx.restore();
+    }
+
+
+    function applyEdgeVisibility() {
+      svg.classed("edges-hidden", !edgesVisible);
+      if (useCanvasEdges) {
+        if (edgesVisible) {
+          d3.select(canvasEl).style("display", null);
+          drawCanvasEdges();
+        } else {
+          if (ctx) ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+          d3.select(canvasEl).style("display", "none");
+        }
+      } else {
+        d3.select(canvasEl).style("display", "none");
+      }
+    }
+
+    // Builds (or tears down) the SVG <line>/<text> elements for links, or
+    // switches to canvas rendering, based on the current edge count. Shared
+    // by the initial render and by restart() (slider-driven updates), so the
+    // threshold is re-evaluated every time the visible edge set changes.
+    function renderLinks() {
+      useCanvasEdges = graph.links.length > canvasEdgeThreshold;
+
+      if (useCanvasEdges) {
+        // Canvas takes over — drop any SVG link/link-text DOM entirely.
+        link = link.data([]);
+        link.exit().remove();
+        linkText = linkText.data([]);
+        linkText.exit().remove();
+      } else {
+        if (ctx) ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+
+        link = link.data(graph.links);
+        link.exit().remove();
+        var linkEnter = link.enter().insert("line", ".node")
+          .attr("class", "link")
+          .attr('marker-start', function(d) { return 'url(#marker_' + d.marker_start + ')' });
+        linkEnter.append("title").text(function(d) { return d.tooltip; });
+        link.attr("marker-end", function(d) {
+          if (config.directed) { return 'url(#marker_' + d.marker_end + ')' } });
+        link.style("stroke-width", function(d) { return d.edge_width; });
+        link.style("stroke", function(d) { return d.edge_color; });
+        link.style("stroke-dasharray", function(d) { return d.edge_style; });
+        link.style("opacity", function(d) { return d.edge_opacity; });
+
+        linkText = linkText.data(graph.links);
+        linkText.exit().remove();
+        linkText.enter().append("text")
+          .attr("class", "link-text")
+          .attr("font-size", function(d) { return d.label_fontsize + "px"; })
+          .style("fill", function(d) { return d.label_color; })
+          .style("font-family", "Arial")
+          .text(function(d) { return d.label; });
+      }
+
+      applyEdgeVisibility();
+    }
     
     graphRec = JSON.parse(JSON.stringify(graph));   // Full, unfiltered copy — used by the slider to restore edges later
 
@@ -253,32 +508,13 @@ function d3graphscript(config = {
       .links(graph.links)
       .start();
     
-    // Create all the line svgs but without locations yet
-    var link = svg.selectAll(".link")
-      .data(graph.links)
-      .enter().append("line")
-      .attr("class", "link")
-      .attr('marker-start', function(d){ return 'url(#marker_' + d.marker_start + ')' })
-      .attr("marker-end", function(d) {
-        if (config.directed) {return 'url(#marker_' + d.marker_end + ')' }})
-      .style("stroke-width", function(d) {return d.edge_width;})          // LINK-WIDTH
-      .style("stroke", function(d) {return d.edge_color;})                 // EDGE-COLORS
-      .style("stroke-dasharray", function(d) {return d.edge_style;})      // EDGE-STYLE
-      .style("opacity", function(d) {return d.edge_opacity;})             // EDGE-OPACITY
-    ;
-    
-    link.append("title").text(function(d) { return d.tooltip; });
-    
-    // ADD TEXT ON THE EDGES (PART 1/2)
-    var linkText = svg.selectAll(".link-text")
-      .data(graph.links)
-      .enter().append("text")
-      .attr("class", "link-text")
-      .attr("font-size", function(d) {return d.label_fontsize + "px";})
-      .style("fill", function(d) {return d.label_color;})
-      .style("font-family", "Arial")
-      .text(function(d) { return d.label; });
-    
+    // Create empty node/link/link-text selections. renderLinks(), called
+    // below, decides whether links go to SVG or canvas and populates
+    // link/linkText accordingly.
+    var link = svg.selectAll(".link").data([]);
+    var linkText = svg.selectAll(".link-text").data([]);
+    renderLinks();
+
     //Do the same with the circles for the nodes
     var node = svg.selectAll(".node")
       .data(graph.nodes)
@@ -346,10 +582,14 @@ function d3graphscript(config = {
         return;
       }
 
-      link.attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
+      if (useCanvasEdges) {
+        drawCanvasEdges();
+      } else {
+        link.attr("x1", function(d) { return d.source.x; })
+          .attr("y1", function(d) { return d.source.y; })
+          .attr("x2", function(d) { return d.target.x; })
+          .attr("y2", function(d) { return d.target.y; });
+      }
 
       // Position each shape according to its SVG element type:
       //   circle / ellipse  →  cx / cy attributes
@@ -376,6 +616,8 @@ function d3graphscript(config = {
     
       node.each(collide(config.collision)); //COLLISION DETECTION. High means a big fight to get untouchable nodes (default=0.5)
 
+      if (densityVisible) drawDensityLayer();
+
   });
 
   // --------- MARKER FOR EDGE ENDINGS -----------
@@ -549,29 +791,45 @@ function d3graphscript(config = {
 
   d3.select("#thresholdSlider").on("change", threshold);
 
+  // Master edges on/off toggle — independent of the weight slider, purely
+  // visual, doesn't touch the underlying filtered data.
+  var edgeToggleBtn = document.getElementById('edgeToggleButton');
+  if (edgeToggleBtn) {
+    edgeToggleBtn.addEventListener('click', function() {
+      edgesVisible = !edgesVisible;
+      edgeToggleBtn.textContent = edgesVisible ? 'Hide Edges' : 'Show Edges';
+      applyEdgeVisibility();
+    });
+  }
+
+  // Density (clustering heatmap) layer toggle.
+  var densityToggleBtn = document.getElementById('densityToggleButton');
+  if (densityToggleBtn) {
+    densityToggleBtn.addEventListener('click', function() {
+      densityVisible = !densityVisible;
+      densityToggleBtn.textContent = densityVisible ? 'Hide Density' : 'Show Density';
+      d3.select(densityCanvasEl).style("display", densityVisible ? null : "none");
+      if (densityVisible) {
+        drawDensityLayer();
+      } else {
+        densityCtx.setTransform(1, 0, 0, 1, 0, 0);
+        densityCtx.clearRect(0, 0, densityCanvasEl.width, densityCanvasEl.height);
+      }
+    });
+  }
+
+  // Called from the dark-mode toggle (outside this function's scope, in the
+  // page's own script) so the density color scheme switches live instead of
+  // only reflecting whatever mode the page loaded in.
+  window.d3graphSetDarkMode = function(isDark) {
+    darkMode = !!isDark;
+    if (densityVisible) drawDensityLayer();
+  };
+
   //Restart the visualisation after any node and link changes
   function restart() {
 
-    // Update EDGE-LINKS
-    link = link.data(graph.links);
-    link.exit().remove();
-    link.enter().insert("line", ".node").attr("class", "link");
-    link.style("stroke-width", function(d) {return d.edge_width;});           // LINK-WIDTH AFTER BREAKING WITH SLIDER
-    link.style("marker-end", function(d) {                                    // Include the markers.
-      if (config.directed) {return 'url(#marker_' + d.marker_end + ')' }})
-    link.style("stroke", function(d) {return d.edge_color;});                 // EDGE-COLOR AFTER BREAKING WITH SLIDER
-    link.style("stroke-dasharray", function(d) {return d.edge_style;})        // EDGE-STYLE
-    link.style("opacity", function(d) {return d.edge_opacity;});              // EDGE-OPACITY AFTER BREAKING WITH SLIDER
-
-    // Update EDGE-LABELS
-    linkText = linkText.data(graph.links);
-    linkText.exit().remove();
-    linkText.enter().append("text")
-      .attr("class", "link-text")
-      .attr("font-size", function(d) {return d.label_fontsize + "px";})
-      .style("fill", function(d) {return d.label_color;})
-      .style("font-family", "Arial")
-      .text(function(d) { return d.label; });
+    renderLinks();
 
     node = node.data(graph.nodes);
     node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);

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

@@ -13,7 +13,7 @@
             background-color: #222 !important;
             color: #eee !important;
         }
-        .dark-mode svg {
+        .dark-mode #graphContainer {
             background-color: #222 !important;
         }
         .dark-mode .button-switch {
@@ -35,12 +35,11 @@
             transition: background 0.2s, color 0.2s;
         }
         .top-panel {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            z-index: 1000;
             display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-end;
             gap: 8px;
+            padding: 10px;
         }
         .slider-container {
             display: flex;
@@ -103,7 +102,9 @@
 
 <!-- Top right panel with dark mode and save buttons -->
 <div class="top-panel">
-    <button id="darkModeSwitch" class="button-switch">{% if dark_mode %}☀️ Light Mode{% else %}🌙 Dark Mode{% endif %}</button>
+    <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>
 </div>
 
@@ -131,7 +132,13 @@
                 background_color: '{{ background_color }}',
                 node_text_inside: {{ node_text_inside | lower }},
                 max_ticks: {{ max_ticks }},
+                canvas_edge_threshold: {{ canvas_edge_threshold }},
                 label_zoom_threshold: {{ label_zoom_threshold }},
+                density_grid_size: {{ density_grid_size }},
+                density_blur: {{ density_blur }},
+                density_opacity: {{ density_opacity }},
+                show_density: {{ show_density | lower }},
+                dark_mode: {{ 'true' if dark_mode else 'false' }},
             })
         });
 
@@ -144,17 +151,18 @@
                 document.body.classList.add('dark-mode');
                 document.body.style.backgroundColor = '#222';
                 document.body.style.color = '#eee';
-                let svg = document.querySelector('svg');
-                if (svg) svg.style.backgroundColor = '#222';
-                darkSwitch.textContent = '☀️ Light Mode';
+                let graphBg = document.getElementById('graphContainer');
+                if (graphBg) graphBg.style.backgroundColor = '#222';
+                darkSwitch.textContent = '☀ Light Mode';
             } else {
                 document.body.classList.remove('dark-mode');
                 document.body.style.backgroundColor = originalBg;
                 document.body.style.color = '';
-                let svg = document.querySelector('svg');
-                if (svg) svg.style.backgroundColor = originalBg;
+                let graphBg = document.getElementById('graphContainer');
+                if (graphBg) graphBg.style.backgroundColor = originalBg;
                 darkSwitch.textContent = '🌙 Dark Mode';
             }
+            if (window.d3graphSetDarkMode) window.d3graphSetDarkMode(on);
         }
         // Set initial mode
         setDarkMode(darkMode);
@@ -164,6 +172,9 @@
         });
 
         // 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 svgData = document.querySelector('svg').outerHTML;
             var blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});

{d3graph-2.9.2 → d3graph-2.9.3}/d3graph/d3js/style.css

@@ -35,4 +35,11 @@ h3 {
    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;
 }

{d3graph-2.9.2 → d3graph-2.9.3}/d3graph/examples.py

@@ -1,21 +1,45 @@
 # %%
-from d3graph import d3graph, vec2adjmat, import_example
+from d3graph import d3graph, vec2adjmat
+import numpy as np
+
+d3 = d3graph()
+# Load example data
+df = d3.import_example('socialmedia')
+# Slice first 10000 rows
+df = df[0:10000]
+# Create adjmat
+adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
+# Update matrix with random weights
+tmpadjmat = np.random.randint(1, 10, size=adjmat.shape)
+adjmat = adjmat*tmpadjmat
+
+# Create graph
+d3.graph(adjmat)
+
+# Show graph with default settings
+# d3.show()
+
+# Show graph with custom specific settings
+d3.show(density_grid_size=60, density_blur=10, density_opacity=0.6, dark_mode=True, show_density=True)
+
+# %%
+from d3graph import d3graph, vec2adjmat
 import pandas as pd
 import time
 
 
 df = pd.read_csv('https://github.com/d3blocks/d3blocks/files/11995798/Df.csv', sep=',', index_col=False)
 del df['Unnamed: 0']
-df = df[0:5000]
+df = df[0:10000]
 adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
 
 d3 = d3graph()
 
 start = time.perf_counter()
-d3.graph(adjmat)
+d3.graph(adjmat, min_weight=1)
 end = time.perf_counter()
 
-d3.show()
+d3.show(density_grid_size=80)
 
 print(f"Elapsed: {end - start:.6f} seconds")
 

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

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