xxxxxxxxxx
<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>
</footer>
<script src="https://d3js.org/d3.v2.min.js"></script>
<script src="sankey.js"></script>
<script>
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