D3 Examples - Chord diagram to explore overlap of lifespans

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
      body {font-family: "Source Code Pro", Consolas, monaco, monospace; line-height: 160%; font-size: 14px;  margin: 0; }
      #tooltip {
        color: #454545;
        opacity: .9;
        background: #eee;
        padding: 5px;
        border: none;
        border-radius: 5px;
        position: absolute;
        z-index: 10;
        visibility: hidden;
        white-space: nowrap;
        pointer-events: none;
      }
      #circle circle {
        fill: none;
        pointer-events: all;
      }
      path.group {
        fill-opacity: .8;
      }
      path.chord {
        fill-opacity: .8;
        stroke: #000;
        stroke-width: .25px;
      }
      #circle:hover path.fade {
        display: none;
      }
      aside {padding: 20px;}
      h1, h3 {font-size: 14px; font-weight: normal; padding-left: 40px;}
    </style>
  </head>
  <body>
    <section id="diagram"></section>
    <div id="tooltip"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="mapper.js"></script>
    <script>
      //*******************************************************************
      //  CREATE MATRIX AND MAP
      //*******************************************************************
      d3.csv('gurus.csv', function (error, data) {
        var mpr = chordMpr(data);
​
        mpr
          .addValuesToMap('who')
          .setFilter(function (row, a, b) {
            return (row.who === a.name && row.overlap === b.name)
          })
          .setAccessor(function (recs, a, b) {
            if (!recs[0]) return 0;
            return +recs[0].years;
          });
        drawChords(mpr.getMatrix(), mpr.getMap());
      });
      //*******************************************************************
      //  DRAW THE CHORD DIAGRAM
      //*******************************************************************
      function drawChords (matrix, mmap) {
        var w = 980, h = 800, r1 = h / 2, r0 = r1 - 100;
​
        var fill = d3.scale.category10();
​
        var chord = d3.layout.chord()
            .padding(.02)
            .sortSubgroups(d3.descending)
            .sortChords(d3.descending);
​
        var arc = d3.svg.arc()
            .innerRadius(r0)
            .outerRadius(r0 + 20);
​
        var svg = d3.select("#diagram").append("svg")
            .attr("width", w)
            .attr("height", h)
          .append("svg:g")
            .attr("id", "circle")
            .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
​
            svg.append("circle")
                .attr("r", r0 + 20);
​
        var rdr = chordRdr(matrix, mmap);
        chord.matrix(matrix);
​
        var g = svg.selectAll("g.group")
            .data(chord.groups())
          .enter().append("svg:g")
            .attr("class", "group")
            .on("mouseover", mouseover)
            .on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });
​
        g.append("svg:path")
            .style("stroke", "none")
            .style("fill", function(d) { return fill(d.index); })
            .attr("d", arc);
​
        g.append("svg:text")
            .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
            .attr("dy", ".35em")
            .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(" + (r0 + 26) + ")"
                  + (d.angle > Math.PI ? "rotate(180)" : "");
            })
            .text(function(d) { return rdr(d).gname; });
​
          var chordPaths = svg.selectAll("path.chord")
                .data(chord.chords())
              .enter().append("svg:path")
                .attr("class", "chord")
                .style("stroke", function(d) { return d3.rgb(fill(d.target.index)).darker(); })
                .style("fill", function(d) { return fill(d.target.index); })
                .attr("d", d3.svg.chord().radius(r0))
                .on("mouseover", function (d) {
                  d3.select("#tooltip")
                    .style("visibility", "visible")
                    .html(chordTip(rdr(d)))
                    .style("top", function () { return (d3.event.pageY - 100)+"px"})
                    .style("left", function () { return (d3.event.pageX - 100)+"px";})
                })
                .on("mouseout", function (d) { d3.select("#tooltip").style("visibility", "hidden") });
​
          function chordTip (d) {
            var p = d3.format(".0%"), q = d3.format("0d")
            return "sentiment Info info:<br/>"
              + q(d.svalue) + " total interest sentiment overlap with " + d.sname + " and " + d.tname
          }
​
          function groupTip (d) {
            var guru = d.gname, q = d3.format("0d");
​
            switch (guru) {
              case "g1": return "Guru Nanak"; //+ " lived for 70 years";
                  break;
              case "g2": return "Guru Angad"; // + " lived for 48 years";
                  break;
              case "g3": return "Guru Amar Das"; // + " lived for 95 years";
                  break;
              case "g4": return "Guru Ram Das"; // + " lived for 47 years";
                  break;
              case "g5": return "Guru Arjun Dev"; // + " lived for 43 years";
                  break;
              case "g6": return "Guru Har Gobind"; // + " lived for 49 years";
                  break;
              case "g7": return "Guru Har Rai"; // + " lived for 31 years";
                  break;
              case "g8": return "Guru Har Krishan"; // + " lived for 8 years";
                  break;
              case "g9": return "Guru Tegh Bahadar"; // + " lived for 54 years";
                  break;
              case "g10": return "Guru Gobind Singh"; // + " lived for 42 years";
                  break;
              default : return d.gname;
​
            }
          }
​
          function mouseover(d, i) {
            d3.select("#tooltip")
              .style("visibility", "visible")
              .html(groupTip(rdr(d)))
              .style("top", function () { return (d3.event.pageY - 80)+"px"})
              .style("left", function () { return (d3.event.pageX - 130)+"px";})
​
            chordPaths.classed("fade", function(p) {
              return p.source.index != i
                  && p.target.index != i;
            });
          }
      }
​
    </script>
​
    <aside>
      <h1><a href="https://en.wikipedia.org/wiki/Chord_diagram">Chord diagram</a> to explore the overlap in years between different <a href="https://en.wikipedia.org/wiki/Sikh_gurus">Sikh gurus</a> life spans.</h1>
      <h3>Key:</h3>
      <ul>
        <li>g1: Guru Nanak</li>
        <li>g2: Guru Angad</li>
        <li>g3: Guru Amar Das</li>
        <li>g4: Guru Ram Das</li>
        <li>g5: Guru Arjun Dev</li>
        <li>g6: Guru Har Gobind</li>
        <li>g7: Guru Har Rai</li>
        <li>g8: Guru Har Krishan</li>
        <li>g9: Guru Tegh Bahadar</li>
        <li>g10: Guru Gobind Singh</li>
      </ul>
    </aside>
    
  </body>
</html>
    