-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (202 loc) · 10.7 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DEMASIADAS</title>
<meta name="description" content="Una visualización de datos sobre la violencia de género">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|Yeseva+One|Archivo+Black&display=swap" rel="stylesheet">
</head>
<body>
<section class="header">
<img src="img/header-black.jpg" alt="" class="header-img">
<div class="header-container">
<h1 class="header-title">Demasiadas</h1>
<p class="chart-ao-text-paragraph">Desde el año 2000 más de 1200 mujeres han sido asesinadas en España.</p>
</div>
</section>
<section class="container-scroll">
<p class="asesinadas">Mujeres asesinadas desde el año 2000: <span class="asesinadas-numero">0</span></p>
<section id="scroll">
<div class="scroll-text">
<div class="step scroll-ao" data-step="0">
<div class="step-subcontainer">
<span class="step-number">63</span>
<h3 class="step-title">ASESINADAS EN 2000</h3>
</div>
</div>
<div class="step scroll-ao" data-step="1">
<div class="step-subcontainer">
<span class="step-number">50</span>
<h3 class="step-title">ASESINADAS EN 2001</h3>
</div>
</div>
<div class="step scroll-ao" data-step="2">
<div class="step-subcontainer">
<span class="step-number">54</span>
<h3 class="step-title">ASESINADAS EN 2002</h3>
</div>
</div>
<div class="step scroll-ao" data-step="3">
<div class="step-subcontainer">
<span class="step-number">71</span>
<h3 class="step-title">ASESINADAS EN 2003</h3>
</div>
</div>
<div class="step scroll-ao" data-step="4">
<div class="step-subcontainer">
<span class="step-number">72</span>
<h3 class="step-title">ASESINADAS EN 2004</h3>
</div>
</div>
<div class="step scroll-ao" data-step="5">
<div class="step-subcontainer">
<span class="step-number">57</span>
<h3 class="step-title">ASESINADAS EN 2005</h3>
</div>
</div>
<div class="step scroll-ao" data-step="6">
<div class="step-subcontainer">
<span class="step-number">69</span>
<h3 class="step-title">ASESINADAS EN 2006</h3>
</div>
</div>
<div class="step scroll-ao" data-step="7">
<div class="step-subcontainer">
<span class="step-number">71</span>
<h3 class="step-title">ASESINADAS EN 2007</h3>
</div>
</div>
<div class="step scroll-ao" data-step="8">
<div class="step-subcontainer">
<span class="step-number">76</span>
<h3 class="step-title">ASESINADAS EN 2008</h3>
</div>
</div>
<div class="step scroll-ao" data-step="9">
<div class="step-subcontainer">
<span class="step-number">57</span>
<h3 class="step-title">ASESINADAS EN 2009</h3>
</div>
</div>
<div class="step scroll-ao" data-step="10">
<div class="step-subcontainer">
<span class="step-number">73</span>
<h3 class="step-title">ASESINADAS EN 2010</h3>
</div>
</div>
<div class="step scroll-ao" data-step="11">
<div class="step-subcontainer">
<span class="step-number">62</span>
<h3 class="step-title">ASESINADAS EN 2011</h3>
</div>
</div>
<div class="step scroll-ao" data-step="12">
<div class="step-subcontainer">
<span class="step-number">51</span>
<h3 class="step-title">ASESINADAS EN 2012</h3>
</div>
</div>
<div class="step scroll-ao" data-step="13">
<div class="step-subcontainer">
<span class="step-number">54</span>
<h3 class="step-title">ASESINADAS EN 2013</h3>
</div>
</div>
<div class="step scroll-ao" data-step="14">
<div class="step-subcontainer">
<span class="step-number">55</span>
<h3 class="step-title">ASESINADAS EN 2014</h3>
</div>
</div>
<div class="step scroll-ao" data-step="15">
<div class="step-subcontainer">
<span class="step-number">60</span>
<h3 class="step-title">ASESINADAS EN 2015</h3>
</div>
</div>
<div class="step scroll-ao" data-step="16">
<div class="step-subcontainer">
<span class="step-number">49</span>
<h3 class="step-title">ASESINADAS EN 2016</h3>
</div>
</div>
<div class="step scroll-ao" data-step="17">
<div class="step-subcontainer">
<span class="step-number">50</span>
<h3 class="step-title">ASESINADAS EN 2017</h3>
</div>
</div>
<div class="step scroll-ao" data-step="18">
<div class="step-subcontainer">
<span class="step-number">53</span>
<h3 class="step-title">ASESINADAS EN 2018</h3>
</div>
</div>
<div class="step scroll-ao" data-step="19">
<div class="step-subcontainer">
<span class="step-number">55</span>
<h3 class="step-title">ASESINADAS EN 2019</h3>
</div>
</div>
<div class="step scroll-ao" data-step="20">
<div class="step-subcontainer">
<span class="step-number">46</span>
<h3 class="step-title">ASESINADAS EN 2020</h3>
</div>
</div>
<div class="step scroll-ao" data-step="21">
<div class="step-subcontainer">
<span class="step-number">37</span>
<h3 class="step-title">ASESINADAS EN 2021</h3>
</div>
</div>
</div>
<div class="scroll-graphic">
<section class="chart-ao">
<svg class="charts">
<g class="chart-ao-container"></g>
</svg>
</section>
</div>
</section>
</section>
<section class="grid-ao">
<article class="grid-ao-element-white">
<div class="grid-ao-black-container">
<img src="img/prou-xavier-felip-cat.jpg" alt="Prou/Basta/Stop 25 de noviembre: Día internacional contra la violencia de género" class="grid-ao-black-image">
<a href="https://www.flickr.com/photos/grafixcat/5206796323/" class="ilustration-xavier">Ilustración realizada por Xavier Felip Cat.</a>
</div>
<h3 class="chart-ao-text-title">ANA ORANTES</h3>
<p class="chart-ao-text-paragraph">El 4 de diciembre de 1997 <a href="https://www.youtube.com/watch?v=72Md_DypqRE">Ana Orantes fue la voz de cientos de mujeres</a> que sistemáticamente habían sido ignoradas por toda la sociedad. Una llamada de auxilio de una mujer que durante 40 años había sido maltratada psicológicamente y fisicamente. Un testimonio que fue su sentencia de muerte, el 17 de diciembre su ex-marido le dio otra paliza, la ato a una silla, la roció con gasolina y la prendió fuego.</p>
<p class="chart-ao-text-paragraph">El asesinato de Ana Orantes puso de manifiesto lo que la sociedad llevaba años negando a cientos de mujeres. Parecía que aquel asesinato iba a ser un punto de inflexión, una triste manera de avanzar como sociedad y afrontar la violencia ejercida contra las mujeres. Por desgracia, no ha sido así, el tiempo ha pasado y los asesinatos se han seguido cometiendo año tras año, alcanzando el máximo en 2008 con 76 asesinatos. Desde el asesinato de Ana decenas de mujeres han pagado con su vida los fallos del sistema y de todos nosotros, la sociedad española.</p>
</article>
<a href="https://www.buymeacoffee.com/jorgeatgu"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a keyboard&emoji=⌨️&slug=jorgeatgu&button_colour=FF5F5F&font_colour=ffffff&font_family=Inter&outline_colour=000000&coffee_colour=FFDD00"></a>
</section>
<section class="chart-container">
<section class="chart-ao-text">
<h3 class="chart-ao-text-title">Datos</h3>
<p class="chart-ao-text-paragraph">Los datos sobre víctimas provienen del <a href="http://ine.es/jaxi/Tabla.htm?path=/t00/mujeres_hombres/tablas_1/l0/&file=v02001.px&L=0">INE</a>. Entre 1999-2005: Instituto de la Mujer a partir de noticias de prensa y de datos del Ministerio del Interior. A partir de 2006 datos de la Delegación del Gobierno para la Violencia de Género.</p>
<p class="chart-ao-text-paragraph"><a href="https://feminismo.maldita.es/articulos/por-que-los-datos-actuales-de-mujeres-asesinadas-por-violencia-de-genero-no-se-pueden-comparar-con-los-anteriores-a-2003/">Por qué los datos actuales de mujeres asesinadas por violencia de género no se pueden comparar con los anteriores a 2003</a></p>
<p class="chart-ao-text-paragraph">Interior no consideraba a las víctimas mortales asesinadas en el ámbito de la pareja o expareja que no fueran dentro del matrimonio hasta el año 2002.</p>
<p class="chart-ao-text-paragraph">Los anuarios estadísticos del Ministerio del Interior se basaban en atestados policiales: si la mujer no moría en el momento de la agresión, no se incluía en la estadística</p>
<p class="chart-ao-text-paragraph">Los datos de 2018, 2019, 2020 y 2021 provienen de la <a href="http://www.violenciagenero.igualdad.mpr.gob.es/violenciaEnCifras/victimasMortales/fichaMujeres/home.htm">Delegación del Gobierno para la Violencia de genero</a>.</p>
<p class="chart-ao-text-paragraph">La fotografía de la portada pertenece a <a href="https://unsplash.com/photos/a-xEUwYSPLw">Molly Belle</a>.</p>
<p class="chart-ao-text-paragraph">La ilustración a <a href="https://twitter.com/xevifc">Xavier Felip Cat</a>.</p>
<p class="chart-ao-text-paragraph">Gracias a Rosana, <a href="https://twitter.com/chucheria">Bea</a> y <a href="https://twitter.com/pr3ssh">Pablo</a> por el feedback.</p>
</section>
</section>
<footer class="footer">
<div class="footer-container">
<p class="footer-texto"><a class="footer-links" href="https://jorgeatgu.com" target="_blank">Jorge</a> - MMXX</p>
<a class="footer-links" href="https://github.com/jorgeatgu/demasiadas">Todo el código y datos está disponible en GitHub</a>
</div>
</footer>
<script src="js/d3.min.js"></script>
<script src="https://unpkg.com/[email protected]/intersection-observer.js"></script>
<script src="https://unpkg.com/scrollama"></script>
<script src="js/index.js"></script>
</body>
</html>