-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
574 lines (550 loc) · 41.8 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no" >
<script src='src/js/d3.min.js' defer></script>
<script src='src/js/toggleLogic.js' defer></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet'/>
<link href="src/styles/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&subset=cyrillic"
rel="stylesheet">
</head>
<body>
<div id="map"></div>
<div class="headerInfo" onclick="toggleDescription(true)">
<div class='header'>КАРТА ШУМА</div>
<div class='info' onclick="toggleDescription(true)"><img src="./src/info.svg"
style="width:35px;height:35px;center"></div>
</div>
<div id='description'>
<div class="tab">
<div class="tablinks" onclick="openTab(event,'project')" id="defaultOpen"> О ПРОЕКТЕ</div>
<div class="tablinks" onclick="openTab(event,'method')"> МЕТОДОЛОГИЯ</div>
<button id="closeButton" class="tablinks" onclick="toggleDescription(false)">
<img src="./src/close.svg" style="width:33px;height:28px;">
</button>
</div>
<div id="project" class="tabcontent">
<p> Изучение шума – важная задача в условиях мегаполиса, так как именно этот фактор загрязнения часто не
учитывается, несмотря на своё большое влияние на организм человека. Традиционно шум измеряется в полевых
условиях с множеством датчиков за большой период времени, который должен перекрывать не только дневные,
сезонные, но и годовые изменения различных факторов. Естественно, такой процесс требует больших ресурсов, как
технических, так и человеческих.
</p>
<p></p>
<p> Команда Urbica исследует проблему городского шума, используя новые методы и современные технологии. Мы
подготовили карту шумового загрязнения города Москвы, основанную на модели анализа распространения шума от
определенных типов объектов и уточненную данными, полученными полевыми измерениями при помощи датчиков,
разработанных и собранных самостоятельно.
</p>
<p></p>
<p> Проект релизуется в рамках летней стажировки </p>
<p><b>Кураторы проекта:</b><br/>Анастасия Коновалова, Сергей Горбатюк</p>
<p>
<b>Участники проекта:</b><br/>
Григорий Беляев, эколог,<br/>
Артём Саакян, инженер,<br/>
Андрей Асланов, аналитик,<br/>
Татьяна Иванникова, картограф
</p>
<p>
<b>Контакты:</b><br/>
Email: <a href="mailto:[email protected]">[email protected]</a><br/>
Website: <a href="https://urbica.co">urbica.co</a><br/>
</p>
</div>
<div id="method" class="tabcontent">
<h2> Что такое шумовое загрязнение и почему его важно изучать </h2>
<p>
Население городов растет (уровень урбанизации составляет 54,5% на конец 2016 года, что в абсолютных
показателях равняется 4 миллиардам человек), вместе с тем растут и запросы горожан на качество жизни в
городе, качество городской среды.
</p>
<p>
Шумовое картографирование необходимо крупным городам, так как шумовое загрязнение – один из тех показателей
качества среды, который влияет не только на комфорт жителей, но и на состояние их здоровья. Более 20 миллионов
европейцев подвержены чрезмерному шумовому воздействию, из них около миллиона – имеют тяжелые заболевания
органов слуха, связанные именно с этим фактором (RIVM, 2014).
</p>
<p>
<i>
Карта шума – эффективный инструмент анализа шумового загрязнения города, позволяющий быстро и точно
определить места, наиболее подверженные воздействию шума и выявить источники шума.
</i>
</p>
<p>
Шумовое загрязнение неоднородно в пространстве и во времени, его распространение зависит от множества
параметров городской среды. Именно поэтому необходимо создавать модели и изучать закономерности
распространения шума для того чтобы упростить мониторинг городского шума.
</p>
<p>
Проект включал 5 этапов:
<ul>
<li>разработка методологии исследования;</li>
<li>разработка датчика измерения шума;</li>
<li>статические замеры шума вблизи основных источников источников:</li>
<ul>
<li>дорог разных категорий,</li>
<li> железных дорог,</li>
<li>мест проведения строительных работ,</li>
<li>скопления людей,</li>
</ul>
<li>обработка полученных данных,</li>
<li>создание карты шумового ландшафта города.</li>
</ul>
</p>
<p>
В рамках проекта были поставлены следующие задачи
<ul>
<li>построить карту шумового загрязнения Москвы (или её части, имеющей высокую репрезентативность в масштабах
города,
</li>
<li>разработать методологию, благодаря которой такие же карты могут быть созданы для других городов при
наличии необходимых исходных данных,
</li>
<li>разработать программное обеспечение, которое позволит определять источник шума, что поможет
визуализировать пространственное и временное распределение источников шумового загрязнения,
</li>
<li>найти аппаратное решение для создания и масштабирования шумомера собственной конструкции.</li>
</ul>
</p>
<h2>Классификация шумового загрязнения</h2>
<p>Перед тем как перейти к изучению шумового загрязнения нужно определить, что считаем шумовым загрязнением.
</p>
<p>Шумовое загрязнение – наличие на определенной территории повышенного уровня громкости окружающей среды, шум
антропогенного происхождения, нарушающий жизнедеятельность живых организмов и человека.
</p>
<p>
Помимо изучения уровня шумового загрязнения, мы поставили задачу создать алгоритм определения источников шума,
поэтому нам необходимо определиться с типологией источников шума.
</p>
<p><b>Виды шума.</b>
<br/>
По источнику:
<ul>
<li>
транспортный:
автомобильный
авиационный
железнодорожный
водный
</li>
<li>
строительный
</li>
<li>
естественный (условно)
ветер
вода (пороги, водопады, крупные гидротехнические сооружения)
климатические явления
звуки живой природы
</li>
<li>
антропогенный
массовые скопления людей
культурные мероприятия и общественные пространства
</li>
</ul>
</p>
<p>
По уровню громкости:
<ul>
<li>тихий</li>
<li>умеренный</li>
<li>значительный</li>
<li>высокий</li>
<li>опасный</li>
</ul>
</p>
<p>
По частоте:
<ul>
<li>высокочастотный</li>
<li>среднечастотный</li>
<li>низкочастотный</li>
</ul>
</p>
<p>
По продолжительности воздействия:
<ul>
<li>кратковременный</li>
<li>долгосрочный</li>
<li>постоянный/фоновый (аmbient noise)</li>
</ul>
</p>
<p>
Стоит отметить, что при создании статичной карты шума мы должны отсеивать те виды шума, которые сложно
спрогнозировать в течение различных временных промежутков. Например, места, в которых будет проезжать, включая
сирену, пожарная машина или пройдет уличное шествие. Поэтому измерения уровня
шума датчиками по полному дневному циклу были основаны на выборе точек с максимально репрезентативными
значениями по прогнозируемым факторам влияния.
</p>
<p>Кроме того необходимо определиться с тем, какое измерение шумового загрязнения стоит проводить. Шум имеет
значительные флуктуации не только по дневному и недельному циклу, но и по сезону и по году. В рамках текущего
исследования нет возможности учитывать сезонные и годовые изменения, потому что таких данных по региону
проведения исследования (Москва) в открытом доступе нет. Поэтому исследоваться будет флуктуация по дневному и
недельному циклу и позиционироваться исследование будет как практика измерения и визуализации шума в летний
период.</p>
<p>В условиях такой постановки задачи исследование должно проводиться в отношении наиболее «моделируемых» и
предсказуемых источников звука, тех, чей характер мы можем описать и ставить гипотезы о его свойствах.
Поэтому внимание сосредоточено на четырех источниках:
<ul>
<li>автомобильный транспорт</li>
<li>рельсовый транспорт (открытые участки линий метро, трамваи, ж/д)</li>
<li>скопление людей</li>
<li>стройка/ремонт</li>
</ul>
</p>
<h2>Примеры изучения шумового загрязнения в международной практике</h2>
<p>
При работе над проектом мы ориентировались на некоторые проекты схожей тематики, реализованные в различных
мегаполисах.
</p>
<p>
<a href="https://wp.nyu.edu/sonyc/">SONYC</a> (Sound of New York City) — проект распознавания источников звука
в Манхэттене, основанный на сети высокочувствительных микрофонов и нейросети, обрабатывающих получаемый сигнал.
<img src="./src/2.jpeg"/>
Рисунок 1 – Схема работы определения источника шума проекта SONYC
</p>
<p>
<a href="https://interaktiv.morgenpost.de/laermkarte-berlin/">BerlinerMorgenpost noise map</a> — карта
шумового загрязнения Берлина
(https://interaktiv.morgenpost.de/laermkarte-berlin/) — визуализация данных шумового загрязнения Берлина,
созданная коллективом одноименной газеты. Является хорошим примером не по методологической составляющей
(потому что используется другой подход), а по подходу к визуализации.
<img src="./src/3.png"/>
Рисунок 2 – Карта шума Берлина Berliner Morgenpost
</p>
<p>
<a href="http://lukasmartinelli.ch/gis/2016/04/03/openstreetmap-noise-pollution-map.html">Карта шума</a>
Лукаса Мартинелли
— идея использовать данные <a href="http://OpenStreetMaps.org">OSM</a> при создании карт шума. За основу
принята гипотеза о
наличии тройного буфера, по которому происходит снижение шумового загрязнения. И по каждому классу/типу дорог
значение (ширина) буфера имеет различные значения. В результате карта шума может создаваться для абсолютно
любого участка земной поверхности. Однако, недостаток состоит в том, что в данной модели не учитываются
особенности застройки, плотности движения, количества зеленых насаждений, индивидуальные особенности рельефа,
конкретные особенности организации движения и тд.
<img src="./src/4.png"/>
Рисунок 3 – Карта шума Цюриха Лукаса Мартинелли
</p>
<h2>Измерение шума в Российской Федерации (Москва)</h2>
<p>В РФ, а конкретно, в Москве исследованием шумового загрязнения занимается ГПБУ «Мосэкомониторинг».</p>
<p>Испытательная лаборатория контроля загрязнения атмосферного воздуха и уровней шума ГПБУ «Мосэкомониторинг», в
рамках деятельности которой осуществляется, в том числе, контроль шума на жилых территориях при производстве
строительных работ в ночное время, была создана в 2007 году. Изначально в составе ГПБУ «Мосэкомониторинг»
действовала одна передвижная экологическая лаборатория, осуществляющая мониторинг уровней шума в дневное и
ночное время суток по обращениям граждан и органов исполнительной власти.</p>
<p>В настоящее время на жилых территориях города Москвы, включая ТиНАО проводятся исследования акустической
обстановки с использованием трех передвижных лабораторий, что позволяет расширить адресный перечень
территорий, на которых проводятся <a href="http://www.mosecom.ru/noise/">измерения уровней шума</a>.
</p>
<p>Резюмируя вышесказанное, измерения шума в России, а конкретно, в Москве, проводятся прецедентно в случае
выявления соответствия/несоответствия какого-либо объекта/процесса/зоны соответствующим санитарным нормам. И
эти измерения, соответственно, не имеют систематизированный характер, на их основе нет возможности построить
зависимости и закономерности для измерения городского шума. Поэтому даже если бы к этим показаниям имелся бы
доступ, применение они бы имели весьма ограниченное.
</p>
<h2>Методология команды Urbica</h2>
<p>
Гипотезы рабочие состоят в том, что:
<ol>
<li>
шум, создаваемый автомобильным транспортом в условиях города прямо зависит от полосности дорог и
интенсивности движения по ним,
</li>
<li>
шум имеет закономерности распределения, схожие с теми, что описывал Мустафа Рефат Исмаил в своем <a
href="https://www.omicsgroup.org/journals/a-parametric-study-of-the-effect-of-building-distributions-and-size-on-the-propagation-of-sound-in-the-urban-environment-2168-9717-3-118.pdf/">исследовании</a>
«Распространение звука в городской среде в зависимости от размера и расположения зданий»,
</li>
<li>легитимно вводить коэффициенты транспортной загруженности при корреляции измерений уровня шума на
различных точках.
</li>
</ol>
</p>
<p>
Так как исследование проводится в Москве на российском правовом и «научном» поле, то логично использовать в
методике имеющиеся требования и указания, описанные в соответствующих ГОСТах, а именно ГОСТ Р 53187-2008.
Этот нормативный документ описывает процедуру измерения шума и
особенности шума как такового, оборудование, которым необходимо эти измерения проводить и то, какие параметры
необходимо получить.
</p>
<p>
Однако, временные и прочие рамки не позволяют удовлетворять полностью требованиям ГОСТа, поэтому были приняты
следующие допущения:
<ol>
<li>
натурные (полевые) измерения будут проводиться «минимально сертифицированным» доступным уровнем
профессионального оборудования, под чем имеется в виду измерители уровня шума 2-го класса с возможностью
записи цикла измерений,
</li>
<li>
по причине ограниченности времени, измерения будут проводиться по районам согласно их функциональному
назначению (транзитному/транспортному статусу). И после сбора объёма суточных измерений, в районах
схожего функционального назначения будут проводиться измерения по усечённому циклу для подтверждения/
уточнения существующей модели,
</li>
<li>по той же причине исследования будут проводиться по дневному циклу (07-23), без получения суточных циклов
(или с ограниченными его измерениями) потому как назначение конечного продукта в основном подразумевает
использование продукта в светлое время суток. Следовательно, и модель будет включать показатель Ld без учета
индекса шума А, при вычислении которого необходимо иметь данные о полном суточном изменении шумового
загрязнения.
</li>
</ol>
</p>
<p>Поэтому исследования будут выполняться в следующем ключе. ГОСТ настоятельно рекомендует делать измерения
так, чтобы средний уровень шума в ближайших точках замеров не различался более чем на 5 децибел. Учитывая то,
что для объективной репрезентации информации необходимо достаточное количество градаций в слышимом спектре от
нижнего порога до высшего порога, при котором начинаются необратимые повреждения слуха, необходима
максимальная возможная точность, которую позволит измерительное оборудование. Точность измерений шумомера 2-го
класса составляет +- 1 Дб, так что деление на 5 Дб градациям представляется оптимальным.</p>
<p>Экспериментальны датчик, созданный командой Urbica устанавливался на стационарном объекте (станция velobike)
на время, покрывающее дневной цикл изменения шума в соответствии с требованиями ГОСТа (с 7-00 до 23-00) как по
высоте над поверхностью земли, так и по отношению к внешним элементам конструкций (не считая элементы
конструкции
станции).</p>
<p>В процессе создания экспериментальных прототипов были опробованы несколько платформ (raspberry pi, orange pi,
Arduino nano), по результатам тестирования которых оформились две принципиальные схемы датчиков. Первый — на
базе Arduino, который используется только для измерения уровня шума и записи получившихся данных на sd-карту,
второй — использует orange pi и обладает большим функционалом при меньшей автономности. Второй прототип
использовался не только для полевых измерений уровня шума, но и для процесса определения источника шумового
загрязнения, основанном на алгоритме машинного обучения.
</p>
<p>Позже, во время процесса отладки прототипов, было принято решение отказаться от платформы arduino потому как
её возможностей было недостаточно для выполнения поставленных задач. Недостаточная стабильность работы,
постоянные сбои привели к тому, что данные, полученные с первых прототипов не являются репрезентативными, в то
время как последующие датчики на orange pi работаю стабильнее и дольше, что является важным фактором
успешности исследования.</p>
<h2>Детализация процесса создания карты шума</h2>
<p>
<ol>
<li>
<p>
Первая задача — создание датчика, который может измерять уровень шума. Самое важное при его создание —
выбор
правильных компонентов, которые позволят качественно записывать звук продолжительное время. Поэтому, самой
важной в этом процессе видится задача выбора пары микроконтроллер - микрофон (после проверки различных
конфигураций оптимальной видится пара контроллера OrangePI Zero и микрофона Шорох-11).</p>
<p>Все остальные элементы носят более вспомогательный характер, однако, есть ограничения, которые накладывает специфика
измерения, необходимые к выполнению. Так, при выборе схожей конфигурации, необходимо питание с аккумулятора
ёмкостью не менее 6000 mAh для достаточной продолжительности работы, необходимо ветрозащита для улучшения
качество записи и процессору необходимо охлаждению, что требует установки радиатора и вентилятора
охлаждения. Кроме того, если будет вестись запись с высокой дискретизацией, карта памяти должна
соответствовать 10-му и выше классу для того, чтобы не возникало проблем с функционированием
прибора.</p>
<p>Остальные компоненты установки не должны соответствовать каким-то специфическим требованиям, однако
есть рекомендации по обеспечению хотя бы первичной влагозащиты.</p>
<p>В итоге, все описанные элементы вместе с
корпусом и системными шлейфами при покупке в специализированных магазинах обойдутся примерно в 4000-4500
рублей.</p>
<img src="./src/5.png" alt="Схема шумомера команды Urbica"/>
Рисунок 4 – Схема шумомера команды Urbica
</li>
<li>
<p>
Дальше необходимо провести измерения в тех точках, в которых это будет наиболее репрезентативно и результаты
можно будет экстраполировать на схожие территории. Для этого необходимо обратиться к <a
href="https://github.com/lukasmartinelli">идее</a> Лукаса Мартинелли
из ресурса Openstreetmaps.org выгрузить в удобную для пользователя
геоинформационную среду имеющиеся сведения о категориях объектах и их расположения.</p>
<p> После чего следует
определить, какие объекты могут быть важными источниками шума и замерить уровень шума вблизи них при
условии, что они являются «шумовыми доминантами». На основе получившихся измерений можно делать
предположения о шумовом фоне вблизи объекта и изменении его в течение времени. После получения достаточного
количества данных о распределении шума вблизи различных объектах, стоит применить модель распространения
шума в городской среде в зависимости от застройки, описанную Мустафой Рефатом А. Исмаилом в его <a
href="https://www.omicsgroup.org/journals/a-parametric-study-of-the-effect-of-building-distributions-and-size-on-the-propagation-of-sound-in-the-urban-environment-2168-9717-3-118.pdf">работе</a>
«A
Parametric Study of the Effect of Building Distributions and Size on the Propagation of Sound in the Urban
Environment».</p>
<img src="./src/6.png" alt="Рис 6"/>
Рисунок 5 – Модель распространение звука проф. Исмаила
</li>
</ol>
</p>
<p>
После чего необходимо подробно изучить получившуюся модель на предмет несостыковок и устранить их путем
проведения измерений в данных точках.
На этом непосредственно процесс картографирования уровня шума заканчивается.
</p>
<p>
Для определения источника звука (шума) необходимо использовать другие механизмы. После сбора достаточного
количества образцов обучающей выборки по необходимым категориям механизм машинного обучение позволит создать
программу, которая сможет определять источник шума.
</p>
<h2>Обработка данных</h2>
<p>
Собранные при помощи датчиков данные, обогащенные координатами места установок датчика, обрабатываются для
уточнения модели. Для этого мы используем язык программирования Python и его библиотеки: numpy, scipy,
librosa, sounddevice, pandas, geopandas и shapely.
</p>
<p>
На первом этапе проводится переформатирование записи в 5-секундные отрывки. Затем необходимо извлечь признаки
из получившихся записей, для этого мы при помощи скрипта распознаем источник звука на каждой из 5-секундных
записей из группы следующих классов:
<ul>
<li>дорога</li>
<li>ж/д</li>
<li>скопление людей</li>
<li>стройка/ремонт</li>
</ul>
</p>
<p>
Затем, исходя из координат установки датчика, времени записи и источника шума, ближайшим соответствующим
источникам шума объектам OSM присваивается вычисленный из записи уровень шума, который, предположительно,
создает этот объект.
</p>
<p>
После того, как пользователь сочтет, что собрал достаточно данных, он запускает скрипт, который изменяет
заданные размеры буферов, и карта шума перестраивается с измененными параметрами.
</p>
</div>
</div>
<div id='legend'>
<div class="dbItem"> < 45 дБ</div>
<div class="dbItem"> 55 дБ</div>
<div class="dbItem"> > 60 дБ</div>
<div class="legendItem"></div>
</div>
<div id="iconsLegend">
<div class="icon"><img src='./src/rail-15.svg'>
</div>
<div class="iconName"> Ж/д вокзал</div>
<div class="icon"><img src="./src/warehouse-15.svg"></div>
<div class="iconName"> Строительные работы</div>
<div class="icon"><img src='./src/shop-15.svg'></div>
<div class="iconName"> Торговый центр</div>
</div>
<!-- <div id='time'>
<div class="timePeriods">
<div class='timeClass' > 7:00 - 10:00 </div>
<div class='timeClass' > 10:00 - 12:00 </div>
<div class='timeClass' > 12:00 - 15:00 </div>
<div class='timeClass' > 15:00 - 20:00 </div>
<div class='timeClass' > 20:00 - 23:00 </div>
</div>
<div class='timeLine' id='line' >
<input id='slider' type='range' min='1' max='6' step='1' value='1'>
</div>
</div> -->
<audio id="audioTrack">
<source src="./data/sample.ogg" type="audio/ogg">
<source src="./data/sample.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id='sensorArea'>
<div id='sensorValue'></div>
<div id='sensorPoint'></div>
</div>
<div id="soundtrack" onclick="">
<div class="sensorTitle">
<div class="sensorHead">Данные датчика за 60 секунд (пример записи)</div>
<div class="emptyCell"></div>
<div class="closeBtn" id="closeBtn"><img src="./src/invalid-name.svg">
</div>
</div>
<div class="sensorContent">
<div class="btns">
<div class="btn" id="btnDemoStart"><img src="./src/play.svg"></div>
<div class="btn" id="btnDemoPause"><img src="./src/pause.svg"></div>
</div>
<div id="graphArea"></div>
<div class="outputArea">
<div class='param'>
<div id='timeLabel'></div>
</div>
<div class='param'>
<div class='paramTitle'>Машины</div>
<div class="paramLine" id='vehiclesLine'></div>
<div class='paramValue' id='vehicles'></div>
</div>
<div class='param'>
<div class='paramTitle'>Люди</div>
<div class="paramLine" id='peopleLine'></div>
<div class='paramValue' id='people'></div>
</div>
<div class='param'>
<div class='paramTitle'>Музыка</div>
<div class="paramLine" id='musicLine'></div>
<div class='paramValue' id='music'></div>
</div>
<div class='param'>
<div class='paramTitle'>Ж/д</div>
<div class="paramLine" id='railwayLine'></div>
<div class='paramValue' id='railway'></div>
</div>
</div>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGF0aWFuYWl2YW5uaWtvdmEiLCJhIjoiY2o0bzA3azRnMWd0ZTJ3cGcxdHd2NnUzYSJ9.2ps-jd_6FNsnteFLjqsvog';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [31.4606, 20.7927],
zoom: 0.5
});
// var time = [
// 'morning', //0
// 'day', //1
// 'evening',//2
// 'night'//3
// ];
//
// function filterBy(time) {
// var filters = ['==', 'time', time];
// map.setFilter(' ', filters);
// map.setFilter(' ', filters);
//
// // Set the label to the month
// document.getElementById('month').textContent = months[month];
// }
map.on('load', function () {
d3.json('https://www.mapbox.com/mapbox-gl-js/assets/data/significant-earthquakes-2015.geojson', function (err, data) {
if (err) throw err;
// Create a month property value based on time
// used to filter against.
data.features = data.features.map(function (d) {
d.properties.month = new Date(d.properties.time).getMonth();
return d;
});
document.getElementById('slider').addEventListener('input', function (e) {
var month = parseInt(e.target.value, 10);
filterBy(time);
});
});
});
</script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript"> (function (d, w, c) {
(w[c] = w[c] || []).push(function () {
try {
w.yaCounter32348605 = new Ya.Metrika({
id: 32348605,
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 = "https://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="https://mc.yandex.ru/watch/32348605" style="position:absolute; left:-9999px;" alt=""/></div>
</noscript> <!-- /Yandex.Metrika counter -->
</body>
</html>