d3graph 2.7.0__tar.gz → 2.7.2__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.7.0
+Version: 2.7.2
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause
@@ -24,7 +24,7 @@ Requires-Dist: networkx>2
 Requires-Dist: ismember
 Requires-Dist: jinja2
 Requires-Dist: packaging
-Requires-Dist: markupsafe==2.0.1
+Requires-Dist: markupsafe
 Requires-Dist: python-louvain
 Requires-Dist: datazets
 Dynamic: license-file

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

@@ -11,11 +11,13 @@ from d3graph.d3graph import (
     adjmat2dict,
     data_checks,
     check_logger,
+    get_hex_color,
+    import_example,
     )
 
 __author__ = 'Erdogan Tasksen'
 __email__ = 'erdogant@gmail.com'
-__version__ = '2.7.0'
+__version__ = '2.7.2'
 
 # Setup root logger
 _logger = logging.getLogger('d3graph')
@@ -39,13 +41,13 @@ The ouput is a html file that is interactive and stand alone.
 
 Examples
 --------
->>> from d3graph import d3graph, vec2adjmat
+>>> from d3graph import d3graph, vec2adjmat, import_example
 >>>
 >>> # Initialize
 >>> d3 = d3graph()
 >>>
 >>> # Load karate example
->>> df = d3.import_example('energy')
+>>> df = import_example('energy')
 >>> adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
 >>>
 >>> # Initialize

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

@@ -21,6 +21,7 @@ import colourmap as cm
 import networkx as nx
 import numpy as np
 import pandas as pd
+from pandas.arrays import StringArray
 from ismember import ismember
 from jinja2 import Environment, PackageLoader
 from packaging import version
@@ -192,7 +193,8 @@ class d3graph:
         if sticky is not None:
             self.config['sticky'] = sticky
         # if self.config.get('filepath', None) != 'd3graph.html':
-        self.config['filepath'] = self.set_path(filepath)
+        if filepath is not None or self.config.get('filepath') is None:
+            self.set_path(filepath)
 
         # Create dataframe from co-occurrence matrix
         self.G = make_graph(self.node_properties, self.edge_properties)
@@ -480,13 +482,13 @@ class d3graph:
         nodecount = self.adjmat.shape[0]
         group = np.zeros_like(node_names).astype(int)
         # Check validity of color.
-        _check_hex_color(color, nodecount)
+        color = _check_hex_color(color, nodecount, cmap=cmap)
         # Store in config
         self.config['cmap'] = 'Paired' if cmap is None else cmap
         self.config['node_scaler'] = scaler
 
         # ############ Set node label #############
-        if isinstance(label, list):
+        if isinstance(label, (list, np.ndarray, pd.Series, pd.Series, StringArray)):
             label = np.array(label).astype(str)
         elif 'numpy' in str(type(label)):
             pass
@@ -499,7 +501,7 @@ class d3graph:
         if len(label) != nodecount: raise ValueError("[label] must be of same length as the number of nodes")
 
         # ############ tooltip text #############
-        if isinstance(tooltip, list):
+        if isinstance(tooltip, (list, np.ndarray, pd.Series, StringArray)):
             tooltip = np.array(tooltip).astype(str)
         elif 'numpy' in str(type(tooltip)):
             pass
@@ -512,7 +514,7 @@ class d3graph:
         if len(tooltip) != nodecount: raise ValueError("[tooltip text] must be of same length as the number of nodes")
 
         # ############ Set node color #############
-        if isinstance(color, list) and len(color) == nodecount:
+        if isinstance(color, (list, np.ndarray, pd.Series, StringArray)) and len(color) == nodecount:
             color = np.array(color)
         elif 'numpy' in str(type(color)):
             color = _get_hexcolor(color, cmap=self.config['cmap'])
@@ -542,7 +544,7 @@ class d3graph:
         fontsize = _set_node_fontsize(self, fontsize, nodecount)
 
         # ########## Set node color edge #############
-        if isinstance(edge_color, list):
+        if isinstance(edge_color, (list, np.ndarray, pd.Series, StringArray)):
             edge_color = np.array(edge_color)
         elif 'numpy' in str(type(edge_color)):
             pass
@@ -574,7 +576,7 @@ class d3graph:
         marker = _set_marker(self, marker, nodecount)
 
         # ############ Set node edge size #############
-        if isinstance(edge_size, list):
+        if isinstance(edge_size, (list, np.ndarray, pd.Series, StringArray)):
             edge_size = np.array(edge_size)
         elif 'numpy' in str(type(edge_size)):
             pass
@@ -597,16 +599,16 @@ class d3graph:
                                           'marker': marker[i],
                                           'label': label[i],
                                           'tooltip': tooltip[i],
-                                          'color': color[i].astype(str),
-                                          'opacity': opacity[i].astype(str),
-                                          'fontcolor': fontcolor[i].astype(str),
-                                          'fontsize': fontsize[i].astype(int),
+                                          'color': str(color[i]),
+                                          'opacity': str(opacity[i]),
+                                          'fontcolor': str(fontcolor[i]),
+                                          'fontsize': str(fontsize[i]),
                                           'size': size[i],
                                           'edge_size': edge_size[i],
                                           'edge_color': edge_color[i],
                                           'group': group[i]}
 
-        logger.info('Number of unique nodes: %.0d', len(self.node_properties.keys()))
+        logger.info(f'Number of unique nodes: {len(self.node_properties.keys())}')
 
     # compute clusters
     def get_cluster_color(self, node_names: list = None, color: str = '#000080') -> tuple:
@@ -713,13 +715,13 @@ class d3graph:
 
         Examples
         --------
-        >>> from d3graph import d3graph
+        >>> from d3graph import d3graph, import_example
         >>>
         >>> # Initialize
         >>> d3 = d3graph()
         >>>
         >>> # Load karate example
-        >>> adjmat, df = d3.import_example('karate')
+        >>> adjmat, df = import_example('karate')
         >>>
         >>> # Initialize
         >>> d3.graph(adjmat)
@@ -863,7 +865,8 @@ class d3graph:
         os.makedirs(dirname, exist_ok=True)
         filepath = os.path.abspath(os.path.join(dirname, filename))
         logger.debug(f'filepath is set to [{filepath}]')
-        return Path(filepath)
+        # Set to config
+        self.config['filepath'] = Path(filepath)
 
     def import_example(self, data='energy', url=None, sep=','):
         """Import example dataset from github source.
@@ -887,38 +890,7 @@ class d3graph:
             * https://github.com/erdogant/datazets
 
         """
-        if data == 'small':
-            source = ['node A', 'node F', 'node B', 'node B', 'node B', 'node A', 'node C', 'node Z']
-            target = ['node F', 'node B', 'node J', 'node F', 'node F', 'node M', 'node M', 'node A']
-            weight = [5.56, 0.5, 0.64, 0.23, 0.9, 3.28, 0.5, 0.45]
-            adjmat = vec2adjmat(source, target, weight=weight)
-            return adjmat, None
-        elif data == 'bigbang':
-            df = dz.get(data=data)
-            adjmat = vec2adjmat(df['source'], df['target'], weight=df['weight'])
-            return adjmat
-        elif data == 'karate':
-            import scipy
-            if version.parse(scipy.__version__) < version.parse('1.8.0'):
-                raise ImportError(
-                    '[d3graph] >Error: This release requires scipy version >= 1.8.0. Try: pip install -U scipy>=1.8.0')
-
-            G = nx.karate_club_graph()
-            adjmat = nx.adjacency_matrix(G).todense()
-            adjmat = pd.DataFrame(index=range(adjmat.shape[0]), data=adjmat, columns=range(adjmat.shape[0]))
-            adjmat.columns = adjmat.columns.astype(str)
-            adjmat.index = adjmat.index.astype(str)
-            adjmat.iloc[3, 4] = 5
-            adjmat.iloc[4, 5] = 6
-            adjmat.iloc[5, 6] = 7
-
-            df = pd.DataFrame(index=adjmat.index)
-            df['degree'] = np.array([*G.degree()])[:, 1]
-            df['label'] = [G.nodes[i]['club'] for i in range(len(G.nodes))]
-
-            return adjmat, df
-        else:
-            return dz.get(data=data, url=url, sep=sep)
+        return import_example(data=data, url=url, sep=sep)
 
 
 # %%
@@ -1427,6 +1399,8 @@ def _get_hexcolor(label, cmap: str = 'Paired'):
 
     return label
 
+def get_hex_color(labels, cmap='Set1', opaque_type='per_class', gradient=None):
+    return cm.fromlist(labels, scheme='hex', opaque_type=opaque_type, gradient=gradient)
 
 # %% Do checks
 def library_compatibility_checks() -> None:
@@ -1623,15 +1597,21 @@ def adjmat2vec(adjmat, min_weight: float = 1.0) -> pd.DataFrame:
     return adjmat
 
 
-def _check_hex_color(color, n=None):
-    if isinstance(color, str) and len(color) != 7: raise ValueError(
-        'Input parameter [color] has wrong format. Must be like color="#000000"')
-    if isinstance(color, list) and len(color) == 0: raise ValueError(
-        'Input parameter [color] has wrong format and length. Must be like: color=["#000000", "...", "#000000"]')
-    if isinstance(color, list) and (not np.all(list(map(lambda x: len(x) == 7, color)))): raise ValueError(
-        '[color] contains incorrect length of hex-color! Hex must be of length 7: ["#000000", "#000000", etc]')
-    if (n is not None) and isinstance(color, list) and len(color) != n:
-        raise ValueError(f'Input parameter [color] has wrong length. Must be of length: {str(n)}')
+def _check_hex_color(color, n=None, cmap='Set1'):
+    if isinstance(color, str) and len(color) != 7:
+        logger.warning('Input parameter [color] has wrong format. Must be like color="#000000" <auto-fixing>')
+        return get_hex_color(color, cmap=cmap)[0]
+    if isinstance(color, (list, np.ndarray, pd.Series, pd.Series, StringArray)) and len(color) == 0:
+        logger.warning('Input parameter [color] has wrong format and length. Must be like: color=["#000000", "...", "#000000"] <auto-fixing>')
+        return get_hex_color(color, cmap=cmap)[0]
+    if isinstance(color, (list, np.ndarray, pd.Series, pd.Series, StringArray)) and (not np.all(list(map(lambda x: len(x) == 7, color)))):
+        logger.warning('[color] contains incorrect hex-colors. Hex must be of length 7: ["#000000", "#000000", etc] <auto-fixing>')
+        return get_hex_color(color, cmap=cmap)[0]
+    if (n is not None) and isinstance(color, (list, np.ndarray, pd.Series, pd.Series, StringArray)) and len(color) != n:
+        logger.warning(f'Input parameter [color] has wrong length. Must be of length: {str(n)} <auto-fixing>')
+        return get_hex_color(color, cmap=cmap)[0]
+    # Return original input
+    return color
 
 
 def _set_opacity(self, opacity, nodecount, node_names):
@@ -1755,6 +1735,61 @@ def _set_node_fontcolor(self, fontcolor, color, node_names, nodecount):
     # return
     return fontcolor
 
+def import_example(data='energy', url=None, sep=','):
+    """Import example dataset from github source.
+
+    Import one of the few datasets from github source or specify your own download url link.
+
+    Parameters
+    ----------
+    data : str
+        Name of datasets: 'sprinkler', 'titanic', 'student', 'fifa', 'cancer', 'waterpump', 'retail'
+    url : str
+        url link to to dataset.
+
+    Returns
+    -------
+    pd.DataFrame()
+        Dataset containing mixed features.
+
+    References
+    ----------
+        * https://github.com/erdogant/datazets
+
+    """
+    if data == 'small':
+        source = ['node A', 'node F', 'node B', 'node B', 'node B', 'node A', 'node C', 'node Z']
+        target = ['node F', 'node B', 'node J', 'node F', 'node F', 'node M', 'node M', 'node A']
+        weight = [5.56, 0.5, 0.64, 0.23, 0.9, 3.28, 0.5, 0.45]
+        adjmat = vec2adjmat(source, target, weight=weight)
+        return adjmat, None
+    elif data == 'bigbang':
+        df = dz.get(data=data)
+        adjmat = vec2adjmat(df['source'], df['target'], weight=df['weight'])
+        return adjmat
+    elif data == 'karate':
+        import scipy
+        if version.parse(scipy.__version__) < version.parse('1.8.0'):
+            raise ImportError(
+                '[d3graph] >Error: This release requires scipy version >= 1.8.0. Try: pip install -U scipy>=1.8.0')
+
+        G = nx.karate_club_graph()
+        adjmat = nx.adjacency_matrix(G).todense()
+        adjmat = pd.DataFrame(index=range(adjmat.shape[0]), data=adjmat, columns=range(adjmat.shape[0]))
+        adjmat.columns = adjmat.columns.astype(str)
+        adjmat.index = adjmat.index.astype(str)
+        adjmat.iloc[3, 4] = 5
+        adjmat.iloc[4, 5] = 6
+        adjmat.iloc[5, 6] = 7
+
+        df = pd.DataFrame(index=adjmat.index)
+        df['degree'] = np.array([*G.degree()])[:, 1]
+        df['label'] = [G.nodes[i]['club'] for i in range(len(G.nodes))]
+
+        return adjmat, df
+    else:
+        return dz.get(data=data, url=url, sep=sep)
+
 
 def get_support(support):
     """Support."""

d3graph-2.7.2/d3graph/d3js/d3graphscript.js

@@ -0,0 +1,361 @@
+function d3graphscript(config = {
+    // Default values
+    width: 800,
+    height: 600,
+    charge: -250,
+    distance: 0,
+    directed: false,
+    collision: 0.5,
+    link_tension: 1,
+    sticky: false,
+    background_color: '#FFFFFF'
+    }) {
+    
+    //Constants for the SVG
+    var width = config.width;
+    var height = config.height;
+    var background_color = config.background_color || '#FFFFFF';
+    var sticky = config.sticky || false;
+    
+    // Set the body background color
+    document.body.style.backgroundColor = background_color;
+    
+    //Set up the colour scale
+    var color = d3.scale.category20();
+    
+    var force = d3.layout.force()
+      .charge(config.charge)
+      .linkDistance((d) => d.edge_distance || config.distance)
+      //.linkDistance((d) => config.distance > 0 ? config.distance : d.edge_weight)
+      .linkStrength(config.link_tension !== undefined ? config.link_tension : 1)
+      .size([width, height]);
+    
+    // ---- DRAGGING ----
+    // Sticky mode: dragstart fixes the node so the simulation stops pulling it.
+    //   dragend keeps it pinned (dashed stroke indicator).
+    //   Right-click a pinned node to release it back into the simulation.
+    // Normal mode: standard free-drag behaviour is preserved.
+    
+    function dragstarted(d) {
+      d3.event.sourceEvent.stopPropagation();
+      d3.select(this).classed("dragging", true);
+      if (sticky) {
+        d.fixed = true;
+        force.start();
+      }
+    }
+    
+    function dragged(d) {
+      if (sticky) {
+        d.x = d.px = d3.event.x;
+        d.y = d.py = d3.event.y;
+      } else {
+        d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
+      }
+    }
+    
+    function dragended(d) {
+      d3.select(this).classed("dragging", false);
+      if (sticky) {
+        // Keep the node fixed and apply a visual "pinned" cue (dashed border)
+        d.fixed = true;
+        d3.select(this).select("circle")
+          .style("stroke-dasharray", "4,2")
+          .style("stroke-width", function(d) { return Math.max(parseFloat(d.node_size_edge) || 1, 2); });
+      }
+    }
+    
+    var drag = force.drag()
+      .origin(function(d) { return d; })
+      .on("dragstart", dragstarted)
+      .on("drag", dragged)
+      .on("dragend", dragended);
+    
+    // ---- END DRAGGING ----
+    
+    //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)
+      .attr("height", height)
+      .style("background-color", background_color)
+      .call(d3.behavior.zoom().on("zoom", function () { svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") }))
+      .on("dblclick.zoom", null)
+      .append("g")
+    
+    graphRec = JSON.parse(JSON.stringify(graph));
+    
+    //Creates the graph data structure out of the json data
+    force.nodes(graph.nodes)
+      .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; });
+    
+    //Do the same with the circles for the nodes
+    var node = svg.selectAll(".node")
+      .data(graph.nodes)
+      .enter().append("g")
+      .attr("class", "node")
+      .call(drag)
+      .on('dblclick', connectedNodes); // HIGHLIGHT ON/OFF
+    
+    // Right-click handler: release a pinned node back into the simulation (sticky mode only)
+    if (sticky) {
+      node.on('contextmenu', function(d) {
+        d3.event.preventDefault();
+        d.fixed = false;
+        // Remove pinned visual cue
+        d3.select(this).select("circle")
+          .style("stroke-dasharray", null)
+          .style("stroke-width", function(d) { return d.node_size_edge; });
+        force.resume();
+      });
+    }
+    
+    {{ 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
+    
+    // Text in nodes
+    node.append("text")
+      .attr("dx", 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");
+    
+    let showInHover = ["node_tooltip"]; // Tooltip
+    node.append("title")
+        .text((d) => Object.keys(d)
+            .filter((key) => showInHover.indexOf(key) !== -1)
+            .map((key) => `${d[key]}`)
+            .join('\n')
+        )
+    
+    //Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
+    force.on("tick", function() {
+      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; });
+      d3.selectAll("circle").attr("cx", function(d) { return d.x; })
+        .attr("cy", function(d) { return 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)
+        .attr("y", function(d) { return (d.source.y + d.target.y) / 2; })
+        .attr("text-anchor", "middle");
+    
+      node.each(collide(config.collision)); //COLLISION DETECTION. High means a big fight to get untouchable nodes (default=0.5)
+
+  });
+
+  // --------- MARKER FOR EDGE ENDINGS -----------
+
+  var data_marker = [
+    { id: 0, name: 'circle', path: 'M 0, 0  m -5, 0  a 5,5 0 1,0 10,0  a 5,5 0 1,0 -10,0', viewbox: '-6 -6 12 12' }
+  , { id: 1, name: 'square', path: 'M 0,0 m -5,-5 L 5,-5 L 5,5 L -5,5 Z', viewbox: '-5 -5 10 10' }
+  , { id: 2, name: 'arrow', path: 'M 0,0 m -5,-5 L 5,0 L -5,5 Z', viewbox: '-5 -5 10 10' }
+  , { id: 3, name: 'stub', path: 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z', viewbox: '-1 -5 2 10' }
+  ]
+
+  svg.append("defs").selectAll("marker")
+    .data(data_marker)
+    .enter()
+    .append('svg:marker')
+      .attr('id', function(d){ return 'marker_' + d.name})
+      .attr('markerHeight', 10)
+      .attr('markerWidth', 10)
+      .attr("markerUnits", "userSpaceOnUse")                   // Fix marker width
+      .attr('orient', 'auto')
+      .attr('refX', 15)                                        // Offset marker-end
+      .attr('refY', 0)
+      .attr('viewBox', function(d){ return d.viewbox })
+      .append('svg:path')
+        .attr('d', function(d){ return d.path })               // Marker type
+        .style("fill", '#808080')                              // Marker color
+        .style("stroke", '#808080')                            // Marker edge-color
+        .style("opacity", 0.95)                                // Marker opacity
+        .style("stroke-width", 1);                             // Marker edge thickness
+
+  // --------- END MARKER -----------
+
+
+  // collision detection
+
+  var padding = 1, // separation between circles
+    radius = 8;
+
+  function collide(alpha) {
+    var quadtree = d3.geom.quadtree(graph.nodes);
+    return function(d) {
+      var rb = 2 * radius + padding,
+        nx1 = d.x - rb,
+        nx2 = d.x + rb,
+        ny1 = d.y - rb,
+        ny2 = d.y + rb;
+      quadtree.visit(function(quad, x1, y1, x2, y2) {
+        if (quad.point && (quad.point !== d)) {
+          var x = d.x - quad.point.x,
+            y = d.y - quad.point.y,
+            l = Math.sqrt(x * x + y * y);
+          if (l < rb) {
+            l = (l - rb) / l * alpha;
+            d.x -= x *= l;
+            d.y -= y *= l;
+            quad.point.x += x;
+            quad.point.y += y;
+          }
+        }
+        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
+      });
+    };
+  }
+  // collision detection end
+
+
+  //Toggle stores whether the highlighting is on
+  var toggle = 0;
+  //Create an array logging what is connected to what
+  var linkedByIndex = {};
+  for (i = 0; i < graph.nodes.length; i++) {
+    linkedByIndex[i + "," + i] = 1;
+  };
+  graph.links.forEach(function(d) {
+    linkedByIndex[d.source.index + "," + d.target.index] = 1;
+  });
+  //This function looks up whether a pair are neighbours
+  function neighboring(a, b) {
+    return linkedByIndex[a.index + "," + b.index];
+  }
+
+
+  // COLOR ON CLICK
+  function color_on_click() {
+    // Give the original color back to all nodes
+    d3.selectAll(".node")
+    .select("circle")
+    .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; })
+    ;
+
+    // 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 }}; })
+    ;}
+
+
+
+  function connectedNodes() {
+    if (toggle == 0) {
+      //Reduce the opacity of all but the neighbouring nodes
+      d = d3.select(this).node().__data__;
+      node.style("opacity", function(o) {
+        return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
+      });
+      link.style("opacity", function(o) {
+        return d.index == o.source.index | d.index == o.target.index ? 1 : 0.1;
+      });
+      toggle = 1;
+    } else {
+      //Put them back to opacity=1
+      node.style("opacity", 0.95);
+      link.style("opacity", 1);
+
+      toggle = 0;
+    }
+  }
+
+
+  //adjust threshold
+  function threshold() {
+    let thresh = this.value;
+
+    graph.links.splice(0, graph.links.length);
+    linkText = linkText.data([]);   // CLEAR EDGE-LABELS: Clear the linkText selection
+    linkText.exit().remove();       // CLEAR EDGE-LABELS: Clear the linkText elements from the DOM
+
+    for (var i = 0; i < graphRec.links.length; i++) {
+      if (graphRec.links[i].edge_weight > thresh) {
+        graph.links.push(graphRec.links[i]);
+      }
+    }
+    restart();
+  }
+
+  // Set the initial value of the slider to the user-defined threshold
+  document.getElementById('thresholdSlider').value = {{ SET_SLIDER }};
+  // Call the threshold function to set the network state
+  threshold.call(document.getElementById('thresholdSlider'));
+
+  d3.select("#thresholdSlider").on("change", threshold);
+
+  //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; });
+
+    node = node.data(graph.nodes);
+    node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
+    force.start();
+  }
+
+}

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

@@ -1,3 +1,57 @@
+from d3graph import d3graph, import_example, get_hex_color
+
+# Initialize
+d3 = d3graph()
+
+# Load karate example
+adjmat, df = import_example('karate')
+
+d3.graph(adjmat)
+
+# Node properties
+d3.set_node_properties(label=df['label'].values, color=df['label'].values, size=df['degree'].values, edge_size=df['degree'].values, cmap='Set1')
+
+colors, labels = get_hex_color(df['label'].values)
+colors=df['label'].values
+d3.set_node_properties(label=df['label'].values, color=colors, size=df['degree'].values, edge_size=df['degree'].values, cmap='Set1')
+
+# Edge properties
+d3.set_edge_properties(directed=True)
+
+# Plot
+d3.show()
+
+
+# %% SET PATH ISSUE https://github.com/erdogant/d3graph/issues/42
+from pathlib import Path
+from d3graph import d3graph, vec2adjmat, import_example
+output_path = Path.cwd() / 'd3graph.html'
+
+# Load example data
+df = import_example('stormofswords')
+adjmat = vec2adjmat(source=df['source'], target=df['target'], weight=df['weight'])
+
+
+# sticky=True (default) — drag to pin, right-click to release
+d3 = d3graph(sticky=True)
+d3.set_path(output_path)
+d3.config['filepath']
+
+d3.graph(adjmat)
+d3.show()
+
+# sticky=False — classic spring-back behaviour
+d3 = d3graph(adjmat, sticky=False)
+d3.show()
+
+# %%
+
+
+
+
+# %%
+
+
 # Import library
 from d3graph import d3graph, vec2adjmat
 
@@ -464,6 +518,7 @@ d3.set_node_properties(color=adjmat.columns.values, size=[10, 20, 10, 10, 15, 10
 d3.node_properties['Penny']['tooltip']='test\ntest2'
 d3.show(filepath='c:\\temp\\network3.html')
 
+
 # %% Checks with cluster label
 from d3graph import d3graph
 

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3graph
-Version: 2.7.0
+Version: 2.7.2
 Summary: Python package to create interactive network based on d3js.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: BSD-3-Clause
@@ -24,7 +24,7 @@ Requires-Dist: networkx>2
 Requires-Dist: ismember
 Requires-Dist: jinja2
 Requires-Dist: packaging
-Requires-Dist: markupsafe==2.0.1
+Requires-Dist: markupsafe
 Requires-Dist: python-louvain
 Requires-Dist: datazets
 Dynamic: license-file

{d3graph-2.7.0 → d3graph-2.7.2}/d3graph.egg-info/requires.txt

@@ -5,6 +5,6 @@ networkx>2
 ismember
 jinja2
 packaging
-markupsafe==2.0.1
+markupsafe
 python-louvain
 datazets

{d3graph-2.7.0 → d3graph-2.7.2}/pyproject.toml

@@ -41,7 +41,7 @@ dependencies = [
     'ismember',
     'jinja2',
     'packaging',
-    'markupsafe==2.0.1',
+    'markupsafe',
     'python-louvain',
     'datazets',
     ]

d3graph-2.7.0/d3graph/d3js/d3graphscript.js

@@ -1,361 +0,0 @@
-function d3graphscript(config = {
-    // Default values
-    width: 800,
-    height: 600,
-    charge: -250,
-    distance: 0,
-    directed: false,
-    collision: 0.5,
-    link_tension: 1,
-    sticky: false,
-    background_color: '#FFFFFF'
-    }) {
-
-  //Constants for the SVG
-  var width = config.width;
-  var height = config.height;
-  var background_color = config.background_color || '#FFFFFF';
-  var sticky = config.sticky || false;
-
-  // Set the body background color
-  document.body.style.backgroundColor = background_color;
-
-  //Set up the colour scale
-  var color = d3.scale.category20();
-
-  var force = d3.layout.force()
-    .charge(config.charge)
-    .linkDistance((d) => d.edge_distance || config.distance)
-    //.linkDistance((d) => config.distance > 0 ? config.distance : d.edge_weight)
-    .linkStrength(config.link_tension !== undefined ? config.link_tension : 1)
-    .size([width, height]);
-
-  // ---- DRAGGING ----
-  // Sticky mode: dragstart fixes the node so the simulation stops pulling it.
-  //   dragend keeps it pinned (dashed stroke indicator).
-  //   Right-click a pinned node to release it back into the simulation.
-  // Normal mode: standard free-drag behaviour is preserved.
-
-  function dragstarted(d) {
-    d3.event.sourceEvent.stopPropagation();
-    d3.select(this).classed("dragging", true);
-    if (sticky) {
-      d.fixed = true;
-      force.start();
-    }
-  }
-
-  function dragged(d) {
-    if (sticky) {
-      d.x = d.px = d3.event.x;
-      d.y = d.py = d3.event.y;
-    } else {
-      d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
-    }
-  }
-
-  function dragended(d) {
-    d3.select(this).classed("dragging", false);
-    if (sticky) {
-      // Keep the node fixed and apply a visual "pinned" cue (dashed border)
-      d.fixed = true;
-      d3.select(this).select("circle")
-        .style("stroke-dasharray", "4,2")
-        .style("stroke-width", function(d) { return Math.max(parseFloat(d.node_size_edge) || 1, 2); });
-    }
-  }
-
-  var drag = force.drag()
-    .origin(function(d) { return d; })
-    .on("dragstart", dragstarted)
-    .on("drag", dragged)
-    .on("dragend", dragended);
-
-  // ---- END DRAGGING ----
-
-  //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)
-    .attr("height", height)
-    .style("background-color", background_color)
-    .call(d3.behavior.zoom().on("zoom", function () { svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") }))
-    .on("dblclick.zoom", null)
-    .append("g")
-
-  graphRec = JSON.parse(JSON.stringify(graph));
-
-  //Creates the graph data structure out of the json data
-  force.nodes(graph.nodes)
-    .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; });
-
-  //Do the same with the circles for the nodes
-  var node = svg.selectAll(".node")
-    .data(graph.nodes)
-    .enter().append("g")
-    .attr("class", "node")
-    .call(drag)
-    .on('dblclick', connectedNodes); // HIGHLIGHT ON/OFF
-
-  // Right-click handler: release a pinned node back into the simulation (sticky mode only)
-  if (sticky) {
-    node.on('contextmenu', function(d) {
-      d3.event.preventDefault();
-      d.fixed = false;
-      // Remove pinned visual cue
-      d3.select(this).select("circle")
-        .style("stroke-dasharray", null)
-        .style("stroke-width", function(d) { return d.node_size_edge; });
-      force.resume();
-    });
-  }
-
-  {{ 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
-
-  // Text in nodes
-  node.append("text")
-    .attr("dx", 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");
-
-  let showInHover = ["node_tooltip"]; // Tooltip
-  node.append("title")
-      .text((d) => Object.keys(d)
-          .filter((key) => showInHover.indexOf(key) !== -1)
-          .map((key) => `${d[key]}`)
-          .join('\n')
-      )
-
-  //Now we are giving the SVGs co-ordinates - the force layout is generating the co-ordinates which this code is using to update the attributes of the SVG elements
-  force.on("tick", function() {
-    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; });
-    d3.selectAll("circle").attr("cx", function(d) { return d.x; })
-      .attr("cy", function(d) { return 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)
-      .attr("y", function(d) { return (d.source.y + d.target.y) / 2; })
-      .attr("text-anchor", "middle");
-
-    node.each(collide(config.collision)); //COLLISION DETECTION. High means a big fight to get untouchable nodes (default=0.5)
-
-  });
-
-  // --------- MARKER FOR EDGE ENDINGS -----------
-
-  var data_marker = [
-    { id: 0, name: 'circle', path: 'M 0, 0  m -5, 0  a 5,5 0 1,0 10,0  a 5,5 0 1,0 -10,0', viewbox: '-6 -6 12 12' }
-  , { id: 1, name: 'square', path: 'M 0,0 m -5,-5 L 5,-5 L 5,5 L -5,5 Z', viewbox: '-5 -5 10 10' }
-  , { id: 2, name: 'arrow', path: 'M 0,0 m -5,-5 L 5,0 L -5,5 Z', viewbox: '-5 -5 10 10' }
-  , { id: 3, name: 'stub', path: 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z', viewbox: '-1 -5 2 10' }
-  ]
-
-  svg.append("defs").selectAll("marker")
-    .data(data_marker)
-    .enter()
-    .append('svg:marker')
-      .attr('id', function(d){ return 'marker_' + d.name})
-      .attr('markerHeight', 10)
-      .attr('markerWidth', 10)
-      .attr("markerUnits", "userSpaceOnUse")                   // Fix marker width
-      .attr('orient', 'auto')
-      .attr('refX', 15)                                        // Offset marker-end
-      .attr('refY', 0)
-      .attr('viewBox', function(d){ return d.viewbox })
-      .append('svg:path')
-        .attr('d', function(d){ return d.path })               // Marker type
-        .style("fill", '#808080')                              // Marker color
-        .style("stroke", '#808080')                            // Marker edge-color
-        .style("opacity", 0.95)                                // Marker opacity
-        .style("stroke-width", 1);                             // Marker edge thickness
-
-  // --------- END MARKER -----------
-
-
-  // collision detection
-
-  var padding = 1, // separation between circles
-    radius = 8;
-
-  function collide(alpha) {
-    var quadtree = d3.geom.quadtree(graph.nodes);
-    return function(d) {
-      var rb = 2 * radius + padding,
-        nx1 = d.x - rb,
-        nx2 = d.x + rb,
-        ny1 = d.y - rb,
-        ny2 = d.y + rb;
-      quadtree.visit(function(quad, x1, y1, x2, y2) {
-        if (quad.point && (quad.point !== d)) {
-          var x = d.x - quad.point.x,
-            y = d.y - quad.point.y,
-            l = Math.sqrt(x * x + y * y);
-          if (l < rb) {
-            l = (l - rb) / l * alpha;
-            d.x -= x *= l;
-            d.y -= y *= l;
-            quad.point.x += x;
-            quad.point.y += y;
-          }
-        }
-        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
-      });
-    };
-  }
-  // collision detection end
-
-
-  //Toggle stores whether the highlighting is on
-  var toggle = 0;
-  //Create an array logging what is connected to what
-  var linkedByIndex = {};
-  for (i = 0; i < graph.nodes.length; i++) {
-    linkedByIndex[i + "," + i] = 1;
-  };
-  graph.links.forEach(function(d) {
-    linkedByIndex[d.source.index + "," + d.target.index] = 1;
-  });
-  //This function looks up whether a pair are neighbours
-  function neighboring(a, b) {
-    return linkedByIndex[a.index + "," + b.index];
-  }
-
-
-  // COLOR ON CLICK
-  function color_on_click() {
-    // Give the original color back to all nodes
-    d3.selectAll(".node")
-    .select("circle")
-    .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; })
-    ;
-
-    // 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 }}; })
-    ;}
-
-
-
-  function connectedNodes() {
-    if (toggle == 0) {
-      //Reduce the opacity of all but the neighbouring nodes
-      d = d3.select(this).node().__data__;
-      node.style("opacity", function(o) {
-        return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
-      });
-      link.style("opacity", function(o) {
-        return d.index == o.source.index | d.index == o.target.index ? 1 : 0.1;
-      });
-      toggle = 1;
-    } else {
-      //Put them back to opacity=1
-      node.style("opacity", 0.95);
-      link.style("opacity", 1);
-
-      toggle = 0;
-    }
-  }
-
-
-  //adjust threshold
-  function threshold() {
-    let thresh = this.value;
-
-    graph.links.splice(0, graph.links.length);
-    linkText = linkText.data([]);   // CLEAR EDGE-LABELS: Clear the linkText selection
-    linkText.exit().remove();       // CLEAR EDGE-LABELS: Clear the linkText elements from the DOM
-
-    for (var i = 0; i < graphRec.links.length; i++) {
-      if (graphRec.links[i].edge_weight > thresh) {
-        graph.links.push(graphRec.links[i]);
-      }
-    }
-    restart();
-  }
-
-  // Set the initial value of the slider to the user-defined threshold
-  document.getElementById('thresholdSlider').value = {{ SET_SLIDER }};
-  // Call the threshold function to set the network state
-  threshold.call(document.getElementById('thresholdSlider'));
-
-  d3.select("#thresholdSlider").on("change", threshold);
-
-  //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; });
-
-    node = node.data(graph.nodes);
-    node.enter().insert("circle", ".cursor").attr("class", "node").attr("r", 5).call(force.drag);
-    force.start();
-  }
-
-}