Kuinka rakentaa COVID-19-seuranta JavaScriptissä

Etsitkö nopeaa projektia web-kehittämistaitojen harjoittelemiseksi? Olet luultavasti nähnyt monia erilaisia ​​COVID-seurantalaitteita ja -kaavioita koko pandemian aikana – näin voit tehdä omasi pienellä vaivalla.

Opit hyödyllisiä JavaScript-tekniikoita, kuten etätietojen hakemisen API: sta ja kaaviokirjaston käyttämisen niiden näyttämiseen. Mennään asiaan.

Mitä tulet rakentamaan

Tämä opas auttaa esittelemään JavaScriptiä käyttävän API: n käytön perusteet. Opit hakemaan tietoja etälähteestä. Näet myös, kuinka kaaviokirjastoa käytetään haettujen tietojen näyttämiseen.

Kaikki tässä artikkelissa käytetty koodi on saatavilla a Github arkisto.

Tietolähteen tutkiminen

Saadaksemme uusimmat COVID-luvut käytämme sairaus.sh joka kuvaa itseään "Open Disease Data API: ksi".

Tämä API on erinomainen, koska:

• Sillä on monia erilaisia ​​tietolähteitä, joista jokainen tarjoaa hieman erilaisia ​​muotoja
• Se on hyvin dokumentoitu, ei esimerkkejä, mutta runsaasti yksityiskohtia siitä, kuinka kukin niistä sairaus.sh päätepisteet toimivat
instagram viewer
• Se palauttaa JSONin, jonka kanssa on helppo työskennellä JavaScriptistä
• Se on täysin avoin ja ilmainen käyttää, todennusta ei vaadita

Tämä viimeinen kohta on erityisen tärkeä: monet API: t vaativat monimutkaisen OpenAuth-prosessin, tai ne eivät yksinkertaisesti ole käytettävissä selaimessa ajettavalle JavaScriptille.

Tässä opetusohjelmassa käytämme New York Timesin tiedot USA: lle sairaudesta.sh. Tämä päätepiste sisältää tiedot pandemian keston ajalta (21.1.2020 alkaen) muodossa, jota on helppo käsitellä. Katso joitain tietoja kohteesta sairaus.sh päätepiste käytämme:

Jos olet tottunut käsittelemään JSON: ia, saatat pystyä lukemaan sen ilman ongelmia. Tässä pieni ote luettavammassa asettelussa:

[{
 "date":"2020-01-21",
 "tapaukset":1,
 "kuolemat":0,
 "päivitetty":1643386814538
},{
 "date":"2020-01-22",
 "tapaukset":1,
 "kuolemat":0,
 "päivitetty":1643386814538
}]

API palauttaa yksinkertaisen objektijoukon, joista jokainen edustaa datapistettä päivämäärän, tapausten jne. kanssa.

HTML: n asettaminen

Toistaiseksi määritämme hyvin yksinkertaisen HTML-rungon. Viime kädessä sinun on sisällytettävä muutamia ulkoisia resursseja, mutta tämä riittää aloittamiseen:

Covid-tapaukset, Yhdysvallat

Tietojen hakeminen JavaScriptin avulla

Aloita hankkimalla tiedot API: sta ja näyttämällä ne selainkonsolissa. Tämä auttaa sinua varmistamaan, että voit hakea etäpalvelimelta ja käsitellä vastauksen. Lisää seuraava koodi omaan covid.js tiedosto:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
hae (api)
 .then (response => vastaus.json())
 .then (data => {
 console.log (data);
 });

Fetch JavaScript API on uudempi vaihtoehto XMLHttpRequestille (lue siitä tarkemmin osoitteessa MDN). Se käyttää Promisea, joka helpottaa asynkronista ohjelmointia takaisinsoittojen kanssa. Tämän paradigman avulla voit ketjuttaa useita asynkronisia vaiheita yhteen.

Kun olet hakenut vaaditun URL-osoitteen, käytä sitten Menestystapaus käsittelee lupauksen menetelmää. Jäsennä vastauksen runko JSON-muodossa -sovelluksen kautta json() menetelmä.

Aiheeseen liittyvä: JavaScript-nuolitoiminnot voivat tehdä sinusta paremman kehittäjän

Siitä asti kun sitten() palauttaa aina lupauksen, voit jatkaa ketjutusta hoitaaksesi jokaisen vaiheen. Toisessa vaiheessa kirjaa tiedot konsoliin, jotta voit tarkistaa ne:

Voit olla vuorovaikutuksessa konsolissa näkyvän objektin kanssa ja tarkastella tietoja API: sta. Olet jo edistynyt paljon, joten siirry seuraavaan vaiheeseen, kun olet valmis.

Aiheeseen liittyvä: Vianetsintä JavaScriptissä: kirjautuminen selainkonsoliin

Tietojen näyttäminen billboard.js: n avulla

Tietojen kirjaamisen sijaan piirretään ne JavaScript-kirjaston avulla. Valmistaudu tähän päivittämällä edellinen koodi tältä:

hae (api)
 .then (response => vastaus.json())
 .then (data => {
 plotData (data);
 });
function plotData (data) {
}

Käytämme billboard.js kirjasto antaa meille yksinkertaisen, interaktiivisen kaavion. billboard.js on perusversio, mutta se tukee muutamia eri kaaviotyyppejä, ja sen avulla voit mukauttaa akseleita, tarroja ja kaikkia kaavion vakiokomponentteja.

Sinun on sisällytettävä kolme ulkoista tiedostoa, joten lisää nämä HTML-koodisi HEAD-kohtaan:

Kokeile billboard.js: ää yksinkertaisimmalla kaaviolla. Lisää seuraavaan plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 tiedot: {
 tyyppi: "linja",
 sarakkeet: [
 [ "data", 10, 40, 20 ]
 ]
 }
});

The sitoa ominaisuus määrittää valitsimen, joka identifioi kohde-HTML-elementin, jossa kaavio luodaan. Tiedot koskevat a linja kaavio, jossa on yksi sarake. Huomaa, että saraketiedot ovat neljästä arvosta koostuva matriisi, joista ensimmäinen arvo on merkkijono, joka toimii tiedon nimenä ("data").

Sinun pitäisi nähdä kaavio, joka näyttää vähän tältä, jossa on kolme arvoa sarjassa ja selite, joka merkitsee sen "dataksi":

Sinun ei tarvitse tehdä muuta kuin käyttää todellista tiedot sovellusliittymästä, johon olet jo siirtymässä plotData(). Tämä vaatii hieman enemmän työtä, koska sinun täytyy kääntää se sopivaan muotoon ja ohjeistaa billboard.js näyttämään kaikki oikein.

Piirrämme kaavion, joka näyttää koko tapaushistorian. Aloita rakentamalla kaksi saraketta, yksi x-akselille, joka sisältää päivämäärät, ja toinen varsinaisille datasarjoille, jotka piirretään kaavioon:

var keys = data.map (a => a.date),
 caset = data.map (a => a.cases);
keys.unshift("päivämäärät");
case.unshift("tapaukset");

Jäljellä oleva työ vaatii muokkausta mainostauluobjektiin.

bb.generate({
 bindto: "#covid-all-us-cases",
 tiedot: {
 x: "päivämäärät",
 tyyppi: "linja",
 sarakkeet: [
 avaimet,
 tapauksia
 ]
 }
});

Lisää myös seuraavat akseli omaisuus:

 akseli: {
 x: {
 tyyppi: "luokka",
 puutiainen: {
 määrä: 10
 }
 }
 }

Tämä varmistaa, että x-akseli näyttää vain 10 päivämäärää, joten ne ovat kauniisti sijoitettuina. Huomaa, että lopputulos on interaktiivinen. Kun siirrät osoittimen kaavion päälle, mainostaulu näyttää tiedot ponnahdusikkunassa:

Tarkista tämän seurantaohjelman lähde GitHub.

Muunnelmat

Katso, kuinka voit käyttää lähdetietoja eri tavoilla muuttaaksesi sitä, mitä kuvaat Billboard.js: n avulla.

Tietojen katselu vain yhdeltä vuodelta

Kokonaiskaavio on erittäin kiireinen, koska se sisältää niin paljon dataa. Yksinkertainen tapa vähentää melua on rajoittaa ajanjaksoa esimerkiksi yhteen vuoteen (GitHub). Sinun tarvitsee vain vaihtaa yksi rivi tehdäksesi tämän, eikä sinun tarvitse koskea plotData toimi ollenkaan; se on tarpeeksi yleistä käsittelemään rajoitettua datajoukkoa.

Toisessa .sitten() soita, vaihda:

plotData (data);

Kanssa:

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

The suodattaa() menetelmä pienentää taulukkoa kutsumalla funktion jokaiselle taulukon arvolle. Kun funktio palaa totta, se säilyttää arvon. Muuten se hylkää sen.

Yllä oleva funktio palauttaa tosi, jos arvo on Päivämäärä omaisuus on suurempi kuin "2022". Tämä on yksinkertainen merkkijonovertailu, mutta se toimii näiden tietojen muodossa, joka on vuosi-kuukausi-päivä, erittäin kätevä muoto.

Tietojen katselu pienemmällä tarkkuudella

Sen sijaan, että rajoittaisit tiedot vain yhteen vuoteen, toinen tapa vähentää melua on hylätä suurin osa niistä, mutta säilyttää tiedot tietyltä aikaväliltä (GitHub). Tällöin tiedot kattavat koko alkuperäisen ajanjakson, mutta niitä on paljon vähemmän. Ilmeinen lähestymistapa on pitää vain yksi arvo jokaisesta viikosta – toisin sanoen joka seitsemäs arvo.

Tavallinen tekniikka tämän tekemiseen on % (moduuli) -operaattori. Suodattamalla jokaisen taulukon indeksin moduulin 7, joka on yhtä suuri kuin 0, säilytämme joka 7. arvon:

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

Huomaa, että tällä kertaa sinun on käytettävä vaihtoehtoista muotoa suodattaa() joka käyttää kahta argumenttia, joista toinen edustaa indeksiä. Tässä tulos:

Tapausten ja kuolemantapausten tarkastelu yhdessä kaaviossa

Yritä lopuksi näyttää sekä tapaukset että kuolemat yhdessä kaaviossa (GitHub). Tällä kertaa sinun on vaihdettava plotData() menetelmällä, mutta lähestymistapa on pääosin sama. Tärkeimmät muutokset ovat uusien tietojen lisääminen:

kuolemat = data.map (a => a.deaths)
...
sarakkeet = [ avaimet, tapaukset, kuolemat ]

Ja säätöjä varmistaakseen, että billboard.js muotoilee akselit oikein. Huomioi erityisesti muutokset kohteen tietorakenteeseen, jolle välitettiin bb.generate:

tiedot: {
 x: "päivämäärät",
 sarakkeet: sarakkeet,
 akselit: { "tapaukset": "y", "kuolemat": "y2" },
 tyypit: {
 tapaukset: "baari"
 }
}

Määritä nyt useat piirrettävät akselit yhdessä uuden tyypin kanssa tapauksia sarja.

API-tulosten piirtäminen JavaScriptin avulla

Tämä opetusohjelma näyttää, kuinka yksinkertaisen API: n ja kaaviokirjaston avulla voidaan luoda perus COVID-19-seuranta JavaScriptissä. API tukee monia muita tietoja, joita voit käyttää eri maiden osalta, ja sisältää myös tiedot rokotteiden kattavuudesta.

Voit käyttää laajaa valikoimaa billboard.js-kaaviotyyppejä sen näyttämiseen tai kokonaan erilaista kaaviokirjastoa. Päätös on sinun!

Kaavion tekeminen Chart.js: n avulla

Dynaamisten tietojen näyttäminen JavaScriptillä ei ole koskaan ollut helpompaa.

Lue Seuraava

Kirjailijasta