Kuidas luua JavaScriptis COVID-19 jälgija

Kas otsite kiiret projekti oma veebiarenduse oskuste harjutamiseks? Tõenäoliselt olete pandeemia ajal näinud palju erinevaid COVID-jälgimisseadmeid ja -tabeleid – siin on, kuidas minimaalse vaevaga ise luua.

Saate teada mõningaid kasulikke JavaScripti tehnikaid, sealhulgas seda, kuidas hankida API-st kaugandmeid ja kuidas kasutada nende kuvamiseks diagrammiteeki. Lähme sellesse.

Mida te ehitate

See juhend aitab tutvustada JavaScripti kasutava API-ga töötamise põhitõdesid. Saate teada, kuidas tuua andmeid kaugallikast. Samuti näete, kuidas kasutada toodud andmete kuvamiseks diagrammiteeki.

Kõik selles artiklis kasutatud kood on saadaval a Github hoidla.

Andmeallika uurimine

Värskeimate COVID-iga seotud andmete saamiseks kasutame haigus.sh mis kirjeldab end kui "Open Disease Data API".

See API on suurepärane, kuna:

• Sellel on palju erinevaid andmeallikaid, millest igaüks pakub veidi erinevat vormingut
• See on hästi dokumenteeritud, mitte näidetega, vaid rohkete üksikasjadega selle kohta, kuidas iga haigus.sh lõpp-punktid töötavad
instagram viewer
• See tagastab JSON-i, millega on JavaScripti abil lihtne töötada
• See on täiesti avatud ja tasuta kasutatav, autentimist pole vaja

See viimane punkt on eriti oluline: paljud API-d nõuavad keeruka OpenAuthi protsessi läbimist või pole need lihtsalt brauseris töötavale JavaScriptile saadaval.

Selle õpetuse jaoks kasutame New York Timesi andmed USA jaoks haigusest.sh. See lõpp-punkt sisaldab andmeid pandeemia kestuse kohta (alates 21. jaanuarist 2020) vormingus, millega on lihtne töötada. Heitke pilk mõningatele andmetele haigus.sh lõpp-punkt me kasutame:

Kui olete harjunud JSON-iga tegelema, saate seda võib-olla ilma probleemideta lugeda. Siin on väike väljavõte loetavamas paigutuses:

[{
 "kuupäev":"2020-01-21",
 "juhtumid":1,
 "surmad":0,
 "uuendatud":1643386814538
},{
 "kuupäev":"2020-01-22",
 "juhtumid":1,
 "surmad":0,
 "uuendatud":1643386814538
}]

API tagastab lihtsa objektide massiivi, kus iga objekt tähistab andmepunkti koos kuupäeva, juhtumite jne.

HTML-i seadistamine

Praegu seadistame väga lihtsa HTML-i skeleti. Lõppkokkuvõttes peate kaasama mõned välised ressursid, kuid sellest piisab alustamiseks.

Covidi juhtumid, USA

Andmete toomine JavaScripti abil

Alustage lihtsalt andmete hankimisest API-st ja kuvades need brauseri konsoolis. See aitab teil kontrollida, kas saate kaugserverist laadida ja vastust töödelda. Lisage omale järgmine kood covid.js fail:

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

Fetch JavaScript API on XMLHttpRequesti uuem alternatiiv (selle kohta lugege üksikasjalikult aadressilt MDN). See kasutab lubadust, mis muudab asünkroonse programmeerimise koos tagasihelistamisega pisut lihtsamaks. Seda paradigmat kasutades saate aheldada mitu asünkroonset sammu.

Pärast nõutava URL-i toomist kasutage siis Lubaduse meetod edujuhtumi käsitlemiseks. Parsige vastuse keha JSON-i kaudu json() meetod.

Seotud: JavaScripti noolefunktsioonid võivad muuta teid paremaks arendajaks

Alates siis () tagastab alati lubaduse, saate iga sammu haldamiseks aheldamist jätkata. Teises etapis logige praegu lihtsalt andmed konsooli, et saaksite neid kontrollida:

Saate konsoolis kuvatava objektiga suhelda, et API andmeid kontrollida. Olete juba teinud palju edusamme, nii et kui olete valmis, liikuge järgmise sammu juurde.

Seotud: Silumine JavaScriptis: brauseri konsooli logimine

Andmete kuvamine kasutades billboard.js

Andmete logimise asemel joonistagem need JavaScripti teegi abil. Valmistuge selleks, värskendades eelmist koodi, et see näeks välja järgmine:

too (api)
 .then (vastus => vastus.json())
 .then (andmed => {
 plotData (andmed);
 });
function plotData (andmed) {
}

Me kasutame billboard.js raamatukogu, et anda meile lihtne interaktiivne graafik. billboard.js on põhiline, kuid see toetab mõnda erinevat diagrammitüüpi ja võimaldab kohandada telgi, silte ja kõiki diagrammi standardseid koostisosi.

Peate lisama kolm välist faili, seega lisage need oma HTML-i HEAD-i:

Proovige billboard.js-i kõige elementaarsema diagrammiga. Lisage järgmine plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 andmed: {
 tüüp: "rida",
 veerud: [
 [ "andmed", 10, 40, 20]
 ]
 }
});

The siduda atribuut määrab valija, mis tuvastab HTML-i sihtelemendi, milles diagramm luuakse. Andmed on a rida diagramm ühe veeruga. Pange tähele, et veeruandmed on massiiv, mis koosneb neljast väärtusest, kusjuures esimene väärtus on string, mis toimib andmete nimena ("andmed").

Peaksite nägema diagrammi, mis näeb välja umbes selline, millel on seerias kolm väärtust ja legend, mis märgib selle kui "andmed":

Kõik, mis teil teha jääb, on kasutada tegelikku andmed API-st, millesse te juba sisenete plotData(). See nõuab veidi rohkem tööd, sest peate selle sobivasse vormingusse tõlkima ja andma käsule billboard.js kõike õigesti kuvama.

Koostame diagrammi, mis näitab juhtumite täielikku ajalugu. Alustage kahe veeru loomisega, millest üks on x-telje jaoks, mis sisaldab kuupäevi, ja teine ​​​​tegeliku andmeseeria jaoks, mille me graafikule joonistame:

var keys = data.map (a => a.date),
 juhtumid = data.map (a => a.cases);
keys.unshift("kuupäevad");
case.unshift("cases");

Ülejäänud töö nõuab stendiobjekti näpunäiteid.

bb.generate({
 bindto: "#covid-all-us-cases",
 andmed: {
 x: "kuupäevad",
 tüüp: "rida",
 veerud: [
 võtmed,
 juhtudel
 ]
 }
});

Lisage ka järgmine telg vara:

 telg: {
 x: {
 tüüp: "kategooria",
 linnuke: {
 arv: 10
 }
 }
 }

See tagab, et x-teljel kuvatakse vaid 10 kuupäeva, nii et need on kenasti paigutatud. Pange tähele, et lõpptulemus on interaktiivne. Kui liigutate kursorit graafiku kohal, kuvab stend andmed hüpikaknas:

Vaadake selle jälgija allikat GitHub.

Variatsioonid

Vaadake, kuidas saate lähteandmeid erinevatel viisidel kasutada, et muuta seda, mida billboard.js-i abil joonistate.

Andmete vaatamine ainult ühe aasta kohta

Üldine diagramm on väga hõivatud, kuna see sisaldab nii palju andmeid. Lihtne viis müra vähendamiseks on ajaperioodi piiramine, näiteks ühe aastaga (GitHub). Selleks peate lihtsalt muutma ühte rida ja te ei pea puudutama plotData funktsioon üldse; see on piisavalt üldine, et käsitleda vähendatud andmekogumit.

Teises .then() helista, asenda:

plotData (andmed);

Koos:

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

The filter() meetod vähendab massiivi, kutsudes välja iga massiivi väärtuse funktsiooni. Kui see funktsioon naaseb tõsi, see hoiab väärtust. Vastasel juhul viskab see selle ära.

Ülaltoodud funktsioon tagastab tõese, kui väärtus on kuupäev vara on suurem kui "2022". See on lihtne stringide võrdlus, kuid see töötab nende andmete vormingu puhul, mis on aasta-kuu-päev, väga mugav vorming.

Andmete vaatamine väiksema detailsusega

Selle asemel, et piirata andmeid ainult ühe aastaga, on teine ​​viis müra vähendamiseks loobuda enamikust andmetest, kuid säilitada andmed kindla intervalliga (GitHub). Andmed katavad siis kogu algse perioodi, kuid neid on palju vähem. Ilmselge lähenemine on jätta igast nädalast üks väärtus – teisisõnu iga seitsmes väärtus.

Standardtehnika selle tegemiseks on koos % (mooduli) operaator. Filtreerides iga massiiviindeksi mooduli 7 järgi, mis võrdub nulliga, säilitame iga seitsmenda väärtuse:

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

Pange tähele, et seekord peate kasutama alternatiivset vormi filter() mis kasutab kahte argumenti, millest teine ​​esindab indeksit. Siin on tulemus:

Juhtumite ja surmajuhtumite kuvamine ühel graafikul

Lõpuks proovige kuvada nii juhtumid kui ka surmajuhtumid ühel diagrammil (GitHub). Seekord peate muutma plotData() meetod, kuid lähenemisviis on põhiliselt sama. Peamised muudatused on uute andmete lisamine:

surmad = andmed.kaart (a => a.surmad)
...
veerud = [ võtmed, juhtumid, surmad ]

Ja näpunäiteid tagamaks, et billboard.js vormindaks teljed õigesti. Pöörake tähelepanu eelkõige muudatustele, mis on antud objektile kuuluvas andmestruktuuris bb.generate:

andmed: {
 x: "kuupäevad",
 veerud: veerud,
 teljed: { "juhtumid": "y", "surmad": "y2" },
 tüübid: {
 juhtumid: "baar"
 }
}

Nüüd määrake joonistamiseks mitu telge koos uue tüübiga, mis on spetsiifiline juhtudel seeria.

API tulemuste joonistamine JavaScripti abil

See õpetus näitab, kuidas kasutada lihtsat API-d ja diagrammiteeki, et luua põhiline COVID-19 jälgija JavaScriptis. API toetab paljusid muid andmeid, millega saate eri riikide jaoks töötada, ja sisaldab ka andmeid vaktsiiniga hõlmatuse kohta.

Saate selle kuvamiseks kasutada laia valikut billboard.js diagrammitüüpe või hoopis teistsugust diagrammiteeki. Valik on sinu!

Kuidas koostada diagrammi rakendusega Chart.js

Dünaamiliste andmete kuvamine JavaScriptiga pole kunagi olnud lihtsam.

Loe edasi

Autori kohta