Actualizando los datos: transiciones,
movimiento e interacción
[7.1] ¿Cómo estudiar este tema?
[7.2] Actualización de los gráficos a través de los
eventos
[7.3] Transiciones y movimiento
[7.4] Añadiendo interacción a los gráficos
7
TEMA
Esquema
TEMA 7 – Esquema
Ultimando el gráfico
(actualizando los datos, transiciones, movimiento e interacción)
Escalas ordinales Escuchando eventos Movimiento
Generar Actualización
Transiciones Duración Delay
evento de los datos
Herramienta de Visualización
© Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Ideas clave
7.1. ¿Cómo estudiar este tema?
Para estudiar este tema lee las Ideas clave que encontrarás a continuación.
Ya sabemos cómo dibujar un gráfico por completo. Ahora empezaremos a darle
movimiento al gráfico. D3 es una de las librerías de visualización más potentes, por lo
que hemos de exprimirla al máximo.
En este tema trataremos sobre cómo actualizar datos reaccionando a la generación de
eventos. También trataremos una parte importante relativa al dinamismo de las
visualizaciones como son las transiciones y el movimiento de los objetos para darle una
percepción de realidad o para apoyar nuestro mensaje.
Como hemos explorado en otras librerías todas las visualizaciones tienen sus eventos.
¿Cómo podemos generar esa interacción a nuestras propias visualizaciones? Con D3
veremos que todas estas acciones son muy fáciles. Hemos de entender cómo se producen.
Pero una vez que entendamos los conceptos básicos, no serán más que unas cuantas líneas
de código.
«Time has been transformed, and we have changed; it has advanced and set us in
motion; it has unveiled its face, inspiring us with bewilderment and exhilaration»
(Gibran, 1998).
El movimiento es el secreto de la vida. No importa lo mal que estemos, debemos seguir
hacia delante pase lo que pase. Las visualizaciones son reflejo de la vida. Dan mensajes,
expresan ideas, sugieren caminos, por lo que darles movimiento parece ser una idea
coherente a estos principios. Este tema trata de esto: dar interacción y movimiento
a nuestras visualizaciones.
Como en todos los temas te digo intenta asentar los conceptos poco a poco. Si te adelantas
e intentas modificar visualizaciones rápidamente tendrás problemas. Estás aprendiendo,
no hay nada malo en empezar lento pero seguro. No te confíes.
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
7.2. Actualización de los gráficos a través de los eventos
Empecemos con uno de nuestros gráficos de Bar Charts:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script language="javascript" type="text/javascript"
src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
function read(){
//Width and height
var w = 500;
var h = 100;
var barPadding = 1;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4;
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length -
barPadding) / 2;
})
.attr("y", function(d) {
return h - (d * 4) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
}
</script>
</head>
<body onload="read()">
</body>
</html>
Ahora ya tenemos algo con lo que trabajar. Antes de explicar cómo trabajar con eventos
haremos una pequeña introducción a las escalas ordinales.
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Las escalas ordinales son diferentes a las lineares que se explicaron en el tema anterior.
¿Qué podríamos hacer con las escalas ordinales? Introduzcamos en nuestro código lo
siguiente:
var w = 600;
var h = 250;
A continuación introduzcamos:
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h]);
De forma similar al tema anterior, recordemos modificar nuestros X e Y:
» De las barras:
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d);
})
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
» Del texto:
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
})
Estos últimos cambios nos han servido de recordatorio del el último tema. ¿Pero qué es
lo importante? Que hemos definido nuestro eje X con una escala ordinal.
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
Vamos por partes entonces. Primero definimos la variable xScale. Hasta aquí lo mismo
que en el tema anterior. Simplemente, definimos una escala ordinal en lugar de lineal.
¿Qué es una escala ordinal? Las escalas ordinales son categoría en lugar de una
evolución lineal. Ejemplos son:
» Notas al estilo americano: B, A, AA+.
» Categorías en los cuestionarios: totalmente en desacuerdo, desacuerdo, neutral, de
acuerdo y totalmente de acuerdo.
En este caso no tenemos la necesidad de utilizar una escala realmente ordinal. No es
necesario, pero es útil porque nos aseguramos que el orden en que se dibujarán las barras
será el orden en el que está definido el array, fuente de los datos. ¿Cómo lo hacemos?
Definiendo el dominio, pero utilizamos la función range. ¿Qué es lo que conseguimos
con la función d3.range(dataset.length)? En nuestro caso sería lo equivalente a
aplicar esta sentencia:
.domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
18, 19])
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Pero piensa que también podríamos generar un dominio tal que:
.domain([“Totalmente en desacuerdo”, “desacuerdo”, “neutro”, “de
acuerdo”, “Totalmente de acuerdo”])
Una de las cosas positivas que tienen las escalas ordinales es que soportan las funciones
range banding. En lugar de utilizar valores continuos como en las escalas lineares,
utilizamos valores discretos y los valores son determinados con anterioridad.
Para dividir nuestra escala en el dominio podemos utilizar la función rangeBands, que
nos divide nuestra escala en bandas basada en la longitud del dominio. Es decir, que lo
que hacemos es lo siguiente:
(w - 0) / xScale.domain().length
(600 - 0) / 20
600 / 20
30
Además, podemos incluir un pequeño espacio entre nuestras bandas para que
estéticamente sea más bonito. Si no hacemos esto tendremos el mismo problema que
tuvimos en el primer bar chart que hicimos, todas las barras unidas —¿te acuerdas?—.
Lo que tenemos que hacer es poner un valor después del rango, en este caso 0.2.
.rangeBands([0, w], 0.2)
Como prueba puedes comprobar en tu gráfico el comportamiento si le cambias este valor.
Pero, nosotros no hemos utilizado la función rangeBands, nosotros hemos utilizado la
función rangeRoundBands. La diferencia entre estas funciones es que la segunda
redondea el valor del píxel. Es decir, si tuviéramos un píxel en la posición 12.3456,
tendría la posición 12.
¿Cuál es la ventaja entre aplicar escalas lineares y las ordinales a efectos prácticos? Antes
teníamos algo tal que así:
.attr("width", w / dataset.length - barPadding)
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Ahora tenemos:
.attr("width", xScale.rangeBand())
Lo que nos facilita un poco las matemáticas.
Después de esta pequeña introducción a escalas ordinales vamos a ver cómo actualizar
gráficos. Ya sabes D3.js es simple para hacer todas estas cosas, pero para resumir vamos
a seguir cuatro pasos:
» Crear un botón que genere un evento para actualizar nuestro gráfico.
» Crear un nuevo dataset.
» Actualizar las dimensiones del gráfico.
» Hacer efectiva las actualizaciones.
Vamos al primer paso. Crearemos un botón. Lo bueno de D3.js es que todo elemento en
D3 puede ser un botón, bueno, siendo más estrictos, todo elemento puede generar
eventos. Para comenzar generaremos un texto y le asignaremos un pop-up como
resultado a nuestro evento.
d3.select("body")
.append("p")
.text("pulsa aquí para actualizar tu gráfico")
.on("click", function() {
alert("Conseguido! Ahora vamos a hacer algo útil...");
});
Si pones esto antes de la definición del svg, tendrás el siguiente resultado:
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Ahora vamos a hacer lo que estábamos buscando, generar un nuevo dataset:
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10, 13, 19, 21,
25, 22, 18, 15, 13 ];
Actualicemos los valores de nuestro gráfico y adaptemos altura y anchura al nuevo dataset:
svg.selectAll("rect")
.data(dataset)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
Introduzcamos todo esto en nuestro botón:
d3.select("body")
.append("p")
.text("pulsa aquí para actualizar tu gráfico")
.on("click", function() {
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10, 13, 19, 21, 25,
22, 18, 15, 13 ];
svg.selectAll("rect")
.data(dataset)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
});
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Pero nos olvidamos de algo, ¿no?
Si miramos el gráfico vemos que nos olvidamos de actualizar el texto también. Añadir al
evento el siguiente código:
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
Además no queda del todo bonito que después de pulsar en el texto, este siga existiendo,
por lo que borraremos nuestro botón añadiendo al evento el siguiente texto:
d3.select(this).remove();
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Este es el resultado final:
7.3. Transiciones y movimiento
Las transiciones son el movimiento que dará un poco de vida a nuestro gráfico y, como
no, en D3.js podemos hacerlo con una simple línea de código. Pero, como en todo,
encontraremos detractores que no les gustan las transiciones. Para algunos las
transiciones atraen a usuarios más noveles, pero para expertos en visualizaciones puede
ser un retraso, un adorno innecesario. Pero entonces, ¿cómo podemos hacer las
transiciones? Una simple línea de código: transition().
svg.selectAll("rect")
.data(dataset)
.transition()
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
Pruébalo, coloca el código en el texto del botón para actualizar tu bar chart. Al pulsar
sobre tu evento verás que el gráfico será animado.
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
¿Qué podemos controlar en estas transiciones? Una de las cosas que podemos controlar
es la duración. Otra vez, es cuestión de una línea: duration(milisegundos). Probad este
código:
svg.selectAll("rect")
.data(dataset)
.transition()
.duration(3000)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
duration (3000) hace que la animación dure tres segundos. Pero verás que las barras
crecen, sin embargo, el texto de las barras está fijo. Por lo tanto, debemos aplicar la
transición al texto también.
svg.selectAll("text")
.data(dataset)
.transition()
.duration(3000)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
Si nos fijamos en la transición, primero es lenta y luego acelera. Esto lo podemos
modificar y regular con otra función: ease(), y hacer la transición lineal.
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
svg.selectAll("rect")
.data(dataset)
.transition()
.duration(3000)
.ease("linear")
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
Fíjate, si solo modificas las barras pero no el texto notarás la diferencia de cómo
evolucionan los dos elementos. Prueba con otros métodos, no solo el lineal. Por ejemplo
circle y elastic. Mira cómo reacciona.
Otra de las particularidades que tenemos a nuestra disposición consiste en retrasar la
animación con la función delay(time_miliseconds). Retrasaremos tres segundos
nuestra animación:
svg.selectAll("rect")
.data(dataset)
.transition()
.duration(3000)
.ease("linear")
.delay(3000)
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
7.4. Añadiendo interacción a los gráficos
Los modos de interaccionar con un gráfico son tan diversos como los estilos de los
diseñadores.
Es decir, por ejemplo, pongámonos que queremos que reaccione al pulsar una barra el
valor. Sabiendo el valor, podemos hacer otras cosas. Ahora te dejaré descubrir cómo
conocer el valor, que aunque está escrito en la barra, lo veremos en una ventana abierta.
svg.selectAll("rect")
.data(dataset)
.on("click", function(d) {
alert(d);
})
.transition()
.ease("linear")
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
});
Ahora bien, ¿queremos hacer algo con más de interés, por ejemplo, hacerle cambiar las
barras cuando pasamos por encima? Prueba el siguiente código:
svg.selectAll("rect")
.data(dataset)
.on("mouseover", function(d) {
d3.select(this)
.style("fill", "red");
})
.on("mouseout", function(){
d3.select(this)
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
.style("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
})
.transition()
.ease("linear")
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
Te propongo el siguiente ejercicio y si quieres lo discutimos en el foro:
Ejercicio:
Une la librería jQtip con la librería D3.js o, como alternativa, piensa en un escenario
diferente. Con solo D3.js puedes hacer otras cosas. Es dejarlo al libre albedrío. Prueba,
experimenta y si tienes dudas, postéalo en el foro explicando lo que quieres hacer. Si
quieres, pon también tu resultado.
TEMA 7 – Ideas clave © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Lo + recomendado
No dejes de leer…
Interactive Data Visualization for the Web
Murray, S. (2013). Interactive Data Visualization for the Web. Sebastopol: O’ Reilly.
Tres son las secciones que nos interesan para este tema: Transiciones,
actualización de las escalas y ejes.
Accede a los capítulos desde el aula virtual o a través de las siguientes direcciones web:
Transiciones
http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_transitions
Actualizar escalas
http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_updating_scales
Ejes
http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_updating_axes
TEMA 7 – Lo + recomendado © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
No dejes de ver…
Beautiful visualizations with d3.js
Esta interesante conferencia-taller trata los conceptos de la creación de visualizaciones
con D3. Podrás sumergirte en los ejemplos específicos que muestran.
Accede al vídeo desde el aula virtual o a través de la siguiente dirección web:
https://www.youtube.com/watch?v=JAlZ0uJnqkA
TEMA 7 – Lo + recomendado © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
+ Información
A fondo
Interactive Data Visualization for the Web
Murray, S. (2013). Interactive Data Visualization for the Web. Sebastopol: O’ Reilly.
En el capítulo 9 de este libro podrás profundizar más sobre updates de
datos más elaborados.
Accede a los capítulos desde el aula virtual o a través de las siguientes direcciones web:
http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_other_kinds_of
_data_updates
D3 tips and tricks
En esta sección podrás encontrar explicaciones sobre la
información de herramientas. La información sobre herramientas
tiene una maravillosa dualidad. Por un lado, es útil como ayuda
para dar información de contexto y, por otro lado, si se hace con un
poco de cuidado, pueden verse muy elegantes.
Accede a la sección desde el aula virtual o a través de la siguiente dirección web:
https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-adding-tooltips
TEMA 7 – + Información © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Actividades
Trabajo: Gráficos con D3 (III)
Descripción de la actividad
En esta actividad tienes que generar una visualización con dos gráficos, que no sean
gráficos de barras, de dispersión o de tarta. Los gráficos tienen que incluir algún tipo de
animación e interacción con los usuarios.
Entrega de la actividad
» Tienes que entregar el documento Word o PDF con el código completo documentado
y el gráfico insertado.
» También es necesario entregar todos los ficheros necesarios para generar la
visualización.
TEMA 7 – Actividades © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
Test
1. ¿Cuánto tardará la transición en este código?
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
A. 1 seg.
B. 2 seg.
C. No hay transición.
2. ¿Cuánto tardará la transición en este código?
svg.selectAll("text")
.data(dataset)
.text(function(d) {
return d;
})
.transition()
.delay(1000)
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d) + 14;
});
A. 1 seg.
B. 2 seg.
C. El tiempo por defecto transición.
TEMA 7 – Test © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
3. ¿Qué diferencia hay entre RangeBands y RangeBoundBans?
A. RangeBoundBands hace la aproximación al píxel más cercano.
B. RangeBoundBands da la oportunidad de definir el espacio entre barras mientras
que RangeBands no.
4. ¿Qué diferencia hay entre una escala lineal y una ordinal?
A. Los valores ordinales tienen una evolución continua mientras que la lineal es
discreta.
B. Los valores lineales tienen una evolución continua mientras que la ordinal es
discreta.
5. ¿Es la sintaxis correcta?
on("mouseover", function(d) {
d3.select(this)
.style("fill", "red");
})
A. Sí.
B. No.
6. ¿Es la sintaxis correcta?
on("outmouse", function(d) {
d3.select(this)
.style("fill", "red");
})
A. Sí.
B. No.
7. ¿Podemos escuchar eventos en los elementos p de D3?
A. Sí.
B. No.
8. ¿Podemos escuchar/generar eventos en los elementos rect de D3?
A. Sí.
B. No.
TEMA 7 – Test © Universidad Internacional de La Rioja (UNIR)
Herramienta de Visualización
9. ¿Qué conseguimos cuando utilizamos en la transición la función ease("linear")?
A. Que la transición sea constante.
B. Qué la transición sea vertical.
C. Que la transición sea horizontal.
10. ¿Qué conseguimos cuando utilizamos en la transición la función delay("2000")?
A. No existe la función.
B. Retrasar la transición tres segundos.
C. Ninguna de las anteriores.
TEMA 7 – Test © Universidad Internacional de La Rioja (UNIR)
