-
Notifications
You must be signed in to change notification settings - Fork 53
/
index.html
138 lines (121 loc) · 6.07 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
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Map of Contemporaries</title>
<meta name="description" content="The history of the world in famous people’s lifespans.">
<link rel="shortcut icon" type="image/png" href="./public/favicon.ico">
<meta property="og:title" content="Map of Contemporaries"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://ybogdanov.github.io/history-timeline/"/>
<meta property="og:image" content="https://ybogdanov.github.io/history-timeline/public/img/og-image2.jpg"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:site_name" content="Map of Contemporaries"/>
<meta property="og:description"
content="The history of the world in famous people’s lifespans."/>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-72914408-1', 'auto');
ga('send', 'pageview');
</script>
<link rel="stylesheet/less" type="text/css" href="public/style/style.less" />
<script src="public/js/less.min.js" type="text/javascript"></script>
</head>
<body class="loading">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=1671578306458332";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="container">
<div id="content">
<div id="ruler">
<svg></svg>
</div>
<svg id="chart"></svg>
<div class="loading-message">Loading...</div>
</div>
<div id="sidebar">
<div class="header">
<div class="section share">
<div class="share-button fb-share-button"
data-href="https://ybogdanov.github.io/history-timeline/"
data-layout="button_count">
</div>
<div class="share-button">
<a href="https://twitter.com/share" class="twitter-share-button" style="display: none" data-url="https://ybogdanov.github.io/history-timeline/" data-text="The history of the world in famous people’s lifespans." data-via="yuriybogdanov">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.async=true;js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style="clear: left; padding: 10px 0;">
<a class="fb-like-btn" href="https://www.facebook.com/MapOfContemporaries" target="_blank"><strong>Like me</strong> to stay updated!</a>
</div>
<div style="clear: left">
<a class="gh-btn" href="https://github.com/ybogdanov/history-timeline/blob/master/README.md" target="_blank">Read about the project</a>
</div>
</div>
<div class="section">
Showing <span class="display-people-num">...</span> people<br />
<label>
Fewer <input type="range" name="moreless" max="100" min="1" value="100"> More
</label>
</div>
<div class="section">
<div>
<label>
<input type="checkbox" name="display_country" value="true"> Display place of birth
</label>
</div>
<div>
Color by:
<label>
<input type="radio" name="color_by" value="type" checked="checked"> Area
</label>
<label>
<input type="radio" name="color_by" value="country"> Place of birth
</label>
</div>
</div>
</div>
<div class="content">
<div class="section">
<span>Area:</span>
<a class="unckeck-all-types" href="javascript:void(0)">Uncheck all</a>
<a class="check-all-types" href="javascript:void(0)">Check all</a>
<ul id="type-legend" class="legend"></ul>
</div>
<div class="section">
<span>Place of birth:</span>
<a class="unckeck-all-countries" href="javascript:void(0)">Uncheck all</a>
<a class="check-all-countries" href="javascript:void(0)">Check all</a>
<ul id="country-legend" class="legend"></ul>
</div>
</div>
</div>
<a href="https://github.com/ybogdanov/history-timeline"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:999;width:80px;height:80px;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
</div>
<div id="footer">
Yu, A. Z., et al. (2016). <a href="http://pantheon.media.mit.edu/">Pantheon</a> 1.0. Scientific Data 2:150075. doi: 10.1038/sdata.2015.75 |
Birth and death dates are mapped from <a href="https://www.wikipedia.org/">Wikipedia</a> |
<a href="https://github.com/ybogdanov/history-timeline/blob/master/README.md">Read about the project here →</a><br />
</div>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
window.data = null;
window.dataReady = function(d) { data = d };
</script>
<script src="public/data/data_10000.js"></script>
<script src="public/js/main.js"></script>
<script>
$(window.runHistoryTimeline);
</script>
</body>
</html>