tomshanley/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    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/)

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

    <!--  Scripts  -->
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>


    <!--  Styles  -->
    <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>

  <script type="text/javascript">

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>

## matrix_wo_intra.json
[[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,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,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,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,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,0,0,0,1002,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,1003,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,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,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,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,0,0,0,0,0,0,0,1002,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,1001,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,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,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1003,0,0,0,1003,0,0,0,0,1002,0,1002,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,1002],
[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,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,1002,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,1001,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,0,0,0,1002,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,1002,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,1003,0,1003,0,0,0,0,0,0,0,0,1005,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,1005,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,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,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,1002,0,0,0],
[0,0,0,0,0,0,0,0,1002,0,0,0,1002,0,0,1002,0,0,1002,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,1002,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,1003,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,1002,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1002],
[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,0,0],
[0,0,0,0,1002,1003,0,0,0,0,0,0,0,0,1005,0,1004,0,0,0,1003,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,1005,0,0,0,0,0,1005,0,0,0,0,0,0,0,1002,0,1003],
[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,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,0,0,0,0],
[0,0,0,0,0,0,0,1002,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,0,1002,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,0,1002,1002,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,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,0,0,0,1002,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,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,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,0,0,0,0,0,0,0,0,1002,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,0,0,0,0,0,1002,0,0,1002,0,0,0,0,0,0,0,0,1002,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,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,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,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,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,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,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,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,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,1002,0,1002,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,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,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,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,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]]

## projects.csv

          
            name
            color
            region
            arriving
            leaving

            
              P1 - output 1
              #435466
              Project 1
              27523
              38574

            
              P1 - output 2
              #435466
              Project 1
              50484
              38696

            
              P1 - output 3
              #435466
              Project 1
              142577
              158156

            
              P1 - output 4
              #435466
              Project 1
              33446
              30498

            
              P1 - output 5
              #435466
              Project 1
              80311
              87023

            
              P1 - output 6
              #435466
              Project 1
              270053
              405864

            
              P2 - output 1
              #A2A50E
              Project 2
              130223
              219202

            
              P2 - output 2
              #A2A50E
              Project 2
              34757
              25149

            
              P2 - output 3
              #A2A50E
              Project 2
              215500
              237156

            
              P2 - output 4
              #A2A50E
              Project 2
              154983
              157664

            
              P3 - output 1
              #435466
              Project 3
              53830
              59513

            
              P3 - output 2
              #435466
              Project 3
              250653
              238540

            
              P3 - output 3
              #435466
              Project 3
              112787
              103004

            
              P3 - output 4
              #435466
              Project 3
              47125
              47425

            
              P3 - output 5
              #435466
              Project 3
              177098
              163843

            
              P4 - output 1
              #A2A50E
              Project 4
              273149
              238663

            
              P4 - output 2
              #A2A50E
              Project 4
              156705
              127418

            
              P5 - output 1
              #435466
              Project 5
              76948
              64967

            
              P5 - output 2
              #435466
              Project 5
              91215
              95956

            
              P5 - output 3
              #435466
              Project 5
              73500
              66947

            
              P5 - output 4
              #435466
              Project 5
              104600
              109210

            
              P6 - output 1
              #A2A50E
              Project 6
              277466
              252262

            
              P6 - output 2
              #A2A50E
              Project 6
              537148
              428325

            
              P6 - output 3
              #A2A50E
              Project 6
              507752
              402187

            
              P6 - output 4
              #A2A50E
              Project 6
              108972
              102572

            
              P6 - output 5
              #A2A50E
              Project 6
              54693
              63921

            
              P7 - output 1
              #435466
              Project 7
              232457
              206842

            
              P7 - output 2
              #435466
              Project 7
              493641
              566986

            
              P8 - output 1
              #A2A50E
              Project 8
              124285
              98882

            
              P8 - output 2
              #A2A50E
              Project 8
              87870
              82165

            
              P8 - output 3
              #A2A50E
              Project 8
              205060
              161530

            
              P8 - output 4
              #A2A50E
              Project 8
              31149
              32228

            
              P8 - output 5
              #A2A50E
              Project 8
              59283
              55191

            
              P8 - output 6
              #A2A50E
              Project 8
              118925
              108182

            
              P8 - output 7
              #A2A50E
              Project 8
              215494
              180462

            
              P8 - output 8
              #A2A50E
              Project 8
              55145
              61509

            
              P9 - output 1
              #435466
              Project 9
              33415
              84068

            
              P9 - output 2
              #435466
              Project 9
              38213
              23959

            
              P9 - output 3
              #435466
              Project 9
              88284
              93134

            
              P9 - output 4
              #435466
              Project 9
              43266
              48816

            
              P9 - output 5
              #435466
              Project 9
              162930
              142754

            
              P9 - output 6
              #435466
              Project 9
              75760
              73325

            
              P10 - output 1
              #A2A50E
              Project 10
              101042
              115946

            
              P10 - output 2
              #A2A50E
              Project 10
              208755
              277953

            
              P10 - output 3
              #A2A50E
              Project 10
              99192
              97724

            
              P10 - output 4
              #A2A50E
              Project 10
              134137
              144597

            
              P10 - output 5
              #A2A50E
              Project 10
              133981
              175733

            
              P10 - output 6
              #A2A50E
              Project 10
              196391
              199202

            
              P10 - output 7
              #A2A50E
              Project 10
              196391
              199202

            
              P10 - output 8
              #A2A50E
              Project 10
              196391
              199202

            
              P10 - output 9
              #A2A50E
              Project 10
              196391
              199202

            
              P10 - output 10
              #A2A50E
              Project 10
              196391
              199202

## thumbnail.png

      
    Raw
  

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

	<!-- Scripts -->
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>


	<!-- Styles -->
	<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>

	<script type="text/javascript">

	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>
	[[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,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,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,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,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,0,0,0,1002,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,1003,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,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,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,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,0,0,0,0,0,0,0,1002,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,1001,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,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,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1003,0,0,0,1003,0,0,0,0,1002,0,1002,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,1002],
	[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,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,1002,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,1001,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,0,0,0,1002,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,1002,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,1003,0,1003,0,0,0,0,0,0,0,0,1005,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,1005,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,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,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,1002,0,0,0],
	[0,0,0,0,0,0,0,0,1002,0,0,0,1002,0,0,1002,0,0,1002,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,1002,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,1003,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,0,0,0,0,0,1002,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1002,0,0,0,0,0,0,0,1002],
	[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,0,0],
	[0,0,0,0,1002,1003,0,0,0,0,0,0,0,0,1005,0,1004,0,0,0,1003,0,0,0,0,1002,0,0,0,0,0,0,0,0,0,1005,0,0,0,0,0,1005,0,0,0,0,0,0,0,1002,0,1003],
	[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,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,0,0,0,0],
	[0,0,0,0,0,0,0,1002,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,0,1002,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,0,1002,1002,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,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,0,0,0,1002,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,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,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,0,0,0,0,0,0,0,0,1002,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,0,0,0,0,0,1002,0,0,1002,0,0,0,0,0,0,0,0,1002,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,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,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,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,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,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,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,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,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,1002,0,1002,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1002,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,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,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,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]]
name	color	region	arriving	leaving
P1 - output 1	#435466	Project 1	27523	38574
P1 - output 2	#435466	Project 1	50484	38696
P1 - output 3	#435466	Project 1	142577	158156
P1 - output 4	#435466	Project 1	33446	30498
P1 - output 5	#435466	Project 1	80311	87023
P1 - output 6	#435466	Project 1	270053	405864
P2 - output 1	#A2A50E	Project 2	130223	219202
P2 - output 2	#A2A50E	Project 2	34757	25149
P2 - output 3	#A2A50E	Project 2	215500	237156
P2 - output 4	#A2A50E	Project 2	154983	157664
P3 - output 1	#435466	Project 3	53830	59513
P3 - output 2	#435466	Project 3	250653	238540
P3 - output 3	#435466	Project 3	112787	103004
P3 - output 4	#435466	Project 3	47125	47425
P3 - output 5	#435466	Project 3	177098	163843
P4 - output 1	#A2A50E	Project 4	273149	238663
P4 - output 2	#A2A50E	Project 4	156705	127418
P5 - output 1	#435466	Project 5	76948	64967
P5 - output 2	#435466	Project 5	91215	95956
P5 - output 3	#435466	Project 5	73500	66947
P5 - output 4	#435466	Project 5	104600	109210
P6 - output 1	#A2A50E	Project 6	277466	252262
P6 - output 2	#A2A50E	Project 6	537148	428325
P6 - output 3	#A2A50E	Project 6	507752	402187
P6 - output 4	#A2A50E	Project 6	108972	102572
P6 - output 5	#A2A50E	Project 6	54693	63921
P7 - output 1	#435466	Project 7	232457	206842
P7 - output 2	#435466	Project 7	493641	566986
P8 - output 1	#A2A50E	Project 8	124285	98882
P8 - output 2	#A2A50E	Project 8	87870	82165
P8 - output 3	#A2A50E	Project 8	205060	161530
P8 - output 4	#A2A50E	Project 8	31149	32228
P8 - output 5	#A2A50E	Project 8	59283	55191
P8 - output 6	#A2A50E	Project 8	118925	108182
P8 - output 7	#A2A50E	Project 8	215494	180462
P8 - output 8	#A2A50E	Project 8	55145	61509
P9 - output 1	#435466	Project 9	33415	84068
P9 - output 2	#435466	Project 9	38213	23959
P9 - output 3	#435466	Project 9	88284	93134
P9 - output 4	#435466	Project 9	43266	48816
P9 - output 5	#435466	Project 9	162930	142754
P9 - output 6	#435466	Project 9	75760	73325
P10 - output 1	#A2A50E	Project 10	101042	115946
P10 - output 2	#A2A50E	Project 10	208755	277953
P10 - output 3	#A2A50E	Project 10	99192	97724
P10 - output 4	#A2A50E	Project 10	134137	144597
P10 - output 5	#A2A50E	Project 10	133981	175733
P10 - output 6	#A2A50E	Project 10	196391	199202
P10 - output 7	#A2A50E	Project 10	196391	199202
P10 - output 8	#A2A50E	Project 10	196391	199202
P10 - output 9	#A2A50E	Project 10	196391	199202
P10 - output 10	#A2A50E	Project 10	196391	199202