Cum să construiți un instrument de urmărire COVID-19 în JavaScript

Căutați un proiect rapid pentru a vă exersa abilitățile de dezvoltare web? Probabil ați văzut multe instrumente de urmărire și diagrame COVID diferite de-a lungul pandemiei – iată cum să vă creați propriile cu efort minim.

Veți învăța câteva tehnici utile în JavaScript, inclusiv cum să preluați date de la distanță dintr-un API și cum să utilizați o bibliotecă de diagrame pentru a le afișa. Să intrăm în asta.

Ce vei construi

Acest ghid va ajuta la demonstrarea elementelor de bază ale lucrului cu un API folosind JavaScript. Veți învăța cum să preluați date de la o sursă de la distanță. Veți vedea, de asemenea, cum să utilizați o bibliotecă de diagrame pentru a afișa datele preluate.

Tot codul folosit în acest articol este disponibil într-un Github repertoriu.

Explorarea sursei de date

Pentru a obține cele mai recente cifre legate de COVID, vom folosi boala.sh care se descrie ca „Open Disease Data API”.

Acest API este excelent deoarece:

• Are multe surse diferite de date, fiecare oferind formate ușor diferite
instagram viewer
• Este bine documentat, nu cu exemple, ci cu multe detalii despre modul în care fiecare dintre ele boala.sh punctele finale funcționează
• Returnează JSON, cu care este ușor de lucrat din JavaScript
• Este complet deschis și gratuit de utilizat, nu este necesară autentificarea

Acest ultim punct este deosebit de important: multe API-uri vă cer să treceți printr-un proces OpenAuth complicat sau pur și simplu nu sunt disponibile pentru JavaScript care rulează într-un browser.

Pentru acest tutorial, vom folosi Date New York Times pentru SUA de la boala.sh. Acest punct final include date de pe durata pandemiei (din 21 ianuarie 2020), într-un format cu care este ușor de lucrat. Aruncă o privire la câteva date din boala.sh endpoint vom folosi:

Dacă sunteți obișnuit să aveți de-a face cu JSON, este posibil să puteți citi asta fără nicio problemă. Iată un mic fragment într-un aspect mai ușor de citit:

[{
 "data":"2020-01-21",
 „cazuri”:1,
 "moarte":0,
 „actualizat”:1643386814538
},{
 "data":"2020-01-22",
 „cazuri”:1,
 "moarte":0,
 „actualizat”:1643386814538
}]

API-ul returnează o matrice simplă de obiecte, fiecare obiect reprezentând un punct de date cu data, cazuri etc.

Configurarea HTML-ului

Deocamdată, vom configura niște schelete HTML foarte simple. În cele din urmă, va trebui să includeți câteva resurse externe, dar acest lucru este suficient pentru a începe:

Cazuri de Covid, SUA

Preluarea datelor folosind JavaScript

Începeți prin a obține doar datele din API și a le afișa în consola browserului. Acest lucru vă va ajuta să verificați că puteți prelua de la serverul de la distanță și puteți procesa răspunsul. Adăugați următorul cod la dvs covid.js fişier:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
aduce (api)
 .then (răspuns => răspuns.json())
 .then (date => {
 console.log (date);
 });

API-ul Fetch JavaScript este o alternativă mai nouă la XMLHttpRequest (citiți despre aceasta în detaliu la MDN). Folosește o Promisiune care face puțin mai ușoară programarea asincronă cu apeluri inverse. Folosind această paradigmă, puteți lega mai mulți pași asincroni împreună.

După ce ați preluat adresa URL necesară, utilizați atunci metoda Promisei de a gestiona cazul de succes. Analizați corpul răspunsului ca JSON prin intermediul json() metodă.

Legate de: Funcțiile săgeții JavaScript vă pot face un dezvoltator mai bun

De cand atunci() returnează întotdeauna o Promisiune, puteți continua să vă înlănțuiți pentru a gestiona fiecare pas. În al doilea pas, deocamdată, pur și simplu înregistrați datele în consolă, astfel încât să le puteți inspecta:

Veți putea interacționa cu obiectul afișat în consolă pentru a inspecta datele din API. Ați făcut deja multe progrese, așa că treceți la pasul următor când sunteți gata.

Legate de: Depanare în JavaScript: Conectare la Consola browser

Afișarea datelor utilizând billboard.js

În loc să înregistrăm datele, să le trasăm folosind o bibliotecă JavaScript. Pregătiți-vă pentru asta actualizând codul anterior pentru a arăta astfel:

aduce (api)
 .then (răspuns => răspuns.json())
 .then (date => {
 plotData (date);
 });
funcția plotData (date) {
}

Vom folosi billboard.js bibliotecă pentru a ne oferi un grafic simplu, interactiv. billboard.js este de bază, dar acceptă câteva tipuri diferite de diagrame și vă permite să personalizați axele, etichetele și toate ingredientele standard ale unei diagrame.

Va trebui să includeți trei fișiere externe, așa că adăugați-le la HEAD-ului dvs. HTML:

Încercați billboard.js cu cea mai simplă diagramă. Adăugați următoarele la plotData():

bb.generate({
 bindto: „#covid-all-us-cases”,
 date: {
 tip: "linie",
 coloane: [
 [ „date”, 10, 40, 20 ]
 ]
 }
});

The a se lega la Proprietatea definește un selector care identifică elementul HTML țintă în care să genereze diagrama. Datele sunt pentru a linia grafic, cu o singură coloană. Rețineți că datele coloanei sunt o matrice formată din patru valori, prima valoare fiind un șir acționând ca numele acelei date („date”).

Ar trebui să vedeți o diagramă care arată cam așa, cu trei valori în serie și o legendă care îl etichetează ca „date”:

Tot ce vă rămâne de făcut este să utilizați actualul date din API-ul în care treceți deja plotData(). Acest lucru necesită ceva mai multă muncă, deoarece va trebui să îl traduceți într-un format adecvat și să instruiți billboard.js să afișeze totul corect.

Vom trasa o diagramă care arată istoricul complet al cazului. Începeți prin a construi două coloane, una pentru axa x care conține date și una pentru seria de date reale pe care o vom reprezenta pe grafic:

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

Lucrarea rămasă necesită ajustări ale obiectului panoului publicitar.

bb.generate({
 bindto: „#covid-all-us-cases”,
 date: {
 x: „date”,
 tip: "linie",
 coloane: [
 chei,
 cazuri
 ]
 }
});

De asemenea, adăugați următoarele axă proprietate:

 axa: {
 X: {
 tip: „categorie”,
 bifă: {
 număr: 10
 }
 }
 }

Acest lucru asigură că axa x afișează doar 10 date, astfel încât acestea să fie bine distanțate. Rețineți că rezultatul final este interactiv. Pe măsură ce mutați cursorul peste grafic, panoul publicitar afișează datele într-o fereastră pop-up:

Verificați sursa acestui tracker în GitHub.

Variante

Uitați-vă la modul în care puteți utiliza datele sursă în moduri diferite pentru a modifica ceea ce reprezentați folosind billboard.js.

Vizualizarea datelor doar pentru un singur an

Graficul general este foarte ocupat, deoarece conține atât de multe date. O modalitate simplă de reducere a zgomotului este limitarea perioadei de timp, de exemplu la un singur an (GitHub). Trebuie doar să schimbați o linie pentru a face acest lucru și nu trebuie să atingeți plotData functioneaza deloc; este suficient de general pentru a gestiona un set redus de date.

In secunda .atunci() sunați, înlocuiți:

plotData (date);

Cu:

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

The filtru() metoda reduce o matrice apelând o funcție pe fiecare valoare din matrice. Când acea funcție revine Adevărat, păstrează valoarea. În caz contrar, îl aruncă.

Funcția de mai sus returnează adevărat dacă valoarea este Data proprietatea este mai mare decât „2022”. Aceasta este o comparație simplă de șiruri, dar funcționează pentru formatul acestor date care este an-lună-zi, un format foarte convenabil.

Vizualizarea datelor cu mai puțină granularitate

În loc să restrângeți datele la doar un an, o altă modalitate de a reduce zgomotul este să renunțați la cea mai mare parte, dar să păstrați datele dintr-un interval fix (GitHub). Datele vor acoperi apoi întreaga perioadă inițială, dar vor fi mult mai puține. O abordare evidentă este să păstrați doar o valoare din fiecare săptămână - cu alte cuvinte, fiecare a șaptea valoare.

Tehnica standard pentru a face acest lucru este cu % operator (modul). Prin filtrarea pe modulul 7 al fiecărui indice de matrice egal cu 0, vom păstra fiecare a șaptea valoare:

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

Rețineți că, de data aceasta, va trebui să utilizați o formă alternativă de filtru() care folosește două argumente, al doilea reprezentând indexul. Iată rezultatul:

Vizualizarea cazurilor și a deceselor într-un singur grafic

În cele din urmă, încercați să afișați atât cazurile, cât și decesele pe un singur grafic (GitHub). De data aceasta va trebui să schimbați plotData() metoda, dar abordarea este în principal aceeași. Schimbările cheie sunt adăugarea noilor date:

decese = data.map (a => a.decese)
...
coloane = [ chei, cazuri, decese ]

Și ajustări pentru a se asigura că billboard.js formatează corect axele. Rețineți, în special, modificările aduse structurii de date aparținând obiectului căruia i-a fost transmis bb.generare:

date: {
 x: „date”,
 coloane: coloane,
 axe: { "cazuri": "y", "decese": "y2" },
 tipuri: {
 cazuri: "bar"
 }
}

Acum, definiți mai multe axe de reprezentat împreună cu un nou tip specific cazuri serie.

Trasarea rezultatelor API folosind JavaScript

Acest tutorial demonstrează cum să utilizați un API simplu și o bibliotecă de diagrame pentru a construi un instrument de urmărire COVID-19 de bază în JavaScript. API-ul acceptă o mulțime de alte date cu care puteți lucra pentru diferite țări și include, de asemenea, date despre acoperirea vaccinurilor.

Puteți folosi o gamă largă de tipuri de diagrame billboard.js pentru a-l afișa sau o bibliotecă de diagrame diferită. Alegerea este a ta!

Cum să faci o diagramă cu Chart.js

Afișarea datelor dinamice cu JavaScript nu a fost niciodată mai ușoară.

Citiți în continuare

Despre autor