Kā izveidot COVID-19 izsekotāju JavaScript

Vai meklējat ātru projektu, lai praktizētu savas tīmekļa izstrādātāja prasmes? Visticamāk, pandēmijas laikā esat redzējis daudz dažādu COVID izsekotāju un diagrammu — lūk, kā izveidot savu ar minimālu piepūli.

Jūs uzzināsit dažas noderīgas JavaScript metodes, tostarp to, kā iegūt attālos datus no API un kā to attēlošanai izmantot diagrammu bibliotēku. Iedziļināsimies tajā.

Ko jūs veidosit

Šī rokasgrāmata palīdzēs parādīt pamatus darbam ar API, izmantojot JavaScript. Jūs uzzināsit, kā iegūt datus no attāla avota. Jūs arī redzēsit, kā izmantot diagrammu bibliotēku, lai parādītu ienestos datus.

Viss šajā rakstā izmantotais kods ir pieejams a Github krātuve.

Datu avota izpēte

Lai iegūtu jaunākos ar COVID saistītos skaitļus, mēs izmantosim slimība.sh kas sevi raksturo kā “Open Disease Data API”.

Šī API ir lieliska, jo:

• Tam ir daudz dažādu datu avotu, un katrs piedāvā nedaudz atšķirīgus formātus
• Tas ir labi dokumentēts, nevis ar piemēriem, bet ar daudzām detaļām par to, kā katrs no tiem slimība.sh galapunkti darbojas
instagram viewer
• Tas atgriež JSON, ar kuru ir viegli strādāt, izmantojot JavaScript
• Tas ir pilnībā atvērts un bez maksas lietojams, nav nepieciešama autentifikācija

Šis pēdējais punkts ir īpaši svarīgs: daudzām API ir nepieciešams sarežģīts OpenAuth process, vai arī tās vienkārši nav pieejamas JavaScript, kas darbojas pārlūkprogrammā.

Šajā apmācībā mēs izmantosim New York Times dati ASV no slimības.sh. Šajā beigu punktā ir iekļauti dati par pandēmijas ilgumu (kopš 2020. gada 21. janvāra) formātā, ar kuru ir viegli strādāt. Apskatiet dažus datus no slimība.sh beigu punkts mēs izmantosim:

Ja esat pieradis strādāt ar JSON, iespējams, varēsit to izlasīt bez problēmām. Šeit ir neliels fragments lasāmākā izkārtojumā:

[{
 "datums":"2020-01-21",
 "gadījumi":1,
 "nāves gadījumi":0,
 "atjaunināts":1643386814538
},{
 "datums":"2020-01-22",
 "gadījumi":1,
 "nāves gadījumi":0,
 "atjaunināts":1643386814538
}]

API atgriež vienkāršu objektu masīvu, katrs objekts attēlo datu punktu ar datumu, gadījumiem utt.

HTML iestatīšana

Pagaidām mēs iestatīsim ļoti vienkāršu HTML skeletu. Galu galā jums būs jāiekļauj daži ārējie resursi, taču ar to pietiek, lai sāktu:

Covid gadījumi, ASV

Datu iegūšana, izmantojot JavaScript

Sāciet, vienkārši iegūstot datus no API un parādot tos pārlūkprogrammas konsolē. Tas palīdzēs jums pārbaudīt, vai varat ienest no attālā servera un apstrādāt atbildi. Pievienojiet tālāk norādīto kodu savam covid.js fails:

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

Fetch JavaScript API ir jaunāka XMLHttpRequest alternatīva (sīkāk lasiet par to vietnē MDN). Tas izmanto solījumu, kas nedaudz atvieglo asinhrono programmēšanu ar atzvanīšanu. Izmantojot šo paradigmu, varat savienot vairākas asinhronas darbības.

Pēc vajadzīgā URL iegūšanas izmantojiet tad solījuma metode, lai risinātu veiksmes gadījumu. Parsējiet atbildes pamattekstu kā JSON, izmantojot json() metodi.

Saistīts: JavaScript bultiņu funkcijas var padarīt jūs par labāku izstrādātāju

Kopš tad () vienmēr atgriež solījumu, varat turpināt ķēdi, lai veiktu katru soli. Otrajā darbībā pagaidām vienkārši reģistrējiet datus konsolē, lai varētu tos pārbaudīt:

Jūs varēsiet mijiedarboties ar konsolē parādīto objektu, lai pārbaudītu datus no API. Jūs jau esat panācis lielu progresu, tāpēc pārejiet pie nākamās darbības, kad esat gatavs.

Saistīts: Atkļūdošana JavaScript: pieteikšanās pārlūkprogrammas konsolē

Datu parādīšana, izmantojot billboard.js

Tā vietā, lai reģistrētu datus, uzzīmēsim tos, izmantojot JavaScript bibliotēku. Sagatavojieties tam, atjauninot iepriekšējo kodu, lai tas izskatītos šādi:

atnest (api)
 .then (response => response.json())
 .then (dati => {
 plotData (dati);
 });
function plotData (dati) {
}

Mēs izmantosim billboard.js bibliotēku, lai sniegtu mums vienkāršu, interaktīvu grafiku. billboard.js ir pamata, taču tas atbalsta dažus dažādus diagrammu veidus un ļauj pielāgot asis, etiķetes un visas diagrammas standarta sastāvdaļas.

Jums būs jāiekļauj trīs ārējie faili, tāpēc pievienojiet tos sava HTML faila HEAD:

Izmēģiniet billboard.js ar visvienkāršāko diagrammu. Pievienojiet tālāk norādīto plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 dati: {
 tips: "līnija",
 kolonnas: [
 [ "dati", 10, 40, 20]
 ]
 }
});

The saistīts ar rekvizīts definē atlasītāju, kas identificē mērķa HTML elementu, kurā ģenerēt diagrammu. Dati ir paredzēti a līnija diagramma ar vienu kolonnu. Ņemiet vērā, ka kolonnas dati ir masīvs, kas sastāv no četrām vērtībām, kur pirmā vērtība ir virkne, kas darbojas kā datu nosaukums (“dati”).

Jums vajadzētu redzēt diagrammu, kas izskatās apmēram šādi, ar trim vērtībām sērijā un leģendu, kas apzīmē to kā "dati":

Viss, kas jums jādara, ir izmantot faktisko datus no API, kurā jūs jau pārejat plotData(). Tas prasa nedaudz vairāk darba, jo jums tas būs jāpārtulko atbilstošā formātā un jānorāda billboard.js, lai viss tiktu parādīts pareizi.

Mēs izveidosim diagrammu, kas parāda visu gadījumu vēsturi. Sāciet, izveidojot divas kolonnas, vienu x asij, kurā ir datumi, un otru faktiskajām datu sērijām, kuras mēs attēlosim diagrammā:

var keys = data.map (a => a.date),
 gadījumi = data.map (a => a.cases);
keys.unshift("datumi");
case.unshift("cases");

Atlikušais darbs prasa izmaiņas stenda objektā.

bb.generate({
 bindto: "#covid-all-us-cases",
 dati: {
 x: "datumi",
 tips: "līnija",
 kolonnas: [
 atslēgas,
 gadījumiem
 ]
 }
});

Pievienojiet arī tālāk norādīto ass īpašums:

 ass: {
 x: {
 tips: "kategorija",
 atzīmējiet: {
 skaits: 10
 }
 }
 }

Tas nodrošina, ka x ass parāda tikai 10 datumus, lai tie būtu labi izvietoti. Ņemiet vērā, ka gala rezultāts ir interaktīvs. Pārvietojot kursoru virs diagrammas, uznirstošajā logā tiek parādīti dati:

Apskatiet šī izsekotāja avotu GitHub.

Variācijas

Apskatiet, kā dažādos veidos varat izmantot avota datus, lai mainītu to, ko veidojat, izmantojot billboard.js.

Tiek skatīti dati tikai par vienu gadu

Kopējā diagramma ir ļoti aizņemta, jo tajā ir tik daudz datu. Vienkāršs veids, kā samazināt troksni, ir ierobežot laika periodu, piemēram, līdz vienam gadam (GitHub). Lai to izdarītu, jums vienkārši jāmaina viena rindiņa, un jums nav jāpieskaras plotData funkcija vispār; tas ir pietiekami vispārīgs, lai apstrādātu samazinātu datu kopu.

Otrajā .tad() zvanīt, aizstāt:

plotData (dati);

Ar:

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

The filtrs () metode samazina masīvu, izsaucot funkciju katrai masīva vērtībai. Kad šī funkcija atgriežas taisnība, tas saglabā vērtību. Pretējā gadījumā tas to izmet.

Iepriekš minētā funkcija atgriež patieso vērtību, ja vērtība ir datums īpašums ir lielāks par “2022”. Šis ir vienkāršs virkņu salīdzinājums, taču tas darbojas šo datu formātā, kas ir gads-mēnesis-diena, ļoti ērts formāts.

Datu skatīšana ar mazāku precizitāti

Tā vietā, lai ierobežotu datus tikai uz vienu gadu, vēl viens veids, kā samazināt troksni, ir izmest lielāko daļu no tiem, bet saglabāt datus no fiksēta intervāla (GitHub). Tad dati aptvers visu sākotnējo periodu, taču to būs daudz mazāk. Acīmredzama pieeja ir tikai saglabāt vienu vērtību no katras nedēļas, citiem vārdiem sakot, katru septīto vērtību.

Standarta paņēmiens, kā to izdarīt, ir ar % (modulis) operators. Filtrējot katra masīva indeksa moduli 7, kas vienāds ar 0, mēs saglabāsim katru 7. vērtību:

plotData (dati.filtrs((a, indekss) => indekss % 7 == 0));

Ņemiet vērā, ka šoreiz jums būs jāizmanto alternatīva forma filtrs () kas izmanto divus argumentus, no kuriem otrais attēlo indeksu. Lūk, rezultāts:

Gadījumu un nāves gadījumu apskate vienā diagrammā

Visbeidzot, mēģiniet vienā diagrammā attēlot gan gadījumus, gan nāves gadījumus (GitHub). Šoreiz jums būs jāmaina plotData() metode, taču pieeja galvenokārt ir tāda pati. Galvenās izmaiņas ir jauno datu pievienošana:

nāves gadījumi = data.map (a => a.deaths)
...
kolonnas = [ atslēgas, lietas, nāves gadījumi ]

Un pielāgojumi, lai nodrošinātu, ka billboard.js formatē asis pareizi. Īpaši ņemiet vērā izmaiņas datu struktūrā, kas pieder objektam, kas nodots bb.ģenerēt:

dati: {
 x: "datumi",
 kolonnas: kolonnas,
 asis: { "gadījumi": "y", "nāves gadījumi": "y2" },
 veidi: {
 gadījumi: "bārs"
 }
}

Tagad definējiet vairākas asis, kas jāzīmē kopā ar jaunu veidu, kas raksturīgs šim gadījumiem sērija.

API rezultātu attēlošana, izmantojot JavaScript

Šajā apmācībā ir parādīts, kā izmantot vienkāršu API un diagrammu bibliotēku, lai izveidotu pamata COVID-19 izsekotāju JavaScript. API atbalsta daudz citu datu, ar kuriem varat strādāt dažādās valstīs, kā arī ietver datus par vakcīnu pārklājumu.

Lai to parādītu, varat izmantot plašu billboard.js diagrammu veidu klāstu vai pavisam citu diagrammu bibliotēku. Izvēle ir tava!

Kā izveidot diagrammu, izmantojot Chart.js

Dinamisko datu attēlošana, izmantojot JavaScript, nekad nav bijusi tik vienkārša.

Lasiet Tālāk

Par autoru