Skip to content

Commit cb3b0a3

Browse files
satrasatra
committed
add: new sankey output
1 parent b3d49f4 commit cb3b0a3

File tree

3 files changed

+125
-2
lines changed

3 files changed

+125
-2
lines changed

‎nipype/pipeline/engine.py

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -713,7 +713,10 @@ def _write_report_info(self, workingdir, name, graph):
713713
'report_template.html'),
714714
os.path.join(report_dir, 'index.html'))
715715
shutil.copyfile(os.path.join(os.path.dirname(__file__),
716-
'..', 'external', 'd3..min.js'),
716+
'report_template2.html'),
717+
os.path.join(report_dir, 'index2.html'))
718+
shutil.copyfile(os.path.join(os.path.dirname(__file__),
719+
'..', 'external', 'd3.min.js'),
717720
os.path.join(report_dir, 'd3.min.js'))
718721
nodes, groups = topological_sort(graph, depth_first=True)
719722
graph_file = os.path.join(report_dir, 'graph1.json')

‎nipype/pipeline/report_template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ <h2>
5555
</h2>
5656
<div style="position:absolute;bottom:0;font-size:18px;">tension:
5757
<input style="position:relative;top:3px;" type="range" min="0" max="100" value="85"></div>
58-
<script type="text/javascript" src="d3.v3.min.js"></script>
58+
<script type="text/javascript" src="d3.min.js"></script>
5959
<script type="text/javascript">
6060

6161
(function() {

‎nipype/pipeline/report_template2.html

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset="utf-8">
4+
<title>Sankey Diagram</title>
5+
<style>
6+
7+
#chart {
8+
height: 500px;
9+
}
10+
11+
.node rect {
12+
cursor: move;
13+
fill-opacity: .9;
14+
shape-rendering: crispEdges;
15+
}
16+
17+
.node text {
18+
pointer-events: none;
19+
text-shadow: 0 1px 0 #fff;
20+
}
21+
22+
.link {
23+
fill: none;
24+
stroke: #000;
25+
stroke-opacity: .2;
26+
}
27+
28+
.link:hover {
29+
stroke-opacity: .5;
30+
}
31+
32+
</style>
33+
<body>
34+
35+
<h1>Nipype workflow: Sankey Diagram</h1>
36+
37+
<p id="chart">
38+
39+
<aside>Drag to rearrange nodes.</aside>
40+
41+
<script src="d3.min.js"></script>
42+
<script src="http://bost.ocks.org/mike/sankey/sankey.js"></script>
43+
<script>
44+
45+
var margin = {top: 1, right: 1, bottom: 6, left: 1},
46+
width = 1024 - margin.left - margin.right,
47+
height = 500 - margin.top - margin.bottom;
48+
49+
var formatNumber = d3.format(",.0f"),
50+
format = function(d) { return formatNumber(d) + " TWh"; },
51+
color = d3.scale.category20();
52+
53+
var svg = d3.select("#chart").append("svg")
54+
.attr("width", width + margin.left + margin.right)
55+
.attr("height", height + margin.top + margin.bottom)
56+
.append("g")
57+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
58+
59+
var sankey = d3.sankey()
60+
.nodeWidth(15)
61+
.nodePadding(10)
62+
.size([width, height]);
63+
64+
var path = sankey.link();
65+
66+
d3.json("graph1.json", function(energy) {
67+
68+
sankey
69+
.nodes(energy.nodes)
70+
.links(energy.links)
71+
.layout(32);
72+
73+
var link = svg.append("g").selectAll(".link")
74+
.data(energy.links)
75+
.enter().append("path")
76+
.attr("class", "link")
77+
.attr("d", path)
78+
.style("stroke-width", function(d) { return Math.max(5, Math.min(0.1, d.dy)); })
79+
.sort(function(a, b) { return b.dy - a.dy; });
80+
81+
link.append("title")
82+
.text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
83+
84+
var node = svg.append("g").selectAll(".node")
85+
.data(energy.nodes)
86+
.enter().append("g")
87+
.attr("class", "node")
88+
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
89+
.call(d3.behavior.drag()
90+
.origin(function(d) { return d; })
91+
.on("dragstart", function() { this.parentNode.appendChild(this); })
92+
.on("drag", dragmove));
93+
94+
node.append("rect")
95+
.attr("height", function(d) { return d.dy; })
96+
.attr("width", sankey.nodeWidth())
97+
.style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
98+
.style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
99+
.append("title")
100+
.text(function(d) { return d.name + "\n" + format(d.value); });
101+
102+
node.append("text")
103+
.attr("x", -6)
104+
.attr("y", function(d) { return d.dy / 2; })
105+
.attr("dy", ".35em")
106+
.attr("text-anchor", "end")
107+
.attr("transform", null)
108+
.text(function(d) { return d.name; })
109+
.filter(function(d) { return d.x < width / 2; })
110+
.attr("x", 6 + sankey.nodeWidth())
111+
.attr("text-anchor", "start");
112+
113+
function dragmove(d) {
114+
d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
115+
sankey.relayout();
116+
link.attr("d", path);
117+
}
118+
});
119+
120+
</script>

0 commit comments

Comments
 (0)