Taller de Visualización Web de Datos
Anuncio
Taller de Visualización Web de Datos TELENOIKA_ NOVIEMBRE_2013 Óscar Marín Miró @oscarmarinmiro [email protected] 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
