Project Dependencies

Displays dependencies between the outputs of each project using the chord chart.

Based on the States Migrations visualisation by http://vizynary.com/ (http://vizynary.com/2013/11/18/restless-america-state-to-state-migration-in-2012/)

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Project Dependencies</title>

<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>

<style type="text/css">
	
	h1 {
	
		font-family: "Cambria", serif; 
	
	}

#circle circle {
  fill: none;
  pointer-events: all;
}

.group path {
  fill-opacity: .5;
}

path.chord {
  stroke: #000;
  stroke-width: .25px;
}

#circle:hover path.fade {
  display: none;
}
	
    .city {
      fill: rgb(150, 150, 150);
      opacity: 1;
      stroke: grey;
      stroke-width: .8;
	  stroke-linejoin: round;
	  pointer-events: all;
      }

#tooltip.hidden {
        display: none;
		}
	
	#tooltip p {
        margin: 0;
		color: white;
        font-family: sans-serif;
        font-size: 14px;
        line-height: 16px;
	}

#tooltip {
        position: absolute;
        width: 370px;
        height: auto;
        padding: 10px;
        background-color: #212121;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
       -moz-transition: all 0.2s;
        -o-transition: all 0.2;
        -webkit-transition: all 0.2s;
        transition: all 0.2s; 
		opacity: 0.90;
		pointer-events: none;
		z-index: 2;
	}

.clickable{
	cursor: hand;
	cursor: pointer;
}
	
    </style>
  </head>
  
<body>

var width = 1125,
    height = 1200,
    outerRadius = 250,
    innerRadius = outerRadius - 24;

circle_y = outerRadius + 80;
	circle_x = outerRadius + 350;

var chordcolor = d3.scale.linear()
	.domain([1000,1001,1002,1003,1004,1005])
	.range(["White","lightgrey","grey","orange","green","red"]);
	
var chordtype = d3.scale.ordinal()
	.domain([1000,1001,1002,1003,1004,1005])
	.range(["NA","Same","Informed by","Collaborate","Affected by","Dependency"]);
	
var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var layout = d3.layout.chord()
 .padding(.03) //padding of 0 means no gaps
    .sortSubgroups(d3.descending) //descending means the thickest chords within a group go first
    .sortChords(d3.ascending); //the thickest chords are drawn on top

var path = d3.svg.chord()
    .radius(innerRadius-3);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("id", "circle")
//    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    .attr("transform", "translate(" + circle_x + "," + circle_y + ")");

svg.append("circle")
    .attr("r", outerRadius);

d3.csv("projects.csv", function(projects) {
  d3.json("matrix_wo_intra.json", function(matrix) {

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

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

group.append("svg:text")
      .each(function(d,i) { 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(" + (innerRadius + 30) + ")"
            + (d.angle > Math.PI ? "rotate(180)" : "");
      })
      .text(function(d,i) { return projects[i].name; })
		.attr("shape-rendering","crispEdges")
		.attr("font-family","sans-serif")
		.attr("font-size","12px");

// Add a mouseover title for each group project
    group.append("title").text(function(d, i) {
      return projects[i].name; 
    });

// 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) { return projects[i].color; });
		
	
		
    // Add the chords.
    var chord = svg.selectAll(".chord")
        .data(layout.chords)
      .enter().append("path")
        .attr("class", "chord")
        //.style("fill", function(d) { return projects[d.source.index].color; }) EDIT
        .style("fill", function(d) {return chordcolor(d.source.value); })
		.style("opacity", "0.5")
		.attr("d", path);

// Add an elaborate ` title for each chord.
    chord.append("title").text(function(d) {
      return projects[d.source.index].name
          + " → " + projects[d.target.index].name
          + ": " + chordtype(d.source.value).toLocaleString()
          + "\n" + projects[d.target.index].name
          + " → " + projects[d.source.index].name
          + ": " + chordtype(d.target.value).toLocaleString();
    });

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

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js