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:
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.
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):
Procesando un poco los datos y sumarizandolos por categoría construí estos histogramas:
Luego, los mismos gráficos anteriores pero coloreados por velocidad promedio (minutos/kilómetros):
Con estos histogramas:
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