forked from benlogan/VerticalSankey
-
Notifications
You must be signed in to change notification settings - Fork 0
/
UBS.html
102 lines (85 loc) · 4.31 KB
/
UBS.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
<!DOCTYPE html>
<html>
<head>
<title>UBS 2015 Q1 Results</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css" type="text/css"/>
<script type="text/javascript" src="scripts/d3/d3.js"></script>
<script src="scripts/sankey.js"></script>
</head>
<body>
<p>UBS Operating Income by Region & Business Group. Q1 2015. A Vertical Sankey Diagram.</p>
<p id="chart">
<script>
var margin = {top: 1, right: 1, bottom: 6, left: 1},
width = 1000 - margin.left - margin.right, // was 960
//height = 1500 - margin.top - margin.bottom; // was 500
height = 650; // UBS Example
var formatNumber = d3.format(",.0f"),
format = function(d) { return formatNumber(d) + "m CHF"; },
color = d3.scale.category20();
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(25) // was 15
.nodePadding(20) // was 10
.size([width, height]);
var path = sankey.link();
d3.json("data/ubs.json", function(energy) {
sankey
.nodes(energy.nodes)
.links(energy.links)
.layout(32); // what is this? iterations
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); })
.style("stroke", function(d) { return d.source.color = color(d.source.name.replace(/ .*/, "")); })
.sort(function(a, b) { return b.dy - a.dy; });
link.append("title")
.text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); });
// title is an SVG standard way of providing tooltips, up to the browser how to render this, so changing the style is tricky
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", sankey.nodeWidth())
.attr("width", function(d) { return d.dy; })
.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); });
node.append("text")
.attr("text-anchor", "middle")
.attr("x", function (d) { return d.dy / 2 })
.attr("y", sankey.nodeWidth() / 2)
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.filter(function(d) { return d.x < width / 2; });
function dragmove(d) {
//d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
d3.select(this).attr("transform", "translate(" + (d.x = Math.max(0, Math.min(width - d.dy, d3.event.x))) + "," + d.y + ")");
sankey.relayout();
link.attr("d", path);
}
});
</script>
<div id="dataSourceFooter">
<p>Data Source: <a target="_blank" href="http://www.ubs.com/global/en/about_ubs/investor_relations/quarterly_reporting/2015.html">http://www.ubs.com/global/en/about_ubs/investor_relations/quarterly_reporting/2015.html</a></p>
</div>
</body>
</html>