chord 0.8.1 - Docs.rs

<!DOCTYPE html>
<html>
  <head>
    <!--Chord - Python wrapper around d3-chord

    This package enables the generation of Chord diagrams. They can be saved 
    directly to HTML files or displayed in a Jupyter Notebook output cell.

    Copyright 2020, Dr. Shahin Rostami
    http://shahinrostami.com
    https://github.com/shahinrostami/chord
    https://pypi.org/project/chord/
    -->
    <!--LICENSE
    Chord (https://github.com/shahinrostami/chord) generates interactive chord diagrams.
    Copyright (C) 2020  Dr. Shahin Rostami

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
    -->
  	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Chord Diagram</title>
    <!-- Google Fonts -->
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css?family=Lato:400,900"
      rel="stylesheet"
      type="text/css"
    />

    <link
      rel="stylesheet"
      href="https://unpkg.com/tippy.js@6/themes/translucent.css"
    />

    <style>
      .tippy-content {
        font-family: "Lato", sans-serif;
      }

      #chart-540c5e93 {

        font-size: 16px;
        font-family: "Lato", sans-serif;
        text-align: center;
        fill: #454545;
      }

      #chart-540c5e93 svg {
        max-width: 700.0px;
      }

      .details_thumbs {
        margin:5.0px;
        max-width:85.0px;
        padding:0;
        display:inline-block; 
      }

      .details_thumbs img {
        max-width:85.0px;
      }

      .details_thumbs figcaption {
        text-align: center;
        font-size: 14.0px;
      }

      .hidden_chord{
        display:none;
      }

      @media (min-width: 600px) {
				#chart-540c5e93{
					font-size: 20px;
				}
			}
    </style>
  </head>
  <body>
    <div id="chart-540c5e93" class="chord">
    </div>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://d3js.org/d3.v5.min.js";

      script.onload = function () {

        var script2 = document.createElement("script");
        script2.type = "text/javascript";
        script2.src = "https://shahinrostami.com/assets/chord/script.js";
        script2.onload = function () {
          margin = {
          left: 0.0,
          top: 0.0,
          right: 0.0,
          bottom: 0.0
        };
        width = Math.min(window.innerWidth, 700.0) - margin.left - margin.right;
        height = Math.min(window.innerWidth, 700.0) - margin.top - margin.bottom;
        innerRadius = Math.min(width, height) * 0.39;
        outerRadius = innerRadius * 1.1;

      tag_id = "chart-540c5e93";
      padding = 0;
      Names = ['A', 'B', 'C', 'divide', '1', '2', '3', 'divide'];
      colors = ['#7400B8', '#5E60CE', '#5684D6', '#000000', '#56CFE1', '#64DFDF', '#80FFDB', '#000000'];
      opacityDefault = 0.8;
      matrix = [[0.0, 0.0, 0.0, 0.0, 1.0, 4.0, 1.0, 0.0], [0.0, 0.0, 0.0, 0.0, 1.0, 3.0, 2.0, 0.0], [0.0, 0.0, 0.0, 0.0, 1.0, 2.0, 2.0, 0.0], [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0], [1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0], [4.0, 3.0, 2.0, 0.0, 0.0, 0.0, 0.0, 0.0], [1.0, 2.0, 2.0, 0.0, 0.0, 0.0, 0.0, 0.0], [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]];
      wrap_labels = false;
      credit = true;
      details = [];
      details_thumbs = [];
      noun = "instances";
      details_separator = ", ";
      divide = true;
      divide_idx = 3;
      divide_size = 0.5;
      instances = 17.0;
      popup_width = 350.0;




      if(divide){
         //What % of the circle should become empty
        emptyStroke = Math.round(instances * divide_size);
        matrix[divide_idx][Names.length-1] = emptyStroke
        matrix[Names.length-1][divide_idx] = emptyStroke
        var offset = (2 * Math.PI * (emptyStroke / (instances + emptyStroke))) / 4;

      }
      else{
      offset = 0;

      }
      
      ////////////////////////////////////////////////////////////
      /////////// Create scale and layout functions //////////////
      ////////////////////////////////////////////////////////////

      var colors = d3
        .scaleOrdinal()
        .domain(d3.range(Names.length))
        .range(colors);

      //A "custom" d3 chord function that automatically sorts the order of the chords in such a manner to reduce overlap
      var chord = customChordLayout()
        .padding(padding)
        .sortChords(d3.descending) //which chord should be shown on top when chords cross. Now the biggest chord is at the bottom
        .matrix(matrix);

      var arc = d3
        .arc()
        .innerRadius(innerRadius * 1.01)
        .outerRadius(outerRadius)
        .startAngle(startAngle) 
        .endAngle(endAngle);

      var path = d3.ribbon()
      .radius(innerRadius)
      .startAngle(startAngle)
      .endAngle(endAngle);

      ////////////////////////////////////////////////////////////
      ////////////////////// Create SVG //////////////////////////
      ///////////////////////////////////////////////////////////

      var svg = d3
        .select("#" + tag_id)
        .append("svg")
        .attr(
          "viewBox",
          "0 0 " +
            (width + margin.left + margin.right) +
          " " +
          (height + margin.top + margin.bottom)
        )
        .attr("preserveAspectRatio", "xMinYMin meet")
        .append("g")
        .attr(
          "transform",
          "translate(" +
            (width / 2 + margin.left) +
            "," +
            (height / 2 + margin.top) +
            ")"
        );

      d3.select("#" + tag_id)
        .append("span")
        .style("display", "block")
        .style("font-size", "12px")
        .style("text-align", "right")
        .style("font-family", '"Arial", sans-serif')
        .html(
          'made with <a href="https://github.com/shahinrostami/chord">chord</a> [<a href="https://twitter.com/shahinrostami">@ShahinRostami</a>]'
        );

      if(credit){
      d3.select("#" + tag_id).select("span")
        .append("span")
        .style("font-size", "12px")
        .style("font-family", '"Arial", sans-serif')
        .html(
          '<br>see more at <a href="https://stamilabs.com">StamiLabs.com</a>'
        );
      }

      ////////////////////////////////////////////////////////////
      /////////////// Create the gradient fills //////////////////
      ////////////////////////////////////////////////////////////

      //Function to create the id for each chord gradient
      function getGradID(d) {
        return (
          "linkGrad-" + tag_id + "-" + d.source.index + "-" + d.target.index
        );
      }




      //Create the gradients definitions for each chord
      var grads = svg
        .append("defs")
        .selectAll("linearGradient")
        .data(chord.chords())
        .enter()
        .append("linearGradient")
        .attr("id", getGradID)
        .attr("gradientUnits", "userSpaceOnUse")
        .attr("x1", function (d, i) {
          return (
            innerRadius *
            Math.cos(
              (d.source.endAngle - d.source.startAngle) / 2 +
                d.source.startAngle -
                Math.PI / 2
            )
          );
        })
        .attr("y1", function (d, i) {
          return (
            innerRadius *
            Math.sin(
              (d.source.endAngle - d.source.startAngle) / 2 +
                d.source.startAngle -
                Math.PI / 2
            )
          );
        })
        .attr("x2", function (d, i) {
          return (
            innerRadius *
            Math.cos(
              (d.target.endAngle - d.target.startAngle) / 2 +
                d.target.startAngle -
                Math.PI / 2
            )
          );
        })
        .attr("y2", function (d, i) {
          return (
            innerRadius *
            Math.sin(
              (d.target.endAngle - d.target.startAngle) / 2 +
                d.target.startAngle -
                Math.PI / 2
            )
          );
        });

      //Set the starting color (at 0%)
      grads
        .append("stop")
        .attr("offset", "0%")
        .attr("stop-color", function (d) {
          return colors(d.source.index);
        });

      //Set the ending color (at 100%)
      grads
        .append("stop")
        .attr("offset", "100%")
        .attr("stop-color", function (d) {
          return colors(d.target.index);
        });

      ////////////////////////////////////////////////////////////
      ////////////////// Draw outer Arcs /////////////////////////
      ////////////////////////////////////////////////////////////

      var outerArcs = svg
        .selectAll("g.group")
        .data(chord.groups)
        .enter()
        .append("g")
        .attr("class", "group")
        .on("mouseover", fade(0.1, 1))
        .on("mouseout", fade(opacityDefault, opacityDefault));

      outerArcs
        .append("path")
        .style("fill", function (d) {
          return colors(d.index);
        })
        .attr("d", arc)
        .attr("class", function (d) {
          if(divide){
            if(d.index == divide_idx || d.index == matrix.length -1){
            return "hidden_chord";
            }
          }
        })
        .each(function (d, i) {
          //Search pattern for everything between the start and the first capital L
          var firstArcSection = /(^.+?)L/;

          //Grab everything up to the first Line statement
          var newArc = firstArcSection.exec(d3.select(this).attr("d"))[1];
          //Replace all the comma's so that IE can handle it
          newArc = newArc.replace(/,/g, " ");

          //If the end angle lies beyond a quarter of a circle (90 degrees or pi/2)
          //flip the end and start position
          if (
            (d.endAngle > (90 * Math.PI) / 180) &
            (d.startAngle < (270 * Math.PI) / 180)
          ) {
            var startLoc = /M(.*?)A/, //Everything between the first capital M and first capital A
              middleLoc = /A(.*?)0 0 1/, //Everything between the first capital A and 0 0 1
              endLoc = /0 0 1 (.*?)$/; //Everything between the first 0 0 1 and the end of the string (denoted by $)
            //Flip the direction of the arc by switching the start en end point (and sweep flag)
            //of those elements that are below the horizontal line
            var newStart = endLoc.exec(newArc)[1];
            var newEnd = startLoc.exec(newArc)[1];
            var middleSec = middleLoc.exec(newArc)[1];

            //Build up the new arc notation, set the sweep-flag to 0
            newArc = "M" + newStart + "A" + middleSec + "0 0 0 " + newEnd;
          } //if

          //Create a new invisible arc that the text can flow along
          svg
            .append("path")
            .attr("class", "hiddenArcs")
            .attr("id", "arc-" + tag_id + "-" + i)
            .attr("d", newArc)
            .style("fill", "none");
  });
          ////////////////////////////////////////////////////////////
          ////////////////// Append Names ////////////////////////////
          ////////////////////////////////////////////////////////////

          //Append the label names on the outside

          if (wrap_labels) {
            outerArcs
              .append("text")
              .attr("class", "titles")
              .attr("dy", function (d, i) {
                return (d.endAngle > (90 * Math.PI) / 180) &
                  (d.startAngle < (270 * Math.PI) / 180)
                  ? 25
                  : -16;
              })
              .append("textPath")
              .attr("startOffset", "50%")
              .style("text-anchor", "middle")
              .attr("xlink:href", function (d, i) {
                return "#arc-" + tag_id + "-" + i;
              })
              .text(function (d, i) {
                return Names[i];
              });
          } else {
            //Append the label names on the outside
            outerArcs
              .append("text")
              .each(function (d) {
                d.angle = (d.startAngle + d.endAngle) / 2 + offset;
              })
              .attr("dy", ".35em")
                          .attr("class", function (d) {
              if(divide){
            if(d.index == divide_idx || d.index == matrix.length -1){
                return "titles hidden_chord";
                }
                else{
                  return "chord";
                }
              }
              else{
              return "titles";
              }
            })
              .attr("text-anchor", function (d) {
                return d.angle > Math.PI ? "end" : null;
              })
              .attr("transform", function (d) {
                return (
                  "rotate(" +
                  ((d.angle * 180) / Math.PI - 90) +
                  ")" +
                  "translate(" +
                  (outerRadius + 10) +
                  ")" +
                  (d.angle > Math.PI ? "rotate(180)" : "")
                );
              })
              .text(function (d, i) {
                return Names[i];
              });
          }

          ////////////////////////////////////////////////////////////
          ////////////////// Draw inner chords ///////////////////////
          ////////////////////////////////////////////////////////////

          svg
            .selectAll("path.chord")
            .data(chord.chords)
            .enter()
            .append("path")

            .attr("class", function (d) {
              if(divide){
                if(d.source.index == divide_idx){
                return "chord hidden_chord";
                }
                else{
                  return "chord";
                }
              }
              else{
              return "chord";
              }
            })
            
            
            .style("fill", function (d) {
              return "url(#" + getGradID(d) + ")";
            })
            
            .style("opacity", opacityDefault)
            .attr("d", path)
            .on("mouseover", mouseoverChord(noun, details, details_thumbs, details_separator, popup_width))
            .on("mouseout", mouseoutChord(opacityDefault, opacityDefault));
      


      function startAngle(d) {
        return d.startAngle + offset;
      }
      function endAngle(d) {
        return d.endAngle + offset;
      }


      //Returns an event handler for fading a given chord group.
      function fade(opacityIn, opacityOut) {
        return function (d, i) {
          d3.select(this.ownerSVGElement)
            .selectAll("path.chord")
            .filter(function (d) {
              return d.source.index !== i && d.target.index !== i;
            })
            .transition()
            .style("opacity", opacityIn);

          d3.select(this.ownerSVGElement)
            .selectAll("path.chord")
            .filter(function (d) {
              return d.source.index == i || d.target.index == i;
            })
            .transition()
            .style("opacity", opacityOut);

            
        };
      } //fade

      //Highlight hovered over chord
      function mouseoverChord(noun, details, details_thumbs, details_separator, popup_width) {
        return function (d, i) {

        d3.select(this.ownerSVGElement)
          .selectAll("path.chord")
          .transition()
          .style("opacity", 0.1);
        //Show hovered over chord with full opacity
        d3.select(this).transition().style("opacity", 1);

        tippy_content = "<span style='font-weight:900'>" +
            Names[d.source.index] +
            "</span> and <span style='font-weight:900'>" +
            Names[d.target.index] +
            "</span><br>occur together in <span style='font-weight:900'>" +
            d.source.value +
            "</span> " + noun;

        if (Array.isArray(details) && details.length && 
            Array.isArray(details_thumbs) && details_thumbs.length) {   
          if (Array.isArray(details[d.source.index][d.target.index]) && details[d.source.index][d.target.index].length &&
              Array.isArray(details_thumbs[d.source.index][d.target.index]) && details_thumbs[d.source.index][d.target.index].length) {
              
              var figures = '';
              for(var i = 0; i < details[d.source.index][d.target.index].length; i++) {
                  figures += "<figure class='details_thumbs'><img src=" + details_thumbs[d.source.index][d.target.index][i] + "><figcaption>" + details[d.source.index][d.target.index][i] + "</figcaption></figure>"
              }
        
              tippy_content = tippy_content +
                "<br><br><center><span><em>" +
                figures +
                "</em></span></center>";
          }
        }
        else if (Array.isArray(details) && details.length) {
          if (Array.isArray(details[d.source.index][d.target.index]) && details[d.source.index][d.target.index].length) {
              tippy_content = tippy_content +
                "<br><br><span><em>" +
                details[d.source.index][d.target.index].join(details_separator) +
                "</em></span>";
          }
        }
        else if (Array.isArray(details_thumbs) && details_thumbs.length) {   
          if (Array.isArray(details_thumbs[d.source.index][d.target.index]) && details_thumbs[d.source.index][d.target.index].length) {
              
              var figures = '';
              for(var i = 0; i < details_thumbs[d.source.index][d.target.index].length; i++) {
                  figures += "<figure class='details_thumbs'><img src=" + details_thumbs[d.source.index][d.target.index][i] + "></figure>"
              }
        
              tippy_content = tippy_content +
                "<br><br><center><span><em>" +
                figures +
                "</em></span></center>";
          }
        }
        
        if(this._tippy == null)
        {
          tippy(this, {
            allowHTML: true,
            followCursor: true,
            content: tippy_content,
            size: "large",
            arrow: true,
            maxWidth: popup_width,
            theme:'translucent',
          });
        }

      /*d3.select("#list")
        .html(
          details[d.source.index][d.target.index]
        );*/
      

        };
        
      } //fade

      //Bring all chords back to default opacity
      function mouseoutChord(opacityIn, opacityOut) {
        return function (d, i) {
        d3.select(this.ownerSVGElement)
          .selectAll("path.chord")
          .transition()
          .style("opacity", opacityOut);
        };
        //Set opacity back to default for all
      } //function mouseoutChord


        };
        document.body.appendChild(script2);
      };

      document.body.appendChild(script);
    </script>
    <script></script>
  </body>
</html>