Visualización de Datos con D3.js

Uno de los pasos más importantes cuando se realiza un análisis de datos es la exploración. En esta fase se detectan errores, se verifican los supuestos y se seleccionan modelos predictivos adecuados dependiendo de los datos. Este proceso de análisis exploratorio de datos se puede realizar con métodos estadísticos o con visualización.

 Existen varias herramientas que facilitan la visualización de datos. Mientras algunas son provistas por lenguajes de programación como Python o R, otras son de uso general y orientado al web como Flot, Raphael.js o D3.js.

 D3 (Data-Driven Documents) [1] es una librería JavaScript para presentar y manipular visualmente documentos basados en datos. Con D3 podemos crear desde gráficas sencillas como barras e histogramas, hasta visualizaciones complejas e interactivas. D3 utiliza las tecnologías estándar como HTML, SVG y CSS, por lo que funciona en cualquier navegador web moderno.

 En este artículo mostraré cómo hacer tus primeras visualizaciones con D3. El código usado para este tutorial está disponible en https://github.com/hmcuesta/SG40 por si quieres descargarlo y probarlo.

Gráfica de barras

Nuestra primera visualización será una gráfica de barras que muestre la cantidad de pelotas de colores en una tómbola. Los datos los obtendremos de un archivo separado por tabuladores tombola.tsv que contiene los siguientes valores:


Color Cantidad
Rojo 2
Azul 1
Verde 4
Amarillo 3


 Creamos el archivo Bar-Chart.html y comenzamos a editarlo. En el cuerpo del archivo HTML incluimos la librería de D3.
<script src="http://d3js.org/d3.v3.min.js">

Definimos el script que tendrá todo el código de nuestro ejemplo. Comenzamos configurando el área de trabajo (márgenes y tamaño) y los ejes horizontales y verticales.


<script>
var margin = {top: 20, right: 40, bottom: 20, left: 40},
 width = 700 - margin.left - margin.right,
 height = 350 - margin.top - margin.bottom;
 var x = d3.scale.ordinal().rangeRoundBands([0, width], .1);
 var y = d3.scale.linear().range([height, 0]);
 var xAxis = d3.svg.axis().scale(x).orient("bottom");
 var yAxis = d3.svg.axis().scale(y).orient("left");,\


Definimos la variable svg que contendrá nuestra visualización.

var svg = d3.select("body").append("svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")")


Ahora cargamos los datos de nuestro archivo tombola.tsv y mapeamos las columnas a atributos de nuestros objetos.

d3.tsv("tombola.tsv", function(error, data) {
 data.forEach(function(d) {
  d.cantidad = +d.cantidad;
 });
 x.domain(data.map(function(d) { return d.color; }))
 y.domain([0, d3.max(data, function(d) { return d.cantidad; })]);


 Nótese que en el caso del eje y, indicamos que el eje comienza en el valor 0 y llega hasta el valor más alto de la columna cantidad. Para obtener dicho valor utilizamos la función d3.max(). Ahora utilizamos la función svg.append() para agregar algunos elementos como las etiquetas de los ejes.

svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(0," + height + ")")
 .call(xAxis);
svg.append("g")
 .attr("class", "y axis")
 .call(yAxis)
 .append("text")
 .attr("transform", "rotate(-90)")
 .attr("y", 6)
 .attr("dy", ".7em")
 .style("text-anchor", "end")
 .text("Cantidad");


Para configurar los distintos elementos de la visualización (en este caso, las barras) podemos utilizar el patrón de selección: selectAll + data + enter + append.

svg.selectAll(".bar")
 .data(data)
 .enter().append("rect")
 .attr("class", "bar")
 .attr("x", function(d) { return x(d.color); })
 .attr("width", x.rangeBand())
 .attr("y", function(d) { return y(d.cantidad); })
 .attr("height", function(d) { return height - y(d.cantidad); });
});
</script>


Podemos agregar algo de CSS para estilizar un poco nuestra gráfica.

<style>
body { font: 16px sans-serif; }
.bar { fill: #00a0e0; }
</style>


La figura 1 muestra la gráfica que generamos.

Figura 1. Visualización de gráfica de barras.

Ejemplo con dos dimensiones

En el siguiente ejemplo trabajaremos con dos dimensiones en grupo de pares de coordenadas. Utilizaremos un arreglo bidimensional como el siguiente:

var datos = [
 [50, 160],
 [20, 20],
 [70, 320],
 [540, 380],
 [200, 200],
 [640, 80],
 [300, 50],
 [350, 260]
];


Creamos el área de trabajo con la función d3.select y establecemos el tamaño del área.

var svg = d3.select("body")
 .append("svg")
 .attr("width", 600)
 .attr("height",400);


Agregamos al gráfico los puntos del arreglo datos, indicando un radio de 20px.

svg.selectAll("circle")
 .data(datos)
 .enter()
 .append("circle")
 .attr("cx", function(d) { return d[0]; })
 .attr("cy", function(d) { return d[1]; })
 .attr("r", function(d) { return 20; })
 .attr("fill", "#e02000");


 Agregamos las etiquetas con los valores para cada punto y establecemos el estilo de la tipografía.

svg.selectAll("text")
 .data(datos)
 .enter()
 .append("text")
 .text(function(d) { return d[0] + "," + d[1]; })
 .attr("x", function(d) { return d[0]; })
 .attr("y", function(d) { return d[1]; })
 .attr("font-family", "sans-serif")
 .attr("font-size", "14px")
 .attr("fill", "black");


La Figura 2 muestra el mapa de coordenadas.

Figura 2. Visualización de scatter plot

Conclusión

Como podemos apreciar, D3 nos ofrece una forma simple de generar diferentes tipos de visualizaciones. Su uso de orígenes de datos diversos lo hacen perfecto para bases de datos orientadas a documentos como MongoDB.

 Si bien la visualización nos ofrece posibilidades de comunicación y abstracción de información, esta no debe de ser sustituto de métodos predictivos o estadísticos de análisis, ya que muchas veces se pueden dar falsas correlaciones cuando el humano usa su percepción. El objetivo de la visualización debe de ser de carácter exploratorio de datos y de comunicación de información ya analizada. La visualización es una forma muy útil de presentar grandes cantidades de información al usuario final.

Referencias
[1] N. Yau. Visualize This: The FlowingData Guide to Design, Visualization, and Statistics. Wiley, 2011. http://swgu.ru/sg40r15
[2] S. Murray. Interactive Data Visualization for the Web. O’Reilly, 2013. http://swgu.ru/sg40r16