Charla sobre visualizaciones de datos en el pasado WordCamp Cantabria 2015. Como realizar e incorporar gráficos y diagramas en nuestros sitios web con WordPress

1. Visualizaciones de datos avanzadas en
WordPress
dreguera@mondragon.edu Ÿ Dani Reguera Bakhache Ÿ @dreguera

2. ¿Qué es la visualización de datos?
“La visualización de datos (data visualiza3on, en
inglés) es el proceso de búsqueda,
interpretación, contrastación y comparación de
datos que permite un conocimiento en
profundidad y detalle de los mismos de tal forma
que se transformen en información
comprensible para el usuario”
Wikipedia dixit
2

3. ¿Por qué es tan importante la visualización de
datos?
Almacenamos tal can@dad de datos de
diferentes @pos, de diferentes formatos y de
diferentes orígenes que lo que queremos es
poder representarlos de manera entendible,
usable y bonita para el usuario
3

4. ¿Donde representar esos datos?
§ Podemos representar esos datos en diferentes
plataformas:
¨ Desde la web: En un si@o WordPress
¨ En el móvil: Puede ser ese mismo si@o WordPress
pero op@mizado para móviles. (Piensa en web)
¨ Desde una app móvil.
¨ En un simple display de un sistema embebido
4

5. Proceso de visualización de datos
5

6. ¿Cómo representar esos datos?
6

7. ¿Cómo vamos a representar esos datos?
7

8. ¿Qué herramientas disponemos?
8
§ Comerciales, freemium, SaaS:
¨ Infogram
¨ Piktochart
¨ Google Charts
¨ …
§ Librerías JavaScript:
¨ D3.js
¨ Flotr2.js
¨ Raphael.js
¨ Dygraphs.js
¨ …

9. Google Charts
9

10. Pensemos en la web
10

11. Canvas vs SVG
11
hbp://www.htmlgoodies.com/html5/other/
html5-canvas-vs.-svg-choose-the-best-tool-for-
the-job.html#fid=dkP-OnzEx3B

12. D3.js
12

13. Google Analy@cs usa D3.js
13

14. Flotr2.js
14

15. ¿Qué podemos hacer?
15

16. ¿Y en WordPress qué?
16

17. 17

18. Using JavaScript on WordPress
18
hbps://codex.wordpress.org/Using_Javascript

19. Créditos
§ Iñaki Arenaza: @iarenaza
§ Iñaki Garitano: www.mondragon.edu
§ Antonio Villegas: wprincipiante.es
§ Ricardo y Verónica de Silo Crea@vo: silocrea@vo.com
§ D3.js: d3js.org
§ Flotr2.js: humblesooware.com/flotr2/
§ Ilustraciones, textos y gráficos hechos con Canva
Free www.canva.com
19

20. Preguntas
20

21. ¡Muchas gracias! Eskerrik asko! Grazas! Gràcies! Danke
schön! Thanks! Merçi! Grazie! Obrigado! Qatlho’!
Dani Reguera
Mondragon Unibertsitatea
dreguera@mondragon.edu
hbps://twiber.com/dreguera
hbps://linkedin.com/in/danireguera