-
Notifications
You must be signed in to change notification settings - Fork 52
/
embed.html
98 lines (91 loc) · 2.59 KB
/
embed.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
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Global international migration flows | Wittgenstein Centre</title>
<meta name=description content="Global Migration Data Sheet 2013: Unique estimates of migration flows between the top 50 sending and receiving countries.">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" type="image/png">
<link href="dist/app-v1.css" rel="stylesheet" media="all">
<!--[if lt IE 9]><script src=javascripts/html5shiv-printshiv.js></script><![endif]-->
<script src="dist/app-v1.js"></script>
<style>
body {
background-color: white;
text-align: center;
min-width: 460px;
}
#timeline {
position: relative;
margin-top: 3ex;
}
#diagram {
margin: 0 auto;
max-width: 800px;
}
footer {
position: absolute;
bottom: 1ex;
right: 0;
}
@media all and (max-width: 600px) {
.year label {
padding: 8px 15px 5px;
font-size: 13px;
}
svg {
font-size: 15px;
}
text.region {
font-size: 16px;
}
}
@media all and (max-width: 580px) {
.year label {
font-size: 11px;
}
}
@media all and (max-width: 500px) {
.year label {
font-size: 9px;
}
}
</style>
</head>
<body>
<nav>
<div id="timeline"></div>
</nav>
<div id="diagram"></div>
<footer>
<small><a href="http://global-migration.info/" target="_blank">global-migration.info</a></small>
</footer>
<script>
(function() {
var datafile = 'json/migrations.json';
var aLittleBit = Math.PI / 100000;
d3.json(datafile, function(data) {
var now = 2005;
var chart = Globalmigration.chart(data, {
element: '#diagram',
now: now,
animationDuration: 500,
margin: 125,
arcPadding: 0.04,
layout: {
threshold: 50000,
labelThreshold: 5000,
colors: 'cd3d08 ec8f00 6dae29 683f92 b60275 2058a5 00a592 009d3c 378974 ffca00'.split(' ').map(function(c) { return '#' + c; })
}
});
Globalmigration.timeline(chart, {
now: now,
element: '#timeline'
});
chart.draw(now);
});
})();
var _gaq=[['_setAccount','UA-42659946-1'],['_trackPageview']];(function(a,b){var c=a.createElement(b),d=a.getElementsByTagName(b)[0];c.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";d.parentNode.insertBefore(c,d)})(document,"script");
</script>
</body>
</html>