This is in relation to my previous questions "Problems creating Sankey diagrams using d3.js (1 and 2)
Here I'm trying to replicate the example provided by Malcolm Maclean in his book "D3 Tips and Tricks" his implementation of "sankey-formatted-json" works, mine doesn't:>)
My test dataset (TestDrive_ext'json) is
{
"nodes":[
{"node":0,"name":"node0"},
{"node":1,"name":"node1"},
{"node":2,"name":"node2"},
{"node":3,"name":"node3"},
{"node":4,"name":"node4"},
{"node":5,"name":"node5"},
{"node":6,"name":"node6"},
{"node":7,"name":"node7"},
{"node":8,"name":"node8"},
{"node":9,"name":"node9"},
{"node":10,"name":"node10"},
{"node":11,"name":"node11"},
{"node":12,"name":"node12"},
{"node":13,"name":"node13"},
{"node":14,"name":"node14"},
{"node":15,"name":"node15"},
{"node":16,"name":"node16"},
{"node":17,"name":"node17"}
],
"links":[
{"source":3,"target":0,"value":1},
{"source":3,"target":1,"value":2},
{"source":5,"target":1,"value":1},
{"source":0,"target":2,"value":1},
{"source":3,"target":2,"value":1},
{"source":4,"target":2,"value":1},
{"source":16,"target":2,"value":1},
{"source":4,"target":3,"value":4},
{"source":7,"target":3,"value":1},
{"source":12,"target":3,"value":1},
{"source":10,"target":4,"value":1},
{"source":12,"target":4,"value":1},
{"source":13,"target":4,"value":1},
{"source":1,"target":5,"value":1},
{"source":16,"target":5,"value":1},
{"source":13,"target":6,"value":1},
{"source":14,"target":6,"value":1},
{"source":0,"target":7,"value":1},
{"source":2,"target":7,"value":1},
{"source":12,"target":7,"value":1},
{"source":4,"target":8,"value":1},
{"source":16,"target":10,"value":1},
{"source":11,"target":12,"value":1},
{"source":15,"target":12,"value":1},
{"source":7,"target":13,"value":2},
{"source":11,"target":13,"value":1},
{"source":6,"target":14,"value":2},
{"source":0,"target":15,"value":2},
{"source":6,"target":15,"value":3},
{"source":9,"target":15,"value":1},
{"source":12,"target":15,"value":3},
{"source":4,"target":16,"value":1},
{"source":5,"target":16,"value":1},
{"source":9,"target":16,"value":1},
{"source":10,"target":16,"value":1},
{"source":1,"target":17,"value":1},
{"source":6,"target":17,"value":1}
]}
The code copied from Malcolm's example is
<!DOCTYPE html>
<meta charset="utf-8">
<title>SANKEY Experiment</title>
<style>
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .2;
}
.link:hover {
stroke-opacity: .5;
}
</style>
<body>
<p id="chart">
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="js/sankey.js"></script>
<script>
var units = "Widgets";
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 700 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + " " + units; },
color = d3.scale.category20();
// append the svg canvas to the page
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 + ")");
// Set the sankey diagram properties
var sankey = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);
var path = sankey.link();
// load the data
d3.json("data/TestDrive_ext.json", function(error, graph) {
sankey
.nodes(graph.nodes)
.links(graph.links)
.layout(32);
// add in the links
var link = svg.append("g").selectAll(".link")
.data(graph.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; });
// add the link titles
link.append("title")
.text(function(d) {
return d.source.name + " → " +
d.target.name + "\n" + format(d.value); });
// add in the nodes
var node = svg.append("g").selectAll(".node")
.data(graph.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));
// add the rectangles for the nodes
node.append("rect")
.attr("height", function(d) { return d.dy; })
.attr("width", sankey.nodeWidth())
.style("fill", function(d) {
return d.color = color(d.name.replace(/ .*/, "")); })
.style("stroke", function(d) {
return d3.rgb(d.color).darker(2); })
.append("title")
.text(function(d) {
return d.name + "\n" + format(d.value); });
// add in the title for the nodes
node.append("text")
.attr("x", -6)
.attr("y", function(d) { return d.dy / 2; })
.attr("dy", ".35em")
.attr("text-anchor", "end")
.attr("transform", null)
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; })
.attr("x", 6 + sankey.nodeWidth())
.attr("text-anchor", "start");
// the function for moving the nodes
function dragmove(d) {
d3.select(this).attr("transform",
"translate(" + d.x + "," + (
d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))
) + ")");
sankey.relayout();
link.attr("d", path);
}
});
</script>
</body>
</html>
Again, this doesn't throw any errors in the Javascript console but the diagram doesn't render but as I said previously Malcolm's does
A jsFiddle, which I don't really understand how to interpret, is available at http://jsfiddle.net/Dzy82f/z6bEx/
Once more, any insights that would help me understand where I'm going wrong would be much appreciated
Many thanks
Julian
