Ako vytvoriť sledovanie COVID-19 v JavaScripte

Hľadáte rýchly projekt na precvičenie svojich webových vývojárskych zručností? Pravdepodobne ste počas pandémie videli veľa rôznych sledovačov a grafov COVID – tu je návod, ako si vytvoriť svoj vlastný s minimálnym úsilím.

Naučíte sa niekoľko užitočných techník v JavaScripte vrátane toho, ako získať vzdialené údaje z rozhrania API a ako ich zobraziť pomocou knižnice grafov. Poďme sa do toho pustiť.

Čo budete stavať

Táto príručka vám pomôže ukázať základy práce s API pomocou JavaScriptu. Dozviete sa, ako získať údaje zo vzdialeného zdroja. Uvidíte tiež, ako použiť knižnicu grafov na zobrazenie načítaných údajov.

Všetok kód použitý v tomto článku je dostupný v a Github Úložisko.

Skúmanie zdroja údajov

Na získanie najnovších údajov týkajúcich sa COVID použijeme choroba.sh ktorý sa označuje ako „Open Disease Data API“.

Toto API je vynikajúce, pretože:

• Má mnoho rôznych zdrojov údajov, z ktorých každý ponúka mierne odlišné formáty
• Je to dobre zdokumentované, nie príkladmi, ale množstvom podrobností o tom, ako každý z nich choroba.sh koncové body fungujú
instagram viewer
• Vracia JSON, s ktorým sa dá ľahko pracovať z JavaScriptu
• Je úplne otvorený a zadarmo na používanie, nevyžaduje sa žiadne overenie

Tento posledný bod je obzvlášť dôležitý: mnohé rozhrania API vyžadujú, aby ste prešli komplikovaným procesom OpenAuth, alebo jednoducho nie sú dostupné pre JavaScript spustený v prehliadači.

Pre tento tutoriál použijeme Údaje New York Times pre USA z choroby.sh. Tento koncový bod zahŕňa údaje z trvania pandémie (od 21. januára 2020) vo formáte, s ktorým sa ľahko pracuje. Pozrite sa na niektoré údaje z choroba.sh koncový bod budeme používať:

Ak ste zvyknutí na prácu s JSON, možno si to budete môcť prečítať bez problémov. Tu je malý úryvok v čitateľnejšom rozložení:

[{
 "date":"21.01.2020",
 "prípady":1,
 "úmrtia":0,
 "aktualizované":1643386814538
},{
 "date":"22.01.2020",
 "prípady":1,
 "úmrtia":0,
 "aktualizované":1643386814538
}]

API vracia jednoduché pole objektov, pričom každý objekt predstavuje dátový bod s dátumom, prípadmi atď.

Nastavenie HTML

Zatiaľ nastavíme veľmi jednoduchú kostru HTML. Nakoniec budete musieť zahrnúť niekoľko externých zdrojov, ale na začiatok to stačí:

Prípady Covid, USA

Načítanie údajov pomocou JavaScriptu

Začnite jednoduchým získaním údajov z API a ich zobrazením v konzole prehliadača. To vám pomôže overiť, že môžete načítať zo vzdialeného servera a spracovať odpoveď. Pridajte nasledujúci kód do svojho covid.js súbor:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
načítať (api)
 .then (response => response.json())
 .potom (údaje => {
 console.log (údaje);
 });

Fetch JavaScript API je novšia alternatíva k XMLHttpRequest (podrobne si o ňom prečítajte na MDN). Používa Promise, ktorý robí asynchrónne programovanie so spätnými volaniami o niečo jednoduchšie. Pomocou tejto paradigmy môžete spojiť niekoľko asynchrónnych krokov.

Po načítaní požadovanej adresy URL použite potom metóda prísľubu na zvládnutie úspešného prípadu. Analyzujte telo odpovede ako JSON cez json() metóda.

Súvisiace: Funkcie šípok JavaScript z vás môžu urobiť lepšieho vývojára

Od r potom () vždy vráti prísľub, môžete pokračovať v reťazení, aby ste zvládli každý krok. V druhom kroku zatiaľ jednoducho prihláste údaje do konzoly, aby ste ich mohli skontrolovať:

Budete môcť interagovať s objektom zobrazeným v konzole a kontrolovať údaje z API. Už ste urobili veľký pokrok, takže keď budete pripravení, prejdite na ďalší krok.

Súvisiace: Ladenie v JavaScripte: Prihlásenie do konzoly prehliadača

Zobrazenie údajov pomocou billboard.js

Namiesto zaznamenávania údajov ich vykreslíme pomocou knižnice JavaScript. Pripravte sa na to aktualizáciou predchádzajúceho kódu, aby vyzeral takto:

načítať (api)
 .then (response => response.json())
 .potom (údaje => {
 plotData (údaje);
 });
function plotData (data) {
}

Použijeme billboard.js knižnica, ktorá nám poskytne jednoduchý interaktívny graf. billboard.js je základný, ale podporuje niekoľko rôznych typov grafov a umožňuje vám prispôsobiť osi, štítky a všetky štandardné zložky grafu.

Budete musieť zahrnúť tri externé súbory, takže ich pridajte do HEAD svojho html:

Vyskúšajte billboard.js s najzákladnejším grafom. Pridajte nasledujúce do plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 údaje: {
 typ: "riadok",
 stĺpce: [
 [ "údaje", 10, 40, 20 ]
 ]
 }
});

The bindto vlastnosť definuje selektor, ktorý identifikuje cieľový prvok HTML, v ktorom sa má vygenerovať graf. Údaje sú pre a riadok graf s jedným stĺpcom. Všimnite si, že údaje stĺpca sú pole pozostávajúce zo štyroch hodnôt, pričom prvá hodnota predstavuje reťazec, ktorý slúži ako názov údajov („údaje“).

Mali by ste vidieť graf, ktorý vyzerá trochu takto, s tromi hodnotami v rade a legendou, ktorá ho označuje ako „údaje“:

Všetko, čo musíte urobiť, je použiť skutočné údajov z API, do ktorého už prechádzate plotData(). Vyžaduje si to trochu viac práce, pretože ho budete musieť preložiť do vhodného formátu a zadať príkaz billboard.js, aby všetko správne zobrazil.

Nakreslíme graf, ktorý zobrazuje celú históriu prípadov. Začnite vytvorením dvoch stĺpcov, jedného pre os x, ktorá obsahuje dátumy, a druhého pre skutočný rad údajov, ktorý vykreslíme do grafu:

var keys = data.map (a => a.date),
 prípady = údaje.mapa (a => a.prípady);
keys.unshift("dátumy");
case.unshift("prípady");

Zostávajúce práce si vyžadujú vylepšenia objektu billboardu.

bb.generate({
 bindto: "#covid-all-us-cases",
 údaje: {
 x: "dátum",
 typ: "riadok",
 stĺpce: [
 kľúče,
 prípady
 ]
 }
});

Pridajte aj nasledujúce os nehnuteľnosť:

 os: {
 X: {
 typ: "kategória",
 zaškrtnúť: {
 počet: 10
 }
 }
 }

To zaisťuje, že os x zobrazuje iba 10 dátumov, takže sú pekne rozmiestnené. Upozorňujeme, že konečný výsledok je interaktívny. Keď pohybujete kurzorom po grafe, billboard zobrazuje údaje v kontextovom okne:

Pozrite sa na zdroj tohto sledovača GitHub.

Variácie

Pozrite sa, ako môžete použiť zdrojové údaje rôznymi spôsobmi na zmenu toho, čo vykresľujete pomocou súboru billboard.js.

Zobrazenie údajov len za jeden rok

Celkový graf je veľmi zaneprázdnený, pretože obsahuje toľko údajov. Jednoduchým spôsobom zníženia hluku je obmedzenie časového obdobia, napríklad na jeden rok (GitHub). Na to stačí zmeniť jeden riadok a nemusíte sa ho dotýkať plotData vôbec fungovať; je to dostatočne všeobecné na to, aby zvládlo obmedzený súbor údajov.

V druhom .potom() zavolať, nahradiť:

plotData (údaje);

s:

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

The filter() metóda redukuje pole volaním funkcie pre každú hodnotu v poli. Keď sa táto funkcia vráti pravda, zachováva si hodnotu. V opačnom prípade to zahodí.

Vyššie uvedená funkcia vráti hodnotu true, ak je hodnota dátum majetok je vyšší ako „2022“. Toto je jednoduché porovnanie reťazcov, ale funguje to pre formát týchto údajov, ktorý je rok-mesiac-deň, čo je veľmi pohodlný formát.

Prezeranie údajov s menšou zrnitosťou

Namiesto obmedzenia údajov iba na jeden rok je ďalším spôsobom zníženia hluku vyradenie väčšiny z nich, ale uchovanie údajov z pevného intervalu (GitHub). Dáta potom pokryjú celé pôvodné obdobie, no bude ich oveľa menej. Samozrejmým prístupom je ponechať si jednu hodnotu z každého týždňa – inými slovami, každú siedmu hodnotu.

Štandardná technika, ako to urobiť, je s % (modulový) operátor. Filtrovaním podľa modulu 7 každého indexu poľa rovného 0 zachováme každú siedmu hodnotu:

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

Upozorňujeme, že tentoraz budete musieť použiť alternatívnu formu filter() ktorý používa dva argumenty, druhý predstavuje index. Tu je výsledok:

Zobrazenie prípadov a úmrtí v jednom grafe

Nakoniec skúste zobraziť prípady aj úmrtia na jednom grafe (GitHub). Tentoraz budete musieť zmeniť plotData() metóda, ale prístup je hlavne rovnaký. Kľúčovými zmenami je pridanie nových údajov:

úmrtia = data.map (a => a.úmrtia)
...
stĺpce = [ kľúče, prípady, úmrtia ]

A vylepšenia, aby sa zabezpečilo, že billboard.js správne naformátuje osi. Všimnite si najmä zmeny v dátovej štruktúre patriacej objektu, ktorému sa odovzdáva bb.generovať:

údaje: {
 x: "dátum",
 stĺpce: stĺpce,
 axes: { "cases": "y", "deaths": "y2" },
 typy: {
 prípady: "bar"
 }
}

Teraz definujte viacero osí na vykreslenie spolu s novým typom špecifickým pre daný prípady séria.

Vykresľovanie výsledkov API pomocou JavaScriptu

Tento tutoriál ukazuje, ako používať jednoduché rozhranie API a knižnicu grafov na vytvorenie základného sledovača COVID-19 v JavaScripte. Rozhranie API podporuje množstvo ďalších údajov, s ktorými môžete pracovať pre rôzne krajiny, a zahŕňa aj údaje o pokrytí vakcínou.

Na zobrazenie môžete použiť širokú škálu typov grafov billboard.js alebo úplne inú knižnicu grafov. Výber je na tebe!

Ako vytvoriť graf pomocou Chart.js

Zobrazovanie dynamických údajov pomocou JavaScriptu nebolo nikdy jednoduchšie.

Prečítajte si ďalej

O autorovi