#LemonCode – Usando layouts de D3js para representar datos 📈📉📊

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.

Buscando datos

Como el tema es de interés, hay datos sobre COVID-19 en todos los lugares imaginables, con series temporales, por municipio, etc. En este tutorial nos centraremos en los datos provinciales en España, pues se pueden agrupar por Comunidad Autónoma, lo que da juego como veremos. No usaremos datos temporales.

Los datos los tomamos de esta web. Están por fecha, con código de provincia, etc. por lo que hicimos un pequeño script de python para extraerlos un poco y que el archivo para trabajar fuera de un tamaño aceptable. Como que no es el objeto del tutorial, dejamos el enlace con el código (convert.py) pero no lo comentaremos.

Si prefieres descargarte el fichero json en lugar de ejecutar el script de python lo puedes encontrar en el siguiente enlace.

El archivo creado, ccaa_provincia.json estará en cada caso de estudio y consiste en un array de la forma

[
  {
    "name": "Alicante",
    "cases": 146364,
    "code": "A",
    "ccaa": "Comunitat  Valenciana"
  },
  {
    "name": "Albacete",
    "cases": 27785,
    "code": "AB",
    "ccaa": "Castilla-La Mancha"
  },
  ...
]

Accede al post completo aquí.

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

• Si tienes ganas de ponerte al día con Front End (ES6, Typescript, React, Angular, Vuejs…) te recomendamos nuestros Máster Front End: https://lemoncode.net/master-frontend#inicio-banner
• Si te quieres poner al día en Backend (stacks .net y nodejs), te aconsejamos nuestro Bootcamp Backend: https://lemoncode.net/bootcamp-backend#bootcamp-backend/banner
• Y si tienes ganas de meterte con Docker, Kubernetes, CI/CD…, tenemos nuestro Bootcamp Devops: https://lemoncode.net/bootcamp-devops#bootcamp-devops/inicio