Visualización de datos con D3

Manipulación del DOM

D3 permite manipular elementos del DOM usando datos. Para entender cómo funciona D3, necesitamos entender cómo el browser interpreta y pinta el contenido web.

Qué es el DOM?

El contenido de una página web está organizado como una serie de elementos que contienen otros elementos. Por ejemplo, el <body> contiene a todos los elementos visibles, el contenedor <div> se usa para crear bloques de contenido relacionado (barras de navegación, pie de página, columnas, etc). Esta organización se conoce como el DOM, Document Object Model.

Por ejemplo, el siguiente código HTML representa una lista no ordenada, que contiene dos ítems de lista. Cada uno contiene un link.

Un elemento en el DOM puede tener cero o más atributos. Por ejemplo, un link normalmente tiene el atributo href, cuyo valor es la URL de la página a la que apunta el link. Además de los atributos del elemento, hay atributos de estilo, que se pueden asignar directamente, o a través de una hoja de estilo CSS

Usualmente, los browsers incluyen una consola que permite ver y manipular elementos del DOM en cualquier página. Las modificaciones al DOM son locales, sólo afectan a la copia de la página que esta viendo el usuario en ese momento.

Manipulando el DOM

D3 permite manipular los elementos del DOM muy fácilmente, usando selectores del DOM, que funcionan igual que las reglas de CSS. En el ejemplo anterior, el primer link tiene un ID id="link-a02". Podemos seleccionar este elemento mediante su ID y cambiar, por ejemplo, su color.

d3.select('#link-a02').style('color', 'red');

Los selectores permiten seleccionar por ID, por clase, por tipo de elemento o incluso usando la estructura del documento. Para seleccionar un elemento de lista, podemos usar:

// Selecciona el primer elemento que encuentra bajo ese camino d3.select('#ejemplo-a03 ul li').style('font-weight', 'bold');

Los métodos para cambiar atributos se pueden encadenar, por ejemplo, se puede poner style('font-weight', 'bold').style('color', 'blue').

También se puede seleccionar varios elementos simultáneamente:

// Selecciona TODOS los elementos que encuentra bajo ese camino d3.selectAll('#ejemplo-a04 ul li').style('font-weight', 'bold');

Las selecciones pueden almacenarse en variables:

// Almacena la selección el la variable `li`. var li = d3.selectAll('#ejemplo-a05 li'); // Usa la selección para cambiar los atributos de los elementos li.style('font-weight', 'bold');

Se pueden crear subselecciones:

// Almacena la selección el la variable `li`. var div = d3.select('#ejemplo-a06'); // Usa la selección para cambiar los atributos de los elementos div.selectAll('li').style('font-weight', 'bold');

Agregando y Eliminando Elementos

Podemos agregar y eliminar elementos del DOM. Por ejemplo,

Peras
Manzanas

// Almacena la selección el la variable `li`. var ul = d3.select('#ejemplo-a07 ul'); var li = ul.append('li'); li.html('Pitufos').style('color', 'blue');

Para eliminar este último elemento, sólo necesitamos usar remove.

li.remove();

La manipulación el DOM constituye la base para crear Visualizaciones de Datos.

Usando SVG

El DOM no es suficientemente versátil para crear gráficos complejos. Afortunadamente, la mayoría de los browsers soporta SVG, un formato de imagen vectorial que tiene un modelo de datos similar a HTML, y que, por lo tanto, puede ser manipulado con D3.

Crearemos un SVG dentro del siguiente contenedor:

var svg = d3.select('#ejemplo-b01').append('svg'); svg.attr('width', '600px').attr('height', '200px');

Nuestro elemento SVG tiene un tamaño definido pero aún está vacío. Agregaremos un círculo:

var circle = svg.append('circle'); circle.attr('cx', 50).attr('cy', 100).attr('r', 50).attr('fill', 'blue');

Podemos cambiar los atributos suavemente, usando transiciones. Las transiciones se realizan interpolando los valores iniciales y finales, cambiando los atributos progresivamente durante la duración de la transición. Las transiciones ayudan a seguir los elementos visualmente y agregan un componente estético a la visualización.

circle.transition().duration(2000) .attr('cx', 500).attr('r', 100).attr('fill', 'red');

Con SVG y D3, podemos crear gráficos atractivos y dinámicos. Pero primero, necesitamos aprender a vincular datos con elementos del DOM, lo que se conoce como data binding.