-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpart1.html
executable file
·233 lines (217 loc) · 17.2 KB
/
part1.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
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="assets/bootstrap-4.4.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap-select-1.13.9/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/fontawesome-free-5.12.0-web/css/all.css">
<link rel="stylesheet" href="assets/prism/prism.css">
<script src="assets/jquery-3.4.1.min.js"></script>
<script src="assets/popper.min.js"></script>
<script src="assets/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-select-1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="assets/clipboard.js-master/dist/clipboard.min.js"></script>
<style>
.container {
padding-top: 20px;
}
.tutorialTitle {
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: rgb(234, 236, 239);
margin-bottom: 16px;
padding-bottom: 9.6px;
}
code[class*="language-"],
pre[class*="language-"] {
word-wrap: normal;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<strong><i class="fas fa-person-booth"></i> <a class="navbar-brand" href="#">Alegeri 2019 - Poveste 1/7</a></strong>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#despre_harta"><i class="fas fa-info-circle"></i> Despre</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-laptop-code"></i> Harta pas cu pas
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="part0.html">0 - Introducere</a>
<a class="dropdown-item active" href="part1.html">1 - Mașina virtuală OSGeoLive</a>
<a class="dropdown-item" href="part2.html">2 - Datele de intrare</a>
<a class="dropdown-item" href="part3.html">3 - Realizarea hărții la nivel de secție de votare (poligon)</a>
<a class="dropdown-item" href="part4.html">4 - Se poate oare coborî mai jos de secție cu reprezentarea?</a>
<a class="dropdown-item" href="part5.html">5 - Hărțile clasice, la nivel de UAT și județ</a>
<a class="dropdown-item" href="part6.html">6 - Crearea hărții interactive</a>
<a class="dropdown-item" href="part7.html">7 - Utilizarea rezultatelor în OSGeoLive</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="download.html"><i class="fas fa-download"></i> Download</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-toggle-on"></i> Hartă
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="turul1.html">Turul 1</a>
<a class="dropdown-item" href="index.html">Turul 2</a>
<a class="dropdown-item" href="tur1_vs_tur2.html">Turul 1 vs Turul 2</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="modal fade bd-example-modal-xl" id="despre_harta" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true" style="z-index: 2001">
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Despre hartă</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Închide">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">
<strong>Disclaimer:</strong> <a href="http://www.geo-spatial.org/" target="_blank">geo-spatial.org</a> nu a fost și nu va fi vreodată implicat în demersuri cu caracter politic. Acest material are un scop pur didactic și nu urmărește aprecierea în sens pozitv sau negativ a candidaților ce au participat la cele două tururi de alegeri prezidențiale din 2019.</a>
</div>
<p>Demersul de față și-a propus realizarea unor hărți interactive detaliate ale rezultatelor alegerilor prezidențiale din 2019 și <a href="part0.html" target="_blank">prezentarea pas cu pas</a> a modului de prelucrare și reprezentare a datelor. Provocarea principală a fost coborîrea la o scară mai fină decît clasicele reprezentări la nivel de județ și UAT. Nefiind experți în analize electorale, nu știm cît de relevante sînt respectivele reprezentări, bunul simț ne spune însă că o mai fină reprezentare a culorilor votului cetățenilor poate ajuta la înțelegerea mai bună a resorturilor ce au stat în spatele deciziilor de vot ale acestora.</p>
<div class="card-body">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" id="judet-tab"
data-toggle="tab" href="#judet">Județ</a>
</li>
<li class="nav-item">
<a class="nav-link" id="uat-tab"
data-toggle="tab" href="#uat">UAT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sectie-tab"
data-toggle="tab" href="#sectie">Secție</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sub-sectie-tab"
data-toggle="tab" href="#sub-sectie">Fiecare procent dintr-o secție</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane show active" id="judet">
<img src="images/despre_01.png" class="img-fluid" alt="Exemplu rezultate la nivel de județ">
</div>
<div class="tab-pane" id="uat">
<img src="images/despre_02.png" class="img-fluid" alt="Exemplu rezultate la nivel de UAT">
</div>
<div class="tab-pane" id="sectie">
<img src="images/despre_03.png" class="img-fluid" alt="Exemplu rezultate la nivel de secție">
</div>
<div class="tab-pane" id="sub-sectie">
<img src="images/despre_04.png" class="img-fluid" alt="Exemplu rezultate la nivel de procent din secție">
</div>
</div>
</div>
<p>Aplicația include trei hărți interactive:</p>
<ul>
<li><a href="tur1.html" target="_blank">Rezultate turul 1 al alegerilor</a>;</li>
<li><a href="tur1.html" target="_blank">Rezultate turul 2 al alegerilor</a>;</li>
<li><a href="tur1.html" target="_blank">Rezultate comparative turul 1 vs turul 2 al alegerilor</a>.</li>
</ul>
<p>În cadrul fiecărei hărți pot fi vizualizate rezultatele la nivel de:</p>
<ul>
<li>Județ;</li>
<li>UAT;</li>
<li>Secție de votare (consultați <a href="part0.html" target="_blank">această pagină</a> pentru a vedea cum au fost delimitate secțiile folosind tehnica poligoanelor Voronoi);</li>
<li>Fiecare procent la nivel de secție;</li>
<li>Fiecare procent la nivel de UAT;</li>
<li>Fiecare procent la nivel de județ;</li>
<li>Fiecare vot.</li>
</ul>
<p>Aplicația mai permite ajustarea nivelului de opacitate a straturilor cu rezultate, suprapunerea unor straturi de referință și schimbarea hărții de fundal. Datele din aplicație pot fi <a href="download.html" target="_blank">descărcate în format GeoPackages</a>. De asemenea, codul sursă al aplicației poate fi descărcat liber de pe <a href="https://github.com/geospatialorg/alegeri2019" target="_blank">GitHub</a>. Harta are o serie de limitări de ordin tehnic, limitări pentru care există soluții dar aplicarea acestora ar depăși scopul acestui demers.</p>
<div class="alert alert-warning" role="alert">
<strong>Limitări tehnice:</strong>
<ul>
<li>Încărcarea inițială a hărții, mai ales a celei intitulată <code class="highlighter-rouge">Turul 1 vs Turul 2</code>, poate fi destul de lentă din cauza volumului mare de date ce se încarcă în aplicația client;</li>
<li>Afișarea rezultatelor nu funcționează atunci cînd sînt afișate pe hartă și straturile de referință de tip poligon (<code class="highlighter-rouge">Contur secție</code>, <code class="highlighter-rouge">Contur UAT</code> sau <code class="highlighter-rouge">Contur județe</code>).</li></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Închide</button>
</div>
</div>
</div>
</div>
<main role="main" class="container">
<h4 class="tutorialTitle">Cartografie electorală în linie de comandă - Partea 1: Mașina virtuală OSGeoLive</h4>
<h5 class="tutorialTitle">Ce este și cum lucrăm cu ea?</h5>
<p><a href="https://live.osgeo.org/">OSGeoLive</a> este o distribuție software boot-abilă, bazată pe <a href="https://lubuntu.net/">Lubuntu</a>, ce poate fi pornită de pe DVD, stick de memorie sau prin intermediul unei mașini virtuale. Aceasta conține deja preinstalate și configurate o multitudine de aplicații software open source din zona geospațială. <a href="https://live.osgeo.org/">OSGeoLive</a> este mediul ideal pentru a testa comenzile din tutorialul nostru deoare, încărcată prin intermediul unei mașini virtuale, oferă tuturor celor interesați un mediu identic de lucru. Versiunea curentă, pe care s-au făcut toate testele din acest material, este 13.0 și poate fi descărcată de pe <a href="https://sourceforge.net/projects/osgeo-live/files/13.0/">SourceForge</a> ca disc virtual .vmdk, specific <a href="https://www.virtualbox.org">VirtualBox</a>, sau ca fișier generic .iso, compatibil cu oricare mediu de virtualizare. Personal, am folosit VirtualBox iar, după instalare și pornire (user: <code class="highlighter-rouge">user</code>, password: <code class="highlighter-rouge">user</code>) am ajuns la un ecran similar cu imaginea de mai jos (a se remarca harta istorică a Municipiul București de pe desktopul <a href="https://live.osgeo.org/">OSGeoLive</a> 13.0).</p>
<img src="images/002_osgeolive_start_screen.jpg" class="img-fluid" alt="Ecranul de pornire al OSGeoLive 13.0">
<p class="text-center"><em>Ecranul de pornire al <a href="https://live.osgeo.org/">OSGeoLive</a> 13.0.</em></p>
<p>Comenzile, așa cum zice și titul materialului, se vor rula în linia de comandă, folosind shell-ul <a href="https://en.wikipedia.org/wiki/Bash_(Unix_shell)">Bash</a>. Accesarea shell-ului se poate face prin intermediul iconiței verzi din bara de jos sau din meniul <code class="highlighter-rouge">Start/System Tools/LXTerminal</code> (evident, în funcție de preferințe, utilizatorii pot folosi și alt shell). După pornire, ar trebui să se obțină un rezultat similar cu cel din imaginea de mai jos.</p>
<img src="images/003_osgeolive_terminal.jpg" class="img-fluid" alt="Terminalul OSGeoLive este gata să accepte comenzile dumneavoastră">
<p class="text-center"><em>Terminalul <a href="https://live.osgeo.org/">OSGeoLive</a> este gata să accepte comenzile dumneavoastră.</em></p>
<h5 class="tutorialTitle">Crearea directorului de lucru</h5>
<p>Vom introduce primele două comenzi în <code class="highlighter-rouge">Terminal</code> (după fiecare comandă se apasă tasta <code class="highlighter-rouge">↵Enter</code>) pentru a ne crea un director de lucru (comanda <code class="highlighter-rouge">mkdir</code>) și pentru a naviga în interiorul lui (comanda <code class="highlighter-rouge">cd</code>).
<pre>
<code class="language-bash">
mkdir alegeri2019
cd alegeri2019
</code>
</pre>
<p>Calea completă către locația în care ne găsim după executarea comenzilor este <code class="highlighter-rouge">/home/user/alegeri2019</code>, asta, deoarece, la lansare aplicației <code class="highlighter-rouge">LXTerminal</code>, locația implicită în care vom găsi este directorul <code class="highlighter-rouge">home</code> al utilizatorului curent (<code class="highlighter-rouge">user</code>).</p>
<h5 class="tutorialTitle">Instalarea aplicațiilor lipsă</h5>
<p>Explicam mai sus că <a href="https://live.osgeo.org/">OSGeoLive</a> vine deja la pachet cu numeroase aplicații geospatiale instalate și configurate. Nu este însă cazul tuturor aplicațiilor de care acest tutorial are nevoie.</p>
<h6 class="tutorialTitle">Mapshaper</h6>
<p>O primă aplicație de acest gen este <a href="https://github.com/mbloch/mapshaper">Mapshaper</a>. Aceasta depinde însă de alte două componente software, mediul de execuție <a href="https://nodejs.org/">Node.js</a> și managerul de pachete <a href="https://nodejs.org/">Node.js</a>, <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">npm</a>. Acestea pot fi foarte simplu instalate cu ajutorul comenzii <code class="highlighter-rouge">apt</code>, parte a managerului de pachete <a href="https://ubuntu.com">Ubuntu</a> (<a href="https://lubuntu.net/">Lubuntu</a>, cel peste care este împachetat <a href="https://live.osgeo.org/">OSGeoLive</a>, este o versiune simplificată a sistemului de operare <a href="https://ubuntu.com">Ubuntu</a>). Întotdeauna, înainte de instalarea unui packet de programe pe platforma <a href="https://ubuntu.com">Ubuntu</a> cu ajutorul <code class="highlighter-rouge">apt install</code>, este recomandarea actualizării listei cu pachete disponibile în depozitele utilizate. Pentru aceasta se rulează următoarea comandă cu <code class="highlighter-rouge">sudo</code> (rulează comanda cu drepturi de administrator) în <code class="highlighter-rouge">Terminal</code>:</p>
<pre>
<code class="language-bash">
sudo apt update
</code>
</pre>
<p>Rezultatul ar trebui să fie similar cu cel din imaginea de mai jos:</p>
<img src="images/004_osgeolive_apt_update.jpg" class="img-fluid" alt="Actualizarea listei de pachete cu apt get">
<p class="text-center"><em>Actualizarea listei de pachete cu <code class="highlighter-rouge">apt get</code>.</em></p>
<p>Acestea fiind făcute, se poate trece la instalarea aplicațiilor Node folosind următoarele comenzi (se confirmă răspunzînd <code class="highlighter-rouge">Y</code> la întrebarea <code class="highlighter-rouge">Do you want to continue? [Y/n]</code>):</p>
<pre>
<code class="language-bash">
sudo apt install nodejs
sudo apt install npm
</code>
</pre>
<p>Dacă instalarea a decurs fără erori, putem trece la instalarea <a href="https://github.com/mbloch/mapshaper">Mapshaper</a> folosind comanda:</p>
<pre>
<code class="language-bash">
sudo npm install -g mapshaper
</code>
</pre>
<p>Testarea instalării cu succes se poate face cu comanda:</p>
<pre>
<code class="language-bash">
mapshaper -v
</code>
</pre>
<p>În <code class="highlighter-rouge">Terminal</code>, ar trebui să apară manualul de utilizare a comenzilor <a href="https://github.com/mbloch/mapshaper">Mapshaper</a>, identic cu imaginea de mai jos:</p>
<img src="images/005_osgeolive_mapshaper.jpg" class="img-fluid" alt="Confirmarea instalării corecte a Mapshaper">
<p class="text-center"><em>Confirmarea instalării corecte a <a href="https://github.com/mbloch/mapshaper">Mapshaper</a>.</em></p>
<div>
<div class="float-left">
<p class="text-left"><a href="part0.html"><- Înapoi către Partea 0: Introducere</a></p>
</div>
<div class="float-right">
<p class="text-right"><a href="part3.html">Înainte către Partea 2: Datele de intrare -></a></p>
</div>
<div class="clearfix"></div>
</div>
</main>
<script src="assets/prism/prism.js"></script>
<script type="text/javascript">
Prism.plugins.NormalizeWhitespace.setDefaults({'break-lines': 112,});
</script>
</body>
</html>