-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (173 loc) · 7.65 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Bonus 2 | Visual Analytics</title>
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- D3 -->
<!--script src="https://d3js.org/d3.v4.min.js"></script-->
<script type="text/javascript" src="libraries/d3/d3.min.js"></script>
<!-- Internal -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-image">
<img src="assets/img/wifi.jpg">
<span class="card-title">How are distributed the government's free wifi zones in Colombia?</span>
</div>
<div class="card-content">
<p><b>A visualization about colombian Ministry of Information Technologies and Communications free wifi zones</b></p>
<p>Colombian Ministry of Information Technologies and Communications project "Zonas Wifi Gratis Para la Gente" (Free Wifi Zones for People) seeks to connect people and to offer a space to take advantage of what Internet has to offer, like business or education opportunities.</p>
<p>The data of this visualization was published in july 2018 by the colombian <a href="https://www.mintic.gov.co/" target="_blank">Ministry of Information Technologies and Communications</a> (MinTIC) in the open data web pages <a href="www.datos.gov.co" target="_blank">www.datos.gov.co</a></p>
</div>
<div class="card-action">
<a href="https://www.datos.gov.co/Ciencia-Tecnolog-a-e-Innovaci-n/Zonas-WiFi-Gratis-Para-la-Gente-DPTIC-Nacional/az23-fuws" target="_blank" class="btn">Data Source</a>
<a href="http://www.wifigratis.gov.co/MINTIC/zonas-wifi/informacion" target="_blank" class="btn">More Info</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card yellow lighten-4">
<div class="card-content">
<p><span class="badge"><i class="material-icons left">filter_list</i></span>
Hover your mouse over the colored areas to get more information. Click on them to zoom in and click on the center (white circle) to zoom out.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title"><span class="badge"><i class="material-icons left">insert_chart</i></span> Sunburst of Wifi Zones Distribution</span>
<div id="chart1" class="progress"><div class="indeterminate"></div></div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<h2 class="section-title">About the viz</h2>
<div class="col s12 m4">
<div class="card">
<div class="card-image red darken-3 noimage">
<span class="card-title">What</span>
</div>
<div class="card-content">
<p>Dataset Type: Tree.</p>
<p>Items(Nodes): Places</p>
<p>Link: Place → Place</p>
<p>Attributes:
<ol>
<li>Number of Wifi zones (Ordered, Quantitative, Sequential)</li>
</ol>
</p>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image yellow darken-3 noimage">
<span class="card-title">Why</span>
</div>
<div class="card-content">
<ul class="browser-default">
<li>Summarize the distribution of the free wifi zones in the Colombian departments. <b>(Summarize - Distribution)</b></li>
<li>Identify the places with the higher number of free wifi zones. <b>(Identify - Outliers)</b></li>
<li>Explore through the places to identify the number of free wifi zones by place. <b>(Explore - Features)</b></li>
</ul>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card">
<div class="card-image green darken-1 noimage">
<span class="card-title">How</span>
</div>
<div class="card-content">
<p>
<ul>
<li>Encode:
<ul class="browser-default">
<li>[Nodes] Separate, Order, align.</li>
</ul>
</li>
<li>Reduce: Filter.</li>
<li>Mark: Area</li>
<li>Channels:
<ul class="browser-default">
<li>[Department] Color (Hue)</li>
<li>[Municipality and Wifi Zone] Color (Saturation)</li>
</ul></li>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Insights</span>
<ul class="browser-default">
<li>Antioquia is the department with the higher distribution of wifi zones throughout its municipalities.</li>
<li>Most of Bogotá's wifi zones are placed in Transmilenio's stations.</li>
<li>Pereira (Risaralda), Barranquilla (Atlántico) and Valledupar (Cesar) are the municipalities with the higher number of free wifi zones; 105, 104 and 62 respectively.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Used Technologies</span>
<ul class="browser-default">
<li>D3: <a href="https://d3js.org" target="_blank">https://d3js.org</a></li>
<li>Materialize: <a href="https://materializecss.com" target="_blank">https://materializecss.com</a></li>
<li>PHP (To preprocess data).</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer grey darken-4">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Visual Analytics</h5>
<p class="grey-text text-lighten-2">This visualization was developed for the <a href="http://johnguerra.co/classes/visual_analytics_fall_2018/" target="_blank">Visual Analytics</a> class (2018-20) at <a href="https://uniandes.edu.co/" target="_blank">Universidad de los Andes</a>.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Related Content</h5>
<ul>
<li><a href="https://github.com/cubosensei/va-bonus2-colombian-free-wifi-zones" target="_blank">Source Code</a></li>
<li><a href="https://docs.google.com/presentation/d/1IByZ472Eazbb7p59ybnMrO3v5Z7aML3yzuSM9YT4p_E/edit?usp=sharing" target="_blank">Slides</a></li>
<li><a href="https://youtu.be/EekQskWIVIQ" target="_blank">Youtube Video</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright black">
<div class="container">
2018 MIT Licenced Content by <a href="http://www.manalco.co" target="_blank">Manuel Alvarado</a>
</div>
</div>
</footer>
<script type="text/javascript" src="assets/js/scripts.js"></script>
</body>