d3graph 2.7.2__tar.gz → 2.8.0__tar.gz

{d3graph-2.7.2/d3graph.egg-info → d3graph-2.8.0}/PKG-INFO

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

{d3graph-2.7.2 → d3graph-2.8.0}/d3graph/__init__.py

@@ -17,7 +17,7 @@ from d3graph.d3graph import (
 
 __author__ = 'Erdogan Tasksen'
 __email__ = 'erdogant@gmail.com'
-__version__ = '2.7.2'
+__version__ = '2.8.0'
 
 # Setup root logger
 _logger = logging.getLogger('d3graph')
@@ -60,7 +60,7 @@ Examples
 >>> d3.set_edge_properties(directed=True)
 >>>
 >>> # Plot
->>> d3.show()
+>>> d3.show(node_text_inside=True)
 
 References
 ----------

{d3graph-2.7.2 → d3graph-2.8.0}/d3graph/d3graph.py

@@ -120,6 +120,7 @@ class d3graph:
              save_button: bool = True,
              link_tension: float = None,
              sticky: bool = None,
+             node_text_inside: bool = False,
              ) -> None:
         """Build and show the graph.
 
@@ -186,6 +187,8 @@ class d3graph:
         self.config['save_button'] = save_button
         self.config['background_color'] = background_color
         self.config['dark_mode'] = dark_mode
+        self.config['node_text_inside'] = node_text_inside
+
         # Allow show() to override the link_tension set at __init__ time
         if link_tension is not None:
             self.config['link_tension'] = link_tension
@@ -396,7 +399,8 @@ class d3graph:
             * ['label 1','label 2','label 3', ...]
         marker : list of markers (default: 'circle')
             The marker that is used for the Node.
-            * ['circle','rect','rect', ...]
+            * 'circle' or 'hexagon' etc
+            * ['circle', 'star', 'diamond', 'square', 'pentagon', 'hexagon', 'rectangle', 'triangle-down', 'triangle']
         tooltip : list of names (default: None)
             The text that is shown when hovering over the Node.
             If not specified, the text will inherit from the label.
@@ -795,6 +799,7 @@ class d3graph:
                    'collision': self.config['collision'],
                    'link_tension': self.config.get('link_tension', 1.0),
                    'sticky': self.config.get('sticky', False),
+                   'node_text_inside': self.config.get('node_text_inside', False),
                    'CLICK_COMMENT': CLICK_COMMENT,
                    'CLICK_FILL': click_properties['fill'],
                    'CLICK_STROKE': click_properties['stroke'],
@@ -1411,7 +1416,7 @@ def library_compatibility_checks() -> None:
     None.
 
     """
-    if not version.parse(nx.__version__) >= version.parse('2.5'):
+    if not version.parse(nx.__version__) >= version.parse('2.5.0'):
         logger.error('Networkx version should be >= 2.5')
         logger.info('Hint: pip install -U networkx')
 
@@ -1653,20 +1658,63 @@ def _compute_centrality(adjmat):
     # opacity = opacity[:-2]
     return opacity
 
+MARKERS_SUPPORTED = {
+    'circle',
+    'ellipse',
+    'rect', 'rectangle', 'square',
+    'rect-wide', 'rectangle-wide',
+    'triangle', 'triangle-up', 'triangle-down',
+    'diamond',
+    'star',
+    'hexagon',
+    'pentagon',
+}
+
+
 def _set_marker(self, marker, nodecount):
-    if isinstance(marker, type(None)):
+    """Validate and broadcast the node marker/shape.
+
+    Supported shapes
+    ----------------
+    'circle'                         : Circle (default)
+    'ellipse'                        : Ellipse (wider than tall)
+    'rect' / 'rectangle' / 'square' : Square
+    'rect-wide' / 'rectangle-wide'  : Wide rectangle
+    'triangle' / 'triangle-up'      : Triangle pointing up
+    'triangle-down'                  : Triangle pointing down
+    'diamond'                        : Diamond (rotated square)
+    'star'                           : 5-pointed star
+    'hexagon'                        : Regular hexagon
+    'pentagon'                       : Regular pentagon
+    """
+    if marker is None:
         marker = 'circle'
 
-    if isinstance(marker, list) and len(marker)==nodecount:
-        marker = np.array(marker)
-    elif 'numpy' in str(type(marker)) and len(marker)==nodecount:
+    if isinstance(marker, (list, np.ndarray, pd.Series)) and len(marker) == nodecount:
+        marker = np.array([str(m).lower() for m in marker])
+        invalid = set(marker) - MARKERS_SUPPORTED
+        if invalid:
+            logger.warning(
+                'Unknown marker(s) %s. Supported: %s. Falling back to "circle" for those.',
+                sorted(invalid), sorted(MARKERS_SUPPORTED)
+            )
+            marker = np.where(np.isin(marker, list(MARKERS_SUPPORTED)), marker, 'circle')
+    elif 'numpy' in str(type(marker)) and len(marker) == nodecount:
         pass
     elif isinstance(marker, str):
+        marker = marker.lower()
+        if marker not in MARKERS_SUPPORTED:
+            logger.warning(
+                'Unknown marker "%s". Supported: %s. Falling back to "circle".',
+                marker, sorted(MARKERS_SUPPORTED)
+            )
+            marker = 'circle'
         marker = np.repeat(marker, nodecount)
+    else:
+        marker = np.repeat('circle', nodecount)
 
-    # Make check
-    if len(marker) != nodecount: raise ValueError("Node size must be of same length as the number of nodes")
-    # Return
+    if len(marker) != nodecount:
+        raise ValueError("Node marker must be of same length as the number of nodes")
     return marker
 
 def _set_node_size(self, size, minmax, nodecount):

{d3graph-2.7.2 → d3graph-2.8.0}/d3graph/d3js/d3graphscript.js

@@ -8,7 +8,8 @@ function d3graphscript(config = {
     collision: 0.5,
     link_tension: 1,
     sticky: false,
-    background_color: '#FFFFFF'
+    background_color: '#FFFFFF',
+    node_text_inside: false,
     }) {
     
     //Constants for the SVG
@@ -59,7 +60,7 @@ function d3graphscript(config = {
       if (sticky) {
         // Keep the node fixed and apply a visual "pinned" cue (dashed border)
         d.fixed = true;
-        d3.select(this).select("circle")
+        d3.select(this).select(".node-shape")
           .style("stroke-dasharray", "4,2")
           .style("stroke-width", function(d) { return Math.max(parseFloat(d.node_size_edge) || 1, 2); });
       }
@@ -72,7 +73,142 @@ function d3graphscript(config = {
       .on("dragend", dragended);
     
     // ---- END DRAGGING ----
-    
+
+    // =====================================================================
+    // ---- SHAPE RENDERING ------------------------------------------------
+    // Supported node_marker values:
+    //   'circle'                        – SVG <circle>  (default)
+    //   'ellipse'                       – SVG <ellipse> (wider than tall)
+    //   'square'                        – square via <path>
+    //   'rectangle'                     – wide rectangle via <path>
+    //   'triangle' / 'triangle-up'      – upward equilateral triangle
+    //   'triangle-down'                 – downward triangle
+    //   'diamond'                       – rotated square
+    //   'star'                          – 5-pointed star
+    //   'hexagon'                       – regular hexagon
+    //   'pentagon'                      – regular pentagon
+    // =====================================================================
+
+    /**
+     * Returns an SVG path `d` string for polygon/star shapes, centred at (0,0).
+     * Returns null for 'circle' and 'ellipse' (handled as native SVG elements).
+     */
+    function shapePathD(marker, r) {
+      r = parseFloat(r) || 8;
+      var m = (marker || 'circle').toLowerCase();
+      switch (m) {
+
+        case 'triangle':
+        case 'triangle-up': {
+          var h = r * Math.sqrt(3);
+          return 'M 0,' + (-r) +
+                 ' L ' + (h / 2) + ',' + (r / 2) +
+                 ' L ' + (-h / 2) + ',' + (r / 2) + ' Z';
+        }
+
+        case 'triangle-down': {
+          var h = r * Math.sqrt(3);
+          return 'M 0,' + r +
+                 ' L ' + (h / 2) + ',' + (-r / 2) +
+                 ' L ' + (-h / 2) + ',' + (-r / 2) + ' Z';
+        }
+
+        case 'square': {
+          var s = r * 1.4;
+          return 'M ' + (-s) + ',' + (-s) +
+                 ' L ' +   s + ',' + (-s) +
+                 ' L ' +   s + ',' +   s  +
+                 ' L ' + (-s) + ',' +   s  + ' Z';
+        }
+
+        case 'rect':
+        case 'rectangle': {
+          var w = r * 2.0, h = r * 1.0;
+          return 'M ' + (-w) + ',' + (-h) +
+                 ' L ' +   w + ',' + (-h) +
+                 ' L ' +   w + ',' +   h  +
+                 ' L ' + (-w) + ',' +   h  + ' Z';
+        }
+
+        case 'diamond': {
+          var rx = r * 1.0, ry = r * 1.4;
+          return 'M 0,' + (-ry) +
+                 ' L '  + rx + ',0' +
+                 ' L 0,' + ry +
+                 ' L ' + (-rx) + ',0 Z';
+        }
+
+        case 'star': {
+          var outerR = r * 1.3, innerR = r * 0.5, pts = [];
+          for (var i = 0; i < 10; i++) {
+            var angle = (Math.PI / 5) * i - Math.PI / 2;
+            var rad   = (i % 2 === 0) ? outerR : innerR;
+            pts.push(+(rad * Math.cos(angle)).toFixed(3) + ',' + +(rad * Math.sin(angle)).toFixed(3));
+          }
+          return 'M ' + pts.join(' L ') + ' Z';
+        }
+
+        case 'hexagon': {
+          var pts = [];
+          for (var i = 0; i < 6; i++) {
+            var angle = (Math.PI / 3) * i - Math.PI / 6;
+            pts.push(+(r * 1.1 * Math.cos(angle)).toFixed(3) + ',' + +(r * 1.1 * Math.sin(angle)).toFixed(3));
+          }
+          return 'M ' + pts.join(' L ') + ' Z';
+        }
+
+        case 'pentagon': {
+          var pts = [];
+          for (var i = 0; i < 5; i++) {
+            var angle = (2 * Math.PI / 5) * i - Math.PI / 2;
+            pts.push(+(r * 1.15 * Math.cos(angle)).toFixed(3) + ',' + +(r * 1.15 * Math.sin(angle)).toFixed(3));
+          }
+          return 'M ' + pts.join(' L ') + ' Z';
+        }
+
+        default:
+          return null; // circle or ellipse — caller uses native SVG element
+      }
+    }
+
+    /**
+     * Appends the correct SVG shape child to every node <g>.
+     * All shapes receive the CSS class "node-shape" for uniform selection.
+     *   circle / ellipse  →  native SVG elements positioned via cx/cy in tick
+     *   everything else   →  <path> positioned via transform="translate()" in tick
+     */
+    function appendShape(nodeSelection) {
+      nodeSelection.each(function(d) {
+        var g      = d3.select(this);
+        var marker = (d.node_marker || 'circle').toLowerCase();
+        var r      = parseFloat(d.node_size) || 8;
+        var shape;
+
+        if (marker === 'ellipse') {
+          shape = g.append('ellipse')
+            .attr('class', 'node-shape')
+            .attr('rx', r * 1.6)
+            .attr('ry', r);
+        } else if (marker === 'circle' || shapePathD(marker, r) === null) {
+          shape = g.append('circle')
+            .attr('class', 'node-shape')
+            .attr('r', r);
+        } else {
+          shape = g.append('path')
+            .attr('class', 'node-shape')
+            .attr('d', shapePathD(marker, r));
+        }
+
+        shape
+          .style('fill',         d.node_color)
+          .style('opacity',      d.node_opacity)
+          .style('stroke-width', d.node_size_edge)
+          .style('stroke',       d.node_color_edge);
+      });
+    }
+
+    // ---- 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")
       .attr("width", width)
@@ -129,7 +265,7 @@ function d3graphscript(config = {
         d3.event.preventDefault();
         d.fixed = false;
         // Remove pinned visual cue
-        d3.select(this).select("circle")
+        d3.select(this).select(".node-shape")
           .style("stroke-dasharray", null)
           .style("stroke-width", function(d) { return d.node_size_edge; });
         force.resume();
@@ -137,23 +273,31 @@ function d3graphscript(config = {
     }
     
     {{ CLICK_COMMENT }} node.on('click', color_on_click); // ON CLICK HANDLER
-    
-    
-    node.append("circle")
-      .attr("r", function(d) { return d.node_size; })                 // NODE SIZE
-      .style("fill", function(d) {return d.node_color;})              // NODE-COLOR
-      .style("opacity", function(d) {return d.node_opacity;})         // NODE-OPACITY
-      .style("stroke-width", function(d) {return d.node_size_edge;})  // NODE-EDGE-SIZE
-      .style("stroke", function(d) {return d.node_color_edge;})       // NODE-COLOR-EDGE
+
+    // Append the correct shape per node (circle, ellipse, rect, triangle, etc.)
+    appendShape(node);
     
     // Text in nodes
     node.append("text")
-      .attr("dx", 10)
+      .attr("dx",  function(d) { return config.node_text_inside ? 0 : 10; })
       .attr("dy", ".35em")
-      .text(function(d) {return d.node_name})                               // NODE-TEXT
-      .style("font-size", function(d) {return d.node_fontsize + "px";})     // NODE FONT SIZE
-      .style("fill", function(d) {return d.node_fontcolor;})                // NODE FONT COLOR
-      .style("font-family", "monospace");
+      .attr("text-anchor", function(d) { return config.node_text_inside ? "middle" : "start"; })
+      .text(function(d) { return d.node_name; }) // NODE-TEXT
+      .style("font-size", function(d) {
+        if (config.node_text_inside) {
+          // Auto-shrink font so the label fits within the circle diameter
+          var r = parseFloat(d.node_size) || 8;
+          var label = d.node_name || "";
+          // Approximate: 0.6 * fontsize ≈ char width; fit label in 2*r with some padding
+          var maxFontSize = parseFloat(d.node_fontsize) || 12;
+          var fitSize = Math.min(maxFontSize, (1.8 * r) / Math.max(label.length * 0.6, 1));
+          return Math.max(fitSize, 6) + "px";
+        }
+        return d.node_fontsize + "px"; // NODE FONT SIZE
+      })
+      .style("fill", function(d) {return d.node_fontcolor;}) // NODE FONT COLOR
+      .style("font-family", "monospace")
+      .style("pointer-events", "none");
     
     let showInHover = ["node_tooltip"]; // Tooltip
     node.append("title")
@@ -169,8 +313,20 @@ function d3graphscript(config = {
         .attr("y1", function(d) { return d.source.y; })
         .attr("x2", function(d) { return d.target.x; })
         .attr("y2", function(d) { return d.target.y; });
-      d3.selectAll("circle").attr("cx", function(d) { return d.x; })
-        .attr("cy", function(d) { return d.y; });
+
+      // Position each shape according to its SVG element type:
+      //   circle / ellipse  →  cx / cy attributes
+      //   path              →  transform translate(x, y)
+      d3.selectAll(".node-shape").each(function(d) {
+        var el  = d3.select(this);
+        var tag = this.tagName.toLowerCase();
+        if (tag === 'circle' || tag === 'ellipse') {
+          el.attr("cx", d.x).attr("cy", d.y);
+        } else {
+          el.attr("transform", "translate(" + d.x + "," + d.y + ")");
+        }
+      });
+
       d3.selectAll("text").attr("x", function(d) { return d.x; })
         .attr("y", function(d) { return d.y; })
       linkText.attr("x", function(d) { return (d.source.x + d.target.x) / 2; })  // ADD TEXT ON THE EDGES (PART 2/2)
@@ -263,25 +419,48 @@ function d3graphscript(config = {
 
   // COLOR ON CLICK
   function color_on_click() {
-    // Give the original color back to all nodes
+    // Reset all nodes to their original styles
     d3.selectAll(".node")
-    .select("circle")
+    .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; })
-    .attr("r", function(d) { return d.node_size; })
-    ;
+    .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; });
 
-    // Set the color on the clicked node
-    d3.select(this).select("circle")
-    .style("fill", {{ CLICK_FILL }})
-    .style("stroke", "{{ CLICK_STROKE }}")
-    .style("stroke-width", {{ CLICK_STROKEW }})
-    .attr("r", function(d) { return d.node_size*{{ CLICK_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));
+      });
+    }
+  }
 
 
 

{d3graph-2.7.2 → d3graph-2.8.0}/d3graph/d3js/index.html.j2

@@ -128,7 +128,8 @@
                 collision: {{ collision }},
                 link_tension: {{ link_tension }},
                 sticky: {{ sticky | lower }},
-                background_color: '{{ background_color }}'
+                background_color: '{{ background_color }}',
+                node_text_inside: {{ node_text_inside | lower }},
             })
         });
 

{d3graph-2.7.2 → d3graph-2.8.0}/d3graph/d3js/style.css

@@ -18,8 +18,13 @@ h3 {
   font-family: "Helvetica";
 }
 
-/* Sticky / fixed node indicator: dashed outline ring */
-circle.node-fixed {
+/* 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;
 }

{d3graph-2.7.2 → d3graph-2.8.0}/d3graph/examples.py

@@ -1,3 +1,27 @@
+from d3graph import d3graph, import_example, vec2adjmat
+
+d3 = d3graph()
+adjmat, df = import_example('karate')
+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")
+
+# %%
+from d3graph import d3graph, import_example
+
+d3 = d3graph()
+adjmat, df = import_example('karate')
+d3.graph(adjmat)
+
+# Set shape for node
+d3.set_node_properties(marker='hexagon', color=df['label'].values, cmap='Set1')
+d3.show(filepath="d:/repos/erdogant.github.io/docs/d3graph/d3graph/node_shape.html")
+
+# %%
+
 from d3graph import d3graph, import_example, get_hex_color
 
 # Initialize
@@ -44,10 +68,6 @@ d3.show()
 d3 = d3graph(adjmat, sticky=False)
 d3.show()
 
-# %%
-
-
-
 
 # %%
 
@@ -97,7 +117,7 @@ adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'
 d3.graph(adjmat)
 
 # Set Node properties
-d3.set_node_properties(edge_color='#000000', cmap='Blues', minmax=[5, 13], fontcolor='#808080')
+d3.set_node_properties(marker='square', edge_color='#000000', cmap='Blues', minmax=[5, 13], fontcolor='#808080')
 # Show the graph
 # d3.show()
 
@@ -106,6 +126,7 @@ d3.set_node_properties(edge_color='#000000', cmap='Blues', minmax=[5, 13], fontc
 # Set edge properties
 d3.set_edge_properties(directed=True, marker_end='arrow')
 d3.show()
+d3.show(node_text_inside=True)
 
 
 
@@ -207,6 +228,9 @@ from d3graph import d3graph, adjmat2vec, vec2adjmat
 
 #%%
 from d3graph import check_logger
+import numpy as np
+import pandas as pd
+
 check_logger(verbose='debug')
 check_logger(verbose='info')
 check_logger(verbose='info')

{d3graph-2.7.2 → d3graph-2.8.0/d3graph.egg-info}/PKG-INFO

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