Visualizando la maratón de Montevideo con D3

1 de Mayo de 2016

D3.js es una librería javascript pensada para la representación de datos en una página web (su nombre “d3” surge de Data Driven Documents).

A grandes rasgos permite:

  • Asociar a cada dato elementos html5.
  • Transformar estos elementos y su atributos (forma, color, etc) a medida que cambian los datos.
  • Hacer transiciones visuales entre diferentes estados de los elementos.

Es una librería muy flexible en cuanto a lo que se puede lograr visualmente. Con su uso se manipula el DOM de la página web, agregando, modificando o quitando cualquier elemento, por lo tanto, permite hacer cualquier representación que permita hacer html5.

La contra de esta flexibilidad es que hacer cosas sencillas (gráficas de barras comunes por ejemplo) se torna bastante más complejo que con otras librerías. Está pensada para hacer visualizaciones más “personalizadas”. El libro Interactive Data Visualization dice que está pensada para las visualizaciones "explicativas" y no para las visualizaciones "exploratorias". O sea, para cuando quiero explicar de una manera concreta algo que vi en los datos. Si lo que quiero es descubrir algo hay mejores librerías con gráficos ya prediseñados.

Ejemplo de uso

Para ejemplificar su uso tomé de kronos.com.uy los datos de la última Maratón y media Maratón de Montevideo. Estos son los datos ya pre-procesados: 21k y 42k. Para cada carrera tengo una fila por corredor con tiempo (en segundos) y categoría (sexo y edad).

A partir de esos datos y usando d3 me cree los siguientes gráficos donde cada corredor es un rectángulo svg y está coloreado según su categoría (rosado y celeste según sexo, de mas claro a mas oscuro según edad y ordenados por tiempo de llegada ascendente de izquierda a derecha y de arriba a abajo):

21k por sexo y edad

42k por sexo y edad

Procesando un poco los datos y sumarizandolos por categoría construí estos histogramas:

21k por sexo y edad

42k por sexo y edad

Luego, los mismos gráficos anteriores pero coloreados por velocidad promedio (minutos/kilómetros):

21k por sexo y edad

42k por sexo y edad

Con estos histogramas:

21k por sexo y edad

42k por sexo y edad

Y finalmente, esta sería una simulación visual de la carrera suponiendo que los corredores tuvieron velocidad constante (el punto rojo es el ganador). Presionar botón "Empezar simulación"

21k

42k

Sitios con mas ejemplos de D3


@mcanan