-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
335 lines (245 loc) · 18.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Громада, місто, область. Результати місцевих виборів</title>
<!-- OpenGraph Meta Tags -->
<meta property="fb:app_id" content="329250623807149"/>
<meta property="og:site_name" content="ТЕКСТИ.ORG.UA"/>
<meta property="og:type" content="website"/>
<meta property="og:title"
content="Результати місцевих виборів-2020"/>
<meta property="og:image" content="https://texty.org.ua/d/2020/....../img/cover.png"/>
<meta property="og:description"
content=""/>
<meta property="og:url" content="https://texty.org.ua/d/2020/...../"/>
<!-- Twitter Card Meta Tags -->
<meta name="twitter:site" content="@textyorgua"/>
<meta property="twitter:account_id" content="49572937"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:url" content="https://texty.org.ua/d/2020/...../">
<meta name="twitter:title"
content="Результати місцевих виборів-2020"/>
<meta name="twitter:description"
content=""/>
<meta name="twitter:image:src" content="https://texty.org.ua/d/2020/...../img/cover.png"/>
<meta name="twitter:image:width" content="1200"/>
<meta name="twitter:image:height" content="630"/>
<!-- Other Meta Tags -->
<meta name="title" content="Результати місцевих виборів-2020">
<meta name="description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript" src="lib/d3v5.min.js"></script>
<!-- mapbox-gl -->
<link rel='stylesheet' href="css/mapbox-gl.css" />
<script type="text/javascript" src="lib/mapbox-gl.js"></script>
<!--<link rel='stylesheet' href='css/mapbox-gl-geocoder.css' type='text/css'/>-->
<!--<script type="text/javascript" src="lib/mapbox-gl-geocoder.min.js"></script>-->
<!-- SELECT 2 -->
<link rel="stylesheet" href="css/select2.min.css" />
<script type="text/javascript" src="lib/select2.min.js"></script>
<!-- TIPPY -->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link rel="stylesheet" href="css/styles.css"/>
</head>
<style>
</style>
<body>
<header>
<a class="texty-logo" href="https://texty.org.ua/">
<img class="desktop-only" src="img/textylogo.svg" id="watermark" alt="Тексти.org.ua"/>
</a>
<nav class="rubrics-container">
<div class="rubric r1"><a href="https://texty.org.ua/theme/koronavirus-najvazhlyvishe/"><span>КОРОНАВІРУС</span></a></div>
<div class="rubric r2"><a href="https://texty.org.ua/tag/dezinformatsija/"><span>#Інфовійна</span></a></div>
<div class="rubric r3"></div>
</nav>
<div class="soc">
<a href="https://www.facebook.com/sharer/sharer.php?u=https://texty.org.ua/d/2020/covid-19/" target="_blank" class="share-btn">
<i class="fab fa-facebook-square"></i></a>
<a href="https://twitter.com/intent/tweet?text=https://texty.org.ua/d/2020/covid-19/" target="_blank" class="share-btn">
<i class="fab fa-twitter-square"></i></a>
</div>
</header>
<main>
<div id="title">
<h1>Громада, місто, область. Результати місцевих виборів</h1>
<h3>Якщо не брати до уваги самовисуванців, котрі могли балотуватися в громадах із населенням до 10 тис. мешканців, то найбільше мандатів у громадах взяла «Слуга народу». Але фактично переможцями виборів-2020 є численні місцеві партії. Сумарно вони набрали більше за «слуг».
</h3>
</div>
<p>«Рідне Закарпаття», Всеукраїнське об’єднання «ЧЕРКАЩАНИ», «Блок Кернеса – Успішний Харків!», «Партія вінничан», «Довіряй ділам» (партія міського голови Одеси – Труханова) та інші. Місцеві еліти постворювали «всеукраїнські» партії і так обійшли хитрий намір київських політиків, котрі хотіли змусити місцевих баронів вибирати в яку з центральних партій вступати.</p>
<p>Ми зібрали результати місцевих виборів у територіальних громадах, районах та обласних радах в інтерактивну карту. Ви можете обрати партію і подивитися, скільки депутатських місць вона дістала в різних ОТГ.</p>
<h2>Обирайте партію і дивіться, скільки відсотків вона отримала в різних ОТГ, райрадах й областях</h2>
<!-- карта -->
<nav class="button-wrapper">
<button id="show_otg" class="button map-switcher active">Територіальні громади</button>
<button id="show_rayons" class="button map-switcher">Районні ради в областях</button>
<button id="show_oblasts" class="button map-switcher">Обласні ради та Київ</button>
</nav>
<p class="subtitle">Карта інтерактивна. У списку, що випадає, оберіть партію, щоб подивитись її результати. Якщо навести на ОТГ, район чи область, випливуть результати по цій території.</p>
<select id="select_party" class="js-example-basic-single" name="state">
<option class="overview" value="overview">Загальні результати</option>
</select>
<!--легенда -->
<div id="legend_1" class="legend-wrapper" style="display: none;">
<div> Відсоток депутатів у раді: <span> 0% </span><span id="legend1"></span><span> 70%+</span>
</div>
</div>
<div id="legend_2" class="legend-wrapper" >
<div style="font-weight: bold">Хто переміг:</div>
<div id="self-proposed" class="legend-item" >
<span class="rect" style="background-color: #ffff97"></span>
<span>Самовисуванці</span>
</div>
<div class="legend-item">
<span class="rect" style="background-color: #83e49b"></span>
<span>Слуга народу</span>
</div>
<div class="legend-item">
<span class="rect" style="background-color: #e97480"></span>
<span>Європейська солідарність</span>
</div>
<div class="legend-item">
<span class="rect" style="background-color: #ffbfb1"></span>
<span>Батьківщина</span>
</div>
<div class="legend-item">
<span class="rect" style="background-color: #a4aeca"></span>
<span>ОПЗЖ</span>
</div>
<div class="legend-item">
<span class="rect" style="background-color: #b887af"></span>
<span>За майбутнє</span>
</div>
<div class="legend-item">
<span class="rect" style="background-color: #969797"></span>
<span>Кілька партій</span>
</div>
<div class="legend-item">
<span class="rect" style="background-color: #e1e2e1"></span>
<span>Інші партії</span>
</div>
<div class="legend-item" >
<span class="rect" style="background-color: white"></span>
<span>Немає даних</span>
</div>
</div>
<div id="map1_wrapper" class="map_wrapper">
<!-- карта -->
<div id="map" class="container"></div>
<!-- спінер -->
<div id="loading-background" class=''>
<img id="spinner" src="img/wait.gif" alt="Завантаження..."/>
</div>
</div>
<p style="font-style:italic;">Дані ЦВК. Y деяких адмінодиницях результати виборів станом на момент публікації не оголошені. На карті вони білі. Ми заповнюватимемо прогалини у міру надходження результатів.</p>
<p> <button id="downloadLink" class="button">Завантажити карту (png) ↓</button></p>
<!--download="map.png"-->
<!-- Слайдер по обласним центрам -->
<h2>Хто пройшов у міські ради великих міст</h2>
<p>У столичну раду потрапили представники сімох партій, першість поділили між собою УДАР та «Європейська солідарність». У Дніпровській і Житомирській міських радах більшість депутатських місць здобула партія міського голови Дніпра Бориса Філатова – «Пропозиція», у Вінниці більшість взяла партія експремʼєра Володимира Гройсмана, в Харкові – партія переобраного мера Геннадія Кернеса, в Одесі – Геннадія Труханова. Гортайте слайдер і дивіться на склад рад в обласних центрах.</p>
<h2 id="bars-title"><span></span> міська рада. Кількість депутатів від партій</h2>
<p class="subtitle">Гортайте слайдер</p>
<div id="slider">
<div class="prev"><img src="img/right.svg"/></div>
<div class="next"><img src="img/right.svg"/></div>
</div>
<div id="bar-chart"></div>
<p id="no-data">Даних ще немає</p>
<p>На місцевих виборах явка виборців завжди нижча, ніж на парламентських. Тому на графіку ми порівняли відсотки, які набрали основні загальноукраїнські партії на цих виборах і минулих парламентських. «Слуги» багато втратили й у відсотковому значенні, й у кількості голосів. ОПЗЖ втратила у кількості голосів, але у відсотках їхній показник зріс. Така сама історія і з ЄС.</p>
<h2 id="compare-title"><span>Слуга народу</span>. Від парламентських до місцевих</h2>
<div class="button-wrapper" id="draw-lollipop-buttons">
<button class="button draw-lollipop active" value = 'Слуга народу'>Слуга народу</button>
<button class="button draw-lollipop" value = 'Європейська солідарність'>Європейська солідарність</button>
<button class="button draw-lollipop" value = 'Опозиційна платформа - за життя'>ОПЗЖ</button>
<button class="button draw-lollipop" value = 'Батьківщина'>Батьківщина</button>
</div>
<p class="subtitle">Порівняння відсотку голосів за партію в обласні ради з парламентськими виборами. <br> Наведіть на червону точку, щоб побачити різницю в кількості голосів.</p>
<div id="compare"></div>
<!-- Скільки партій треба для більшості -->
<h2>Більшість – це скільки?</h2>
<p>У 346 місцевих радах більшість взяла одна партія (всього рад 1577, дані виборів на момент публікації оприлюднили 1533), це переважно ради ОТГ, із них лише 17 міськрад і дві райради (Вінницька та Волноваська).</p>
<p>У 10 радах склад настільки строкатий, що для більшості потрібно зібрати представників пʼяти партій. </p>
<p>На графіку нижче ми показуємо, у скількох <b>міських радах</b> потрібно буде створювати коаліції</p>
<h2><b>Зметикуємо на трьох</b></h2>
<p class="subtitle">Скільки партій потрібно для створення більшості у міськрадах</p>
<div id="coaliciya-chart"></div>
<p>Наприклад, в Івано-Франківську («Свобода»), Ізмаїлі («Слуга народу») та Чернігові (місцева партія «Рідний Дім») мають більшість. Водночас у Кропивницькому щонайменше чотирьом партіям потрібно домовитися, щоб проголосувати за будь-яке рішення. Це дві загальнонаціональні політсили (ЄС та СН) і дві місцеві партії («Пропозиція» та «Перспектива міста»). Цікавий результат у Сумах, там найбільше депутатів отримала Батьківщина — 13, а за нею йдуть ЄС та ОПЗЖ з дев'ятьма депутатами кожна. Ще в п'ятьох обласних центрах для коаліції потрібно щонайменше три партії.</p>
<p>Зважаючи на такі результати виборів, нас чекають несподівані союзи та довгі місцеві коаліціади. А оскільки немає формальної вимоги до утворення місцевих коаліцій, багато рад можуть піти шляхом ситуативних голосувань та залаштункових перемовин.
</p>
<!-- Статичні графіки -->
<div id="static-maps">
<h2>Статичні карти з результатами по великим всеукраїнським партіям</h2>
<img src="img/maket.jpg"/>
<img src="img/maket2.jpg"/>
<img src="img/maket3.jpg"/>
</div>
</main>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2({
placeholder: "Шукати партію",
allowClear: true
});
});
</script>
<footer>
<div id="logo-copyright">
<a class="texty-logo" href="/">
<img class="desktop-only" src="img/white_logo.svg" alt="Тексти.org.ua"/>
</a>
<div class="copyright">
<p>© 2010—2020 Texty.org.ua</p>
</div>
<p id="license">Матеріали ТЕКСТИ.org.ua можна використовувати згідно ліцензії <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons із зазначенням авторства, CC BY</a> (переклад ліцензії <a href="https://creativecommons.org/licenses/by/4.0/legalcode.uk" target="_blank">українською</a>). Велике прохання ставити гіперпосилання в першому чи другому абзаці вашого матеріалу.</p>
</div>
<div id="guide-block">
<ul class="links1">
<li><a href="https://texty.org.ua/articles/">Статті</a>
<a href="https://texty.org.ua/articles/feed.xml">(RSS)</a>
</li>
<li><a href="https://texty.org.ua/fragments/">Фрагменти</a>
<a href="https://texty.org.ua/fragments/feed.xml">(RSS)</a>
</li>
<li><a href="https://texty.org.ua/projects">Журналістика даних</a></li>
<li><a href="https://texty.org.ua/d/socio">Фальшиві соціологи</a></li>
</ul>
<ul class="links2">
<li><a href="https://fgz.texty.org/">Фейкогриз</a></li>
<li><a href="https://texty.org.ua/tag/dezinformatsija/">Дезінформація</a></li>
<li><a href="https://texty.org.ua/tag/eng/">#English</a></li>
<li><a href="https://texty.org.ua/archive-books/">Архів книг</a></li>
</ul>
<ul class="links3">
<li><a href="https://texty.org.ua/support" target="_blank">Підтримай нас!</a></li>
<li><a href="http://texty.org.ua/donate/#/" target="_blank" >Наш дата-арт</a></li>
<li><a href="https://texty.org.ua/tag/hrafik-dnja/">Графік Дня</a></li>
<li><a href="https://texty.org.ua/archive-blogs/">Архів блогів</a></li>
</ul>
</div>
<div id="social_buttons">
<p class="piece-title">Стежити:</p>
<a href="https://www.facebook.com/TEXTY.org.ua/" target="_blank">
<img src="img/facebook.png" alt="Тексти.org.ua - Facebook">
</a>
<a href="https://www.instagram.com/texty.org.ua/" target="_blank">
<img src="img/instagram.png" alt="Тексти.org.ua - Instagram">
</a>
<a href="https://telegram.me/textyorgua" target="_blank">
<img src="img/telegram.png" alt="Тексти.org.ua - Telegram">
</a>
<a href="https://twitter.com/textyorgua" target="_blank">
<img src="img/twitter.png" alt="Тексти.org.ua - Twitter">
</a>
</div>
</footer>
<script src="lib/d3v5.min.js"></script>
<script src="js/map.js"></script>
<script src="js/charts.js"></script>
</body>
</html>