Kako napraviti COVID-19 Tracker u JavaScriptu

Tražite brzi projekt za uvježbavanje vještina web developera? Vjerojatno ste tijekom pandemije vidjeli mnogo različitih COVID trackera i grafikona – evo kako napraviti svoje uz minimalan trud.

Naučit ćete neke korisne tehnike u JavaScriptu, uključujući kako dohvatiti udaljene podatke iz API-ja i kako koristiti biblioteku grafikona za njihovo prikazivanje. Uđimo u to.

Što ćete graditi

Ovaj vodič će vam pomoći pokazati osnove rada s API-jem pomoću JavaScripta. Naučit ćete kako dohvatiti podatke s udaljenog izvora. Također ćete vidjeti kako koristiti biblioteku grafikona za prikaz dohvaćenih podataka.

Sav kod korišten u ovom članku dostupan je u a Github spremište.

Istraživanje izvora podataka

Da bismo dobili najnovije brojke vezane uz COVID, koristit ćemo se bolest.sh koji sebe opisuje kao "Open Disease Data API".

Ovaj API je izvrstan jer:

• Ima mnogo različitih izvora podataka, od kojih svaki nudi malo različite formate
• Dobro je dokumentiran, ne s primjerima, već s puno detalja o tome kako svaki od njih bolest.sh krajnje točke rade
instagram viewer
• Vraća JSON, s kojim je lako raditi iz JavaScripta
• Potpuno je otvoren i besplatan za korištenje, nije potrebna autentifikacija

Ova posljednja točka posebno je važna: mnogi API-ji zahtijevaju da prođete kroz komplicirani OpenAuth proces ili jednostavno nisu dostupni JavaScriptu koji se izvodi u pregledniku.

Za ovaj vodič koristit ćemo Podaci New York Timesa za SAD od bolesti.sh. Ova krajnja točka uključuje podatke o trajanju pandemije (od 21. siječnja 2020.), u formatu s kojim je lako raditi. Pogledajte neke podatke iz bolest.sh krajnja točka koristit ćemo:

Ako ste navikli raditi s JSON-om, možda ćete ga moći pročitati bez problema. Evo malog isječka u čitljivijem izgledu:

[{
 "datum": "2020-01-21",
 "slučajevi":1,
 "smrti":0,
 "ažurirano": 1643386814538
},{
 "datum": "2020-01-22",
 "slučajevi":1,
 "smrti":0,
 "ažurirano": 1643386814538
}]

API vraća jednostavan niz objekata, pri čemu svaki objekt predstavlja točku podataka s datumom, slučajevima itd.

Postavljanje HTML-a

Za sada ćemo postaviti vrlo jednostavan kostur HTML-a. U konačnici, morat ćete uključiti nekoliko vanjskih resursa, ali ovo je dovoljno za početak:

Slučajevi Covida, SAD

Dohvaćanje podataka pomoću JavaScripta

Započnite tako što ćete jednostavno dobiti podatke iz API-ja i prikazati ih u konzoli preglednika. To će vam pomoći da provjerite možete li dohvatiti s udaljenog poslužitelja i obraditi odgovor. Dodajte sljedeći kod u svoj covid.js datoteka:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
dohvatiti (api)
 .onda (odgovor => odgovor.json())
 .onda (podaci => {
 console.log (podaci);
 });

Dohvati JavaScript API je novija alternativa XMLHttpRequest (pročitajte o tome detaljno na MDN). Koristi Promise što čini asinkrono programiranje s povratnim pozivima malo lakšim. Koristeći ovu paradigmu, možete ulančati nekoliko asinkronih koraka zajedno.

Nakon dohvaćanja potrebnog URL-a, upotrijebite zatim metoda Obećanja za rješavanje slučaja uspjeha. Analizirajte tijelo odgovora kao JSON putem json() metoda.

Povezano: JavaScript funkcije strelice mogu vas učiniti boljim programerom

Od zatim() uvijek vraća Promise, možete nastaviti vezati za svaki korak. U drugom koraku, za sada, jednostavno prijavite podatke na konzolu kako biste ih mogli pregledati:

Moći ćete stupiti u interakciju s objektom prikazanim na konzoli kako biste pregledali podatke iz API-ja. Već ste puno napredovali, pa prijeđite na sljedeći korak kada budete spremni.

Povezano: Otklanjanje pogrešaka u JavaScriptu: prijava na konzolu preglednika

Prikaz podataka pomoću billboard.js

Umjesto zapisivanja podataka, nacrtajmo ih pomoću JavaScript biblioteke. Pripremite se za to ažuriranjem prethodnog koda kako bi izgledao ovako:

dohvatiti (api)
 .onda (odgovor => odgovor.json())
 .onda (podaci => {
 plotData (podaci);
 });
funkcija plotData (podaci) {
}

Koristit ćemo se billboard.js knjižnica koja nam daje jednostavan, interaktivni grafikon. billboard.js je osnovni, ali podržava nekoliko različitih tipova grafikona i omogućuje vam da prilagodite osi, oznake i sve standardne sastojke grafikona.

Morat ćete uključiti tri vanjske datoteke, pa ih dodajte u GLAVU vašeg html-a:

Isprobajte billboard.js s najosnovnijim grafikonom. Dodajte sljedeće na plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 podaci: {
 upišite: "linija",
 stupci: [
 [ "podaci", 10, 40, 20 ]
 ]
 }
});

The bindto svojstvo definira selektor koji identificira ciljni HTML element u kojem se generira grafikon. Podaci su za a crta grafikon, s jednim stupcem. Imajte na umu da je podaci stupca niz koji se sastoji od četiri vrijednosti, pri čemu je prva vrijednost niz koji djeluje kao ime tog podatka ("podaci").

Trebali biste vidjeti grafikon koji izgleda otprilike ovako, s tri vrijednosti u nizu i legendom koja ga označava kao "podaci":

Sve što vam preostaje je koristiti stvarnu podaci iz API-ja na koji već prelazite plotData(). To zahtijeva malo više posla jer ćete ga morati prevesti u odgovarajući format i uputiti billboard.js da sve ispravno prikaže.

Nacrtat ćemo grafikon koji prikazuje cijelu povijest slučaja. Započnite izradom dva stupca, jedan za os x koja sadrži datume, a jedan za stvarni niz podataka koji ćemo iscrtati na grafikonu:

var tipke = data.map (a => a.date),
 slučajevi = podaci.mapa (a => a.slučajevi);
keys.unshift("datumi");
case.unshift("slučajevi");

Preostali rad zahtijeva ugađanje objekta reklamnog panoa.

bb.generate({
 bindto: "#covid-all-us-cases",
 podaci: {
 x: "datumi",
 upišite: "linija",
 stupci: [
 ključevi,
 slučajevima
 ]
 }
});

Također dodajte sljedeće os svojstvo:

 os: {
 x: {
 tip: "kategorija",
 kvačica: {
 broji: 10
 }
 }
 }

To osigurava da os x prikazuje samo 10 datuma tako da su lijepo raspoređeni. Imajte na umu da je konačni rezultat interaktivan. Dok pomičete pokazivač preko grafikona, oglasna ploča prikazuje podatke u skočnom prozoru:

Provjerite izvor za ovaj tracker u GitHub.

Varijacije

Pogledajte kako možete koristiti izvorne podatke na različite načine da promijenite ono što crtate pomoću billboard.js.

Pregled podataka samo za jednu godinu

Cjelokupni grafikon je vrlo zauzet jer sadrži toliko podataka. Jednostavan način smanjenja buke je ograničenje vremenskog razdoblja, na primjer na jednu godinu (GitHub). Da biste to učinili, trebate samo promijeniti jedan redak i ne morate dodirivati plotData uopće funkcionirati; dovoljno je općeniti za rukovanje smanjenim skupom podataka.

U drugom .zatim() nazovi, zamijeni:

plotData (podaci);

S:

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

The filtar() metoda smanjuje niz pozivanjem funkcije na svakoj vrijednosti u nizu. Kada se ta funkcija vrati pravi, zadržava vrijednost. Inače ga odbacuje.

Gornja funkcija vraća true ako je vrijednost datum svojstvo je veće od '2022'. Ovo je jednostavna usporedba nizova, ali radi za format ovih podataka koji je godina-mjesec-dan, vrlo zgodan format.

Pregled podataka s manje granularnosti

Umjesto ograničavanja podataka na samo jednu godinu, drugi način za smanjenje buke je odbacivanje većine, ali zadržavanje podataka iz fiksnog intervala (GitHub). Podaci će tada pokrivati ​​cijelo izvorno razdoblje, ali će ih biti mnogo manje. Očigledan pristup je zadržati samo jednu vrijednost iz svakog tjedna — drugim riječima, svaku sedmu vrijednost.

Standardna tehnika za to je s % (modul) operator. Filtriranjem na modulu 7 svakog indeksa polja koji je jednak 0, zadržat ćemo svaku 7. vrijednost:

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

Imajte na umu da ćete ovaj put morati upotrijebiti alternativni oblik filtar() koji koristi dva argumenta, od kojih drugi predstavlja indeks. Evo rezultata:

Pregled slučajeva i smrti u jednom grafikonu

Na kraju, pokušajte prikazati i slučajeve i smrti na jednom grafikonu (GitHub). Ovaj put ćete morati promijeniti plotData() metoda, ali pristup je uglavnom isti. Ključne promjene su dodavanje novih podataka:

smrti = podaci.mapa (a => a.smrti)
...
stupci = [ ključevi, slučajevi, smrti ]

I podešavanja kako bi se osiguralo da billboard.js ispravno formatira osi. Posebno obratite pažnju na promjene u strukturi podataka koji pripadaju objektu kojemu je proslijeđen bb.generirati:

podaci: {
 x: "datumi",
 stupci: stupci,
 osi: { "slučajevi": "y", "smrti": "y2" },
 vrste: {
 slučajevi: "bar"
 }
}

Sada definirajte više osi za crtanje zajedno s novim tipom specifičnim za slučajevima niz.

Iscrtavanje rezultata API-ja pomoću JavaScripta

Ovaj vodič pokazuje kako koristiti jednostavan API i biblioteku grafikona za izradu osnovnog alata za praćenje COVID-19 u JavaScriptu. API podržava puno drugih podataka s kojima možete raditi za različite zemlje, a također uključuje podatke o pokrivenosti cjepivom.

Možete koristiti širok raspon tipova grafikona billboard.js da biste ga prikazali ili potpuno drugu biblioteku grafikona. Tvoj izbor!

Kako napraviti grafikon s Chart.js

Prikazivanje dinamičkih podataka s JavaScriptom nikada nije bilo lakše.

Pročitajte dalje

O autoru