-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathslopegraph.html
118 lines (106 loc) · 5.63 KB
/
slopegraph.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
<html>
<head>
<title>Current Receipts of Government as a Percentage of Gross Domestic Product, 1970 and 1979</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div class="content">
<h1>Current Receipts of Government as a Percentage of Gross Domestic Product, 1970 and 1979</h1>
<script type="text/javascript">
var pt = 12; // font-size; set also in style.css
var margin = {top: 20, right: 20, bottom: 20, left: 20};
var w = 600 - margin.left - margin.right;
var h = 600 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("class", "slopegraph")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var slopedata = {
"col1": [
{"label": "Sweden", "1970": "46.9", "1979": "57.4"},
{"label": "Netherlands", "1970": "44.0", "1979": "55.8"},
{"label": "Norway", "1970": "43.5", "1979": "52.2"},
{"label": "Britain", "1970": "40.7", "1979": "39.0"},
{"label": "France", "1970": "39.0", "1979": "43.4"},
{"label": "Germany", "1970": "37.5", "1979": "42.9"},
{"label": "Belgium", "1970": "35.2", "1979": "43.2"},
{"label": "Canada", "1970": "35.2", "1979": "35.8"},
{"label": "Finland", "1970": "34.9", "1979": "38.2"},
{"label": "Italy", "1970": "30.4", "1979": "35.7"},
{"label": "United States", "1970": "30.3", "1979": "32.5"},
{"label": "Greece", "1970": "26.8", "1979": "30.6"},
{"label": "Switzerland", "1970": "26.5", "1979": "33.2"},
{"label": "Spain", "1970": "22.5", "1979": "27.1"},
{"label": "Japan", "1970": "20.7", "1979": "26.6"}],
"col2": [
{"label": "Sweden", "1970": "46.9", "1979": "57.4"},
{"label": "Netherlands", "1970": "44.0", "1979": "55.8"},
{"label": "Norway", "1970": "43.5", "1979": "52.2"},
{"label": "France", "1970": "39.0", "1979": "43.4"},
{"label": "Belgium", "1970": "35.2", "1979": "43.2"},
{"label": "Germany", "1970": "37.5", "1979": "42.9"},
{"label": "Britain", "1970": "40.7", "1979": "39.0"},
{"label": "Finland", "1970": "34.9", "1979": "38.2"},
{"label": "Canada", "1970": "35.2", "1979": "35.8"},
{"label": "Italy", "1970": "30.4", "1979": "35.7"},
{"label": "Switzerland", "1970": "26.5", "1979": "33.2"},
{"label": "United States", "1970": "30.3", "1979": "32.5"},
{"label": "Greece", "1970": "26.8", "1979": "30.6"},
{"label": "Spain", "1970": "22.5", "1979": "27.1"},
{"label": "Japan", "1970": "20.7", "1979": "26.6"}],
};
var sorted = {
"1970": [46.9, 44.0, 43.5, 40.7, 39.0, 37.5, 35.2, 35.2, 34.9, 30.4, 30.3, 26.8, 26.5, 22.5, 20.7],
"1979": [57.4, 55.8, 52.2, 43.4, 43.2, 42.9, 39.0, 38.2, 35.8, 35.7, 33.2, 32.5, 30.6, 27.1, 26.6]
};
var scale = d3.scale.linear()
.domain([20.7, 57.4]) // these are min, max for both columns
.range([0, h]);
var tabpad = "\t\t\t\t";
var texts = svg.selectAll("text")
.data(slopedata)
.enter();
var vertplace = function(d, i, key) {
if (i > 0) {
var prev = slopedata[i-1];
prevy = vertplace(prev, i-1, key);
var curry = scale(d[key]);
var diff = Math.abs(curry - prevy);
if (diff < pt) {
return prevy - 12;
} else {
return curry;
}
} else {
return scale(d[key]);
} };
texts.append("text")
.attr("x", 200)
.attr("y", function(d, i) { return h - vertplace(d, i, "1970"); })
//.attr("y", function (d) { return h - scale(d["1970"]);})
.text(function (d) {return d.label + tabpad + d["1970"];})
.attr("xml:space", "preserve")
.attr("style", "text-anchor: end");
texts.append("text")
.attr("x", 400)
.attr("y", function(d, i) {return h - vertplace(d, i, "1979");})
.text(function (d) {return d["1979"] + tabpad + d.label;})
.attr("xml:space", "preserve");
var space = 10; // spacing between text and line
var lines = svg.selectAll("line")
.data(slopedata)
.enter()
lines.append("line")
.attr("x1", 200 + space)
.attr("y1", function(d, i) {return h - vertplace(d, i, "1970");})
.attr("x2", 400 - space)
.attr("y2", function(d, i) {return h - vertplace(d, i, "1979");})
.attr("stroke-width", 1)
.attr("stroke", "black");
</script>
</div> <!-- .content -->
</body>
</html>