Como construir um rastreador COVID-19 em JavaScript

Procurando um projeto rápido para praticar suas habilidades de desenvolvimento web? Você provavelmente já viu muitos rastreadores e gráficos COVID diferentes durante a pandemia - veja como fazer o seu próprio com o mínimo de esforço.

Você aprenderá algumas técnicas úteis em JavaScript, incluindo como buscar dados remotos de uma API e como usar uma biblioteca de gráficos para exibi-los. Vamos entrar nisso.

O que você vai construir

Este guia ajudará a demonstrar os fundamentos do trabalho com uma API usando JavaScript. Você aprenderá a buscar dados de uma fonte remota. Você também verá como usar uma biblioteca de gráficos para exibir os dados buscados.

Todo o código usado neste artigo está disponível em um Github repositório.

Explorando a fonte de dados

Para obter os números mais recentes relacionados ao COVID, usaremos doença.sh que se descreve como uma “API Open Disease Data”.

Esta API é excelente porque:

• Tem muitas fontes diferentes de dados, cada uma oferecendo formatos ligeiramente diferentes
instagram viewer
• Está bem documentado, não com exemplos, mas com muitos detalhes sobre como cada um dos doença.sh endpoints funcionam
• Ele retorna JSON, que é fácil de trabalhar a partir do JavaScript
• É totalmente aberto e gratuito, sem necessidade de autenticação

Este último ponto é particularmente importante: muitas APIs exigem que você passe por um processo OpenAuth complicado ou simplesmente não estão disponíveis para JavaScript executado em um navegador.

Para este tutorial, usaremos o Dados do New York Times para os EUA de disease.sh. Esse endpoint inclui dados da duração da pandemia (desde 21 de janeiro de 2020), em um formato fácil de trabalhar. Confira alguns dados do endpoint doença.sh estaremos usando:

Se você está acostumado a lidar com JSON, poderá ler isso sem nenhum problema. Aqui está um pequeno trecho em um layout mais legível:

[{
 "data":"2020-01-21",
 "casos":1,
 "mortes":0,
 "atualizado":1643386814538
},{
 "data":"2020-01-22",
 "casos":1,
 "mortes":0,
 "atualizado":1643386814538
}]

A API retorna um array simples de objetos, cada objeto representando um ponto de dados com data, casos, etc.

Configurando o HTML

Por enquanto, vamos configurar um HTML esqueleto muito simples. Por fim, você precisará incluir alguns recursos externos, mas isso é suficiente para começar:

Casos de Covid, EUA

Buscando os dados usando JavaScript

Comece apenas obtendo os dados da API e exibindo-os no console do navegador. Isso ajudará você a verificar se pode buscar no servidor remoto e processar a resposta. Adicione o seguinte código ao seu covid.js Arquivo:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
buscar (api)
 .then (resposta => resposta.json())
 .then (dados => {
 console.log (dados);
 });

A API Fetch JavaScript é uma alternativa mais recente ao XMLHttpRequest (leia sobre isso em detalhes em MDN). Ele usa uma promessa que facilita um pouco a programação assíncrona com retornos de chamada. Usando esse paradigma, você pode encadear várias etapas assíncronas.

Depois de buscar o URL necessário, use o então método da Promessa para lidar com o caso de sucesso. Analise o corpo da resposta como JSON por meio do json() método.

Relacionado: As funções de seta do JavaScript podem torná-lo um desenvolvedor melhor

Desde a então() sempre retorna uma Promise, você pode continuar encadeando para lidar com cada etapa. Na segunda etapa, por enquanto, basta registrar os dados no console para que você possa inspecioná-los:

Você poderá interagir com o objeto exibido no console para inspecionar os dados da API. Você já fez muito progresso, então passe para a próxima etapa quando estiver pronto.

Relacionado: Depuração em JavaScript: registrando no console do navegador

Exibindo os dados usando billboard.js

Em vez de registrar os dados, vamos plotá-los usando uma biblioteca JavaScript. Prepare-se para isso atualizando o código anterior para ficar assim:

buscar (api)
 .then (resposta => resposta.json())
 .then (dados => {
 plotData (dados);
 });
function plotData (dados) {
}

Usaremos o billboard.js biblioteca para nos dar um gráfico simples e interativo. billboard.js é básico, mas suporta alguns tipos de gráficos diferentes e permite que você personalize eixos, rótulos e todos os ingredientes padrão de um gráfico.

Você precisará incluir três arquivos externos, então adicione-os ao HEAD do seu html:

Experimente billboard.js com o gráfico mais básico. Adicione o seguinte a plotData():

bb.generate({
 bindto: "#covid-todos-nos-casos",
 dados: {
 tipo: "linha",
 colunas: [
 [ "dados", 10, 40, 20 ]
 ]
 }
});

O ligar a A propriedade define um seletor que identifica o elemento HTML de destino no qual gerar o gráfico. Os dados são para um linha gráfico, com uma única coluna. Observe que os dados da coluna são uma matriz que consiste em quatro valores, com o primeiro valor uma string atuando como o nome desses dados (“dados”).

Você deverá ver um gráfico parecido com este, com três valores na série e uma legenda rotulando-o como “dados”:

Tudo o que resta para você fazer é usar o real dados da API que você já está passando plotData(). Isso requer um pouco mais de trabalho porque você precisará traduzi-lo em um formato apropriado e instruir billboard.js para exibir tudo corretamente.

Vamos traçar um gráfico que mostra o histórico completo do caso. Comece construindo duas colunas, uma para o eixo x que contém datas e outra para a série de dados real que plotaremos no gráfico:

var keys = data.map (a => a.date),
 cases = data.map (a => a.cases);
keys.unshift("datas");
cases.unshift("casos");

O trabalho restante requer ajustes no objeto de outdoor.

bb.generate({
 bindto: "#covid-todos-nos-casos",
 dados: {
 x: "datas",
 tipo: "linha",
 colunas: [
 chaves,
 casos
 ]
 }
});

Adicione também o seguinte eixo propriedade:

 eixo: {
 x: {
 digite: "categoria",
 marcação: {
 contagem: 10
 }
 }
 }

Isso garante que o eixo x exiba apenas 10 datas para que fiquem bem espaçadas. Observe que o resultado final é interativo. Conforme você move o cursor sobre o gráfico, o outdoor exibe os dados em um pop-up:

Confira a fonte deste rastreador em GitHubGenericName.

Variações

Veja como você pode usar os dados de origem de diferentes maneiras para alterar o que você plota usando billboard.js.

Visualizando dados apenas por um único ano

O gráfico geral está muito ocupado porque contém muitos dados. Uma maneira simples de reduzir o ruído é limitar o período de tempo, a um único ano, por exemplo (GitHubGenericName). Você só precisa alterar uma linha para fazer isso e não precisa tocar no plotData funcionar; é geral o suficiente para lidar com um conjunto reduzido de dados.

No segundo .então() chamar, substituir:

plotData (dados);

Com:

plotData (data.filter (a => a.date > '2022'));

O filtro() O método reduz uma matriz chamando uma função em cada valor na matriz. Quando essa função retorna verdadeiro, mantém o valor. Caso contrário, ele o descarta.

A função acima retorna true se o valor encontro propriedade é maior que '2022'. Esta é uma comparação de string simples, mas funciona para o formato desses dados que é ano-mês-dia, um formato muito conveniente.

Visualizando dados com menos granularidade

Em vez de restringir os dados a apenas um ano, outra maneira de reduzir o ruído é descartar a maior parte, mas reter os dados de um intervalo fixo (GitHubGenericName). Os dados cobrirão todo o período original, mas haverá muito menos. Uma abordagem óbvia é manter apenas um valor de cada semana – em outras palavras, cada sétimo valor.

A técnica padrão para fazer isso é com o % operador (módulo). Ao filtrar no módulo 7 de cada índice de matriz igual a 0, reteremos cada 7º valor:

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

Observe que, desta vez, você precisará usar uma forma alternativa de filtro() que usa dois argumentos, o segundo representando o índice. Aqui está o resultado:

Visualizando Casos e Óbitos em um Gráfico

Por fim, tente exibir casos e óbitos em um gráfico (GitHubGenericName). Desta vez, você precisará alterar o plotData() método, mas a abordagem é basicamente a mesma. As principais alterações são a adição dos novos dados:

mortes = data.map (a => a.deaths)
...
colunas = [ chaves, casos, mortes ]

E ajustes para garantir que o billboard.js formate os eixos corretamente. Observe, em particular, as alterações na estrutura de dados pertencentes ao objeto passado para bb.gerar:

dados: {
 x: "datas",
 colunas: colunas,
 eixos: { "casos": "y", "mortes": "y2" },
 tipos: {
 casos: "barra"
 }
}

Agora, defina os vários eixos para plotar junto com um novo tipo específico para o casos Series.

Plotando resultados da API usando JavaScript

Este tutorial demonstra como usar uma API simples e uma biblioteca de gráficos para criar um rastreador COVID-19 básico em JavaScript. A API suporta muitos outros dados com os quais você pode trabalhar para diferentes países e também inclui dados sobre a cobertura vacinal.

Você pode usar uma ampla variedade de tipos de gráfico billboard.js para exibi-lo ou uma biblioteca de gráficos diferente. A escolha é sua!

Como fazer um gráfico com Chart.js

Exibir dados dinâmicos com JavaScript nunca foi tão fácil.

Leia a seguir

Sobre o autor