Cómo construir un rastreador COVID-19 en JavaScript

¿Está buscando un proyecto rápido para practicar sus habilidades de desarrollo web? Probablemente haya visto muchos rastreadores y gráficos de COVID diferentes a lo largo de la pandemia; aquí le mostramos cómo hacer uno propio con el mínimo esfuerzo.

Aprenderá algunas técnicas útiles en JavaScript, que incluyen cómo obtener datos remotos de una API y cómo usar una biblioteca de gráficos para mostrarlos. Entremos en ello.

Lo que estarás construyendo

Esta guía ayudará a demostrar los conceptos básicos para trabajar con una API usando JavaScript. Aprenderá a obtener datos de una fuente remota. También verá cómo usar una biblioteca de gráficos para mostrar los datos obtenidos.

Todo el código utilizado en este artículo está disponible en un Github repositorio.

Explorando la fuente de datos

Para obtener las últimas cifras relacionadas con COVID, usaremos enfermedad.sh que se describe a sí mismo como una "API de datos abiertos de enfermedades".

Esta API es excelente porque:

• Tiene muchas fuentes de datos diferentes, cada una de las cuales ofrece formatos ligeramente diferentes.
instagram viewer
• Está bien documentado, no con ejemplos, pero con muchos detalles sobre cómo cada uno de los enfermedad.sh trabajo de puntos finales
• Devuelve JSON, con el que es fácil trabajar desde JavaScript
• Es totalmente abierto y de uso gratuito, no requiere autenticación

Este último punto es particularmente importante: muchas API requieren que pase por un complicado proceso de OpenAuth, o simplemente no están disponibles para que JavaScript se ejecute en un navegador.

Para este tutorial, usaremos el Datos del New York Times para los EE. UU. de disease.sh. Este punto final incluye datos de la duración de la pandemia (desde el 21 de enero de 2020), en un formato con el que es fácil trabajar. Echa un vistazo a algunos datos de la punto final de enfermedad.sh estaremos usando:

Si está acostumbrado a tratar con JSON, es posible que pueda leerlo sin ningún problema. Aquí hay un pequeño extracto en un diseño más legible:

[{
 "fecha":"2020-01-21",
 "casos":1,
 "muertes":0,
 "actualizado":1643386814538
},{
 "fecha":"2020-01-22",
 "casos":1,
 "muertes":0,
 "actualizado":1643386814538
}]

La API devuelve una matriz simple de objetos, cada objeto representa un punto de datos con fecha, casos, etc.

Configurando el HTML

Por ahora, configuraremos un esqueleto HTML muy simple. En última instancia, deberá incluir algunos recursos externos, pero esto es suficiente para comenzar:

Casos de covid, EE. UU.

Obtener los datos usando JavaScript

Comience simplemente obteniendo los datos de la API y mostrándolos en la consola del navegador. Esto lo ayudará a verificar que puede obtener desde el servidor remoto y procesar la respuesta. Agregue el siguiente código a su covid.js Archivo:

var API = ' https://disease.sh/v3/covid-19/nyt/usa';
buscar (api)
 .entonces (respuesta => respuesta.json())
 .entonces (datos => {
 consola.log (datos);
 });

La API Fetch JavaScript es una alternativa más nueva a XMLHttpRequest (lea sobre esto en detalle en MDN). Utiliza una promesa que facilita un poco la programación asincrónica con devoluciones de llamada. Con este paradigma, puede encadenar varios pasos asincrónicos.

Después de obtener la URL requerida, use el entonces método de la Promesa para manejar el caso de éxito. Analice el cuerpo de la respuesta como JSON a través del json() método.

Relacionado: Las funciones de flecha de JavaScript pueden convertirlo en un mejor desarrollador

Ya que entonces() siempre devuelve una Promesa, puedes seguir encadenando para manejar cada paso. En el segundo paso, por ahora, simplemente registre los datos en la consola para que pueda inspeccionarlos:

Podrá interactuar con el objeto que se muestra en la consola para inspeccionar los datos de la API. Ya has progresado mucho, así que continúa con el siguiente paso cuando estés listo.

Relacionado: Depuración en JavaScript: inicio de sesión en la consola del navegador

Mostrar los datos usando billboard.js

En lugar de registrar los datos, representémoslos usando una biblioteca de JavaScript. Prepárese para esto actualizando el código anterior para que se vea así:

buscar (api)
 .entonces (respuesta => respuesta.json())
 .entonces (datos => {
 plotData (datos);
 });
función plotData (datos) {
}

Usaremos el cartelera.js biblioteca para darnos un gráfico simple e interactivo. billboard.js es básico, pero admite algunos tipos de gráficos diferentes y le permite personalizar ejes, etiquetas y todos los ingredientes estándar de un gráfico.

Deberá incluir tres archivos externos, así que agréguelos al HEAD de su html:

Pruebe billboard.js con el gráfico más básico. Agregue lo siguiente a plotData():

bb.generar({
 bindto: "#covid-todos-nosotros-casos",
 datos: {
 tipo: "línea",
 columnas: [
 [ "datos", 10, 40, 20 ]
 ]
 }
});

El unirse a define un selector que identifica el elemento HTML de destino en el que generar el gráfico. Los datos son para un línea gráfico, con una sola columna. Tenga en cuenta que los datos de la columna son una matriz que consta de cuatro valores, con el primer valor como una cadena que actúa como el nombre de esos datos ("datos").

Debería ver un gráfico que se parece un poco a este, con tres valores en la serie y una leyenda que lo etiqueta como "datos":

Todo lo que te queda por hacer es usar el datos de la API a la que ya está pasando plotData(). Esto requiere un poco más de trabajo porque deberá traducirlo a un formato apropiado e indicarle a billboard.js que muestre todo correctamente.

Trazaremos un gráfico que muestra el historial completo del caso. Comience por construir dos columnas, una para el eje x que contiene fechas y otra para la serie de datos reales que trazaremos en el gráfico:

var claves = datos.mapa (a => a.fecha),
 casos = data.map (a => a.casos);
teclas.unshift("fechas");
casos.unshift("casos");

El trabajo restante requiere ajustes en el objeto de cartelera.

bb.generar({
 bindto: "#covid-todos-nosotros-casos",
 datos: {
 x: "fechas",
 tipo: "línea",
 columnas: [
 teclas,
 casos
 ]
 }
});

También agregue lo siguiente eje propiedad:

 eje: {
 X: {
 tipo: "categoría",
 garrapata: {
 contar: 10
 }
 }
 }

Esto garantiza que el eje x muestre solo 10 fechas para que estén bien espaciadas. Tenga en cuenta que el resultado final es interactivo. A medida que mueve el cursor sobre el gráfico, la cartelera muestra datos en una ventana emergente:

Consulte la fuente de este rastreador en GitHub.

variaciones

Eche un vistazo a cómo puede usar los datos de origen de diferentes maneras para cambiar lo que traza usando billboard.js.

Visualización de datos solo para un solo año

El gráfico general está muy ocupado porque contiene muchos datos. Una forma sencilla de reducir el ruido es limitar el período de tiempo, a un solo año, por ejemplo (GitHub). Solo necesita cambiar una línea para hacer esto, y no necesita tocar el plotData funcionar en absoluto; es lo suficientemente general como para manejar un conjunto reducido de datos.

En el segundo .entonces() llamar, reemplazar:

plotData (datos);

Con:

plotData (datos.filtro (a => a.fecha > '2022'));

El filtrar() El método reduce una matriz llamando a una función en cada valor de la matriz. Cuando esa función regresa cierto, mantiene el valor. De lo contrario, lo descarta.

La función anterior devuelve verdadero si el valor es fecha la propiedad es mayor que '2022'. Esta es una comparación de cadenas simple, pero funciona para el formato de estos datos que es año-mes-día, un formato muy conveniente.

Visualización de datos con menos granularidad

En lugar de restringir los datos a solo un año, otra forma de reducir el ruido es descartar la mayor parte pero conservar los datos de un intervalo fijo (GitHub). Los datos cubrirán entonces todo el período original, pero habrá mucho menos. Un enfoque obvio es simplemente mantener un valor de cada semana; en otras palabras, cada séptimo valor.

La técnica estándar para hacer esto es con el % (módulo) operador. Al filtrar en el módulo 7 de cada índice de matriz igual a 0, conservaremos cada séptimo valor:

plotData (data.filter((a, index) => index % 7 == 0));

Tenga en cuenta que, esta vez, deberá utilizar una forma alternativa de filtrar() que utiliza dos argumentos, el segundo que representa el índice. Aquí está el resultado:

Visualización de casos y muertes en un gráfico

Finalmente, intente mostrar tanto los casos como las muertes en un gráfico (GitHub). Esta vez tendrá que cambiar el plotData() método, pero el enfoque es básicamente el mismo. Los cambios clave son la adición de los nuevos datos:

muertes = datos.mapa (a => a.muertes)
...
columnas = [claves, casos, muertes]

Y ajustes para garantizar que billboard.js formatee los ejes correctamente. Tenga en cuenta, en particular, los cambios en la estructura de datos que pertenecen al objeto pasado a bb.generar:

datos: {
 x: "fechas",
 columnas: columnas,
 ejes: { "casos": "y", "muertes": "y2" },
 tipos: {
 casos: "barra"
 }
}

Ahora, defina los múltiples ejes para trazar junto con un nuevo tipo específico para el casos serie.

Trazado de resultados de la API mediante JavaScript

Este tutorial demuestra cómo usar una API simple y una biblioteca de gráficos para crear un rastreador básico de COVID-19 en JavaScript. La API admite muchos otros datos con los que puede trabajar para diferentes países y también incluye datos sobre la cobertura de vacunas.

Puede usar una amplia gama de tipos de gráficos de billboard.js para mostrarlos, o una biblioteca de gráficos diferente por completo. ¡La decisión es tuya!

Cómo hacer un gráfico con Chart.js

Mostrar datos dinámicos con JavaScript nunca ha sido tan fácil.

Leer siguiente

Sobre el Autor