A blog about data, information and IT, by Mario Alberich

Apr 08
2014

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 :-).

Tags

gestión documental 10     Recuperación información 11     Linux 7     Usabilidad 5     open source 3     Tagging 12     lógica borrosa 2     fuentes de información 12     Google 6     off-topic 6     spam 2     grafos 6     Web social 11     modelización 12     Productividad 11     buscadores 2     utilidades 17     Profesionales 9     SEO 5     estándares 3     veracidad 3     relevancia 2     lingüística 2     PLN 2     lenguajes documentales 2     apis-mashups 3     reseñas 7     Flash 7     Gráficos estadísticos 13     Publicidad 3     Innovación 5     muestreo estadístico 9     PHP 14     internet 2     testeo 12     desarrollo 3     visualizacion 36     javascript 16     datos abiertos 9     elecciones 2     simulación 5     html5 7     phing 9     ssh 2     seguridad 3     indicadores 2     demografía 3     media 2     algoritmos 7     shell 4     mysql 2     backup 2     big data 6     twitter 2     d3js 11     revealjs 2     metodología 6     data-journalism 6     smartcities 2     NYT 2     privacidad 3     benchmarking 4     recopilaciones 21     magento 5     formacion 2     github 2     HHVM 3     psicología 2     angularjs 3     grep 2     nodejs 5     promises 2     mapreduce 3     crossfilter 2     exploración de datos 2     machine learning 2    

© 2007 and beyond Mario Alberich, licensed under CC-BY-SA unless stated otherwise.