-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (220 loc) · 12.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
<!DOCTYPE html>
<!-- template.html -->
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Add bootstrap style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- My scripts and style -->
<link rel="stylesheet" type="text/css" href="www/style.css">
<link rel="stylesheet" type="text/css" href="d3.css">
<script src="www/d3/d3.js"></script>
<!-- Shiny header -->
<!-- {{ headContent() }} -->
</head>
<body>
<main role="main">
<!-- jumbotron -->
<div class="jumbotron text-center my-0">
<div class="container container-large">
<div class="d-inline-flex">
<h1 class="jumbotron-heading display-1" id="title1">Qué cuentan las</h1>
</div>
<div class="d-inline-flex mb-4">
<h1 class="jumbotron-heading display-1" id="title2">encuestas</h1>
</div>
</div>
<div class="container container-medium">
<div class="flex" id="subtitle">
<p class="lead text-muted">Las encuestas son el pán de cada día en la previa a las elecciones. Pareciera que cáda día es más dificl confiar
en A pesar de los grandes Sin embargo, son la ún
<em>Pero, el problema son las encuestas ó es cómo las estamos usando.</em>
</p>
</div>
</div>
</div>
<!-- Introduction -->
<div class="container container-large py-5" id="introduction">
<div class="row">
<div class="col">
<p>
Lo queramos o no la política despierta pasiones como pocas otras cosas. Estar en una u otra vertiente política hace parte
de nuestra identidad. Al igual que el fútbol o la religión, la política nos dá un sentido de pertenencia que,
como verá mas adelante, o cruza las fronteras de la edad, genero y clase,
<mark>o por el contrario las refuerza</mark>.
</p>
<p>Y como la política despierta pasiones, las encuestas venden. Son el pán de cada día en la previa a las elecciones. Para dar un ejemplo a fecha de hoy ya son casi treinta las encuestas presidenciales que se han realizado en Colombia.
</p>
<p>
La historia de cada una de estas encuestas es más o menos la misma. Comienza cuando algún medio de comunicación
<span
class="footnote" data-toggle="tooltip" title="En Colombia solo hay cinco alianzas con recursos suficientes para contratar encuestas: 1) Caracol Radio y Red+ Noticias; 2) Caracol TV, Blu Radio y Semana; 3) El Tiempo y W Radio; 4) RCN; 5) Noticiero CM&"></span> contrata una firma encuestadora para "predecir" las elecciones. La firma encuestadora llama por teléfono, o visita gente en la casa y si la persona esta de buen genio y tiene
tiempo se deja hacer las preguntas. Luego, de que la firma encuestadora compila las estadísticas, el medio de comunicación enumera los resultados al pie de la letra; los artículos de opinión abundan, pero ningúno
de los periodistas de planta se atreve a cuestionar que tan exacta de la encuesta. La mitad del país esta contenta
porque Fulanito, su candidato, repuntó y ahora "va ganando". La otra mitad está furibinda y anuncia que de todos
modos la encuesta estaba vendida.</p>
<p>Fast-forward al día de las elecciones. Fulanito, el candidato de las encuestas, pierde. Los medios de comunicación
se apresuran a exlicar el fenómeno electoral. Y mientras tanto sentimos que nos mintieron. Nos queda la impresión
de que las encuestas, al final de cuentas, no sirven para nada.</p>
</div>
</div>
</div>
<!-- Encuestas en crisis -->
<div class="container-fluid" style="background-color: lightgoldenrodyellow">
<div class="container py-5" id="la-crisis">
<div class="row">
<div class="col-lg-8">
<h2>La crisis</h2>
<p>La história se repite frecuentemente. Y cáda vez nos es mas dificil confiar en las encuestas. A la cabeza se
nos vienen algunos de los desatinos más recientes: Trump, Brexit y el Referendo de la Paz. Sin duda grandes
fiascos.</p>
</div>
<div class="col"></div>
</div>
<div class="row align-items-start">
<div class="col-lg-8 order-last order-lg-first">
<p>Parece un problema reciente pero no lo es. Durante las elecciones presidenciales de 2014, seis encuestas diferentes
fueron publicadas dias previos a la primera vuelta. Todas acertaron a decir quien pasaba a segunda vuelta.
Pero cuatro, un 66%, indicaban que la mayoría de votos iba para Santos. Una semana después Zuluaga aventajo
a Santos por medio millon de votos. Tan solo un mes despues, algo similar pasó en la segunda vuelta. Entre
las cinco encuestas que se realizaron solo dos le atinaron a la victoria de Santos
<span class="footnote" data-toggle="tooltip"
title="<img src='www/img/santos-bailando.gif' width='100%'>"></span>.</p>
<p>Cuál es el problema? Por qué fallan tanto? En esencia hay una encuesta es tan mala o tan buena como su muestra. Las muestras de la mayoría de encuestas electorales hoy en día tienen dos problemas, uno grande y uno chico. El problema grande es el <em>sesgo</em> y el problema chico es el <em>tamaño</em></p>
<p>Empezemos por el problema chico, el tamaño de esta muestra. Las encuestas son bastante caras y por eso la muestra rara vez supera el 0.01% de la población.
Es decir, en el mejor de los casos le preguntan a 1 de cada 10,000 personas
<span class="footnote" data-toggle="tooltip"
title="En Colombia, para las elecciones de 2018 la muestra ha variado entre 900 y 3,500 personas. Según la registraduría a enero de 2018 <a href='https://wsr.registraduria.gov.co/-Censo-Electoral,3661-.html' target='_blank'>el censo electoral</a> está conformado por un poco más de 36 millones de personas."></span>. Piense en eso... es como si para saber cuál es la opinion de todo su barrio le hubieran preguntado al azar a
<b>una sola persona</b>. Una sola.</p>
<p>Aún así, incluso con esas muestras relativalente pequeñas las encuestas el problema principal no es el tamaño de la muestra sino su sesgo. Cáda vez es más dificl diseñar una muestra que sea representativa de la población en general.</p>
<p>
Veamos por ejemplo los resultados de la última encuesta de Semana:</p>
<div class="ball-vis-container">
<svg class="ball-vis" id="vis-totales" style="width:100%; height:100%;"></svg>
</div>
</div>
<div class="col order-first order-lg-last pb-3">
<!-- <img src='www/img/GeneralPerkyEyas-size_restricted.gif' width="100%"> -->
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container py-5" id="la-crisis">
<div class="row">
<div class="col"></div>
<div class="col-lg-8">
<h2>La solucion</h2>
<p>La história se repite frecuentemente. Y cáda vez nos es mas dificil confiar en las encuestas. A la cabeza se
nos vienen algunos de los desatinos más recientes: Trump, Brexit y el Referendo de la Paz. Sin duda grandes
fiascos.</p>
</div>
</div>
</div>
</div>
<!-- Carrousel container -->
<div class="container container-medium" , id="container_carrousel_demography">
<!-- Carrousel -->
<div id="carrousel_demography" class="carousel slide" data-interval="false">
<ol class="carousel-indicators my-0">
<li data-target="#carrousel_demography" data-slide-to="0" class="active"></li>
<li data-target="#carrousel_demography" data-slide-to="1"></li>
<li data-target="#carrousel_demography" data-slide-to="2"></li>
<li data-target="#carrousel_demography" data-slide-to="3"></li>
<li data-target="#carrousel_demography" data-slide-to="4"></li>
<li data-target="#carrousel_demography" data-slide-to="5"></li>
<li data-target="#carrousel_demography" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" id="genero_carrousel">
<div class="container" id="genero_container">
<div class="row" , id="genero_row"></div>
</div>
</div>
<div class="carousel-item" id="zona_carrousel">
<div class="container" id="zona_container">
<div class="row" , id="zona_row"></div>
</div>
</div>
<div class="carousel-item" id="estrato_carrousel">
<div class="container" id="estrato_container">
<div class="row" , id="estrato_row"></div>
</div>
</div>
<div class="carousel-item" id="edad_carrousel">
<div class="container" id="edad_container">
<div class="row" , id="edad_row"></div>
</div>
</div>
<div class="carousel-item" id="region_carrousel">
<div class="container" id="region_container">
<div class="row" , id="region_row"></div>
</div>
</div>
<div class="carousel-item" id="consulta_carrousel">
<div class="container" id="consulta_container">
<div class="row" , id="consulta_row"></div>
</div>
</div>
<div class="carousel-item" id="start_again_carrousel">
<div class="container" id="start_again_container">
<div class="row" , id="start_again_row">
<p>Start again</p>
</div>
</div>
</div>
<!-- <div class="carousel-item" id="partido_carrousel">
<div class="container" id="partido_container">
<div class="row" , id="partido_row"></div>
</div>
</div> -->
</div>
</div>
</div>
<!-- <div class="d-flex flex-row align-items-center">
<div class="p-0 border" id="flex-1" style="width:10%">
<img class="img-fluid" src="www/img/em/castle.svg">
</div>
<div class="p-0 border" id="flex-2"style="width:20%"><img class="img-fluid" src="www/img/em/castle.svg"></div>
<div class="p-0 border" id="flex-3"style="width:50%"><img class="img-fluid" src="www/img/em/castle.svg"></div>
<div class="p-0 border" id="flex-4"style="width:100%"><img class="img-fluid" src="www/img/em/castle.svg"></div>
<div class="p-0 border" id="flex-5"style="width:50%"><img class="img-fluid" src="www/img/em/castle.svg"></div>
<div class="p-0 border" id="flex-6"style="width:100%"><img class="img-fluid" src="www/img/em/castle.svg"></div>
<div class="p-0 border" id="flex-7"style="width:100%"><img class="img-fluid" src="www/img/em/castle.svg"></div>
</div> -->
<!-- {{ buttons_test}} -->
</main>
<!-- Add bootstrap javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- My javascript for the buttons -->
<script type="text/javascript" src="www/js-code.js" async></script>
<!-- REsponsive title -->
<script src="www/responsive-title.js"></script>
<!-- Footnotes -->
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').each(function () {
var $elem = jQuery(this);
$elem.tooltip({
html: true,
container: $elem,
delay: { hide: 400 }
});
});
});
</script>
<script src="js/circle-visualisation.js"></script>
<script>
d3.json("data/totals.json").then(function(data) {make_circles(data, "#vis-totales", 10, 1)})
</script>
<!-- <script src="www/bootstrap-toolkit.min.js"></script> -->
</body>
</html>