D3 + Crossfilter = DC

En un artículo anterior ya comentaba las posibilidades de Crossfilter, una herramienta especialmente aplicable a datasets de un tamaño mayor que el habitual para un navegador web. Con esta biblioteca tenemos una parte muy importante de la tarea de la sala de máquinas, cargando y filtrando los datos según nos convenga.

Muy bien, podemos filtrar y procesar los datos más rápidamente, ¿y ahora qué?

DC.js = Dimensional Charting Javascript Library

Pues nos falta la representación visual de los datos. Especialmente en combinación con una herramienta de representación visual como D3.js, Crossfilter se convierte en una herramienta muy potente. Y es así como surge la biblioteca DC.

Así que sacamos lo mejor de dos bibliotecas muy complementarias:

• Filtrado y manipulación de los datos con Crossfilter.
• Representación visual con D3.

¿A nivel de código fuente, cómo se combinan ambas bibliotecas? Puedes encontrar un punto de partida muy interesante en este ejemplo de código comentado para DC.js. Desde luego puedes ir a ver el paso a paso de ese código.

La inicialización de los gráficos se realiza mediante DC, y no directamente sobre D3. DC actúa como envoltorio de D3, simplificando así la generación de la tipología de gráficos disponibles por defecto.  La carga de los datos se realiza mediante la carga de un archivo CSV disponible vía HTTP, tras lo cual se transfieren los datos a crossfilter y se empieza a generar los datos de las dimensiones y agrupaciones de datos.

Se asignan las dimensiones y criterios de agrupación a cada uno de los gráficos según corresponda. Esta asignación es lo que en realidad acaba vinculando todos los gráficos.  También es posible generar una tabla (datatable) con los datos que se están están utilizando para generar las vistas actuales de los gráficos.

El resto de instrucciones son a grandes rasgos muy habituales en la generación de los gráficos mediante D3. Aunque como comentaba antes, las instrucciones se ejecutan a través de DC, podemos identificar fácilmente los parámetros de tamaño, colores, animaciones.

Se siguen viendo muchos ejemplos de maridajes entre D3 y cualquier otra biblioteca que complemente, simplifique o mejore sus funcionalidades. Espero poder seguir hablando de ello por aquí en breve :-).