-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (69 loc) · 2.35 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
<html>
<head>
<script src="bower_components/d3/d3.js"></script>
<script>
var countries = [];
var scales = {
linear: d3.scale.linear().domain([0,1]).range([0,30]),
opacity: d3.scale.linear().domain([0, 40]).range([0, 1])
};
var x = function(d) { return scales.linear(d['FP.CPI.TOTL.ZG']); };
var y = function(d) { return scales.linear(d['SL.UEM.TOTL.ZS']); };
// simple zoom example http://bl.ocks.org/mbostock/6226534
var zoom = d3.behavior.zoom()
.on('zoom', zoomed);
function zoomed() {
d3.select('g.root')
.attr("transform", "translate(" + d3.event.translate + ") " +
"scale(" + d3.event.scale + ")");
}
d3.text('data/index', function(content) {
data = content.split('\n').filter(function(d) { return d; });
data.map(function(d) {
d3.json('data/converted/'+d, function(data) {
countries.push({
name: d,
lines: data
});
var enterCountries = d3.select('g.root')
.selectAll('g.country')
.data(countries, function(d) { return d.name; })
.enter()
.append('g').attr('class','country');
enterCountries
.append('title').text(function(d) { return d.name; });
enterCountries
.selectAll('line')
.data(function(d) { return d.lines; })
.enter()
.append('line')
.call(zoom)
.transition()
.delay(function (d, i) { return i * 500; })
.attr('style', function (d, i) {
var o = scales.opacity(i);
return 'opacity: '+o;
})
.attr('x1', function(d) { return x(d[0]); })
.attr('x2', function(d) { return x(d[1]); })
.attr('y1', function(d) { return y(d[0]); })
.attr('y2', function(d) { return y(d[1]); });
});
});
});
</script>
<style>
svg { background: black; }
line { stroke: white; }
g.country:hover line {
stroke: red;
stroke-width: 5;
}
</style>
</head>
<body>
<svg width="1200" height="600">
<g class="root" transform="translate(10, 10)"></g>
</svg>
</body>
</html>