-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (116 loc) · 3.05 KB
/
index.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
<html>
<head>
<title>Deficit and Debt</title>
<script type="text/javascript" src="vendor/protovis-3.2/protovis-d3.2.js"></script>
<style type="text/css">
body {
font: oblique 16px baskerville;
padding: 2em;
}
h1 {
text-align: center;
font: normal 28px baskerville;
font-weight: normal;
}
#fig, p.description {
width: 800px;
margin: auto;
}
</style>
</head>
<body>
<h1>National Deficit and Debts Around the World in 2009-2011</h1>
<p class="description">Figures are shown as a percentage of GDP. Deficit
(first figure, black) is excess of government expenditure over income. Debt
(second figure, gray) is total national debt (the impact of accumulated
deficits/surpluses to date). Black ring shows 100% GDP. (<a target="_blank"
href="http://datahub.io/dataset/deficit-and-debt/resource/b2d6733e-144a-4674-adaf-42b55a7423d5">Source
data</a>).</p>
<div id="center"><div id="fig">
<script type="text/javascript+protovis">
var data2009 = {
'year': 2009,
'header': ['Index', 'Country', '2009 Deficit', '2009 Debt'],
'data': [
[0, 'Greece', 13.5, 115.1 ],
[1, 'UK', 11.3, 68.1],
[2, 'US', 9.9, 83.4],
[3, 'Germany', 3.3, 73.2],
[4, 'Sweden', 0.8, 42.3]
]
};
var data2010 = {
'year': 2010,
'header': ['Index', 'Country', '2010 Deficit', '2010 Debt'],
'data': [
[0, 'Greece', 10.3, 145 ],
[1, 'UK', 10.2, 79.6],
[2, 'US', 9, 94.2],
[3, 'Germany', 4.3, 83],
[4, 'Sweden', 0.3, 39.4]
]
}
var data2011 = {
'year': 2011,
'header': ['Index', 'Country', '2011 Deficit', '2011 Debt'],
'data': [
[0, 'Greece', 9.1, 165.3 ],
[1, 'UK', 8.3, 85.7],
[2, 'US', 8.7, 98.7],
[3, 'Germany', 1, 81.2],
[4, 'Sweden', 0.3, 38.4]
]
};
var h = 200,
w = 4*h;
var r = (0.3*h)*(0.3*h),
b = 0.4*h;
function proportion(percentage) {
return (percentage/100)*r;
}
function addVis(tabular) {
var vis = new pv.Panel()
.width(w)
.height(h)
.fillStyle(null)
.strokeStyle(null);
vis.add(pv.Panel)
.data(tabular.data)
.add(pv.Dot)
.fillStyle("#c2c2c2")
// .fillStyle("rgba(150,150,150,0.4)")
.strokeStyle("#c2c2c2")
.left(function(d) (d[0]+1)*100+d[0]*50)
.bottom(function() b)
.size(function(d) proportion(d[3]))
.add(pv.Dot)
.fillStyle("#555")
.strokeStyle(null)
.left(function(d) (d[0]+1)*100+d[0]*50)
.bottom(function() b)
.size(function(d) proportion(d[2]))
.add(pv.Dot)
.fillStyle(null)
.strokeStyle("#000")
.left(function(d) (d[0]+1)*100+d[0]*50)
.bottom(function() b)
.size(function(d) r)
.anchor('top')
.add(pv.Label)
.left(function(d) (d[0]+1)*100+d[0]*50)
.top(40)
.text(function(d) {
return d[1] + ' (' + d[2] + '%, ' + d[3] + '%)';
});
vis.add(pv.Label)
.left(0)
.bottom(b)
.text(tabular.year.toString());
vis.render();
}
addVis(data2009);
addVis(data2010);
addVis(data2011);
</script>
</div></div></body>
</html>