visualiza(datos(gráficamente(en(laweb(...
TRANSCRIPT
Visualiza datos gráficamente en la web con D3.js
Dani Reguera Mondragon Unibertsitatea [email protected] h?ps://twi?er.com/dreguera
h?ps://linkedin.com/in/danireguera
Introducción
§ D3.js es una librería JavaScript para visualizar documentos basados en datos.
§ D3 nos permite visualizar datos uJlizando elementos de la web como HTML, SVG y CSS.
§ D3 hace especial énfasis en los estándares web por lo que nos permite visualizar datos en cualquier navegador sin usar frameworks propietarios
§ D3.js -‐> Data Driven Documents
2
D3.js es JavaScript
§ D3.js uJliza técnicas avanzadas de JavaScript, por consiguiente para aprender D3.js usualmente es necesario aprender / conocer / no tener miedo a el lenguaje JavaScript
§ D3.js es una librería desarrollada por Mike Bostock. h?ps://github.com/mbostock/d3
§ D3.js no es (sólo) un framework para visualización
3
HTML
§ HyperText Mark Language se uJliza para organizar el contenido que muestran los navegadores de Internet.
4
DOM § El DOM (Modelo de Objetos del Documento) ser refiere a la
estructura jerárquica de HTML. § Cada una de las eJquetas corresponde a un elemento, y los
elementos están relacionados entre sí. § Para describir estas relaciones se usan los mismos términos
con los que se describen las generaciones humanas: padre, hijo, hermano(a), ancestro y descendiente.
§ En el código HTML anterior, body es el elemento padre de los hijos h1 y p, los cuales a su vez son hermanos.
§ Todos los elementos de la página son descendientes de html.
§ Los navegadores de la red descomponen el DOM para interpretar el contenido de la página.
5
CSS § Las hojas de esJlo en cascada se usan para definir el esJlo
que se uJlizará para mostrar las páginas de HTML § Los esJlos de un CSS están compuestos de selectores y
reglas. Selectores idenJfican elementos específicos a los cuales se les aplicarán los esJlos.
§ D3 uJliza el mismo esJlo de los selectores en CSS para idenJficar elementos a los cuales se les aplicará alguna operación.
h1 /* Selecciona los títulos de primer nivel */ p /* Selecciona párrafs */ .caption /* Selecciona elementos de clase "caption" */ #subnav /* Selecciona elemento con ID "subnav" */
6
JavaScript § JavaScript en un lenguaje de programación interpretado, mediante el cual se pueden enviar instrucciones al navegador con el propósito de cambiar la página después de que se haya descargado.
§ Los programas (scripts) se pueden incluir directamente dentro del HTML, uJlizando las eJquetas <script>
§ También se pueden guardar en otro archivo, el cual debe ser referenciado en algún lugar dentro del HTML
7
SVG (Scalable vector graphics) § SVG es un formato que uJliza texto para desplegar imágenes.
§ Esto se refiere a que una imagen SVG puede ser definida uJlizando código de eJquetas, de forma similar a HTML. En realidad, el código SVG se puede integrar dentro de cualquier documento HTML.
§ El uso de formato SVG no es un requisito en D3, sin embargo SVG proporciona una serie de facilidades de despliegue visual que simplemente no son facJbles de replicar con elementos HTML.
8
SVG ejemplo <html> <title>Ejemplo de SVG</title> <body> <svg width="250" height="250"> <circle cx="125" cy="125" r="50" fill="yellow" stroke="green" stroke-‐width="12"/> </svg> </body> </html>
9
Json (is your friend)
§ JSON, acrónimo de JavaScript Object Nota8on, es un formato ligero para el intercambio de datos.
§ JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.
§ h?p://www.json.org/json-‐es.html
10
Json -‐ Ejemplo { "nombre":"Dani Reguera", "es_miope": true, "conocimientos": [ "python", "JavaScript", "WordPress" ], "location":{ "lat": 43.065, "lon": -‐2.487, “alt”: null } }
11
Json Validator -‐ h?p://jsonlint.com/
12
Don’t store data in JSON keys with D3.js § Mal: [ { "Calculo":8 }, { "Fisica":6 }, { "Algebra”:7 } ] § Bien: [ { ”Asignatura”:”Calculo”,
“Nota”: 8 }, { ”Asignatura”:”Fisica”,
“Nota”: 6 }, { ”Asignatura”:”Algebra”,
“Nota”: 7 } ]
13
Instalación de D3.js
§ Descargamos la librería completa: ¨ h?ps://github.com/mbostock/d3/releases/download/v3.5.5/d3.zip
¨ Obviamente usaremos la versión minificada cuando publiquemos el proyecto por temas de WPO.
§ O podemos referenciarla directamente: ¨ <script src="h?p://d3js.org/d3.v3.min.js" charset="uo-‐8"></script>
14
Referenciar D3.js en nuestro proyecto <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-‐8"> <title>D3 Test</title> <script type="text/javascript" src="[miruta]/d3.min.js"></script> </head> <body> <script type="text/javascript"> //Aquí meteríamos nuestro código D3.js </script> </body> </html>
15
Despliegue de nuestros proyectos § Muchos de los proyectos podemos probarlos en local, abriendo directamente nuestro archivo HTML en un navegador
§ Cuando se hagan peJciones externas (archivos json o csv) creo que es mejor uJlizar un servidor web: ¨ Podemos uJlizar XAMP / LAMP / MAMP ¨ Podemos uJlizar SimpleHTTPServer:
• h?p://www.pythonforbeginners.com/modules-‐in-‐python/how-‐to-‐use-‐simpleh?pserver/
• h?ps://docs.python.org/2/library/simpleh?pserver.html
16
SimpleHTTPServer
§ Nos colocamos en la carpeta donde tengamos nuestros archivos
$ python -‐m SimpleHTTPServer [puerto] http://localhost:[puerto]/mi-‐pagina.html Ejemplo: $ python –m SimpleHTTPServer 8000 http://localhost:8000/index.html
17
Estructura mi-‐proyecto/
D3/ d3.min.js js/ miarchivo.js css/ miarchivo.css index.html
$ cd /home/dani/mi-‐proyecto $ python –m SimpleHTTPServer:8000 Abrimos un navegador y escribimos:
http://localhost:8000/index.html
18
Nuestra primera página debería ser algo así… <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-‐8"> <title>D3 Test</title> <script type="text/javascript" src="d3/d3.min.js"></script>
<script type="text/javascript" src=”js/miarchivo.js"></script> </head> <body> /* Aquí iría nuestra página */ </body> </html>
19
Añadir un elemento al DOM desde D3.js § Ejemplo1.html § h?ps://github.com/mbostock/d3/wiki/SelecJons#d3_select <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-‐8"> <title>D3 Test</title> <script type="text/javascript" src="../d3/d3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Texto Introducido con D3"); </script> <p>Hola Mundo</p> </body> </html>
20
Encadenar métodos
§ D3 uJliza una técnica denominada sintáxis de cadena, similar a la de jQuery
d3.select("body").append("p").text(”Kaixo Mundua!"); d3.select("body")
.append("p") .text(”Kaixo Mundua!");
21
Asociando datos § D3 puede leer JSON ( y GeoJSON) con facilidad y Jene también un método que ayuda a montar archivos en formato CSV
§ Con D3, se asocian los datos de entrada a los elementos del DOM, de tal forma que posteriormente se puedan referenciar esos valores y aplicar la reglas de mapeo
§ En D3 se uJliza el método selec%on.data( ) para asociar datos a los elementos del DOM
§ h?ps://github.com/mbostock/d3/wiki/SelecJons#data
22
Asociando datos § asociando-‐datos.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-‐8"> <title>D3 Test</title> <script type="text/javascript" src="../d3/d3.min.js"></script> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("Kaixo Mundua!"); </script> </body> </html>
23
Asociando datos § d3.select("body") -‐ encuentra la eJqueta -‐body-‐ en el DOM y pasa la
referencia al siguiente paso en la cadena. § .selectAll("p") -‐ Selecciona todos los párrafos del DOM. Como aún no
existen, devuelve una selección vacía. Esto se debe entender como la representación de los párrafos que exisJrán próximamente.
§ .data(dataset). Cuenta y desagrega los valores. Existen cinco valores en la muestra, por consiguiente de aquí en adelante todo se ejecutará cinco veces, una vez por cada valor.
§ .enter()-‐ Para crear nuevos elementos que estén asociados a datos, es necesario uJlizar enter(). Este método revisa el DOM y luego revisa los datos que le serán entregados. Si existen más datos que elementos del DOM, enter() crea un elemento temporal con el cual se puede hacer la magia. Luego enter() entrega la referencia al elemento temporal al siguiente paso en la cadena.
§ .append() -‐ UJliza la selección temporal creada previamente por el método enter() e inserta el elemento p en el DOM
§ .text(”Kaixo Mundua!") -‐ Toma la referencia al recién creado p e inserta el valor del texto.
24
Asociando datos
25
Asociando datos <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-‐8"> <title>D3 Test</title> <script type="text/javascript" src="../d3/d3.min.js"></script> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) { return d; }); </script> </body> </html>
§ Si no se encapsula d dentro de una función anónima, d no
Jene valor
26
Primer ejercicio
§ Dado el dataset (5,10,15,20,25) , y definiendo un umbral de valor 16, visualizad: ¨ Si el dato es mayor que el umbral poner color verde, si es menor, color en rojo.
27
Primer ejercicio -‐ Solución <body>
<script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) {return d;}) .style("color", function(d) { if (d > 15) { return "green"; } else { return "red"; } }); </script>
</body>
28
Diagrama de barras simple
§ Los diagramas de barras son en esencia rectángulos y la forma más fácil de dibujar un rectángulo es usando la eJqueta de HTML <div>
§ Puesto que este es un div, su ancho width y altura height se definen en los esJlos de CSS
div.bar { display: inline-‐block; width: 20px; height: 75px; /* Esto se cambiará próximamente */ background-‐color: blue;
}
29
Diagrama de barras simple § Ahora a cada div se le debe asignar la clase bar, de tal manera que la regla de CSS se aplique
§ a?r() se usa para asignarle un atributo y su valor a un elemento. Un atributo de HTML es cualquier dupla propiedad/valor que se pueda insertar dentro de los eJquetas < y >.
§ .a?r("class", "bar") § h?ps://github.com/mbostock/d3/wiki/SelecJons#a?r
30
Diagrama de barras simple
§ Vamos a editar el valor del height para generar las barras
.style("height", function(d) { return d + "px"; });
31
Diagrama de barras simple <!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-‐8"> <title>D3 Demo: 5 divs with data</title> <script type="text/javascript" src="../d3/d3.min.js"></script> <style type="text/css"> div.bar { display: inline-‐block; width: 20px; height: 75px; /* Lo vamos a sobreescribir con D3.js*/ background-‐color: teal; margin-‐right:2px; } </style> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar")
.style("height", function(d) { return d*5 + "px"; }); </script> </body>
</html>
32
Diagrama de barras aleatorio § Diagrama-‐barras-‐aleatorio.html <script type="text/javascript">
var dataset = []; //Inicialización del array for (var i = 0; i < 25; i++) { //25 numeros en el dataset var newNumber = Math.round(Math.random() * 30); //Aleatorio un
numero entre (0-‐30) dataset = dataset.concat(newNumber); //Añado el numero al dataset } d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar")
.style("height", function(d) { var barHeight = d*5; return barHeight + "px"; }); </script>
33
Diagrama de barras con SVG § Vamos a uJlizar en este caso SVG en vez de divs § El problema principal que SVG pinta desde la esquina superior izquierda hacia abajo.
§ Por lo que tenemos que hacer una corrección para que pinte desde la esquina inferior izquieda hacia arriba.
.attr("y", function(d) { return h -‐ d; //Altura menos el dato })
34
Añadiendo texto a nuestro gráfico § Añadimos un elemento texto a nuestro SVG y que pinte los datos
svg.selectAll("text") .data(dataset) .enter() .append("text") .attr("x", function(d, i) {return i * (w / dataset.length) + 5;}) .attr("y", function(d) { return h -‐ (d * 4) + 15;}) .text(function(d){return d;}) .attr("font-‐family", "verdana") .attr("font-‐size", "11px") .attr("fill", "white");
35
Ejercicio 2 – ejercicio2.html
§ Crear un diagrama de barras que genere un dataset aleatorio de 25 números entre 0 y 25 y que lo pinte de verde.
§ Introducir los datos dentro del diagrama § La intensidad del verde vendrá dado por el dato ¨ Rgb(0,<midato>,0)
36
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
Diagramas de dispersión
§ Vamos a representar datos en dos dimensiones. X e Y
§ Por ejemplo para este dataset var dataset = [[5, 20], [480, 90], [250, 50], [100, 33],[330, 95],[410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ];
§ Vamos a crear círculos donde su coordenada Y será también su radio
37
Diagrama de dispersión <script type="text/javascript">
//Width and height var w = 500; var h = 200; var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ]; //Creamos el elemento SVG
var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h);
svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }) .attr("r", 6)//dejamos por defecto el radio a 6 .attr("fill","blue"); </script>
38
Modificando el radio en función del dato svg.selectAll("circle")
.data(dataset) .enter() .append("circle") .attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }) .attr("r", function(d) { return Math.sqrt(h -‐ d[1]); }) .attr("fill", function(d) {
return "rgb(" + (d[1] * 10) +", 0, 0)"; })
39
Escalas § Normalmente no existe una correspondencia exacta entre los datos de un conjunto y las medidas de los pixeles que se van a uJlizar para la visualización.
§ Las escalas proveen una manera conveniente de mapear los datos originales a nuevos valores que son úJles para el propósito de visualización.
§ Las escalas de D3 son funciones en las que quién hace la visualización es quien define los parámetros.
§ Una vez creada esta función, se invoca, se le pasa un valor y ésta devuelve el valor de salida, ya con el factor de conversión. Uno puede definir y usar tantas escalas como quiera.
§ h?ps://github.com/mbostock/d3/wiki/API-‐Reference#d3scale-‐scales
40
Diagrama de dispersión con ejes
41
Diagrama de tartas – Pie chart
§ Cargamos datos desde CSV h?ps://github.com/mbostock/d3/wiki/CSV
§ Construimos la escala de colores:h?ps://github.com/mbostock/d3/wiki/Ordinal-‐Scales#categorical-‐colors
42
Documentación
§ API Reference: h?ps://github.com/mbostock/d3/wiki/API-‐Reference
43
Eskerrik asko!
Dani Reguera Mondragon Unibertsitatea [email protected] h?ps://twi?er.com/dreguera
h?ps://linkedin.com/in/danireguera