Kako zgraditi sledilnik COVID-19 v JavaScriptu

Iščete hiter projekt za vadbo svojih veščin spletnih razvijalcev? Verjetno ste v času pandemije videli veliko različnih sledilcev in grafikonov COVID – tukaj je, kako narediti svoje z minimalnim naporom.

Naučili se boste nekaj uporabnih tehnik v JavaScriptu, vključno s tem, kako pridobiti oddaljene podatke iz API-ja in kako uporabiti knjižnico grafikonov za njihovo prikazovanje. Pojdimo v to.

Kaj boste gradili

Ta priročnik vam bo pomagal prikazati osnove dela z API-jem z uporabo JavaScript. Naučili se boste pridobiti podatke iz oddaljenega vira. Videli boste tudi, kako uporabiti knjižnico grafikonov za prikaz pridobljenih podatkov.

Vsa koda, uporabljena v tem članku, je na voljo v a Github repozitorij.

Raziskovanje vira podatkov

Za pridobitev najnovejših podatkov o COVID-u bomo uporabili bolezen.sh ki se opisuje kot »API za odprte podatke o boleznih«.

Ta API je odličen, ker:

• Ima veliko različnih virov podatkov, od katerih vsak ponuja nekoliko drugačne oblike
• Dobro je dokumentiran, ne s primeri, ampak z veliko podrobnostmi o tem, kako vsak od njih bolezen.sh končne točke delujejo
instagram viewer
• Vrne JSON, s katerim je enostavno delati iz JavaScripta
• Je popolnoma odprt in brezplačen za uporabo, preverjanje pristnosti ni potrebno

Ta zadnja točka je še posebej pomembna: mnogi API-ji zahtevajo, da greste skozi zapleten postopek OpenAuth ali pa preprosto niso na voljo za JavaScript, ki se izvaja v brskalniku.

Za to vadnico bomo uporabili Podatki New York Timesa za ZDA od bolezni.sh. Ta končna točka vključuje podatke o trajanju pandemije (od 21. januarja 2020) v obliki, s katero je enostavno delati. Oglejte si nekaj podatkov iz bolezen.sh končna točka uporabljali bomo:

Če ste navajeni delati z JSON, ga boste morda lahko prebrali brez težav. Tukaj je majhen odlomek v bolj berljivi postavitvi:

[{
 "datum": "2020-01-21",
 "primeri": 1,
 "smrti":0,
 "posodobljeno": 1643386814538
},{
 "datum": "2020-01-22",
 "primeri": 1,
 "smrti":0,
 "posodobljeno": 1643386814538
}]

API vrne preprost niz predmetov, pri čemer vsak predmet predstavlja podatkovno točko z datumom, primeri itd.

Nastavitev HTML-ja

Za zdaj bomo postavili nekaj zelo preprostega okostja HTML. Navsezadnje boste morali vključiti nekaj zunanjih virov, vendar je to dovolj za začetek:

Primeri Covida, ZDA

Pridobivanje podatkov z uporabo JavaScripta

Začnite tako, da preprosto pridobite podatke iz API-ja in jih prikažete v konzoli brskalnika. To vam bo pomagalo preveriti, ali lahko pridobite z oddaljenega strežnika in obdelate odgovor. Dodajte naslednjo kodo v svoj covid.js mapa:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
pridobiti (api)
 .potem (odziv => odgovor.json())
 .potem (podatki => {
 console.log (podatki);
 });

API Fetch JavaScript je novejša alternativa XMLHttpRequest (preberite o tem podrobno na MDN). Uporablja Promise, ki olajša asinhrono programiranje s povratnimi klici. S to paradigmo lahko povežete več asinhronih korakov skupaj.

Ko pridobite zahtevani URL, uporabite potem metoda Promise za obravnavo primera uspeha. Telo odgovora razčlenite kot JSON prek json() metoda.

Povezano: Puščične funkcije JavaScript vas lahko naredijo boljšega razvijalca

Od potem () vedno vrne Promise, lahko nadaljujete z veriženjem za obdelavo vsakega koraka. V drugem koraku za zdaj preprosto prijavite podatke v konzolo, da jih lahko pregledate:

Lahko boste komunicirali s predmetom, prikazanim v konzoli, da bi pregledali podatke iz API-ja. Veliko ste že napredovali, zato pojdite na naslednji korak, ko boste pripravljeni.

Povezano: Odpravljanje napak v JavaScriptu: prijava v konzolo brskalnika

Prikaz podatkov z uporabo billboard.js

Namesto beleženja podatkov jih narišemo s pomočjo knjižnice JavaScript. Pripravite se na to tako, da posodobite prejšnjo kodo, da bo izgledala takole:

pridobiti (api)
 .potem (odziv => odgovor.json())
 .potem (podatki => {
 plotData (podatki);
 });
funkcija plotData (podatki) {
}

Uporabili bomo billboard.js knjižnici, da nam ponudi preprost, interaktiven graf. billboard.js je osnovni, vendar podpira nekaj različnih vrst grafikonov in vam omogoča prilagajanje osi, nalepk in vseh standardnih sestavin grafikona.

Vključiti boste morali tri zunanje datoteke, zato jih dodajte v GLAVO svojega html-ja:

Preizkusite billboard.js z najosnovnejšim grafikonom. Dodajte naslednje v plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 podatki: {
 tip: "linija",
 stolpci: [
 [ "podatki", 10, 40, 20 ]
 ]
 }
});

The bindto Lastnost definira izbirnik, ki identificira ciljni element HTML, v katerem se ustvari grafikon. Podatki so za a vrstico grafikon z enim stolpcem. Upoštevajte, da so podatki stolpca matrika, sestavljena iz štirih vrednosti, pri čemer je prva vrednost niz, ki deluje kot ime tega podatka (»podatki«).

Videti bi morali grafikon, ki je videti takole, s tremi vrednostmi v nizu in legendo, ki jo označuje kot »podatki«:

Vse, kar vam preostane, je, da uporabite dejansko podatkov iz API-ja, v katerega že prehajate plotData(). To zahteva malo več dela, ker ga boste morali prevesti v ustrezno obliko in naročiti billboard.js, da vse prikaže pravilno.

Narisali bomo grafikon, ki prikazuje celotno zgodovino primera. Začnite z izdelavo dveh stolpcev, enega za os x, ki vsebuje datume, in enega za dejanske serije podatkov, ki jih bomo narisali na grafu:

ključi var = data.map (a => a.date),
 primeri = podatki.zemljevid (a => a.primeri);
keys.unshift("datum");
case.unshift("primeri");

Preostalo delo zahteva prilagoditve predmeta panoja.

bb.generate({
 bindto: "#covid-all-us-cases",
 podatki: {
 x: "datum",
 tip: "linija",
 stolpci: [
 ključi,
 primerih
 ]
 }
});

Dodajte tudi naslednje osi lastnina:

 os: {
 x: {
 tip: "kategorija",
 kljukica: {
 štetje: 10
 }
 }
 }

To zagotavlja, da os x prikaže samo 10 datumov, tako da so lepo razporejeni. Upoštevajte, da je končni rezultat interaktiven. Ko premaknete kazalec nad graf, pano prikaže podatke v pojavnem oknu:

Preverite vir za ta sledilnik GitHub.

Različice

Oglejte si, kako lahko izvorne podatke uporabite na različne načine, da spremenite, kar narišete z uporabo billboard.js.

Ogled podatkov samo za eno leto

Celoten grafikon je zelo zaseden, ker vsebuje toliko podatkov. Preprost način za zmanjšanje hrupa je omejitev časovnega obdobja, na primer na eno leto (GitHub). Če želite to narediti, morate spremeniti samo eno vrstico in se vam ni treba dotikati plotData sploh deluje; dovolj je splošen za obdelavo zmanjšanega nabora podatkov.

V drugem .potem () pokliči, zamenjaj:

plotData (podatki);

z:

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

The filter() metoda zmanjša matriko tako, da pokliče funkcijo za vsako vrednost v matriki. Ko se ta funkcija vrne prav, ohranja vrednost. V nasprotnem primeru ga zavrže.

Zgornja funkcija vrne true, če je vrednost datum lastnost je večja od »2022«. To je preprosta primerjava nizov, vendar deluje za obliko teh podatkov, ki je leto-mesec-dan, zelo priročna oblika.

Ogled podatkov z manj natančnosti

Namesto da bi podatke omejili na samo eno leto, je drug način za zmanjšanje hrupa zavreči večino le-teh, vendar ohraniti podatke iz določenega intervala (GitHub). Podatki bodo potem zajemali celotno prvotno obdobje, vendar ga bo veliko manj. Očiten pristop je, da ohranite samo eno vrednost iz vsakega tedna – z drugimi besedami, vsako sedmo vrednost.

Standardna tehnika za to je z % (modul) operater. S filtriranjem po modulu 7 vsakega indeksa matrike, ki je enak 0, bomo ohranili vsako 7. vrednost:

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

Upoštevajte, da boste tokrat morali uporabiti alternativno obliko filter() ki uporablja dva argumenta, drugi predstavlja indeks. Tukaj je rezultat:

Ogled primerov in smrti v enem grafu

Nazadnje poskusite prikazati tako primere kot smrti na enem grafikonu (GitHub). Tokrat boste morali spremeniti plotData() metodo, vendar je pristop v glavnem enak. Ključne spremembe so dodajanje novih podatkov:

smrti = podatki.zemljevid (a => a.smrti)
...
stolpci = [ ključi, primeri, smrti ]

In prilagoditve za zagotovitev, da billboard.js pravilno formatira osi. Upoštevajte zlasti spremembe v strukturi podatkov, ki pripadajo predmetu, ki mu je bil posredovan bb.generiraj:

podatki: {
 x: "datum",
 stolpci: stolpci,
 osi: { "primeri": "y", "smrti": "y2" },
 vrste: {
 primeri: "bar"
 }
}

Zdaj definirajte več osi, ki jih želite narisati, skupaj z novo vrsto, značilno za primerih serija.

Izris rezultatov API-ja z uporabo JavaScripta

Ta vadnica prikazuje, kako uporabiti preprost API in knjižnico grafikonov za izdelavo osnovnega sledilnika COVID-19 v JavaScriptu. API podpira veliko drugih podatkov, s katerimi lahko delate za različne države, in vključuje tudi podatke o pokritosti s cepivi.

Za prikaz lahko uporabite široko paleto vrst grafikonov billboard.js ali popolnoma drugo knjižnico grafikonov. Izbira je vaša!

Kako narediti grafikon z Chart.js

Prikazovanje dinamičnih podatkov z JavaScriptom še nikoli ni bilo lažje.

Preberite Naprej

O avtorju