Taller de Visualización Web de Datos
Anuncio
Taller de Visualización
Web de Datos
TELENOIKA_ NOVIEMBRE_2013
Óscar Marín Miró
@oscarmarinmiro
oscar@outliers.es
1
CONTENIDOS
INTRODUCCIÓN
D3.JS
LEAFLET.JS
REFERENCIAS
Material del curso en http://assets.outliers.es/cursos/vizNov
2
INTRODUCCIÓN
3
HERRAMIENTAS
‣ Gráficos y estadística
‣ MS-Excel
‣ Tableau
‣ Qlikview
‣ Google Fusion Tables
‣ Many Eyes
‣ Wordle
4
HERRAMIENTAS
‣ Gráficos y estadística
‣ DataWrapper
‣ Polychart
‣ R/ggplot2
5
HERRAMIENTAS
‣
‣
Programación:
‣
D3.js
‣
Processing
‣
WebGL (three.js)
Cartografías:
‣
Leaflet.js
‣
CartoDB
6
HERRAMIENTAS
‣ Redes:
‣ Gephi
‣ Graph-tool/GraphViz
‣ Postproducción:
‣ Adobe Illustrator
‣ Inkscape
7
D3.JS - INTRO
8
INTERACTIVIDAD: D3.JS
2011, Mike Bostock
http://en.wikipedia.org/wiki/Protovis#Context
9
INTERACTIVIDAD: D3.JS
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
D3: Data-Driven Documents
Librería JavaScript
No es una librería de gráficos
Sobre estándares HTML5: Javascript, SVG, CSS3
La librería facilita el mapeo de datos a elementos HTML
Versión 3.0 recién salida
Requiere una nueva manera de pensar: curva de aprendizaje fuerte
Alojada aquí
Tutorial recomendado : http://alignedleft.com/tutorials/d3/
Documentación dispersa. La doc de la API aquí
Elemento central: El ‘join’ de datos
10
Core concept : Data join
Data
Elements
Pseudo-code
myData = [1,3,4];
join = data(myData,”svg:circle”);
join.enter().attr(radius,datum);
join.exit().remove();
join.update().attr(radius,datum);
Enter
Update
Exit
http://bost.ocks.org/mike/join/
11
Core Concept: Layouts
Pseudo-code
myData = {‘nodes’: [
{‘name’:’a’},
{‘name’:’b’}],
‘egdes’:[
{‘source’:0,‘target:1}
]};
layout = layout(‘network’,‘myData’);
print layout;
myData = {‘nodes’: [
{‘name’:’a’,’x’:0,y:1},
{‘name’:’b’,’x’:1,y:0},
‘egdes’:[{‘source’:0,‘target:1}]};
12
INTERACTIVIDAD: D3.JS
D3: Características
‣
‣
‣
‣
‣
‣
‣
‣
Escalas ordinales y cuantitativas
Funciones para control de ejes
Módulo de layouts: redes, treemap, circle packing, etc
Captura de eventos de zoom y panning
ColorBrewer incluído
Permite acabados interactivos para producción
Eventos de gestos para tabletas
Librería ‘geo’
13
INTERACTIVIDAD: D3.JS
D3:Algunos ejemplos significativos
‣
‣
‣
‣
‣
‣
Redes: http://bl.ocks.org/mbostock/4062045
‣
‣
Coffee Flavour Wheel: http://www.jasondavies.com/coffee-wheel/
Mapa de cloropletas: http://bl.ocks.org/mbostock/4060606
ala “Hans Rosling”: http://bost.ocks.org/mike/nations/
Zoomable treemap: http://mbostock.github.com/d3/talk/20111018/treemap.html
World Tour: http://bl.ocks.org/mbostock/4183330
Force Directed States: http://mbostock.github.com/d3/talk/20111018/forcestates.html
La mayoría de los interactivos visuales de The NYT
14
INTERACTIVIDAD: D3.JS
D3: Conclusiones
‣
La potencia está en que se apoya en los estándares HTML: Gran futuro a largo
plazo
‣
‣
‣
‣
‣
Por tanto se puede jugar con CSS, SVG, eventos JS
Hay muchísimos ejemplos ya hechos
Muchas dudas resueltas en StackOverFlow
El punto fuerte principal es la interactividad web
Es complejo de entender, pero los layout ayudan a abstraer
15
HTML5
HTML+DOM+CSS3+JAVASCRIPT+
SVG/CANVAS/WEBGL
16
HTML5
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Plantilla D3</title>
<script type="text/javascript" src="d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Nuestro codigo D3
</script>
</body>
</html>
17
HTML5
DOM
‣Document Object Model
‣Estructura jerárquica de HTML
‣Cada nodo es un elemento
‣Mantienen relaciones entre sí: hijos, padres,
hermanos, descendientes,etc..
‣Se manipula con Javascript o librerías auxiliares:
JQuery, D3, etc..
‣Ej: d3.selectAll(“div”).append(“p”)
‣ “#id”, “.clase”,”h1”
18
HTML5
CSS 3.0
‣Cascading Style Sheets
‣Presentación visual del HTML
‣Selectores
‣Propiedades
‣Reglas (propiedades de los selectores)
19
HTML5
CSS 3.0: Selectores
h1
/* headers de nivel 1 */
p
/* Párrafos*/
.myClase /* Clase ‘myClase’ */
#myId /* Id ‘myId */
20
HTML5
CSS 3.0: Reglas y Propiedades
p{
font-size: 12px;
line-height: 14px;
color: black;
}
21
HTML5
CSS 3.0: Inclusión
<head>
<style type="text/css">
p{
font-family: Helvetica;
}
</style>
</head>
<head>
<link rel="stylesheet" href="style.css">
</head>
22
HTML5
CSS 3.0: Referencias
https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference
http://www.w3schools.com/cssref/default.asp
23
HTML5
Javascript: Lenguaje dinámico ejecutado (en
este caso) en el navegador
Una buena referencia
https://developer.mozilla.org/en-US/docs/JavaScript/Reference
24
HTML5
Javascript: Inclusión en el HTML
<body>
<script type="text/javascript">
alert("Hola mundo!");
</script>
</body>
<head>
<title>Titulo</title>
<script type="text/javascript" src="script.js"></script>
</head>
25
HTML5
SVG: Scalable Vector Graphics
<svg width="100px" height="50px">
<text class=”hola” x="10" y="20">Hola mundo</text>
</svg>
Referencias:
https://developer.mozilla.org/es/docs/SVG/Element
http://www.w3.org/TR/SVG/
26
D3.JS - TALLER
27
TEMPLATE D3.JS
Abrir dia1/ejemplo1.html
28
SELECCIONES D3
Abrir dia1/ejemplo2.html
29
EJERCICIO SELECCIONES
Abrir dia1/ejemplo2.html
‣Escribir un código D3.js en la página para cambiar la
fuente a helvetica (font-face) y el color a ‘yellow’
‣Sacarlo a un javascript externo e incluirlo
30
EJERCICIO ESTILOS
Abrir dia1/ejemplo2.html
‣‘Classear’ el párrafo con una clase CSS que tenga
font-size: 40px y ‘color’ black. Los estilos van en el
HTML, el javascript también. Probarlo
‣Poner una clase extra, con otro nombre, y font-size:
20px
‣Escribir código D3.js con d3.selectAll(“p”).attr(“class”,
“nombre_de_clase”) para cambiar la clase del párrafo
a la segunda
‣Sacar el código javascript y los estilos fuera del html.
Probarlo
31
INSERCIONES Y ENCADENADOS
Abrir dia1/ejemplo3.html
32
EL MÉTODO SELECTALL() DE D3.JS
Abrir dia1/ejemplo4.html
33
EL MÉTODO DATA() DE D3.JS
Abrir dia1/ejemplo5.html
34
EJERCICIO DE CONSOLIDACIÓN
DATA() D3.JS
Abrir dia1/ejemplo5.html
Modificarlo para que cada párrafo empiece por
‘Parrafo número: num_parrafo -->’ y a continuación el
párrafo de quijote[] correspondiente
d3.select("body").selectAll("p").data(quijote).enter
().append("p").html(function(d,i){return d;});
35
EJERCICIO DE CONSOLIDACIÓN
DATA() D3.JS. DATOS COMPUESTOS
Abrir dia1/ejercicio6.html
Completarlo
36
