D3: ¿Qué es Data-Driven Documents? 

Por-qué-utilizar-Data-Driven-Documents-D3-Itequia

D3: ¿Qué es Data-Driven Documents? 

¿Qué es D3? 

En la era de la información en la que vivimos actualmente, es verdaderamente importante que las personas capten rápidamente y de un solo vistazo la esencia de los datos que manejamos y los gráficos son una buena manera de visualizarlos. Tener en cuenta librerías como Data-Driven Documents (D3) es de suma importancia para el desarrollo de la última instancia del procesamiento de datos: su visualización.  

Por ello, conocer el funcionamiento de los datos en esta última instancia resulta imprescindible para el mundo actual del Big Data. 

D3-Data-Driven Documents-Itequia

D3.js, es una librería Javascript que trata documentos basados en datos, se trata de una herramienta que permite visualizar datos en una página web de una manera realmente fácil. Data-Driven Documents (D3 o D3.js) es una librería especializada en el dibujo y diseño de gráficas en la visualización de datos.  

Pero, no es tan solo una librería que permite hacer visualizaciones, sino que también nos permite realizar cualquier tipo de mapeo, operaciones matemáticas o análisis de datos. Encargándose también de llevar a cabo un desarrollo web dinámico e interactivo, permitiendo realizar todo tipo de visualizaciones e interactuar con estas. 

La curva de aprendizaje puede resultar bastante ascendente, pero una vez hemos realizado el aprendizaje, se trata de una herramienta con la que desarrollar visualizaciones de datos avanzadas, de una manera muy sencilla. 

Además, si accedemos a su página web, podemos ver y aprender un largo listado de visualizaciones distintas, unas más y otras menos dinámicas. 

Pasado, presente y futuro de D3 

Data-Driven Documents es un proyecto open source que empezó 11 años atrás, en 2011, tras una década en el mercado, en la actualidad, D3 es la herramienta más popular. 
 
Esto significa que es muy poco probable que sea reemplazado en el corto plazo, debido a su estabilidad y que está completamente testeado, garantizando que esté “libre de errores”, y a día de hoy, únicamente tiene 3 incidencias abiertas, no como otras librerías de este mismo tipo que cuentan con cientos de problemas sin resolver. 

La librería se mantiene activamente, esto implica que la idea es continuar a largo plazo con nuevos desarrollos y actualizaciones, como las nuevas versiones de Javascript, pudiéndose usar tanto con React, Vue o Angular. 

¿Qué formatos de datos podemos encontrar en D3? 

Gracias a esta librería de diseño visual, podrás trabajar con cuatro formatos de datos diferentes, cada uno de ellos con sus ventajas y desventajas. Unos son más sencillos que otros, pero a su vez, esta variedad de formatos nos permite ahorra tiempo, ya que no debemos transformarlos. 

CSV 

Su distribución se basa en mostrar los campos arriba y, a partir de allí, organizar los datos procesados. 

CSV-formato-datos-D3-Data-Driven-Documents-Itequia

JSON 

Uno de los formatos más habituales. Su inscripción comienza por designar el campo y su funcionamiento consiste en seleccionar el archivo y el D3 devuelve una promesa, es decir, lo que hace la recolección de datos. 

JSON-formato-datos-D3-Data-Driven-Documents-Itequia

TSV (Tab-Separated Values) 

Este formato de datos no se utiliza mucho, pero funciona de manera sencilla, como su propio nombre indica, expone los valores separados por tabuladores. 

TSV-formato-datos-D3-Data-Driven-Documents-Itequia

XML 

Uno de los formatos más complicados. A pesar de que está basado en HTML, su desarrollo es mucho más extenso y minucioso que los demás. 

XML-formato-datos-D3-Data-Driven-Documents-Itequia

¿Cómo comenzar a utilizar D3? 

Comenzar a utilizar la librería Javascript D3 de forma básica, no es una tarea muy complicada ya que contamos con muchísimos ejemplos y documentación en los que nos muestran que código debemos usar para realizar los gráficos.  

Pero antes de comenzar a usarlo, si que es recomendable saber un mínimo sobre diseño web ya que la herramienta hace uso de tecnologías como son SVG (gráficos vectoriales), HTML5 y CSS, es decir, para comenzar a utilizar esta herramienta, debemos conocer cómo funciona el Modelo de Objecto de Documento (DOM). 

¿Qué herramientas ofrece D3? 

Data-Driven Documents (D3) cuenta con una gran variedad de herramientas que potencian el desarrollo de la visualización de los datos y que, además, permiten un desarrollo óptimo a partir de diferentes aspectos. 

A continuación, analizamos algunas de las herramientas más importantes de D3 para llevar a cabo nuestro diseño visual: 

SVG (Scalable Vector Graphics) 

Consiste en designar los datos bajo dos dimensiones (ancho y largo). Su función es establecer los datos introducidos en unos vectores según sus propiedades. 

Escala 

Con esta herramienta, podremos genera un análisis fidedigno de los datos en la visualización. Consiste en la realización de las gráficas según la escala que se establezca y no a tamaño real. 

Ejes y márgenes 

Un factor fundamental para el desarrollo de una esquematización gráfica de los datos. Por regla general, en una gráfica se suelen encontrar dos ejes, el vertical y horizontal (X e Y), y la instauración de unos márgenes por medio de la regla o cuadrícula de la plataforma designará el tamaño de la gráfica. 

Animación e interactividad 

Esta herramienta hace referencia al dinamismo que decidas atribuirle a la visualización de los datos. Las plataformas que se encargan de ello ofrecen diversas opciones para añadir cuestiones, como el color, forma, relleno, curva, etc. 

Qué-herramientas-ofrece-D3-Data-Driven-Documents-Itequia

¿Qué es la configuración modular en D3? 

Como hemos visto durante el artículo, D3 es una librería bastante pesada ya que tiene muchas dependencias, por lo que a partir de la versión 4.0, introdujeron uno de los cambios más importante de la librería, su modularidad.  

D3 se convirtió en una colección de módulos, permitiendo utilizar cada uno de estos de forma completamente independiente, exceptuando las dependencias mínimas a otros módulos. 

Las ventajas de este nuevo modelo están claras, esta actualización fomento el desarrollo de módulos más pequeños, permitiendo aportar a la comunidad muchas nuevas visualizaciones, complementos y funcionalidades que antes no existían. Siendo a su vez más fácil para la comunidad contribuir con las funciones principales o a otros niveles de abstracción. 

¿Recomendamos el uso de D3? 

Cada vez más, la comunidad de D3 está compartiendo arquitectura de código y todo tipo de módulos en Data-Driven Documents, por lo que podemos decir que D3 puede aportar a nuestra empresa una diversidad muy importante de bibliotecas de gráficos y complementos a los ya existentes. 

Por lo que, si nuestra empresa tiene la necesidad de realizar gráficos sencillos o más complicados, puede ser costoso aprender a manejar D3, pero si queremos total libertad a la hora de la visualización y la interacción, Data-Driven Documents es la mejor opción. 

Domènec Vicente – Software Developer at Itequia