Kaip sukurti COVID-19 sekiklį naudojant „JavaScript“.

Ieškote greito projekto, skirto žiniatinklio kūrimo įgūdžiams lavinti? Tikriausiai per pandemiją matėte daugybę skirtingų COVID stebėjimo priemonių ir diagramų – štai kaip galite susikurti patys su minimaliomis pastangomis.

Sužinosite keletą naudingų „JavaScript“ metodų, įskaitant tai, kaip gauti nuotolinius duomenis iš API ir kaip naudoti diagramų biblioteką, kad jie būtų rodomi. Įeikime į tai.

Ką statysite

Šis vadovas padės parodyti darbo su API pagrindus naudojant „JavaScript“. Sužinosite, kaip gauti duomenis iš nuotolinio šaltinio. Taip pat pamatysite, kaip naudoti diagramų biblioteką, kad būtų rodomi gauti duomenys.

Visas šiame straipsnyje naudojamas kodas yra a Github saugykla.

Duomenų šaltinio tyrinėjimas

Norėdami gauti naujausius su COVID susijusius duomenis, naudosime liga.sh kuri save apibūdina kaip „Open Disease Data API“.

Ši API yra puiki, nes:

• Jame yra daug skirtingų duomenų šaltinių, kurių kiekvienas siūlo šiek tiek skirtingus formatus
• Tai gerai dokumentuota, ne su pavyzdžiais, bet su daugybe detalių apie tai, kaip kiekvienas iš jų liga.sh galiniai taškai veikia
instagram viewer
• Jis grąžina JSON, su kuriuo lengva dirbti naudojant „JavaScript“.
• Tai visiškai atvira ir nemokama naudoti, nereikia autentifikuoti

Šis paskutinis punktas yra ypač svarbus: daugeliui API reikia atlikti sudėtingą „OpenAuth“ procesą arba jie tiesiog nepasiekiami naršyklėje veikiančiam „JavaScript“.

Šioje mokymo programoje naudosime „New York Times“ duomenys JAV nuo ligų.sh. Šis galutinis taškas apima duomenis iš pandemijos trukmės (nuo 2020 m. sausio 21 d.) tokiu formatu, kurį lengva naudoti. Pažvelkite į kai kuriuos duomenis iš liga.sh baigtis mes naudosime:

Jei esate įpratę dirbti su JSON, galbūt galėsite tai perskaityti be jokių problemų. Štai nedidelė ištrauka lengviau skaitomame išdėstyme:

[{
 "data":"2020-01-21",
 "atvejai": 1,
 "mirtys":0,
 "atnaujinta":1643386814538
},{
 "data":"2020-01-22",
 "atvejai": 1,
 "mirtys":0,
 "atnaujinta":1643386814538
}]

API grąžina paprastą objektų masyvą, kiekvienas objektas vaizduoja duomenų tašką su data, atvejais ir kt.

HTML nustatymas

Kol kas nustatysime labai paprastą HTML skeletą. Galiausiai turėsite įtraukti keletą išorinių išteklių, bet to pakanka, kad galėtumėte pradėti:

Covid atvejai, JAV

Duomenų gavimas naudojant „JavaScript“.

Pradėkite tiesiog gaudami duomenis iš API ir parodydami juos naršyklės konsolėje. Tai padės patikrinti, ar galite gauti iš nuotolinio serverio ir apdoroti atsakymą. Pridėkite šį kodą prie savo covid.js failas:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
gauti (api)
 .then (atsakymas => atsakymas.json())
 .ten (duomenys => {
 console.log (duomenys);
 });

„Fettch JavaScript“ API yra naujesnė XMLHttpRequest alternatyva (išsamiau skaitykite apie tai adresu MDN). Jis naudoja pažadą, kuris palengvina asinchroninį programavimą su atgaliniais skambučiais. Naudodami šią paradigmą galite sujungti kelis asinchroninius veiksmus.

Iškėlę reikiamą URL, naudokite tada Pažado metodas sėkmingai tvarkyti. Išanalizuokite atsakymo turinį kaip JSON per json () metodas.

Susijęs: „JavaScript“ rodyklės funkcijos gali padaryti jus geresniu kūrėju

Nuo tada () visada grąžina pažadą, galite ir toliau pririšti prie kiekvieno žingsnio. Antrame žingsnyje kol kas tiesiog užregistruokite duomenis konsolėje, kad galėtumėte juos patikrinti:

Galėsite sąveikauti su konsolėje rodomu objektu ir peržiūrėti duomenis iš API. Jau padarėte didelę pažangą, todėl pereikite prie kito žingsnio, kai būsite pasiruošę.

Susijęs: Derinimas naudojant „JavaScript“: prisijungimas prie naršyklės konsolės

Duomenų rodymas naudojant billboard.js

Užuot registravę duomenis, pavaizduokime juos naudodami „JavaScript“ biblioteką. Pasiruoškite tam atnaujindami ankstesnį kodą, kad jis atrodytų taip:

gauti (api)
 .then (atsakymas => atsakymas.json())
 .ten (duomenys => {
 plotData (duomenys);
 });
function plotData (duomenys) {
}

Mes naudosime billboard.js biblioteką, kad pateiktume paprastą, interaktyvų grafiką. billboard.js yra pagrindinis, tačiau palaiko keletą skirtingų diagramų tipų ir leidžia tinkinti ašis, etiketes ir visus standartinius diagramos komponentus.

Turėsite įtraukti tris išorinius failus, todėl pridėkite juos prie HTML HEAD:

Išbandykite billboard.js naudodami paprasčiausią diagramą. Pridėkite toliau nurodytus dalykus plotData():

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

The jungiasi prie ypatybė apibrėžia parinkiklį, kuris identifikuoja tikslinį HTML elementą, kuriame bus generuojama diagrama. Duomenys skirti a linija diagrama su vienu stulpeliu. Atminkite, kad stulpelio duomenys yra masyvas, susidedantis iš keturių reikšmių, o pirmoji reikšmė yra eilutė, kuri veikia kaip tų duomenų pavadinimas („duomenys“).

Turėtumėte pamatyti diagramą, kuri atrodo maždaug taip, su trimis serijos reikšmėmis ir legenda, pažymėta kaip „duomenys“:

Viskas, ką jums belieka padaryti, tai naudoti tikrąjį duomenis iš API, į kurią jau pereinate plotData(). Tai reikalauja šiek tiek daugiau darbo, nes turėsite išversti jį į tinkamą formatą ir nurodyti billboard.js, kad viskas būtų rodoma teisingai.

Nubraižysime diagramą, kurioje bus parodyta visa atvejų istorija. Pradėkite sudarydami du stulpelius, vieną x ašiai, kurioje yra datos, ir kitą faktinėms duomenų serijoms, kurias pavaizduosime diagramoje:

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

Likę darbai reikalauja reklaminio skydo objekto patobulinimų.

bb.generate({
 bindto: "#covid-all-us-cases",
 duomenys: {
 x: "datos",
 tipas: "linija",
 stulpeliai: [
 raktai,
 atvejų
 ]
 }
});

Taip pat pridėkite toliau pateiktą informaciją ašį nuosavybė:

 ašis: {
 x: {
 tipas: "kategorija",
 varnele: {
 skaičius: 10
 }
 }
 }

Tai užtikrina, kad x ašyje bus rodoma tik 10 datų, todėl jos yra gražiai išdėstytos. Atminkite, kad galutinis rezultatas yra interaktyvus. Kai perkeliate žymeklį ant diagramos, skelbimų lentoje iššokančiajame lange rodomi duomenys:

Patikrinkite šio stebėjimo priemonės šaltinį GitHub.

Variacijos

Pažiūrėkite, kaip galite įvairiais būdais naudoti šaltinio duomenis, kad pakeistumėte tai, ką nubraižote naudodami billboard.js.

Tik vienerių metų duomenų peržiūra

Bendra diagrama yra labai užimta, nes joje yra tiek daug duomenų. Paprastas būdas sumažinti triukšmą yra apriboti laikotarpį, pavyzdžiui, iki vienerių metų (GitHub). Jums tereikia pakeisti vieną eilutę, kad tai padarytumėte, ir jums nereikia liesti plotData funkcija apskritai; tai pakankamai bendra, kad būtų galima apdoroti sumažintą duomenų rinkinį.

Antrajame .tada () skambinti, pakeisti:

plotData (duomenys);

Su:

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

The filtras() metodas sumažina masyvą, iškviesdamas kiekvienos masyvo reikšmės funkciją. Kai ta funkcija grįš tiesa, išlaiko vertę. Priešingu atveju jis jį išmeta.

Aukščiau pateikta funkcija grąžina true, jei reikšmė yra data turtas yra didesnis nei „2022“. Tai paprastas eilučių palyginimas, tačiau jis tinka šių duomenų formatui, kuris yra metai-mėnuo-diena, labai patogus formatas.

Duomenų peržiūra su mažesniu detalumu

Užuot apribojus duomenis iki vienerių metų, kitas triukšmo mažinimo būdas yra išmesti didžiąją jų dalį, bet išsaugoti duomenis iš fiksuoto intervalo (GitHub). Tada duomenys apims visą pradinį laikotarpį, tačiau jų bus daug mažiau. Akivaizdus požiūris yra tiesiog išlaikyti vieną vertę iš kiekvienos savaitės, kitaip tariant, kas septintą vertę.

Standartinis būdas tai padaryti yra su % (modulio) operatorius. Filtruodami pagal kiekvieno masyvo indekso 7 modulį, lygų 0, išsaugosime kas 7 reikšmę:

plotData (duomenys.filter((a, indeksas) => indeksas % 7 == 0));

Atminkite, kad šį kartą turėsite naudoti alternatyvią formą filtras() kuriame naudojami du argumentai, antrasis reiškia indeksą. Štai rezultatas:

Atvejų ir mirčių peržiūra vienoje diagramoje

Galiausiai pabandykite parodyti atvejus ir mirtis vienoje diagramoje (GitHub). Šį kartą turėsite pakeisti plotData() metodas, tačiau metodas iš esmės yra tas pats. Pagrindiniai pakeitimai yra naujų duomenų pridėjimas:

mirtys = data.map (a => a.deaths)
...
stulpeliai = [ raktai, atvejai, mirtys ]

Ir patobulinimai, siekiant užtikrinti, kad billboard.js teisingai suformatuotų ašis. Visų pirma atkreipkite dėmesį į duomenų struktūros pakeitimus, priklausančius objektui, kuris buvo perduotas bb.generuoti:

duomenys: {
 x: "datos",
 stulpeliai: stulpeliai,
 ašys: { "atvejai": "y", "mirtys": "y2" },
 tipai: {
 atvejai: "baras"
 }
}

Dabar apibrėžkite kelias ašis, kurias norite braižyti, kartu su nauju tipu atvejų serija.

API rezultatų braižymas naudojant JavaScript

Šioje mokymo programoje parodyta, kaip naudoti paprastą API ir diagramų biblioteką kuriant pagrindinį COVID-19 stebėjimo priemonę „JavaScript“. API palaiko daugybę kitų duomenų, su kuriais galite dirbti įvairiose šalyse, taip pat apima duomenis apie vakcinų aprėptį.

Galite naudoti platų billboard.js diagramų tipų asortimentą, kad jį parodytumėte, arba visai kitą diagramų biblioteką. Tavo pasirinkimas!

Kaip sudaryti diagramą naudojant Chart.js

Dinaminius duomenis rodyti naudojant „JavaScript“ dar niekada nebuvo taip paprasta.

Skaitykite toliau

Apie autorių