-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlineoftherapy.html
188 lines (157 loc) · 5.42 KB
/
lineoftherapy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<meta charset="utf-8">
<title>Line of Treatment</title>
<style>
.node rect {
/*cursor: move; /* changes icon cursor */
/*fill-opacity: .9;*/
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
/*text-shadow: 0 1px 0 #fff;*/
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #d3d3d3;
stroke-opacity: .5;
}
/* changes what happens to the link lines during mouseover */
.link:hover {
stroke: #939393;
stroke-opacity: 1;
}
</style>
<body>
<p id="chart">
<script src="http://d3js.org/d3.v3.min.js"></script> <!-- imports d3 -->
<script src="./js/sankey.js"></script> <!-- imports sankey plug-in -->
<script>
var units = "Widgets";
// set canvas size
var margin = {top: 10, right: 185, bottom: 10, left: 10},
width = 1300 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var formatNumber = d3.format(",.0f"), // zero decimal places
format = function(d) { return formatNumber(d) + " " + units; },
color = d3.scale.category20c(); //color scale
// 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(3) //width of node
.nodePadding(15) //padding between nodes
.size([width, height]);
var path = sankey.link();
// load the data (using the timelyportfolio csv method)
d3.csv("./data/lineoftreatment.csv", function(error, data) {
//set up graph in same style as original example but empty
graph = {"nodes" : [], "links" : []};
data.forEach(function (d) {
graph.nodes.push({ "name": d.source });
graph.nodes.push({ "name": d.target });
graph.links.push({ "source": d.source,
"target": d.target,
"value": +d.value,
"xPos": d.xPos
});
});
// return only the distinct / unique nodes
graph.nodes = d3.keys(d3.nest()
.key(function (d) { return d.name; })
.map(graph.nodes));
// loop through each link replacing the text with its index from node
graph.links.forEach(function (d, i) {
graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
});
//now loop through each nodes to make nodes an array of objects
// rather than an array of strings
graph.nodes.forEach(function (d, i) {
graph.nodes[i] = { "name": d };
});
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); }) // this changes the size of the stroke depending on value
.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" + d.src; });
// 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("height", 50)
.attr("width", sankey.nodeWidth())
.style("fill", function(d) {
return d.color = color(d.name.replace(/ .*/, "")); })
//.style("stroke", "black")
.style("stroke-width", ".5px")
.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"); */
node.append("text")
.attr("y", function(d) {return d.dy / 2; })
.attr("x", function(d) {return d.dx / 2; })
.attr("dy", ".35em")
.attr("dx", ".25em")
.attr("stroke", "black")
.attr("stroke-width", ".3px")
.attr("text-anchor", "start") // position of text
//.style("font-size", function(d) {return Math.max(10, d.dy/5) ; }) //font size depends on bar size, unless the text is too small
.text(function(d) { return d.name; })
// the function for moving the nodes
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>
</body>
</html>