Come creare un tracker COVID-19 in JavaScript

Cerchi un progetto veloce per mettere in pratica le tue abilità di sviluppatore web? Probabilmente hai visto molti tracker e grafici COVID diversi durante la pandemia: ecco come crearne uno tuo con il minimo sforzo.

Imparerai alcune tecniche utili in JavaScript, incluso come recuperare dati remoti da un'API e come utilizzare una libreria di grafici per visualizzarli. Entriamo in esso.

Cosa costruirai

Questa guida ti aiuterà a dimostrare le basi dell'utilizzo di un'API utilizzando JavaScript. Imparerai come recuperare i dati da una fonte remota. Vedrai anche come utilizzare una libreria di grafici per visualizzare i dati recuperati.

Tutto il codice utilizzato in questo articolo è disponibile in a Github deposito.

Esplorazione della fonte di dati

Per ottenere le ultime cifre relative al COVID, utilizzeremo malattia.sh che si descrive come una "Open Disease Data API".

Questa API è eccellente perché:

• Ha molte diverse fonti di dati, ognuna con formati leggermente diversi
• È ben documentato, non con esempi, ma con molti dettagli su come ciascuno dei malattia.sh gli endpoint funzionano
instagram viewer
• Restituisce JSON, con cui è facile lavorare da JavaScript
• È totalmente aperto e gratuito, non è richiesta l'autenticazione

Quest'ultimo punto è particolarmente importante: molte API richiedono di eseguire un complicato processo OpenAuth o semplicemente non sono disponibili per JavaScript in esecuzione in un browser.

Per questo tutorial, useremo il Dati del New York Times per gli Stati Uniti da disease.sh. Questo endpoint include i dati della durata della pandemia (dal 21 gennaio 2020), in un formato con cui è facile lavorare. Dai un'occhiata ad alcuni dati del endpoint disease.sh useremo:

Se sei abituato a gestire JSON, potresti essere in grado di leggerlo senza alcun problema. Ecco un piccolo estratto in un layout più leggibile:

[{
 "data": "21-01-2020",
 "casi":1,
 "morti": 0,
 "aggiornato":1643386814538
},{
 "data": "22-01-2020",
 "casi":1,
 "morti": 0,
 "aggiornato":1643386814538
}]

L'API restituisce un semplice array di oggetti, ogni oggetto rappresenta un punto dati con data, casi, ecc.

Configurazione dell'HTML

Per ora, imposteremo uno scheletro HTML molto semplice. In definitiva, dovrai includere alcune risorse esterne, ma questo è sufficiente per iniziare:

Casi Covid, Stati Uniti

Recupero dei dati utilizzando JavaScript

Inizia semplicemente ottenendo i dati dall'API e visualizzandoli nella console del browser. Questo ti aiuterà a verificare che puoi recuperare dal server remoto ed elaborare la risposta. Aggiungi il seguente codice al tuo covid.js file:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
recuperare (api)
 .then (risposta => response.json())
 .allora (dati => {
 console.log (dati);
 });

L'API JavaScript Fetch è un'alternativa più recente a XMLHttpRequest (leggi in dettaglio su MDN). Utilizza una promessa che rende un po' più semplice la programmazione asincrona con i callback. Usando questo paradigma, puoi concatenare diversi passaggi asincroni insieme.

Dopo aver recuperato l'URL richiesto, utilizzare il poi metodo della Promessa per gestire il caso di successo. Analizza il corpo della risposta come JSON tramite il file json() metodo.

Imparentato: Le funzioni JavaScript Arrow possono renderti uno sviluppatore migliore

Da quando poi() restituisce sempre una promessa, puoi continuare a concatenare per gestire ogni passaggio. Nel secondo passaggio, per ora, registra semplicemente i dati sulla console in modo da poterli ispezionare:

Potrai interagire con l'oggetto visualizzato nella console per ispezionare i dati dall'API. Hai già fatto molti progressi, quindi vai al passaggio successivo quando sei pronto.

Imparentato: Debug in JavaScript: accesso alla console del browser

Visualizzazione dei dati utilizzando billboard.js

Invece di registrare i dati, tracciamoli utilizzando una libreria JavaScript. Preparati per questo aggiornando il codice precedente in modo che assomigli a questo:

recuperare (api)
 .then (risposta => response.json())
 .allora (dati => {
 plotData (dati);
 });
funzione tracciaDati (dati) {
}

Useremo il billboard.js libreria per fornirci un grafico semplice e interattivo. billboard.js è di base, ma supporta alcuni tipi di grafici diversi e consente di personalizzare assi, etichette e tutti gli ingredienti standard di un grafico.

Dovrai includere tre file esterni, quindi aggiungili alla HEAD del tuo html:

Prova billboard.js con il grafico più semplice. Aggiungi quanto segue a plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 dati: {
 digitare: "linea",
 colonne: [
 [ "dati", 10, 40, 20 ]
 ]
 }
});

Il vincolato a La proprietà definisce un selettore che identifica l'elemento HTML di destinazione in cui generare il grafico. I dati sono per a linea grafico, con una sola colonna. Si noti che i dati della colonna sono una matrice composta da quattro valori, con il primo valore una stringa che funge da nome di quei dati ("dati").

Dovresti vedere un grafico simile a questo, con tre valori nella serie e una legenda che lo etichetta come "dati":

Tutto ciò che ti resta da fare è usare il reale dati dall'API a cui stai già passando plotData(). Ciò richiede un po' più di lavoro perché dovrai tradurlo in un formato appropriato e indicare a billboard.js di visualizzare tutto correttamente.

Tracceremo un grafico che mostra la storia completa del caso. Inizia costruendo due colonne, una per l'asse x che contiene le date e una per le serie di dati effettive che tracceremo sul grafico:

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

Il lavoro rimanente richiede modifiche all'oggetto cartellone.

bb.generate({
 bindto: "#covid-all-us-cases",
 dati: {
 x: "date",
 digitare: "linea",
 colonne: [
 chiavi,
 casi
 ]
 }
});

Aggiungi anche quanto segue asse proprietà:

 asse: {
 X: {
 digitare: "categoria",
 tic Tac: {
 contare: 10
 }
 }
 }

Ciò garantisce che l'asse x visualizzi solo 10 date in modo che siano ben distanziate. Nota che il risultato finale è interattivo. Quando sposti il ​​cursore sul grafico, il tabellone mostra i dati in un popup:

Controlla la fonte di questo tracker in GitHub.

Variazioni

Dai un'occhiata a come puoi utilizzare i dati di origine in diversi modi per modificare ciò che traccia utilizzando billboard.js.

Visualizzazione dei dati solo per un anno

Il grafico generale è molto occupato perché contiene così tanti dati. Un modo semplice per ridurre il rumore è limitare il periodo di tempo, ad esempio a un solo anno (GitHub). Devi solo cambiare una riga per farlo e non devi toccare il plotData funzionare affatto; è abbastanza generale per gestire un insieme ridotto di dati.

Nel secondo .poi() chiamare, sostituire:

plotData (dati);

Con:

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

Il filtro() riduce un array chiamando una funzione su ogni valore nell'array. Quando quella funzione ritorna vero, mantiene il valore. In caso contrario, lo scarta.

La funzione sopra restituisce true se il valore è Data la proprietà è maggiore di "2022". Questo è un semplice confronto di stringhe, ma funziona per il formato di questi dati che è anno-mese-giorno, un formato molto conveniente.

Visualizzazione dei dati con meno granularità

Piuttosto che limitare i dati a un solo anno, un altro modo per ridurre il rumore è scartarne la maggior parte ma conservare i dati da un intervallo fisso (GitHub). I dati riguarderanno quindi l'intero periodo originale, ma ce ne sarà molto meno. Un approccio ovvio è mantenere solo un valore per ogni settimana, in altre parole, ogni settimo valore.

La tecnica standard per farlo è con il % operatore (modulo). Filtrando sul modulo 7 di ogni indice di matrice uguale a 0, manterremo ogni 7° valore:

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

Nota che, questa volta, dovrai utilizzare una forma alternativa di filtro() che utilizza due argomenti, il secondo che rappresenta l'indice. Ecco il risultato:

Visualizzazione di casi e decessi in un grafico

Infine, prova a visualizzare sia i casi che i decessi su un grafico (GitHub). Questa volta dovrai cambiare il plotData() metodo, ma l'approccio è principalmente lo stesso. Le modifiche chiave sono l'aggiunta dei nuovi dati:

morti = data.map (a => a.morti)
...
colonne = [chiavi, casi, decessi]

E le modifiche per garantire che billboard.js formatta correttamente gli assi. Si noti, in particolare, le modifiche alla struttura dati appartenente all'oggetto a cui è passato bb.genera:

dati: {
 x: "date",
 colonne: colonne,
 assi: { "casi": "y", "decessi": "y2" },
 tipi: {
 casi: "bar"
 }
}

Ora, definisci gli assi multipli da tracciare insieme a un nuovo tipo specifico per casi serie.

Tracciare i risultati dell'API utilizzando JavaScript

Questo tutorial mostra come utilizzare una semplice API e una libreria di grafici per creare un tracker COVID-19 di base in JavaScript. L'API supporta molti altri dati con cui puoi lavorare per diversi paesi e include anche dati sulla copertura del vaccino.

Puoi utilizzare un'ampia gamma di tipi di grafici billboard.js per visualizzarlo o una libreria di grafici completamente diversa. La scelta è tua!

Come creare un grafico con Chart.js

Visualizzare dati dinamici con JavaScript non è mai stato così facile.

Leggi Avanti

Circa l'autore