Departmental Collaboration at MIT

README.md

While MIT has a very large number of departments, labs and centers on campus, there are roughly 40 academic departments that are frequently listed on the Institute's website. This plot illustrates how frequently those groups are listed together on papers in the Open Access collection in DSpace@MIT.

departments.csv

departments.js

var cWidth = 720,
    cHeight = 720,
    cOuterRadius = Math.min(cWidth, cHeight) / 2 - 10,
    cInnerRadius = cOuterRadius - 24;

var formatPercent = d3.format(".1%");

var arc = d3.svg.arc()
    .innerRadius(cInnerRadius)
    .outerRadius(cOuterRadius);

var layout = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.ascending);

var path = d3.svg.chord()
    .radius(cInnerRadius);

var svgChord = d3.select("#chart").append("svg")
    .attr("width", cWidth)
    .attr("height", cHeight)
  .append("g")
    .attr("id", "circle")
    .attr("transform", "translate(" + cWidth / 2 + "," + cHeight / 2 + ")");

svgChord.append("circle")
    .attr("r", cOuterRadius)
    .attr("fill","#fff");

d3.csv("departments.csv", function(cities) {
  d3.json("departments.json", function(matrix) {

    // Compute the chord layout.
    layout.matrix(matrix);

    // Add a group per neighborhood.
    var group = svgChord.selectAll(".group")
        .data(layout.groups)
      .enter().append("g")
        .attr("class", "group")
        .on("mouseover", mouseover);

        /*
    */
    // Add a mouseover title.
    group.append("title").text(function(d, i) {
      console.log(d);
      return cities[i].name + ": " + Math.round(d.value) + " collaborations";
    });

    // Add the group arc.
    var groupPath = group.append("path")
        .attr("id", function(d, i) { return "group" + i; })
        .attr("d", arc)
        .style("fill", function(d, i) { 
          console.log(i);
          console.log(d);
          return cities[i].color; 

        });

    // Add a text label.
    var groupText = group.append("text")
        .attr("x", 6)
        .attr("dy", 15);

    groupText.append("textPath")
        .attr("xlink:href", function(d, i) { return "#group" + i; })
        .text(function(d, i) { return cities[i].abbv; });

    // Remove the labels that don't fit. :(
    groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength() / 2 - 16 < this.getComputedTextLength(); })
        .remove();

    // Add the chords.
    var chord = svgChord.selectAll(".chord")
        .data(layout.chords)
      .enter().append("path")
        .attr("class", "chord")
        .style("fill", function(d) { return cities[d.source.index].color; })
        .attr("d", path);

    // Add an elaborate mouseover title for each chord.
    chord.append("title").text(function(d) {
      return cities[d.source.index].name
          + "\n" + cities[d.target.index].name
          + "\n" + Math.round(d.source.value)
          + " coauthored articles";
    });

    function mouseover(d, i) {
      chord.classed("fade", function(p) {
        return p.source.index != i
            && p.target.index != i;
      });
    }
  });
});

departments.json

[
[0,0,2,2,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0],
[0,0,4,2,0,0,0,0,4,12,0,0,8,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],
[2,4,0,0,2,4,46,0,0,46,8,6,26,0,0,0,0,0,2,0,0,0,0,0,0,0,0,6,0,2,44,4,0,4,4,0,26,0],
[2,2,0,0,2,6,2,0,14,4,10,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,2,2,0,14,26,14,16,40,2,6,44,2,14,0,0,0,0,0,0,0,0,0,0,0,2,0,2,6,0,8,4,0,18,0,32,0],
[0,0,4,6,14,0,2,4,10,156,80,10,30,0,2,0,0,0,8,0,0,0,0,0,0,0,0,10,0,0,2,2,28,8,8,0,6,0],
[0,0,46,2,26,2,0,182,70,178,2,138,258,26,44,0,0,0,0,0,0,0,0,0,0,0,0,16,4,322,68,182,2,0,38,46,126,0],
[0,0,0,0,14,4,182,0,18,64,6,80,108,4,66,0,0,0,0,0,0,0,0,0,0,0,0,2,6,82,2,108,2,88,58,4,158,0],
[0,4,0,14,16,10,70,18,0,14,32,30,48,8,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,46,2,8,38,20,4,12,8,4],
[0,12,46,4,40,156,178,64,14,0,16,130,182,28,56,0,0,0,28,4,0,0,8,0,0,0,0,36,0,92,82,54,4,112,212,16,196,0],
[0,0,8,10,2,80,2,6,32,16,0,10,30,0,2,0,0,0,0,0,0,0,0,0,0,4,0,10,0,30,2,8,8,0,0,0,24,0],
[2,0,6,0,6,10,138,80,30,130,10,0,126,58,2,0,0,0,0,0,0,0,0,0,0,0,0,6,2,22,8,46,2,26,92,6,26,0],
[0,8,26,2,44,30,258,108,48,182,30,126,0,6,10,0,0,0,2,0,0,0,0,0,0,2,0,14,2,34,46,42,18,30,46,4,48,8],
[0,0,0,0,2,0,26,4,8,28,0,58,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,4,20,8,2,0,42,0,4,0],
[0,0,0,0,14,2,44,66,0,56,2,2,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,14,28,38,0,2,38,4,102,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,0,0,0,2,0,0,0,2,0,0,2,0,0,2,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,0,0,0,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,2,0,0,8,0,0,0,28,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,24,0,2,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,4,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,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,12,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,0,4,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,0,0,0,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,0,0,0,0,0,4,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0],
[0,0,0,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,0,0,16,0,0,0],
[0,0,6,0,0,10,16,2,4,36,10,6,14,0,0,2,2,0,24,0,0,0,0,0,0,2,0,0,0,6,4,2,0,6,0,0,0,0],
[0,0,0,0,2,0,4,6,0,0,0,2,2,4,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,20,2,12,0,4,272,4,0,0],
[0,0,2,0,6,0,322,82,46,92,30,22,34,4,14,0,0,0,2,0,0,0,0,0,0,0,0,6,20,0,118,228,16,24,70,72,128,4],
[0,0,44,0,0,2,68,2,2,82,2,8,46,20,28,2,0,0,0,0,0,0,12,0,0,0,0,4,2,118,0,6,0,0,8,6,152,0],
[0,0,4,0,8,2,182,108,8,54,8,46,42,8,38,0,0,0,0,0,2,0,0,0,0,0,0,2,12,228,6,0,20,2,80,2,30,0],
[0,0,0,0,4,28,2,2,38,4,8,2,18,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,16,0,20,0,8,94,0,0,36],
[2,0,4,0,0,8,0,88,20,112,0,26,30,0,2,0,0,0,0,0,0,0,0,0,0,0,0,6,4,24,0,2,8,0,132,6,12,0],
[0,0,4,0,18,8,38,58,4,212,0,92,46,42,38,0,0,0,0,0,0,0,0,0,0,0,16,0,272,70,8,80,94,132,0,12,42,0],
[0,0,0,0,0,0,46,4,12,16,0,6,4,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,4,72,6,2,0,6,12,0,16,0],
[0,0,26,0,32,6,126,158,8,196,24,26,48,4,102,0,0,0,0,0,0,0,0,0,0,0,0,0,0,128,152,30,0,12,42,16,0,0],
[0,0,0,0,0,0,0,0,4,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,0,36,0,0,0,0,0]
]

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Foo</title>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body {
  font: 10px sans-serif;
}

.chord path {
  fill-opacity: .67;
  stroke: #000;
  stroke-width: .5px;
}

</style>
</head>
<body>
<div id="chart"></div>
<script src="departments.js"></script>
</body>
</html>