La publicación de una visualización de datos en web nos exige describir y programar, utilizando lenguajes específicos para cada caso. Para describir tenemos los lenguajes HTML y CSS; y para programar tenemos, entre otros lenguajes, a JavaScript.

A los lenguajes de descripción mencionados arriba, sumaremos un dialecto: SVG. Y para simplificar el trabajo de programación, usaremos una biblioteca de JavaScript: D3.js.

1.1. HTML es HyperText Markup Language. Su bloque constructivo más básico es el elemento. Un elemento es un contenido marcado con una etiqueta de apertura (<etiqueta>) y una etiqueta de cierre (</etiqueta>); aunque hay elementos que no son más que una etiqueta.

En la primera o en la única etiqueta de cada elemento es posible agregar uno o varios atributos, los que nos permitirán caracterizar o identificar al elemento en cuestión.

1.2. SVG es Scalable Vector Graphics. Este dialecto ofrece una serie de elementos gráficos vectoriales, en los que se deben usar atributos para establecer sus características básicas, incluyendo su posición en un plano. Por ejemplo, puedo definir que quiero un círculo (circle), cuyo centro esté en una coordenada horitonzal (cx) y otra vertical (cy), con cierto radio (r): <circle cx="10" cy="10" r="10"/>

1.3. CSS es Cascading Style Sheets. Su bloque constructivo más básico es la regla. Cada regla se inicia con su(s) selector(es), para luego contener, entre paréntesis de llave, determinadas propiedades: selector{propiedad:valor;}

A través de CSS puedo describir el modo en que deben verse los elementos de HTML y SVG en la ventana del navegador. Si mediante elementos HTML y SVG defino qué se ve, mediante reglas CSS defino el cómo debe verse aquello cuando sea visto, con la posibilidad de establecer modos específicos para dispositivos específicos.

2.1. JavaScript es un lenguaje de programación que permite realizar actividades complejas en una página web en la interacción con el Modelo de Objetos del Documento (Document Object Model; DOM) de la misma.

Cuando le indicas al navegador "Ver el código fuente de la página", lo que obtienes es la descripción de tal página, algo idéntico a lo que se pudo escribir en un Editor de código fuente. Ese escrito es analizado por el navegador y un resultado de tal análisis es el DOM, y esto último es lo que se manipula con JavaScript. Dicho de un modo simple, el DOM es donde la máquina hace cosas y Javascript es el lenguaje que le indica a la máquina qué cosas hacer.

2.2. D3.js es Data Driven Document es una de muchas bibliotecas de JavaScript. Su diferencia, y razón para explorarla, es que nos facilita, además de la manipulación del DOM, el trabajo con datos, CSS y SVG.

Retomando la clase sobre datos

HTML y CSS en 5 pasos

SVG y D3.js en 5 pasos

Más sobre D3.js