ABACUS CONSULTING ha desarrollado una serie de gráficos complejos con la librería de javascript D3, gráficos vectoriales en SVG y el lenguaje de estilo CSS.

Algunos tipos de visualizaciones desarrollados por ABACUS CONSULTING.

Algunos tipos de visualizaciones desarrollados por ABACUS CONSULTING.

 

 

D3 es una excelente herramienta escrita por Mike Bostock para desplegar datos dentro de páginas web. Algunos ejemplos de gráficos realizados:

– Gráficos de línea
– Herramientas de matrices
– Gráficos de burbujas
– Histogramas
– Rankings de barras
– Mapas de posicionamiento
– Visualizaciones de araña
– Diagramas de procesos de decisión de compra
– Tablas dinámicas de datos

 

Ejemplo de una Visualización interactiva realizadas con D3

Ejemplo de una visualización realizada con D3.js

 

Algunas ventajas de la librería D3.js

Esta librería se basa en funciones predefinidas escritas en lenguaje javaScript que mejoran la selección de elementos, permiten crear y personalizar elementos SVG y añadir efectos como transiciones o tooltips. Tiene una gran capacidad para manipular grandes volúmenes de datos y vincularlos a dichos elementos para lograr crear gráficos de gran riqueza.

  • Flexibilidad: sólo la imaginación puede limitar lo que se puede hacer con la librería
  • Buena integración y facilidad de depuración
  • Librería modular
  • Manipulación del DOM dirigida por los datos
  • Permite un gran control sobre el resultado visual final
  • Crear elementos SVG (formas, líneas, axes)
  • Facilidad para crear escalas
  • Animaciones e interacciones de última generación
  • Transiciones y efectos visuales

D3.js es una herramienta ideal tanto para gráficos sencillos de barras o líneas, hasta complejos gráficos relacionales o  visualizaciones con mapas.

El proyecto de digitalización de los estudios de Havas Media Group —desde unas herramientas estáticas con visualizaciones básicas y una respuesta a la demanda muy lenta, hacia una plataforma web interactiva integrada en los servidores de la compañía— comenzó con la realización de los primeros prototipos y wireframes de las visualizaciones.

Un Wireframe es una herramienta de visualización para la presentación de propuestas de diseños de una página web. El  wireframe  debe ser capaz de explicar fácilmente cómo los usuarios interactúan con el sitio web y saber si estamos en el camino correcto.

 

Ejemplo de visualización

Ejemplo de visualización

 

Todas las visualizaciones fueron analizadas y prototipadas de forma exclusiva. Algunas tareas que destacamos de los prototipos:

 

  • Creación de un libro de estilo de visualizaciones (tipografías, colores, tipos de gráficos…).
  • Estudio y realización de los wireframes de los selectores de marcas y su repercusión en las visualizaciones.
  • Estudios de las proporciones y posiciones de los elementos gráficos que componen cada visualización o la información ofrecida por las distintas descripciones emergentes o ‘tooltips’ integradas en la aplicación.

 

 

Wireframe de los selectores de las visualizaciones.

Wireframe de los selectores de las visualizaciones.

 

Una vez que las visualizaciones han sido aprobadas en formato estático por el cliente, se realiza un nuevo wireframe con las visualizaciones integradas en la aplicación web. Todo proyecto interactivo debe estar validado en formato estático antes de comenzar su desarrollo.

 

Proporciones y colores de algunos elementos gráficos.

Proporciones y colores de algunos elementos gráficos.