-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (130 loc) · 7.25 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
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<head>
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<script src="main.js"></script>
<title>Mapstats - Statistics on D3.js-maps</title>
</head>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Mapstats - Statistics on D3.js-maps</span>
<div class="mdl-layout-spacer"></div>
<!--<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">-->
<!--<i class="material-icons">more_vert</i>-->
<!--</button>-->
<!--<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">-->
<!--<li class="mdl-menu__item">About</li>-->
<!--<li class="mdl-menu__item">Contact</li>-->
<!--<li class="mdl-menu__item">Legal information</li>-->
<!--</ul>-->
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href="https://github.com/lioman/mapstats"><i
class="fi-social-github mdl-color-text--blue-grey-400 material-icons"></i>Github</a>
<a class="mdl-navigation__link"
href="https://flattr.com/submit/auto?user_id=lioman&url=https%3A%2F%2Flioman.github.io%2Fmapstats%2F"
target="_blank"><img class="mdl-color-text--blue-grey-400 material-icons" style="width: 1em"
src="img/Flattr.svg" alt="Flattr this" title="Flattr this" border="0">Flattr</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href="#"><i
class="mdl-color-text--blue-grey-400 material-icons">help_outline</i></a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid demo-content">
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<div class="map" id="map"></div>
<div>
<a href="http://ec.europa.eu/eurostat" id="sourceLink" class="icon material-icons">assessment</a>
</div>
<div class="mdl-tooltip" for="sourceLink">
Data Source: eurostat
</div>
</div>
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="explanation mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-card--expand mdl-color--teal-200">
<h2 class="mdl-card__title-text">Data Explanation</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="explanation">
</div>
</div>
</div>
<div class="demo-separator mdl-cell--1-col"></div>
<div class="demo-options mdl-card mdl-color--deep-purple-200 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
<h3>View options</h3>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radioPax">
<input onclick="drawBubbles();" id="radioPax" type="radio"
class="mdl-radio__button typeRadio" name="types" value="pax" checked/>
<span class="mdl-radio__label">Passengers</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radioGoods">
<input onclick="drawBubbles();" id="radioGoods" type="radio"
class="mdl-radio__button typeRadio" name="types" value="goods"/>
<span class="mdl-radio__label">Goods</span>
</label>
<div>
<label><b>Select Year:</b>
<select id="choosedYear" onchange="drawBubbles();">
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "//lioman.indus.uberspace.de/piwik/";
_paq.push(['setTrackerUrl', u + 'piwik.php']);
_paq.push(['setSiteId', 8]);
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.async = true;
g.defer = true;
g.src = u + 'piwik.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<noscript><p><img src="//lioman.indus.uberspace.de/piwik/piwik.php?idsite=8" style="border:0;" alt=""/></p></noscript>
<!-- End Piwik Code -->
</body>
<script>
$(document).ready(function () {
drawMap();
})
</script>
</html>