Built with blockbuilder.org
forked from anonymous's block: fresh block
Last active
November 13, 2015 03:02
-
-
Save sugeerth/3ec7767e5de59cba1bf3 to your computer and use it in GitHub Desktop.
fresh block
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Sankey Diagram</title> | |
| <style> | |
| .node rect { | |
| cursor: move; | |
| fill-opacity: 1; | |
| } | |
| .node text { | |
| pointer-events: none; | |
| text-shadow: 0 1px 0 #fff; | |
| } | |
| .link { | |
| fill: none; | |
| stroke-opacity: 1; | |
| text-shadow: 0 1px 0 #fff; | |
| } | |
| .link:hover { | |
| stroke-opacity: 1; | |
| stroke: red; | |
| } | |
| </style> | |
| <body> | |
| <button id="resetDiagram" style="font-size: 20px; border-radius: 5px; background: none; border: 1px solid grey" >Reset</button> | |
| <button id="DisplayAllDiagram" style="font-size: 20px; border-radius: 5px; background: none; border: 1px solid grey" >All Opaque</button> | |
| <svg></svg> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="sankey.js"></script> | |
| <script> | |
| var nodeIds = [] | |
| var linkIds = [] | |
| var AllNodes = [] | |
| var AllLinks = [] | |
| var node = [] | |
| var links = [] | |
| var units = "Redistributed Elements"; | |
| //Initializing all the margins | |
| var margin = {top: 0, right: 1125, bottom: 0, left: 0}, | |
| margin1 = {top: 0, right: 750, bottom: 0, left: 375}, | |
| margin2 = {top: 0, right: 375, bottom: 0, left: 750}, | |
| margin3 = {top: 0, right: 0, bottom: 0, left: 1125}, | |
| width = 2000- margin.left - margin.right, | |
| height = 100 - margin.top - margin.bottom, | |
| width1 = 2000- margin1.left - margin1.right, | |
| width2 = 2000- margin2.left - margin2.right, | |
| width3 = 2000- margin3.left - margin3.right; | |
| 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("svg") | |
| var group1 = svg.append("g") | |
| group1.append("g") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .attr("transform", | |
| "translate(1231,31)"); | |
| // var svg = d3.select("body").append("svg") | |
| // .attr("width", width + margin.left + margin.right) | |
| // .attr("height", height + margin.top + margin.bottom) | |
| // .append("g") | |
| // .attr("transform", | |
| // "translate(" + margin.top + "," + margin.top + ")"); | |
| // append the svg canvas to the page | |
| // Set the sankey diagram properties | |
| var sankey = d3.sankey() | |
| .nodeWidth(5) | |
| .nodePadding(15) | |
| .size([width, height]); | |
| var path = sankey.link(); | |
| //Load data 1 | |
| d3.json("JSON_1.json", function(error, graph) { | |
| sankey | |
| .nodes(graph.nodes) | |
| .links(graph.links) | |
| .layout(32); | |
| AllLinks = graph.links | |
| AllNodes = graph.nodes | |
| // add in the links | |
| var link = group1.append("g").selectAll(".link") | |
| .data(graph.links) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", path) | |
| .attr("id", function(d) { | |
| return d.source.name+"_"+d.target.name | |
| }) | |
| .style("stroke-width", function(d) {return Math.round(d.dy); }) | |
| .style("stroke", function(d) {return d.sourceColor; }) | |
| // .style("stroke-opacity", function(d) {return d.opacity; }) | |
| .sort(function(a, b) { return Math.round(b.dy) - Math.round(a.dy); }); | |
| // add the link titles | |
| link.append("title") | |
| .text(function(d) { | |
| return d.source.name + " → " + | |
| d.target.name + "\n\n" +d.source.opacity+"\n\n"+format(d.value); }); | |
| // add in the nodes | |
| var node = group1.append("g").selectAll(".node") | |
| .data(graph.nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| // .on("mouseover", fade(0.2)) | |
| // .on("mouseout", fade(1)) | |
| .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 Math.round(d.dy); }) | |
| .attr("width", sankey.nodeWidth()) | |
| .attr("rx", "4px") | |
| .attr("ry", "4px") | |
| .attr("id", function(d) { | |
| return d.name}) | |
| .style("fill", function(d) { | |
| return d.color = d.color }) | |
| .style("stroke", function(d) { | |
| return d3.rgb(d.color).darker(1); }) | |
| // .style("fill-opacity", function(d) {return d.opacity; }) | |
| .append("title") | |
| .text(function(d) { | |
| return d.name + "\n" +d.opacity+"\n"+format(d.value); }); | |
| // add in the title for the nodes | |
| node.append("text") | |
| .attr("x", -6) | |
| .attr("y", function(d) { return Math.round(d.dy) / 2; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "end") | |
| .attr("transform", null) | |
| .text(function(d) { return ""; }) | |
| .filter(function(d) { return Math.round(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 - Math.round(d.dy), d3.event.y)) | |
| ) + ")"); | |
| sankey.relayout(); | |
| link.attr("d", path); | |
| } | |
| }); | |
| //Load data 2 | |
| //NOTE: the translate function here causes the problem | |
| // append the svg canvas to the page | |
| var group2 = svg.append("g") | |
| group2.append("g") | |
| .attr("width", width + margin1.left + margin1.right) | |
| .attr("height", height + margin1.top + margin1.bottom) | |
| .attr("transform", | |
| "translate(300,12)"); | |
| // svg.append("svg") | |
| // .attr("width", width + margin1.left + margin1.right) | |
| // .attr("height", height + margin1.top + margin1.bottom) | |
| // .append("g") | |
| // .attr("transform", | |
| // "translate(" + margin1.left + "," + margin1.top + ")"); | |
| // append the svg canvas to the page | |
| // Set the sankey diagram properties | |
| var sankey = d3.sankey() | |
| .nodeWidth(5) | |
| .nodePadding(15) | |
| .size([width1, height]); | |
| var path = sankey.link(); | |
| d3.json("JSON_2.json", function(error, graph) { | |
| sankey | |
| .nodes(graph.nodes) | |
| .links(graph.links) | |
| .layout(32); | |
| AllLinks = graph.links | |
| AllNodes = graph.nodes | |
| // add in the links | |
| var link = group2.append("g").selectAll(".link") | |
| .data(graph.links) | |
| .enter().append("path") | |
| .attr("class", "link") | |
| .attr("d", path) | |
| .attr("id", function(d) { | |
| return d.source.name+"_"+d.target.name | |
| }) | |
| .style("stroke-width", function(d) {return Math.round(d.dy); }) | |
| .style("stroke", function(d) {return d.sourceColor; }) | |
| // .style("stroke-opacity", function(d) {return d.opacity; }) | |
| .sort(function(a, b) { return Math.round(b.dy) - Math.round(a.dy); }); | |
| // add the link titles | |
| link.append("title") | |
| .text(function(d) { | |
| return d.source.name + " → " + | |
| d.target.name + "\n\n" +d.source.opacity+"\n\n"+format(d.value); }); | |
| // add in the nodes | |
| var node = group2.append("g").selectAll(".node") | |
| .data(graph.nodes) | |
| .enter().append("g") | |
| .attr("class", "node") | |
| // .on("mouseover", fade(0.2)) | |
| // .on("mouseout", fade(1)) | |
| .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 Math.round(d.dy); }) | |
| .attr("width", sankey.nodeWidth()) | |
| .attr("rx", "4px") | |
| .attr("ry", "4px") | |
| .attr("id", function(d) { | |
| return d.name}) | |
| .style("fill", function(d) { | |
| return d.color = d.color }) | |
| .style("stroke", function(d) { | |
| return d3.rgb(d.color).darker(1); }) | |
| // .style("fill-opacity", function(d) {return d.opacity; }) | |
| .append("title") | |
| .text(function(d) { | |
| return d.name + "\n" +d.opacity+"\n"+format(d.value); }); | |
| // add in the title for the nodes | |
| node.append("text") | |
| .attr("x", -6) | |
| .attr("y", function(d) { return Math.round(d.dy) / 2; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "end") | |
| .attr("transform", null) | |
| .text(function(d) { return ""; }) | |
| .filter(function(d) { return Math.round(d.x) < width1 / 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 - Math.round(d.dy), d3.event.y)) | |
| ) + ")"); | |
| sankey.relayout(); | |
| link.attr("d", path); | |
| } | |
| function setNodeObjOpacity(nodeRectObj) | |
| { | |
| nodeRectObj.style.fillOpacity = "1" | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nodes": [ | |
| { | |
| "node": 0, | |
| "timestep": 0, | |
| "opacity": 1, | |
| "name": "0", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 1, | |
| "timestep": 0, | |
| "opacity": -0.03, | |
| "name": "1", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 2, | |
| "timestep": 0, | |
| "opacity": -0.02, | |
| "name": "2", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 3, | |
| "timestep": 1, | |
| "opacity": -0.03, | |
| "name": "3", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 4, | |
| "timestep": 1, | |
| "opacity": -0.01, | |
| "name": "4", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 5, | |
| "timestep": 1, | |
| "opacity": 1, | |
| "name": "5", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 6, | |
| "timestep": 2, | |
| "opacity": 0.06, | |
| "name": "6", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 7, | |
| "timestep": 2, | |
| "opacity": 0.02, | |
| "name": "7", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 8, | |
| "timestep": 2, | |
| "opacity": 1, | |
| "name": "8", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 9, | |
| "timestep": 3, | |
| "opacity": -0.05, | |
| "name": "9", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 10, | |
| "timestep": 3, | |
| "opacity": -0.12, | |
| "name": "10", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 11, | |
| "timestep": 3, | |
| "opacity": 1, | |
| "name": "11", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 12, | |
| "timestep": 4, | |
| "opacity": -0.03, | |
| "name": "12", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 13, | |
| "timestep": 4, | |
| "opacity": 1, | |
| "name": "13", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 14, | |
| "timestep": 4, | |
| "opacity": -0.04, | |
| "name": "14", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 15, | |
| "timestep": 5, | |
| "opacity": 0.02, | |
| "name": "15", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 16, | |
| "timestep": 5, | |
| "opacity": 1, | |
| "name": "16", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 17, | |
| "timestep": 5, | |
| "opacity": 1, | |
| "name": "17", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 18, | |
| "timestep": 6, | |
| "opacity": -0.01, | |
| "name": "18", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 19, | |
| "timestep": 6, | |
| "opacity": 1, | |
| "name": "19", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 20, | |
| "timestep": 6, | |
| "opacity": 1, | |
| "name": "20", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 21, | |
| "timestep": 7, | |
| "opacity": -0.05, | |
| "name": "21", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 22, | |
| "timestep": 7, | |
| "opacity": 1, | |
| "name": "22", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 23, | |
| "timestep": 7, | |
| "opacity": 1, | |
| "name": "23", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 24, | |
| "timestep": 8, | |
| "opacity": -0.08, | |
| "name": "24", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 25, | |
| "timestep": 8, | |
| "opacity": 1, | |
| "name": "25", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 26, | |
| "timestep": 8, | |
| "opacity": 1, | |
| "name": "26", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 27, | |
| "timestep": 9, | |
| "opacity": -0.09, | |
| "name": "27", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 28, | |
| "timestep": 9, | |
| "opacity": 1, | |
| "name": "28", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 29, | |
| "timestep": 9, | |
| "opacity": 1, | |
| "name": "29", | |
| "color": "rgb(178, 223, 138)" | |
| }, | |
| { | |
| "node": 30, | |
| "timestep": 10, | |
| "opacity": 1, | |
| "name": "30", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 31, | |
| "timestep": 10, | |
| "opacity": 1, | |
| "name": "31", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 32, | |
| "timestep": 11, | |
| "opacity": -0.13, | |
| "name": "32", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 33, | |
| "timestep": 11, | |
| "opacity": 1, | |
| "name": "33", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 34, | |
| "timestep": 12, | |
| "opacity": 1, | |
| "name": "34", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 35, | |
| "timestep": 12, | |
| "opacity": 1, | |
| "name": "35", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 36, | |
| "timestep": 13, | |
| "opacity": -0.1, | |
| "name": "36", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 37, | |
| "timestep": 13, | |
| "opacity": 1, | |
| "name": "37", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 38, | |
| "timestep": 14, | |
| "opacity": -0.07, | |
| "name": "38", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 39, | |
| "timestep": 14, | |
| "opacity": 1, | |
| "name": "39", | |
| "color": "rgb(255, 192, 203)" | |
| } | |
| ], | |
| "links": [ | |
| { | |
| "source": 0, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 3, | |
| "value": 2 | |
| }, | |
| { | |
| "source": 0, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 4, | |
| "value": 6 | |
| }, | |
| { | |
| "source": 0, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 5, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 1, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 3, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 1, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 4, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 1, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 5, | |
| "value": 3 | |
| }, | |
| { | |
| "source": 2, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 3, | |
| "value": 6 | |
| }, | |
| { | |
| "source": 2, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 4, | |
| "value": 3 | |
| }, | |
| { | |
| "source": 2, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 5, | |
| "value": 7 | |
| }, | |
| { | |
| "source": 3, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 6, | |
| "value": 6 | |
| }, | |
| { | |
| "source": 3, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 7, | |
| "value": 2 | |
| }, | |
| { | |
| "source": 3, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 8, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 4, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 6, | |
| "value": 7 | |
| }, | |
| { | |
| "source": 4, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 7, | |
| "value": 9 | |
| }, | |
| { | |
| "source": 4, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 8, | |
| "value": 4 | |
| }, | |
| { | |
| "source": 5, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 6, | |
| "value": 1 | |
| }, | |
| { | |
| "source": 5, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 7, | |
| "value": 6 | |
| }, | |
| { | |
| "source": 5, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 8, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 6, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 9, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 6, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 10, | |
| "value": 4 | |
| }, | |
| { | |
| "source": 6, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 11, | |
| "value": 2 | |
| }, | |
| { | |
| "source": 7, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 9, | |
| "value": 5 | |
| }, | |
| { | |
| "source": 7, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 10, | |
| "value": 5 | |
| }, | |
| { | |
| "source": 7, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 11, | |
| "value": 7 | |
| }, | |
| { | |
| "source": 8, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 9, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 8, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 10, | |
| "value": 6 | |
| }, | |
| { | |
| "source": 8, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 11, | |
| "value": 9 | |
| }, | |
| { | |
| "source": 9, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 12, | |
| "value": 10 | |
| }, | |
| { | |
| "source": 9, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 13, | |
| "value": 7 | |
| }, | |
| { | |
| "source": 9, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 14, | |
| "value": 4 | |
| }, | |
| { | |
| "source": 10, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 12, | |
| "value": 2 | |
| }, | |
| { | |
| "source": 10, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 13, | |
| "value": 2 | |
| }, | |
| { | |
| "source": 10, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 14, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 11, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 12, | |
| "value": 5 | |
| }, | |
| { | |
| "source": 11, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 13, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 11, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 14, | |
| "value": 5 | |
| }, | |
| { | |
| "source": 12, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 15, | |
| "value": 7 | |
| }, | |
| { | |
| "source": 12, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 16, | |
| "value": 4 | |
| }, | |
| { | |
| "source": 12, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 17, | |
| "value": 6 | |
| }, | |
| { | |
| "source": 13, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 15, | |
| "value": 5 | |
| }, | |
| { | |
| "source": 13, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 16, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 13, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 17, | |
| "value": 4 | |
| }, | |
| { | |
| "source": 14, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 15, | |
| "value": 10 | |
| }, | |
| { | |
| "source": 14, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 16, | |
| "value": 6 | |
| }, | |
| { | |
| "source": 14, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 17, | |
| "value": 4 | |
| }, | |
| { | |
| "source": 15, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 18, | |
| "value": 22 | |
| }, | |
| { | |
| "source": 16, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 19, | |
| "value": 18 | |
| }, | |
| { | |
| "source": 17, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 20, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 18, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 21, | |
| "value": 22 | |
| }, | |
| { | |
| "source": 19, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 22, | |
| "value": 18 | |
| }, | |
| { | |
| "source": 20, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 23, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 21, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 24, | |
| "value": 22 | |
| }, | |
| { | |
| "source": 22, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 25, | |
| "value": 18 | |
| }, | |
| { | |
| "source": 23, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 26, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 24, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 27, | |
| "value": 22 | |
| }, | |
| { | |
| "source": 25, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 28, | |
| "value": 18 | |
| }, | |
| { | |
| "source": 26, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 29, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 27, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 30, | |
| "value": 10 | |
| }, | |
| { | |
| "source": 27, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 31, | |
| "value": 12 | |
| }, | |
| { | |
| "source": 28, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 30, | |
| "value": 7 | |
| }, | |
| { | |
| "source": 28, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 31, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 29, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 30, | |
| "value": 5 | |
| }, | |
| { | |
| "source": 29, | |
| "sourceColor": "rgb(178, 223, 138)", | |
| "target": 31, | |
| "value": 9 | |
| }, | |
| { | |
| "source": 30, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 32, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 30, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 33, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 31, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 32, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 31, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 33, | |
| "value": 18 | |
| }, | |
| { | |
| "source": 32, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 34, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 32, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 35, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 33, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 34, | |
| "value": 12 | |
| }, | |
| { | |
| "source": 33, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 35, | |
| "value": 17 | |
| }, | |
| { | |
| "source": 34, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 36, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 34, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 37, | |
| "value": 12 | |
| }, | |
| { | |
| "source": 35, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 36, | |
| "value": 16 | |
| }, | |
| { | |
| "source": 35, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 37, | |
| "value": 12 | |
| }, | |
| { | |
| "source": 36, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 38, | |
| "value": 16 | |
| }, | |
| { | |
| "source": 36, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 39, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 37, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 38, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 37, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 39, | |
| "value": 13 | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nodes": [ | |
| { | |
| "node": 0, | |
| "timestep": 15, | |
| "opacity": -0.03, | |
| "name": "0", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 1, | |
| "timestep": 15, | |
| "opacity": 1, | |
| "name": "1", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 2, | |
| "timestep": 16, | |
| "opacity": 1, | |
| "name": "2", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 3, | |
| "timestep": 16, | |
| "opacity": 1, | |
| "name": "3", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 4, | |
| "timestep": 17, | |
| "opacity": 1, | |
| "name": "4", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 5, | |
| "timestep": 17, | |
| "opacity": 1, | |
| "name": "5", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 6, | |
| "timestep": 18, | |
| "opacity": 1, | |
| "name": "6", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 7, | |
| "timestep": 18, | |
| "opacity": 1, | |
| "name": "7", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 8, | |
| "timestep": 19, | |
| "opacity": 1, | |
| "name": "8", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 9, | |
| "timestep": 19, | |
| "opacity": 1, | |
| "name": "9", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 10, | |
| "timestep": 20, | |
| "opacity": -0.31, | |
| "name": "10", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 11, | |
| "timestep": 20, | |
| "opacity": 1, | |
| "name": "11", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 12, | |
| "timestep": 21, | |
| "opacity": -0.1, | |
| "name": "12", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 13, | |
| "timestep": 21, | |
| "opacity": 1, | |
| "name": "13", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 14, | |
| "timestep": 22, | |
| "opacity": 1, | |
| "name": "14", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 15, | |
| "timestep": 22, | |
| "opacity": 1, | |
| "name": "15", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 16, | |
| "timestep": 23, | |
| "opacity": 1, | |
| "name": "16", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 17, | |
| "timestep": 23, | |
| "opacity": 1, | |
| "name": "17", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 18, | |
| "timestep": 24, | |
| "opacity": -0.19, | |
| "name": "18", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 19, | |
| "timestep": 24, | |
| "opacity": 1, | |
| "name": "19", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 20, | |
| "timestep": 25, | |
| "opacity": 1, | |
| "name": "20", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 21, | |
| "timestep": 25, | |
| "opacity": 1, | |
| "name": "21", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 22, | |
| "timestep": 26, | |
| "opacity": -0.16, | |
| "name": "22", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 23, | |
| "timestep": 26, | |
| "opacity": 1, | |
| "name": "23", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 24, | |
| "timestep": 27, | |
| "opacity": 1, | |
| "name": "24", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 25, | |
| "timestep": 27, | |
| "opacity": 1, | |
| "name": "25", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 26, | |
| "timestep": 28, | |
| "opacity": 1, | |
| "name": "26", | |
| "color": "rgb(200, 192, 203)" | |
| }, | |
| { | |
| "node": 27, | |
| "timestep": 28, | |
| "opacity": 1, | |
| "name": "27", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 28, | |
| "timestep": 29, | |
| "opacity": -0.04, | |
| "name": "28", | |
| "color": "rgb(84, 84, 84)" | |
| }, | |
| { | |
| "node": 29, | |
| "timestep": 29, | |
| "opacity": 1, | |
| "name": "29", | |
| "color": "rgb(255, 192, 203)" | |
| } | |
| ], | |
| "links": [ | |
| { | |
| "source": 0, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 2, | |
| "value": 20 | |
| }, | |
| { | |
| "source": 0, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 3, | |
| "value": 13 | |
| }, | |
| { | |
| "source": 1, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 2, | |
| "value": 10 | |
| }, | |
| { | |
| "source": 1, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 3, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 2, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 4, | |
| "value": 15 | |
| }, | |
| { | |
| "source": 2, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 5, | |
| "value": 15 | |
| }, | |
| { | |
| "source": 3, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 4, | |
| "value": 15 | |
| }, | |
| { | |
| "source": 3, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 5, | |
| "value": 9 | |
| }, | |
| { | |
| "source": 4, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 6, | |
| "value": 16 | |
| }, | |
| { | |
| "source": 4, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 7, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 5, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 6, | |
| "value": 13 | |
| }, | |
| { | |
| "source": 5, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 7, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 6, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 8, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 6, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 9, | |
| "value": 18 | |
| }, | |
| { | |
| "source": 7, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 8, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 7, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 9, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 8, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 10, | |
| "value": 17 | |
| }, | |
| { | |
| "source": 8, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 11, | |
| "value": 8 | |
| }, | |
| { | |
| "source": 9, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 10, | |
| "value": 17 | |
| }, | |
| { | |
| "source": 9, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 11, | |
| "value": 12 | |
| }, | |
| { | |
| "source": 10, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 12, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 10, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 13, | |
| "value": 20 | |
| }, | |
| { | |
| "source": 11, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 12, | |
| "value": 9 | |
| }, | |
| { | |
| "source": 11, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 13, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 12, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 14, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 12, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 15, | |
| "value": 9 | |
| }, | |
| { | |
| "source": 13, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 14, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 13, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 15, | |
| "value": 17 | |
| }, | |
| { | |
| "source": 14, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 16, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 14, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 17, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 15, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 16, | |
| "value": 22 | |
| }, | |
| { | |
| "source": 15, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 17, | |
| "value": 4 | |
| }, | |
| { | |
| "source": 16, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 18, | |
| "value": 15 | |
| }, | |
| { | |
| "source": 16, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 19, | |
| "value": 21 | |
| }, | |
| { | |
| "source": 17, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 18, | |
| "value": 15 | |
| }, | |
| { | |
| "source": 17, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 19, | |
| "value": 3 | |
| }, | |
| { | |
| "source": 18, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 20, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 18, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 21, | |
| "value": 19 | |
| }, | |
| { | |
| "source": 19, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 20, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 19, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 21, | |
| "value": 10 | |
| }, | |
| { | |
| "source": 20, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 22, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 20, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 23, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 21, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 22, | |
| "value": 13 | |
| }, | |
| { | |
| "source": 21, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 23, | |
| "value": 16 | |
| }, | |
| { | |
| "source": 22, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 24, | |
| "value": 11 | |
| }, | |
| { | |
| "source": 22, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 25, | |
| "value": 13 | |
| }, | |
| { | |
| "source": 23, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 24, | |
| "value": 20 | |
| }, | |
| { | |
| "source": 23, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 25, | |
| "value": 10 | |
| }, | |
| { | |
| "source": 24, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 26, | |
| "value": 17 | |
| }, | |
| { | |
| "source": 24, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 27, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 25, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 26, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 25, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 27, | |
| "value": 9 | |
| }, | |
| { | |
| "source": 26, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 28, | |
| "value": 14 | |
| }, | |
| { | |
| "source": 26, | |
| "sourceColor": "rgb(200, 192, 203)", | |
| "target": 29, | |
| "value": 17 | |
| }, | |
| { | |
| "source": 27, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 28, | |
| "value": 10 | |
| }, | |
| { | |
| "source": 27, | |
| "sourceColor": "rgb(84, 84, 84)", | |
| "target": 29, | |
| "value": 13 | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.sankey = function() { | |
| var sankey = {}, | |
| nodeWidth = 24, | |
| nodePadding = 1, | |
| size = [1, 1], | |
| nodes = [], | |
| links = []; | |
| sankey.nodeWidth = function(_) { | |
| if (!arguments.length) return nodeWidth; | |
| nodeWidth = +_; | |
| return sankey; | |
| }; | |
| sankey.nodePadding = function(_) { | |
| if (!arguments.length) return nodePadding; | |
| nodePadding = +_; | |
| return sankey; | |
| }; | |
| sankey.nodes = function(_) { | |
| if (!arguments.length) return nodes; | |
| nodes = _; | |
| return sankey; | |
| }; | |
| sankey.links = function(_) { | |
| if (!arguments.length) return links; | |
| links = _; | |
| return sankey; | |
| }; | |
| sankey.size = function(_) { | |
| if (!arguments.length) return size; | |
| size = _; | |
| return sankey; | |
| }; | |
| sankey.layout = function(iterations) { | |
| computeNodeLinks(); | |
| computeNodeValues(); | |
| computeNodeBreadths(); | |
| computeNodeDepths(iterations); | |
| computeLinkDepths(); | |
| return sankey; | |
| }; | |
| sankey.relayout = function() { | |
| computeLinkDepths(); | |
| return sankey; | |
| }; | |
| sankey.link = function() { | |
| var curvature = .5; | |
| function link(d) { | |
| var x0 = d.source.x + d.source.dx, | |
| x1 = d.target.x, | |
| xi = d3.interpolateNumber(x0, x1), | |
| x2 = xi(curvature), | |
| x3 = xi(1 - curvature), | |
| y0 = d.source.y + d.sy + d.dy / 2, | |
| y1 = d.target.y + d.ty + d.dy / 2; | |
| return "M" + x0 + "," + y0 | |
| + "C" + x2 + "," + y0 | |
| + " " + x3 + "," + y1 | |
| + " " + x1 + "," + y1; | |
| } | |
| link.curvature = function(_) { | |
| if (!arguments.length) return curvature; | |
| curvature = +_; | |
| return link; | |
| }; | |
| return link; | |
| }; | |
| // Populate the sourceLinks and targetLinks for each node. | |
| // Also, if the source and target are not objects, assume they are indices. | |
| function computeNodeLinks() { | |
| nodes.forEach(function(node) { | |
| node.sourceLinks = []; | |
| node.targetLinks = []; | |
| }); | |
| links.forEach(function(link, i) { | |
| var source = link.source, | |
| target = link.target; | |
| if (typeof source === "number") source = link.source = nodes[link.source]; | |
| if (typeof target === "number") target = link.target = nodes[link.target]; | |
| source.sourceLinks.push(link); | |
| target.targetLinks.push(link); | |
| }); | |
| } | |
| // Compute the value (size) of each node by summing the associated links. | |
| function computeNodeValues() { | |
| // finding links with auto value and inherit value from source node | |
| links.forEach(function(link, i) { | |
| if (link.value == "auto") { | |
| // compute source's targetLinks to determine value for auto ones | |
| autoValue = d3.sum(links[i].source.targetLinks, value); | |
| link.value = autoValue; | |
| console.log("found auto one at link #"+i+" and set to "+autoValue); | |
| } | |
| }); | |
| nodes.forEach(function(node) { | |
| var input = d3.sum(node.sourceLinks, value), | |
| output = d3.sum(node.targetLinks, value); | |
| node.value = Math.max(input, output); | |
| }); | |
| } | |
| // Iteratively assign the breadth (x-position) for each node. | |
| // Nodes are assigned the maximum breadth of incoming neighbors plus one; | |
| // nodes with no incoming links are assigned breadth zero, while | |
| // nodes with no outgoing links are assigned the maximum breadth. | |
| function computeNodeBreadths() { | |
| var remainingNodes = nodes, | |
| nextNodes, | |
| x = 0; | |
| while (remainingNodes.length) { | |
| nextNodes = []; | |
| remainingNodes.forEach(function(node) { | |
| node.x = x; | |
| node.dx = nodeWidth; | |
| node.sourceLinks.forEach(function(link) { | |
| nextNodes.push(link.target); | |
| }); | |
| }); | |
| remainingNodes = nextNodes; | |
| ++x; | |
| } | |
| // | |
| moveSinksRight(x); | |
| scaleNodeBreadths((size[0] - nodeWidth) / (x - 1)); | |
| } | |
| function moveSourcesRight() { | |
| nodes.forEach(function(node) { | |
| if (!node.targetLinks.length) { | |
| node.x = d3.min(node.sourceLinks, function(d) { return d.target.x; }) - 1; | |
| } | |
| }); | |
| } | |
| function moveSinksRight(x) { | |
| nodes.forEach(function(node) { | |
| if (!node.sourceLinks.length) { | |
| node.x = x - 1; | |
| } | |
| }); | |
| } | |
| function scaleNodeBreadths(kx) { | |
| nodes.forEach(function(node) { | |
| node.x *= kx; | |
| }); | |
| } | |
| function computeNodeDepths(iterations) { | |
| var nodesByBreadth = d3.nest() | |
| .key(function(d) { return d.x; }) | |
| .sortKeys(d3.ascending) | |
| .entries(nodes) | |
| .map(function(d) { return d.values; }); | |
| // | |
| initializeNodeDepth(); | |
| resolveCollisions(); | |
| for (var alpha = 1; iterations > 0; --iterations) { | |
| relaxRightToLeft(alpha *= .99); | |
| resolveCollisions(); | |
| relaxLeftToRight(alpha); | |
| resolveCollisions(); | |
| } | |
| function initializeNodeDepth() { | |
| var ky = d3.min(nodesByBreadth, function(nodes) { | |
| return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value); | |
| }); | |
| nodesByBreadth.forEach(function(nodes) { | |
| nodes.forEach(function(node, i) { | |
| node.y = i; | |
| node.dy = node.value * ky; | |
| }); | |
| }); | |
| links.forEach(function(link) { | |
| link.dy = link.value * ky; | |
| }); | |
| } | |
| function relaxLeftToRight(alpha) { | |
| nodesByBreadth.forEach(function(nodes, breadth) { | |
| nodes.forEach(function(node) { | |
| if (node.targetLinks.length) { | |
| var y = d3.sum(node.targetLinks, weightedSource) / d3.sum(node.targetLinks, value); | |
| node.y += (y - center(node)) * alpha; | |
| } | |
| }); | |
| }); | |
| function weightedSource(link) { | |
| return center(link.source) * link.value; | |
| } | |
| } | |
| function relaxRightToLeft(alpha) { | |
| nodesByBreadth.slice().reverse().forEach(function(nodes) { | |
| nodes.forEach(function(node) { | |
| if (node.sourceLinks.length) { | |
| var y = d3.sum(node.sourceLinks, weightedTarget) / d3.sum(node.sourceLinks, value); | |
| node.y += (y - center(node)) * alpha; | |
| } | |
| }); | |
| }); | |
| function weightedTarget(link) { | |
| return center(link.target) * link.value; | |
| } | |
| } | |
| function resolveCollisions() { | |
| nodesByBreadth.forEach(function(nodes) { | |
| var node, | |
| dy, | |
| y0 = 0, | |
| n = nodes.length, | |
| i; | |
| // Push any overlapping nodes down. | |
| nodes.sort(ascendingDepth); | |
| for (i = 0; i < n; ++i) { | |
| node = nodes[i]; | |
| dy = y0 - node.y; | |
| if (dy > 0) node.y += dy; | |
| y0 = node.y + node.dy + nodePadding; | |
| } | |
| // If the bottommost node goes outside the bounds, push it back up. | |
| dy = y0 - nodePadding - size[1]; | |
| if (dy > 0) { | |
| y0 = node.y -= dy; | |
| // Push any overlapping nodes back up. | |
| for (i = n - 2; i >= 0; --i) { | |
| node = nodes[i]; | |
| dy = node.y + node.dy + nodePadding - y0; | |
| if (dy > 0) node.y -= dy; | |
| y0 = node.y; | |
| } | |
| } | |
| }); | |
| } | |
| function ascendingDepth(a, b) { | |
| return a.y - b.y; | |
| } | |
| } | |
| function computeLinkDepths() { | |
| nodes.forEach(function(node) { | |
| node.sourceLinks.sort(ascendingTargetDepth); | |
| node.targetLinks.sort(ascendingSourceDepth); | |
| }); | |
| nodes.forEach(function(node) { | |
| var sy = 0, ty = 0; | |
| node.sourceLinks.forEach(function(link) { | |
| link.sy = sy; | |
| sy += link.dy; | |
| }); | |
| node.targetLinks.forEach(function(link) { | |
| link.ty = ty; | |
| ty += link.dy; | |
| }); | |
| }); | |
| function ascendingSourceDepth(a, b) { | |
| return a.source.y - b.source.y; | |
| } | |
| function ascendingTargetDepth(a, b) { | |
| return a.target.y - b.target.y; | |
| } | |
| } | |
| function center(node) { | |
| return node.y + node.dy / 2; | |
| } | |
| function value(link) { | |
| return link.value; | |
| } | |
| return sankey; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment