Actualización: Mientras que muchas de las herramientas presentadas en este artículo de 2012 siguen siendo eficaces y se han desarrollado para ser aún más útil, usted puede estar interesado en nuestra serie más reciente en las herramientas de Viz de datos interactivos.
Herramientas de visualización de datos complejos
Bienvenido de nuevo para la segunda parte de mi serie sobre herramientas de visualización de datos interactivos (dataviz). En la primera parte, cubrimos tres herramientas geniales para visualizar tablas y gráficos y muchos otros tipos de datos en una página web. En la segunda parte, echamos un vistazo a tres herramientas más que son un poco más complejas, pero tienen algunas capacidades de visualización de datos increíbles.
- jQuery Visualize (Parte 1)
- Google Charts (Parte 1)
- Highcharts (Parte 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
Simile Exhibit
Exhibit es una oferta muy robusta y personalizable. Uno de sus principales puntos fuertes es un enfoque único para la representación de los datos. Además de las herramientas de filtrado, ordenación y búsqueda fáciles de usar, permite utilizar una plantilla HTML (llamada «lente» en Exhibit) que se construye para que todo en la página tenga exactamente el aspecto que usted desea. Es casi como un mini-CMS para dataviz en el que puedes acceder a tus datos a través de los valores de los atributos directamente en la lente. Para los proyectos que requieren un alto grado de sensibilidad a la mirada y la sensación, este nivel extremo de flexibilidad para la construcción de visualizaciones de datos es fantástico.
- Tipos de visualización soportados: Gráficos de líneas, mapas, gráficos de dispersión, listas con múltiples filtros, líneas de tiempo, gráficos de tiempo y más… ¡con widgets!
- Fuentes de entrada de datos: JSON, hoja de cálculo
- Salida de datos: HTML
- Opciones de estilo: CSS
- Tipo: Librería Javascript
PROS
Flexible &Potente enfoque de diseño
Me gusta mucho el enfoque de Exhibit, donde los datos se presentan a través de una «lente» – una cáscara de plantilla HTML en la que se colocan los elementos. Esto hace que el sistema sea completamente personalizable y con estilo CSS, lo que significa que los diseñadores lo adoran, y la creación de la coherencia de las marcas de los clientes es un broche de oro.
Filtrado/clasificación/búsqueda
Permitir a los usuarios filtrar sus datos por cualquier número de criterios es increíblemente útil, y convierte su información de contenido estático en una característica interactiva real. El filtrado está integrado en Exhibit y es fácil de implementar. El filtrado del lado del servidor puede ser una tarea ardua (por no hablar de su coste), por lo que Exhibit destaca por hacer que el filtrado del usuario sea increíblemente rápido y fácil. Lo mismo ocurre con la clasificación y la búsqueda. Exhibit hace que sea muy fácil dar a los usuarios de su sitio el control sobre la obtención de la vista exacta de sus datos que quieren, y por lo tanto una comprensión más valiosa de por qué es importante.
Documentación sólida
El salto a las herramientas complejas de dataviz puede ser una empresa y requiere un poco de ensayo y error. Exhibit realmente acelera el proceso con una gran documentación en su sitio web y algunos excelentes tutoriales para principiantes.
¡Widgets!
¿Quieres llevar Exhibit aún más lejos? Puedes añadir funcionalidad con widgets. Hay widgets disponibles para colecciones de bibliografía y citas, un visor de imágenes estilo CoverFlow, líneas de tiempo y gráficos de tiempo, por nombrar algunos. Este tipo de extensión del producto hace que Exhibit sea una de las opciones más robustas y flexibles que existen para la visualización de datos.
CONS
Curva de aprendizaje pronunciada
Al igual que las otras bibliotecas más complejas, hay más codificación involucrada con Exhibit que la mayoría de las opciones, y tener experiencia previa en Javascript es definitivamente muy útil. Sin embargo, los tutoriales están muy bien hechos y son muy divertidos, así que una vez que empiezas, es muy fácil ponerse en marcha.
Javascript InfoVis Toolkit
Javascript InfoVis Toolkit es un buen conjunto de herramientas para crear tablas y gráficos en una página web. Cuenta con una buena lista de tipos de gráficos soportados e introduce algunas características de animación en la mezcla (por ejemplo, las barras de un gráfico de barras pueden expandirse a su tamaño cuando el gráfico se carga – este tipo de cosas). Las animaciones son agradables y sin duda pueden añadir un nivel adicional de pulido a su sitio. También hay algunas características interactivas interesantes, como aplicar un «filtro» a un gráfico haciendo clic en él. El gráfico sólo muestra la serie sobre la que se ha hecho clic hasta que se elimina el filtro. Echa un vistazo a las demostraciones para ver más de lo que este kit de herramientas es capaz de hacer.
- Tipos de visualización soportados: Gráfico de área, Gráfico de barras, Gráfico circular, Mapa de árbol, Fuerza dirigida, Gráfico radial, Rayo de sol, Carámbano, Árbol espacial, Hiperárbol
- Entrada de datos: JSON
- Salida: Canvas
- Estilización: Parámetros Javascript
- Tipo: Javascript Library
PROS
Tipos de gráficos únicos
Me gustan mucho los distintos tipos de visualización no estándar disponibles en el InfoVis Toolkit. Esta herramienta podría ser excesiva para el gráfico circular ocasional, pero podría brillar realmente cuando usted tiene que acercarse a las opciones de visualización de datos más complicados.
Animaciones / Interacciones
Las animaciones son una gran adición a estos cuadros y gráficos. Le dan una calidad similar a la de Flash a estos gráficos que es realmente agradable. Y la capacidad de interactuar con estos gráficos – arrastrando cosas alrededor y manipulando el gráfico (como éste) es muy fresco y podría ser realmente útil.
CONS
Curva de aprendizaje
Con todas estas grandes características viene la complejidad y, aunque la documentación en el sitio web parece ser buena, esta herramienta requiere una buena experiencia en Javascript para sacar el máximo provecho de ella.
D3.js
¡Wow, D3.js es genial! Me he perdido durante unas horas curioseando en la web de D3 y las posibilidades parecen infinitas. Esta herramienta definitivamente requiere un nivel bastante alto de experiencia con Javascript y JSON pero genera algunos gráficos magníficos y sofisticados. Echa un vistazo a los ejemplos.
D3 no es realmente como los demás. No es una herramienta de gráficos «lista para usar», sino más bien un marco para dibujar elementos basados en datos. El sitio web de D3 lo dice mejor: «En lugar de proporcionar un sistema monolítico con todas las características que alguien pueda necesitar, D3 resuelve sólo el quid del problema: la manipulación eficiente de documentos basados en datos»
Y, dado que puede crear gráficos SVG, podría utilizar este resultado en cualquier lugar, incluidas las aplicaciones de impresión. D3 podría ser el centro de un flujo de trabajo de publicación web/impreso para un proyecto con muchos gráficos.
- Tipos de visualización soportados: ¿Todos? El cielo es el límite.
- Entrada de datos: JSON, GeoJSON, CSV
- Salida: HTML, SVG
- Estilización: CSS, Javascript
- Tipo: Librería Javascript
PROS
Flexibilidad ilimitada
Puedes usar prácticamente D3.js para dibujar lo que quieras basándote en datos. Esta es una herramienta increíble para las personas que crean nuevas visualizaciones de datos y visualizaciones construidas en conjuntos de datos realmente grandes.
Salida
Muy fresco que usted puede decirle a D3 para crear elementos HTML, así como SVG. Definitivamente abre la puerta a la estilización con CSS, lo que es ideal.
CONS
Curva de aprendizaje
Tienes que ser una persona consumada en Javascript, JSON y matemáticas para conseguir que D3 pase por el aro. Y algunos de los ejemplos aturden la mente, pero seguir adelante y ejecutar a través del tutorial. No es tan malo y, si estás familiarizado con jQuery o Prototype, mucho de esto te resultará familiar. Y mucho no…
Conclusión
Estos seis productos son sólo la punta del iceberg de dataviz. Hay docenas de otros grandes productos por ahí. Pero estos deberían darle una buena idea de lo que está sucediendo y un sentido de la gama de capacidades y la complejidad del mundo interactivo dataviz.