forked from minikarma/velobike
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·151 lines (140 loc) · 6.95 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
149
150
151
<!DOCTYPE html>
<meta charset="utf-8">
<meta property="og:image" content="http://velodata.ru/poster.png" />
<meta property="og:title" content="Анализ использования городского велопроката в Санкт-Петербурге" />
<meta property="og:description" content="" />
<title>Анализ использования городского велопроката в Санкт-Петербурге за 2014 год</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<link rel="shortcut icon" href="http://sitename.ru/favicon.png" />
<link rel="icon" type="image/svg+xml" href="favicon.svg"/>
<link rel="alternate icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" href="velobikes.css?ghjgsss" />
<script src="js/params.js"></script>
<body>
<div id="header">
<div id="logo"></div>
<div id="menu-mode">Маршруты</div>
<div id="right-menu">
<!-- <div id="lang-btn">По-русски</div> -->
<!-- div id="share-like">
<span id="share-like-label"></span>
<span class="share-icon"><a target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fgetwalk.me%2Fvelo%2F"><img src="img/icon-facebook.svg" border="0" width="22" height="22" /></a></span>
<span class="share-icon"><a target="_blank" href="https://twitter.com/intent/tweet?text=Bike%20share%20stats%20in%20Moscow%20by%20@karmatsky%20http%3A%2F%2Fgetwalk.me%2Fvelo%2F"><img src="img/icon-twitter.svg" border="0" width="22" height="22" /></a></span>
<span class="share-icon"><a target="_blank" href="https://plus.google.com/share?url=http%3A%2F%2Fgetwalk.me%2Fvelo%2F"><img src="img/icon-google.svg" border="0" width="22" height="22" /></a></span>
</div -->
</div>
<div id="menu">
<div id="mode-routes" class="menu-item-selected"></div>
<div id="mode-heatmap" class="menu-item"></div>
<div id="mode-calendar" class="menu-item"></div>
<div id="mode-about" class="menu-item"></div>
</div>
</div>
<div id="loader">
<div id="loader-total"></div>
<div id="loader-welcome"></div>
<div id="loader-welcome2"></div>
<div id="loader-progress-wrap"><div id="loader-progress"></div></div>
<div id="loader-state"></div>
</div>
<div id="tooltip">
<div id="tooltipFirst"></div>
<div id="tooltipSecond"></div>
<div id="tooltipThird"></div>
</div>
<div id="content">
<div id="routes-page" class="page">
<div id="map-routes"></div>
<div id="sidebar">
<div id="station-panel" class="panel">
<div id="station-panel-title">
<div id="station-panel-close" class="closeBtn"></div>
<div id="station-title"></div>
</div>
<div id="station-panel-content"></div>
</div>
</div>
</div>
<div id="heatmap-page" class="page">
<div id="map-heat"></div>
<div id="heatmap-filter-btn" class="panel">
<div id="heatmap-filter-icon"></div>
</div>
<div id="heatmap-controls" class="panel">
<div class="control" id="total-heatmap"></div>
<div id="heatmap-controls-days"></div>
<div id="heatmap-controls-hours"></div>
</div>
<div id="heatmap-info" class="panel">
<div id="heatmap-info-date"></div>
<div id="heatmap-info-weather"></div>
<div id="heatmap-info-time"></div>
<div id="heatmap-info-score"></div>
<div id="heatmap-info-score-description"></div>
</div>
<div id="heatmap-time-control-wrapper">
<div id="heatmap-time-scale" class="panel">
<div id="heatmap-time-scale-graph"></div>
<div id="heatmap-play-control" class="stopped"></div>
</div>
</div>
</div>
<div id="calendar-page" class="page-scrolling">
<div id="calendar-header">
</div>
<div id="calendar-content">
</div>
</div>
<div id="about-page" class="page-scrolling">
<div id="about-title">Привет</div>
<div id="about-content-ru">
<p>Данная визуализация основана на <a href="http://urbica.co/velo/">работе Андрея Кармацкого</a> (студия Urbica). Использована статистика работы питерского <a href="https://www.spb.velogorod.org/">городского велопроката</a> с 4 июля по 31 октября 2014 года и погодные данные за тот же период.</p>
<p>С данными работали:<br/>
Николай Котов<br/>
Алексей Гутев<br/>
Анна Шиян</p>
<p>Помогал с кодом:<br/>
Дмитрий Наркевич</p>
</div>
<div id="about-content-en">
<p>The project shows Moscow bike share system data since 27 June to 4 November 2014.</p>
<p>There are three modes:<br/>Routes — clicking in stations placemarks it shows total stats, stats by hours, stats by weekdays and the most popular directions of rides from this station.
<br/>Activity — heatmaps shows how active every part of bike share coverage, you can play an animation or choose a slice of data by time, hour or by weekday.
<br/>Timeline — bike stats by day of the period. Graph shows how weather conditions influence on bike share system.</p>
<p>Source data: <a href="http://velobike.ru">Velobike</a></p>
<p>The project developed using <a href="http://api.yandex.ru/maps">Yandex Maps API</a> + <a href="https://github.com/yandex/mapsapi-heatmap">heatmap module</a>, <a href="http://d3js.org">D3.js</a></p>
<p>© <a href="http://getwalk.me/">Andrey Karmatsky</a></p>
</div>
</div>
</div>
<script src="http://api-maps.yandex.ru/2.1/?lang=en_US" type="text/javascript"></script>
<script src="js/bowser.min.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="js/heatmap.min.js"></script>
<script src="velobikes.js?tyui"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter26158509 = new Ya.Metrika({id:26158509,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/26158509" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</body>
</html>