6 HVID SUM UP Gráficos de diseño de fuerza D3

Introducción y objetivos

• D3 integra diversas gráficas.
• Cada gráfica necesita parámetros específicos adaptados.
• Es importante dominar los principios básicos de D3 que son comunes a todas las gráficas.
• El tema aborda un nuevo tipo de visualización llamada Force-Directed Graph o Force Layout.
• Force Layout representa las relaciones entre entidades mediante un grafo.
• Esta gráfica es muy interesante y se utiliza, por ejemplo, en redes sociales para reflejar relaciones entre usuarios.
• En este tema también se empieza a dar movimiento a las gráficas.
• D3 es una de las librerías de visualización más potentes.
• Se aborda cómo actualizar datos reaccionando a la generación de eventos.
• Se explora el dinamismo de las visualizaciones, como las transiciones y el movimiento de objetos.
• Se dan así una percepción de realidad y se apoya el mensaje.
• Se explica cómo exportar las visualizaciones.

Force Layout

• Uno de los datasets referenciados en "Getting started with D3" de M. Dewar (2012) se utiliza.
• Se utiliza uno de los datasets que el autor tiene en Github.
• El dataset se puede descargar desde: https://github.com/mikedewar/getting_started_with_d3.git
• Para generar este gráfico, se necesita el archivo .json.
• .json se puede cargar en Brackets y se puede descargar o copiar desde: https://github.com/mikedewar/getting_started_with_d3/blob/master/visualisations/data/stations_graph.json
• El archivo .json contiene los nodos (paradas de metro) y las conexiones entre paradas.
• El código se divide y se explica por partes.

Círculos o puntos del gráfico

• El código que define los círculos o puntos del gráfico es:

var node = svg.selectAll("circle.node").data(data.nodes).enter().append("circle").attr("class", "node").attr("r", 12);

Líneas entre los puntos

• El código para definir las líneas entre los puntos es:

var link = svg.selectAll("line.link").data(data.links)
.enter().append("line").style("stroke","black");

Algoritmo

• El algoritmo utilizado es layout.force.
• Para este algoritmo se utilizan los atributos nodes y links.

var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height])
.nodes(data.nodes)
.links(data.links)
.start();

Función force.on

• La función force.on adapta los valores del dataset a los requerimientos del algoritmo.

force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; }).attr("y1", function(d) { return d.source.y; }).attr("x2", function(d) { return d.target.x; }).attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; });

Arrastrar los nodos

• Para proporcionar la habilidad de arrastrar los nodos por la pantalla, se agrega la línea de código:

node.call(force.drag);

• Esto permite arrastrar cualquier nodo haciendo clic en él.

Actualización de gráficos con base en eventos

• Todas las visualizaciones tienen eventos.
• Con D3, generar interacción en las visualizaciones es fácil.
• Es importante entender cómo se producen los eventos.
• El tema trata de dar interacción y movimiento a las visualizaciones.
• Se toma como base el código de la gráfica bar chart con escala ordinal del tema anterior.
• Se explica cómo trabajar con eventos.
• Se siguen cuatro pasos:
• Crear un botón que genere un evento para actualizar el gráfico.
• Crear un nuevo dataset y actualizar la gráfica con él.
• Actualizar las dimensiones del gráfico.
• Hacer efectiva las actualizaciones.

Crear un botón

• Todo elemento en D3.js puede ser un botón y generar eventos.
• Se genera un texto y se le asigna un pop-up como resultado del evento.
• El código para crear el botón es:

d3.select("body").append("p").text("Pulsa aquí").on("click", function() {
alert("Conseguido! Ahora vamos a hacer algo útil...");
});

Nuevo Dataset

dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10];

Actualizar las dimensiones

• El siguiente paso es actualizar los valores del gráfico y adaptar 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);
});

Botón

• Se introduce todo esto en el botón:

d3.select("body").append("p").text("Pulsa aquí").on("click", function() {
dataset = [ 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 5, 10];
svg.selectAll("rect").data(dataset).attr("y", function(d) {
return h - yScale(d);
}).attr("height", function(d) {
return yScale(d);
});
});

Actualizaciones

• En el gráfico, no se ha actualizado el texto.
• Se agrega 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;
});

• Para hacer que desaparezca el texto después de pulsar, se añade:

d3.select(this).remove();

Transiciones y Movimiento

• Las transiciones dan vida al gráfico.
• En D3.js se pueden hacer con una simple línea de código transition().
• Las transiciones se incluyen en el código donde se crea el botón para actualizar el bar chart.
• Al pulsar sobre el evento, el gráfico se anima.

svg.selectAll("rect").data(dataset).transition()
.attr("y", function(d) {
return h - yScale(d);
}).attr("height", function(d) {
return yScale(d);
});

Controles

• Uno de los controles dentro de estas transiciones es duration(milisegundos).
• Prueba el siguiente 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.
• También se debe aplicar la transición al texto.

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;});

Otros controles

• Se usa otra función ease() para modificar y regular la transición y hacerla lineal.

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);});

• Podemos retrasar la animación con la función delay(time_miliseconds).

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);
});

Interacción de Gráficos

• Ahora cuando hacemos clic al pasar por encima de las barras, se puede usar el siguiente código para cambiarlas:

svg.selectAll("rect").data(dataset).on("mouseover", function(d) {d3.select(this).style("fill", "red");}).on("mouseout", function(){
d3.select(this).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);
});

Exportación

• La utilidad de exportar nuestro gráfico desde la ventana del navegador a otros formatos es evidente.
• La primera opción es la captura de pantalla (Print Screen en PC y Command ⌘ + Shift + 3 en MAC), que generará un archivo de tipo Bitmap o PNG.
• También se puede imprimir en PDF.
• La opción más interesante es trabajar con SVG para modificar la imagen en Photoshop y escalar la imagen a todos los tamaños.
• Seleccionar el gráfico, pulsar el botón derecho del ratón y seleccionar Inspeccionar.
• Seleccionar todo lo que hay entre las etiquetas .
• Lo copiaremos en un archivo nuevo que tenga la extensión .svg.
• Este archivo se puede abrir con Acrobat Reader, Photoshop, etc.