-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
294 lines (293 loc) · 13.2 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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>A clau | d3 responsive</title>
<meta name="description" content="">
<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=Roboto+Condensed:400,700|Rubik:400,500|Adamina" rel="stylesheet">
</head>
<body>
<section class="clau-container">
<article class="chart-container">
<h1 class="title">Clau</h1>
<blockquote class="text quote">A clau, es una llave en aragonés.</blockquote>
<p class="text">La idea es tener un repositorio con ejemplos de gráficas hechas con d3 y que se adapten a cualquier dispositivo. Los ejemplos contienen datos de verdad, casi todo extraídos de <a href="https://forno.es">Forno</a>, <a href="https://vulturno.co">Vulturno</a> y <a href="https://casacaida.co">Casa Caída</a>. </p>
<p class="text">Todas las gráficas tienen su version con tooltips o con herramientas como <a href="http://d3-annotation.susielu.com">d3-annotations</a>. Es algo que no ha sido fácil, he dado muchas vueltas buscando un camino a seguir, hay demasiado ejemplos vagos y confusos. Algunos de ellos aprovechan el hack de SVG de prescindir tanto de width y height, obviamente se adapta, ya que un SVG por defecto tiene 100% en su anchura y altura, pero el resultado es terrible.</p>
<p class="text">La tipografía elegida para los número es Roboto Condensed, ya que no todas las tipografías se llevan bien con los números. Roboto es la elegida pero <a href="https://www.invisionapp.com/blog/best-free-fonts-for-numbers/">aquí hay algunas más</a>.</p>
</article>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">
Gráfica de Area</h3>
<p class="text">Sin tooltip</p>
<article class="chart-lluvia">
<svg>
<g class="container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container bg1">
<section class="chart-container">
<h3 class="subtitle">
Gráfica de Area con tooltip</h3>
<p class="text">Con un tooltip que solamente pinta el resultado y dos líneas para situar al usuario.</p>
<article class="chart-lluvia-tooltip">
<svg>
<g class="chart-lluvia-tooltip-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container bg2">
<section class="chart-container">
<h3 class="subtitle">
Gráfica de Area con tooltip II</h3>
<p class="text">Con un tooltip que devuelve texto y una línea para ubicar al usuario en la gráfica.</p>
<article class="chart-lluvia-tooltip-dos">
<svg>
<g class="chart-lluvia-tooltip-dos-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container bg3">
<section class="chart-container">
<h3 class="subtitle">
Gráfica de barras vertical sin tooltip </h3>
<p class="text">Gráfica de barras en formato vertical sin tooltip.</p>
<article class="chart-lluvia-bar-vertical">
<svg>
<g class="chart-lluvia-bar-vertical-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container bg4">
<section class="chart-container">
<h3 class="subtitle">
Gráfica de barras vertical con tooltip </h3>
<p class="text">Gráfica de barras en formato vertical con tooltip fijo. La idea es aprovechar una posición vacía de la gráfica para dejar el tooltip en estático. Es bastante molesto que vaya apareciendo y desapareciendo.</p>
<article class="chart-lluvia-bar-vertical-tooltip">
<svg>
<g class="chart-lluvia-bar-vertical-tooltip-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container bg5">
<section class="chart-container">
<h3 class="subtitle">
Gráfica de barras horizontal sin tooltip </h3>
<p class="text">Gráfica de barras en formato horizontal sin tooltip.</p>
<article class="chart-lluvia-bar-horizontal">
<svg>
<g class="chart-lluvia-bar-horizontal-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container bg6">
<section class="chart-container">
<h3 class="subtitle">Gráfica de scatterplot</h3>
<p class="text">Scatter Plot</p>
<article class="chart-lluvia-scatter">
<svg>
<g class="chart-lluvia-scatter-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Múltiples gráficas de area</h3>
<p class="text">A partir de un dataset creamos varias gráficas de area</p>
<article class="chart-multiple-lines">
<svg>
<g class="chart-multiple-lines-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container bg7">
<section class="chart-container">
<h3 class="subtitle">
Gráfica de area con input </h3>
<p class="text">Gráfica de area que se actualiza a través de un input.</p>
<article class="chart-lluvia-input">
<div class="temperatura-mensual-minima-select" id="mes-mensual-minima"></div>
<svg>
<g class="chart-lluvia-input-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Gráfica de línea con dots</h3>
<p class="text">Una gráfica de línea con círculos para reforzar el resultado a primera vista.</p>
<article class="line-lluvia">
<svg>
<g class="line-lluvia-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Gráfica de línea multiple</h3>
<p class="text">No es una buena práctica pintar múltiples líneas en la misma gráfica.</p>
<article class="multiline-lluvia">
<svg>
<g class="multiline-lluvia-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Gráfica de area stack</h3>
<p class="text">Comparar varios datos que ocurren en el mismo espacio y tiempo.</p>
<article class="area-stack">
<svg>
<g class="area-stack-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Gráfica de barras stacked</h3>
<p class="text">Comparar varios datos que ocurren en el mismo espacio y tiempo.</p>
<article class="bar-stack">
<svg>
<g class="bar-stack-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container temperature-max">
<article class="chart-container">
<section class="temperature-container">
<h3 class="subtitle">Temperaturas máximas</h3>
<p class="text">Una gráfica para visualizar cuando se establecieron los récords de temperaturas máximas en las 45 estaciones analizadas.</p>
<article class="chart-temperature-max">
<svg>
<g class="chart-temperature-max-container"></g>
</svg>
</article>
</section>
</article>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Gráfica de barras verticales al 100%</h3>
<p class="text">Con abundantes datos quizás una buena práctica sea aprovechar casi todo el espacio de la pantalla. También vamos a prescindir de la escala vertical.</p>
</section>
</section>
<section class="clau-container-full">
<article class="vertical-full-lluvia">
<svg>
<g class="vertical-full-lluvia-container"></g>
</svg>
</article>
</section>
<section class="clau-container">
<article class="chart-container">
<div id="vis"></div>
</article>
</section>
<div class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Scatterplot con dos inputs</h3>
<article class="scatter-inputs">
<svg>
<g class="scatter-inputs-container"></g>
</svg>
<div class="container-inputs">
<label class="inputs-label" for="updateButtonDay">Día</label>
<input maxlength="2" class="input-update-grafica" id="updateButtonDay" type="text" value="31" />
</div>
<div class="container-inputs">
<label class="inputs-label" for="updateButtonMonth">Mes</label>
<input maxlength="2" class="input-update-grafica" id="updateButtonMonth" type="text" value="12" />
</div>
<button class="btn-update-grafica roboto btn-update-max" id="update">MÁXIMAS</button>
<button class="btn-update-grafica roboto btn-update-min" id="updateMin"> MÍNIMAS</button>
</article>
</section>
</div>
<div class="clau-container">
<section class="temperature-container-full">
<h3 class="subtitle">Force Layout</h3>
<article id="frosty" class="chart-force-two">
<svg class="charts">
<g class="chart-force-two-container"></g>
</svg>
</article>
</section>
</div>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Force Layout</h3>
<article class="chart-diff-records">
<svg class="charts">
<g class="chart-diff-records-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Directional dot</h3>
<article class="chart-diff-records">
<svg class="charts">
<g class="chart-diff-records-container"></g>
</svg>
</article>
</section>
</section>
<section class="clau-container">
<section class="chart-container">
<h3 class="subtitle">Force Layout</h3>
<section class="temperature-container-full">
<article id="force-maxima" class="chart-force-maxima">
<svg class="charts">
</svg>
</article>
</section>
</section>
</section>
<footer class="footer">
<div class="chart-container">
<p class="footer-texto">Hecho en Zaragoza con mucha maña por un <a class="footer-links" href="http://jorgeatgu.com" target="_blank">maño</a> - MMXIX</p>
<p class="footer-texto">Cualquier consulta escribid a: [email protected]</p>
<a class="footer-links" href="http://github.com/jorgeatgu/clau">GitHub</a>
</div>
</footer>
<script src="js/d3.min.js"></script>
<script src="js/bar-vertical-tooltip.js"></script>
<script src="js/bar-vertical.js"></script>
<script src="js/area.js"></script>
<script src="js/area-tooltip.js"></script>
<script src="js/area-tooltip-dos.js"></script>
<script src="js/bar-horizontal.js"></script>
<script src="js/scatter-plot.js"></script>
<script src="js/area-input.js"></script>
<script src="js/line.js"></script>
<script src="js/multiple-line.js"></script>
<script src="js/bar-vertical-full.js"></script>
<script src="js/scatter-inputs.js"></script>
<script src="js/multiple-area.js"></script>
<script src="js/area-stack.js"></script>
<script src="js/bar-stacked-vertical.js"></script>
<script src="js/bubble-line.js"></script>
<script src="js/slider.js"></script>
<script src="js/force-layout.js"></script>
<script src="js/dot-directional.js"></script>
</body>
</html>