Usando layouts de D3js para representar datos
Utilizaremos diferentes layouts de barras, treemap, circle packing y force layout para representar datos de casos de COVID-19 en España
Usando layouts de D3js para representar datos
La visualización de datos es una parte muy interesante y divertida de la programación front-end. Los mismos datos se pueden representar de mil formas distintas, interactivas y permiten mucha creatividad.
En este tutorial, representaremos datos de casos de COVID-19 en España usando distintos layouts con d3.js.
1. Creando un gráfico de barras
La forma más tradicional y, muchas veces, efectiva de mostrar datos es usar una gráfica de barras. Las personas somos muy buenas comparando longitudes, sobre todo si estan una encima de otra. Por otro lado, los cálculos necesarios para determinar la longitud de las barras son relativamente sencillos, por lo que empezaremos por esta opción.
2. Mejorando el gráfico de barras
Como hemos visto en el vídeo anterior, el gráfico es aún pobre. Deberíamos añadir los valores con el número de casos y los nombres de las provincias. Por otra parte, los colores no significan nada y podríamos usarlos para indicar que provincias están en la misma Comunidad Autónoma. Finalmente, añadiremos una sencilla transición para mostrar como funcionan y que el gráfico tenga animación.
3. Usando el layout treemap
En este vídeo veremos como usar uno de los layouts que d3js ofrece. Treemap representa datos jerárquicos en forma de rectángulos anidados. Cada rectángulo tiene un área proporcional al valor. En nuestro caso, cuantos más casos de COVID-19 tenga una provincia, más grande será su rectángulo y los rectángulos estarán agrupados por Comunidad Autónoma.
4. Usando el layout circle packing
Este layout se parece bastante al anterior pero usa círculos. Acostumbra a ser más atractivo aunque distinguir los valores es más difícil. Vamos a ver como se usaría en este caso.
5. Force layout
Este ejemplo no lo comentaremos en detalle, pues daría para dos tutoriales él solo. Lo hemos añadido para demostrar que d3 permite añadir dinamismo e interactividad. Puedes acceder al código del ejemplo en el siguiente enlace
¿Te apuntas a nuestro máster?
Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.