¿Qué es la visualización de datos?
La visualización de datos es la práctica de presentar grandes conjuntos de datos y métricas en tablas, gráficos y otros elementos visuales que permiten una visión general y un análisis sencillos.
Muchas herramientas permiten visualizar datos a diferentes niveles, pero en este artículo exploraremos D3.js, una potente biblioteca de JavaScript que permite a los desarrolladores crear y presentar experiencias de visualización de datos fácilmente digeribles, atractivas e interactivas.
Lo que aprenderás
- Cómo configurar una aplicación Node.js con Express e integrar D3.js
- Cómo usar D3 para visualizar datos usando un gráfico de barras como ejemplo
Configuración de Node.js y Express
Necesitarás tener instalado Node.js para seguir adelante. Puedes descargarlo desde el sitio web oficial.
Ejecuta el siguiente comando para instalar las dependencias que necesitaremos para configurar una aplicación Node básica con Express y Handlebars:
O bien, añada el siguiente objeto a su archivo package.json y ejecute npm install en su terminal.
Cree su directorio de desarrollo para que se parezca al siguiente:
Añade un simple servidor Node con código de servidor Express al archivo server.js.
En el código anterior, tenemos una ruta API (/api/data) y una ruta home (/). La ruta API hablará con una base de datos y devolverá los datos que necesitamos visualizar en la ruta de inicio.
En el frontend, usaremos D3 para visualizar los datos. Crearemos un gráfico de barras con los datos que obtenemos de la API. Suponiendo que los datos de la API son las calificaciones de algunos estudiantes de secundaria, crearemos una visualización para poder ver una visión general del patrón de resultados de los estudiantes.
Añade el siguiente código HTML a tu plantilla:
Fíjate que hemos añadido un elemento SVG y una class="bar-chart", ya que cargaremos el gráfico como un SVG. Ahora vamos a utilizar D3 para crear el gráfico de barras.
NOTA: Hay muchas visualizaciones que puedes crear con D3 más allá de los gráficos. Puedes visualizar datos con mapas, gráficos, nubes de palabras y mapas de calor, por ejemplo.
A continuación está el código JavaScript para el frontend. Aquí es donde usaremos D3 para crear el gráfico de barras:
Utilizaremos la función getData para obtener los datos de la API con una simple petición Axios get, como se muestra a continuación:
En la función drawChart, primero estableceremos las propiedades que necesitamos: obtener los datos a presentar, la altura y el ancho del SVG, y los parámetros para el gráfico, como el relleno y el ancho.
A continuación, seleccionaremos la etiqueta <svg> utilizando la función d3.select, como se muestra a continuación:
Esto nos permitirá acceder a modificar el SVG y crear el gráfico de barras. Por lo tanto, vamos a establecer el ancho del elemento SVG.
A continuación, selecciona todos los rectángulos del SVG, aunque no haya ninguno en este momento. A continuación, vamos a añadir los datos que nos gustaría visualizar a la función data encadenada:
Luego usaremos la función enter para iterar sobre los datos para crear los rectángulos y anexarlos al SVG.
Por cada iteración que haga la función enter(), un rectángulo acabará formando el gráfico.
El HTML resultante debería tener este aspecto:
A continuación, establezca la altura y la anchura de cada rectángulo. La altura del rectángulo se basará en los datos, concretamente en los elementos del array, mientras que la anchura será la de la barra que ya hemos establecido, menos el relleno del gráfico de barras que ya hemos establecido.
Además, tendremos que ajustar el eje Y a la altura del SVG, menos el elemento de datos. De lo contrario, nuestras barras se verán invertidas:
Por último, utilizaremos la forma translate de la propiedad transform de un SVG para separar visualmente cada uno de los rectángulos. De lo contrario, todos los rectángulos se fusionarán en un único rectángulo como se muestra a continuación:
Cuando se usa transform-translate, se verá así:
En la última parte, añadimos estilo. Puedes añadir estilos CSS a D3 usando la propiedad .style.
Por último, este es el aspecto del gráfico:
Por supuesto, todavía se puede hacer más para mejorar este gráfico. Puedes crear una experiencia de visualización de datos aún más compleja con D3.
Deberías echar un vistazo a la documentación, ya que proporciona muchos ejemplos que puedes editar directamente para que puedas hacerte una idea de cómo funciona.
Conclusión
D3 es una potente herramienta que permite crear complejas visualizaciones de datos más allá de los gráficos de barras. Puedes ver ejemplos de lo que es posible en la galería D3.
Sólo hemos arañado la superficie. Estoy deseando ver lo que podrías construir con D3 y Node.
¡Feliz codificación!