D3 Examples - GVC Exports 2010

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  #tooltip {
    color: white;
    opacity: .9;
    background: #333;
    padding: 5px;
    border: 1px solid lightgrey;
    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;
  }
</style>
<body>
<div id="tooltip"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://projects.delimited.io/experiments/chord-diagrams/lib/underscore.js"></script>
<script src="https://projects.delimited.io/experiments/chord-diagrams/js/mapper.js"></script>
<script>
​
//*******************************************************************
//  CREATE MATRIX AND MAP
//*******************************************************************
d3.csv('interRegionExportsChordDiagram2010.csv', function (error, data) {
  var mpr = chordMpr(data);
​
  mpr
    .addValuesToMap('region')
    .setFilter(function (row, a, b) {
      return (row.region === a.name && row.destination === b.name)
    })
    .setAccessor(function (recs, a, b) {
      if (!recs[0]) return 0;
      return +recs[0].Exports;
    });
  drawChords(mpr.getMatrix(), mpr.getMap());
});
​
//*******************************************************************
//  DRAW THE CHORD DIAGRAM
//*******************************************************************
function drawChords (matrix, mmap) {
​
  var margin = {top: 100, right: 10, bottom: 100, left: 10};
​
  var width = 960  - margin.left - margin.right,
      height = 800  - margin.top - margin.bottom,
      innerRadius = Math.min(width, height) * .31,
      outerRadius = innerRadius * 1.1;
​
  var chord = d3.layout.chord()
      .padding(.05)
      .sortSubgroups(d3.descending)
      .sortChords(d3.descending);
​
  var fill = d3.scale.ordinal()
      .domain(d3.range(7))
      .range(["#000000", "#BB1515", "#E0CDA7", "#2A334F", "#6B4423", "#8B8386", "#AC8f57"]);
​
  var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(innerRadius + 20);
​
  var svg = d3.select("body").append("svg:svg")
      .attr("width", width)
      .attr("height", height)
      .append("svg:g")
      .attr("id", "circle")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
  svg.append("circle")
    .attr("r",innerRadius + 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", "black")
      .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")
      .style("font-family", "helvetica, arial, sans-serif")
      .style("font-size", "10px")
      .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(" + (innerRadius + 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(innerRadius))
          .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(".2%"), q = d3.format(",.3r")
      return p(d.svalue/d.stotal) + " (" + "Bil.$" + q(d.svalue) + ") of GVC exports from "
        + d.sname + " go to " + d.tname
        + (d.sname === d.tname ? "": ("<br/>while...<br/>"
        + p(d.tvalue/d.ttotal) + " (" + "Bil.$" + q(d.tvalue) + ") of GVC exports from "
        + d.tname + " go to " + d.sname))
    }
​
    function groupTip (d) {
      var p = d3.format(".1%"), q = d3.format(",.3r")
      return d.gname + " : " + "<br/>"
          + p(d.gvalue/d.mtotal) + " of Total GVC Exports"
    }
​
    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>
​
    