d3graph 2.9.2__tar.gz → 2.9.4__tar.gz

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

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

{d3graph-2.9.2 → d3graph-2.9.4}/README.md

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

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

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

@@ -123,6 +123,12 @@ 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,
+             show_controls: bool = True,
              ) -> None:
         """Build and show the graph.
 
@@ -177,6 +183,39 @@ 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.
+        show_controls : bool, (default: True)
+            Whether to render the top-panel buttons (Dark Mode, Hide Edges, Show Density,
+            Save) at all. Set to False when embedding the generated HTML into an existing
+            page/app that provides its own UI chrome and doesn't need d3graph's built-in
+            controls - the buttons (and their JS wiring) are omitted entirely rather than
+            just hidden, so there's no extra DOM/clutter in the embed. The weight/component
+            sliders are controlled separately via show_slider; the Save button specifically
+            is also controlled via save_button, independent of this.
 
         Returns
         -------
@@ -201,6 +240,12 @@ 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
+        self.config['show_controls'] = show_controls
 
         # Allow show() to override the link_tension set at __init__ time
         if link_tension is not None:
@@ -802,7 +847,6 @@ class d3graph:
 
         # Hide slider
         show_slider = ['', ''] if self.config['show_slider'] else ['<!--', '-->']
-        show_save_button = ['', ''] if self.config['save_button'] else ['<!--', '-->']
         # Set width and height to screen resolution if None.
         width = 'window.screen.width' if self.config['figsize'][0] is None else self.config['figsize'][0]
         height = 'window.screen.height' if self.config['figsize'][1] is None else self.config['figsize'][1]
@@ -824,6 +868,13 @@ 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),
+                   'show_controls': self.config.get('show_controls', True),
+                   'save_button': self.config['save_button'],
                    'node_text_inside': self.config.get('node_text_inside', False),
                    'CLICK_COMMENT': CLICK_COMMENT,
                    'CLICK_FILL': click_properties['fill'],
@@ -832,8 +883,6 @@ class d3graph:
                    'CLICK_STROKEW': click_properties['stroke-width'],
                    'slider_comment_start': show_slider[0],
                    'slider_comment_stop': show_slider[1],
-                   'save_button_comment_start': show_save_button[0],
-                   'save_button_comment_stop': show_save_button[1],
                    'SET_SLIDER': self.config['set_slider'],
                    'SUPPORT': support,
                    'background_color': self.config['background_color'],

{d3graph-2.9.2 → d3graph-2.9.4}/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);