Issue Breakdown

<!DOCTYPE html>
<meta charset="utf-8">
<title>CFV Issue Breakdown</title>
<style>

@import url(sankey.css);

</style>
<body>

<header>
  <b>Student Financials: Breaking down the Issues </b>    
  <br>Sara Quigley March 18, 2013
  <p>
</header>

<div class="columnHead">
<span class="lookingAtMyAccount">My Question as a Student</span>
<span class="whatsHappening">What's Going On</span>
<span class="whatsProblematic">What's Problematic</span>
<span class="proposedRemediation">Proposed Remediation</span>
<span class="ProcessDesignTech"></font>
  <br>
	<font color="#a55194">Design</font><font color="#7f7f7f"> | </font>
	<font color="#ce6dbd">Process</font><font color="#7f7f7f"> | </font>
	<font color="#de9ed6">Tech</font>
</span>
</div>
<p id="chart">

</footer>

var margin = {top: 50, right: 30, bottom: 6, left: 1},
    width = 1410 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;
    
var category20b_sq = ['#393b79', '#5254a3', '#6b6ecf', '#9c9ede', '#8c6d31', '#bd9e39', '#e7ba52', '#e7cb94',
	'#843c39', '#ad494a', '#d6616b', '#e7969c', '#637939', '#8ca252', '#b5cf6b', '#cedb9c', 
	 '#ce6dbd', '#a55194', '#de9ed6', '#7b4173']

var formatNumber = d3.format(",.0f"),
    format = function(d) { return formatNumber(d); },
    color = d3.scale.ordinal()
    	.range(category20b_sq);

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sankey = d3.sankey()
    .nodeWidth(15)
    .nodePadding(15)
    .size([width, height]);

var path = sankey.link();

d3.json("sankey.json", function(energy) {

sankey
      .nodes(energy.nodes)
      .links(energy.links)
      .layout(20);

var link = svg.append("g").selectAll(".link")
      .data(energy.links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", path)
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });

link.append("title")
      .text(function(d) { return d.source.name + " → " + d.target.name; });
 
  var node = svg.append("g").selectAll(".node")
      .data(energy.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .call(d3.behavior.drag()
      .origin(function(d) { return d; })
      .on("dragstart", function() { this.parentNode.appendChild(this); })
      .on("drag", dragmove));

node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) { return color(d.category); })
    .append("title")	
      .text(function(d) { return d.name; });

node.append("text")
      .attr("x", 6 + sankey.nodeWidth())
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "start")
      .attr("transform", null)
      .text(function(d) { return d.name; })
    .filter(function(d) { return d.x > width * .9; })
      .attr("class", function(d) { return d.category ; })
      .attr("text-anchor", "end")
      .attr("transform", function(d) { return "translate (" + ((d.dy / 2) + 30) + "," + (d.dy / 2) + ") rotate(90)"; });

function dragmove(d) {
    d3.select(this)
    	.attr("transform", "translate(" + (
        	   d.x = Math.max(0, Math.min(width - d.dx, d3.event.x))
        	) + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
    sankey.relayout();
    link.attr("d", path);
  }
});

</script>

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

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