-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
221 lines (203 loc) · 12.2 KB
/
Copy pathindex.html
File metadata and controls
221 lines (203 loc) · 12.2 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualización de Datos - Actividad 1</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-chart-line"></i>
<span>DataViz</span>
</div>
<div class="nav-links">
<a href="#google-charts" class="nav-link">Google Sheets</a>
<a href="#datawrapper-charts" class="nav-link">Datawrapper</a>
<a href="#about" class="nav-link">Sobre el proyecto</a>
</div>
</div>
<header id="hero">
<div class="container">
<h1>Visualización de Datos <span class="highlight">CO2</span></h1>
<p class="subtitle">Emisiones de CO2 a nivel mundial: Análisis visual interactivo</p>
<div class="author-card">
<div class="author-avatar">
<i class="fas fa-user"></i>
</div>
<div class="author-info">
<p class="author-name">Guillermo Manzanares</p>
<p class="author-title">Master en Big Data y ciencia de datos | Actividad 1</p>
</div>
</div>
<div class="project-links">
<a href="https://github.com/patatapython" target="_blank" class="btn btn-secondary">
<i class="fab fa-github"></i> GitHub
</a>
</div>
</div>
</header>
<main>
<section id="google-charts" class="chart-section">
<div class="container">
<div class="section-header">
<h2>Visualizaciones con Google Sheets</h2>
<p>Análisis interactivos creados utilizando la herramienta Google Sheets</p>
</div>
<div class="charts-grid">
<div class="chart-card" id="chart1">
<div class="chart-header">
<h3>Top 10 países con mayores emisiones de CO2</h3>
<span class="chart-type"><i class="fas fa-chart-bar"></i> Gráfico de barras verticales</span>
</div>
<div class="chart-container">
<iframe width="100%" height="100%" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQZTTT_QnNxm9TfJ9tmKluy5KPMFGrJcPDK-GcZraSXTnNfB8XMY3jLcxpAFt9IYUXAWv1WUC62pT6v/pubchart?oid=1061053810&format=interactive"></iframe>
</div>
<div class="chart-footer">
<p>Análisis de los mayores emisores de CO2 a nivel global</p>
</div>
</div>
<div class="chart-card" id="chart2">
<div class="chart-header">
<h3>Distribución porcentual de emisiones de CO2</h3>
<span class="chart-type"><i class="fas fa-chart-pie"></i> Gráfico circular</span>
</div>
<div class="chart-container">
<iframe width="100%" height="100%" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQZTTT_QnNxm9TfJ9tmKluy5KPMFGrJcPDK-GcZraSXTnNfB8XMY3jLcxpAFt9IYUXAWv1WUC62pT6v/pubchart?oid=766098276&format=interactive"></iframe>
</div>
<div class="chart-footer">
<p>Distribución porcentual de las emisiones de CO2 por países</p>
</div>
</div>
<div class="chart-card" id="chart3">
<div class="chart-header">
<h3>Top 10 países en emisiones de CO2 per cápita</h3>
<span class="chart-type"><i class="fas fa-chart-bar"></i> Gráfico de barras horizontal</span>
</div>
<div class="chart-container">
<iframe width="100%" height="100%" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQZTTT_QnNxm9TfJ9tmKluy5KPMFGrJcPDK-GcZraSXTnNfB8XMY3jLcxpAFt9IYUXAWv1WUC62pT6v/pubchart?oid=809323089&format=image"></iframe>
</div>
<div class="chart-footer">
<p>Análisis de emisiones por habitante en distintos países</p>
</div>
</div>
<div class="chart-card" id="chart4">
<div class="chart-header">
<h3>Relación entre emisiones totales y eficiencia económica</h3>
<span class="chart-type"><i class="fas fa-chart-line"></i> Gráfico compuesto</span>
</div>
<div class="chart-container">
<iframe width="100%" height="100%" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQZTTT_QnNxm9TfJ9tmKluy5KPMFGrJcPDK-GcZraSXTnNfB8XMY3jLcxpAFt9IYUXAWv1WUC62pT6v/pubchart?oid=1008116157&format=interactive"></iframe>
</div>
<div class="chart-footer">
<p>Comparativa entre emisiones y PIB en diferentes economías</p>
</div>
</div>
</div>
</div>
</section>
<section id="datawrapper-charts" class="chart-section alt-bg">
<div class="container">
<div class="section-header">
<h2>Visualizaciones con Datawrapper</h2>
<p>Representaciones interactivas avanzadas creadas con la plataforma Datawrapper</p>
</div>
<div class="charts-grid">
<div class="chart-card" id="chart5">
<div class="chart-header">
<h3>Mapa de emisiones globales</h3>
<span class="chart-type"><i class="fas fa-map"></i> Mapa coroplético</span>
</div>
<div class="chart-container">
<iframe title="CO2 total VS CO2 kg/1000$ VS CO2 t per cápita VS var" aria-label="Split Bars" id="datawrapper-chart-KAA5x" src="https://datawrapper.dwcdn.net/KAA5x/1/" scrolling="no" frameborder="0" style="border: none;" width="600" height="429" data-external="1"></iframe>
</div>
<div class="chart-footer">
<p>Distribución geográfica de las emisiones de CO2 en el mundo</p>
</div>
</div>
<div class="chart-card" id="chart6">
<div class="chart-header">
<h3>Emisiones de CO2 Toneladas per cápita</h3>
<span class="chart-type"><i class="fas fa-map"></i> Mapa Coroplético</span>
</div>
<div class="chart-container">
<iframe title="CO2 Toneladas per cápita" aria-label="Map" id="datawrapper-chart-YrIbY" src="https://datawrapper.dwcdn.net/YrIbY/1/" scrolling="no" frameborder="0" style="border: none;" width="600" height="414" data-external="1"></iframe>
</div>
<div class="chart-footer">
<p>Emisiones de CO2 por habitante en toneladas</p>
</div>
</div>
<div class="chart-card" id="chart7">
<div class="chart-header">
<h3>Variación anual en las emisiones totales de CO2</h3>
<span class="chart-type"><i class="fas fa-chart-bar"></i> Gráfico de barras</span>
</div>
<div class="chart-container">
<iframe title="Variación anual en las emisiones totales de CO2" aria-label="Bar Chart" id="datawrapper-chart-bb8Ad" src="https://datawrapper.dwcdn.net/bb8Ad/1/" scrolling="no" frameborder="0" style="border: none;" width="600" height="693" data-external="1"></iframe>
</div>
<div class="chart-footer">
<p>Cambios anuales en las emisiones de CO2</p>
</div>
</div>
<div class="chart-card" id="chart8">
<div class="chart-header">
<h3>CO2 kg/1000$ de paises Europeos</h3>
<span class="chart-type"><i class="fas fa-map"></i> Mapa coroplético</span>
</div>
<div class="chart-container">
<iframe title="CO2 kg/1000$ de paises Europeos" aria-label="Map" id="datawrapper-chart-jDrlu" src="https://datawrapper.dwcdn.net/jDrlu/5/" scrolling="no" frameborder="0" style="border: none;" data-external="1"></iframe>
</div>
<div class="chart-footer">
<p>Eficiencia de emisiones por PIB en países europeos</p>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="about-section">
<div class="container">
<div class="section-header">
<h2>Sobre el proyecto</h2>
<p>Actividad 1 - Visualización de datos en el Master de Big Data</p>
</div>
<div class="about-content">
<div class="about-text">
<h3>Metodología</h3>
<p>Este proyecto analiza datos sobre emisiones de CO2 a nivel global, obtenidos de datosmacro.expansion.com. Se han procesado utilizando Google Sheets y visualizado con herramientas como Google Charts y Datawrapper para crear representaciones interactivas y significativas.</p>
<h3>Objetivos</h3>
<p>El objetivo principal es demostrar la capacidad de importar, limpiar y visualizar datos complejos utilizando diferentes herramientas digitales, creando un dashboard web que permita analizar tendencias en emisiones de CO2 a nivel mundial.</p>
<h3>Referencias</h3>
<ul>
<li><a href="https://datosmacro.expansion.com/energia-y-medio-ambiente/emisiones-co2" target="_blank">DatosMacro - Emisiones CO2</a></li>
<li><a href="https://www.datawrapper.de/" target="_blank">Datawrapper</a></li>
<li><a href="https://www.google.com/sheets/about/" target="_blank">Google Sheets</a></li>
</ul>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-logo">
<i class="fas fa-chart-line"></i>
<span>DataViz</span>
</div>
<div class="footer-text">
<p>Master en Big Data - Visualización de Datos</p>
<p>Actividad 1 - Abril 2025</p>
</div>
</div>
</div>
<div class="copyright">
<p>© 2025 - Guillermo Manzanares</p>
</div>
</footer>
</body>
</html>