Hogyan készítsünk COVID-19 nyomkövetőt JavaScriptben

Gyors projektet keres webfejlesztői készségeinek gyakorlására? Valószínűleg sok különböző COVID-nyomkövetőt és diagramot látott már a világjárvány során – így készítheti el sajátját minimális erőfeszítéssel.

Megtanul néhány hasznos technikát a JavaScriptben, beleértve azt, hogyan lehet távoli adatokat lekérni egy API-ból, és hogyan lehet diagramkönyvtárat használni a megjelenítésükhöz. Menjünk bele.

Mit fogsz építeni

Ez az útmutató segít bemutatni a JavaScriptet használó API-k használatának alapjait. Megtanulja, hogyan kérhet le adatokat távoli forrásból. Azt is látni fogja, hogyan lehet diagramkönyvtárat használni a lekért adatok megjelenítéséhez.

A cikkben használt összes kód elérhető a Github adattár.

Az adatforrás feltárása

A COVID-dal kapcsolatos legfrissebb adatok megtekintéséhez használjuk betegség.sh amely „Open Disease Data API”-ként írja le magát.

Ez az API kiváló, mert:

• Számos különböző adatforrással rendelkezik, amelyek mindegyike kissé eltérő formátumot kínál
• Jól dokumentált, nem példákkal, de rengeteg részlettel arról, hogy az egyes betegség.sh a végpontok működnek
instagram viewer
• JSON-t ad vissza, amivel könnyű dolgozni a JavaScriptből
• Teljesen nyitott és ingyenesen használható, nincs szükség hitelesítésre

Ez az utolsó pont különösen fontos: sok API-hoz bonyolult OpenAuth folyamaton kell keresztülmenni, vagy egyszerűen nem érhetők el a böngészőben futó JavaScript számára.

Ehhez az oktatóanyaghoz a A New York Times adatai az USA számára a betegségtől.sh. Ez a végpont a járvány időtartamának (2020. január 21. óta) adatait tartalmazza, olyan formátumban, amellyel könnyen kezelhető. Vessen egy pillantást néhány adatra a betegség.sh végpont használni fogjuk:

Ha hozzászokott a JSON-hoz, akkor ezt gond nélkül el tudja olvasni. Íme egy kis kivonat olvashatóbb elrendezésben:

[{
 "dátum":"2020-01-21",
 "esetek":1,
 "halálok":0,
 "frissítve":1643386814538
},{
 "dátum":"2020-01-22",
 "esetek":1,
 "halálok":0,
 "frissítve":1643386814538
}]

Az API egy egyszerű objektumtömböt ad vissza, minden objektum egy adatpontot képvisel dátummal, esetekkel stb.

A HTML beállítása

Egyelőre néhány nagyon egyszerű HTML-vázat állítunk be. Végső soron néhány külső erőforrást is be kell vonnia, de ez elegendő a kezdéshez:

Covid esetek, Egyesült Államok

Adatok lekérése JavaScript használatával

Kezdje azzal, hogy egyszerűen lekéri az adatokat az API-ból, és megjeleníti azokat a böngészőkonzolon. Ez segít ellenőrizni, hogy le tudja-e kérni a távoli kiszolgálóról, és feldolgozni tudja a választ. Adja hozzá a következő kódot a sajátjához covid.js fájl:

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

A Fetch JavaScript API az XMLHttpRequest újabb alternatívája (erről részletesen itt olvashat MDN). Promise-t használ, amely kissé megkönnyíti az aszinkron programozást visszahívásokkal. Ezzel a paradigmával több aszinkron lépést is összekapcsolhat.

A szükséges URL lekérése után használja a azután az Ígéret módszere a sikerügy kezelésére. Elemezze a válasz törzsét JSON-ként a következőn keresztül json() módszer.

Összefüggő: A JavaScript nyíl funkciói jobb fejlesztővé tehetik Önt

Mivel azután() mindig ígéretet ad vissza, továbbra is láncolhatja az egyes lépések kezelését. A második lépésben egyelőre egyszerűen naplózza az adatokat a konzolra, hogy ellenőrizhesse azokat:

A konzolon megjelenített objektummal interakcióba léphet az API-ból származó adatok ellenőrzéséhez. Máris sokat fejlődött, ezért lépjen tovább a következő lépésre, ha készen áll.

Összefüggő: Hibakeresés JavaScriptben: Bejelentkezés a böngészőkonzolba

Az adatok megjelenítése a billboard.js használatával

Az adatok naplózása helyett ábrázoljuk egy JavaScript-könyvtár segítségével. Készüljön fel erre az előző kód frissítésével, hogy így nézzen ki:

lekérni (api)
 .then (response => response.json())
 .then (data => {
 plotData (adat);
 });
function plotData (data) {
}

Használjuk a billboard.js könyvtárat, hogy egy egyszerű, interaktív grafikont kapjunk. A billboard.js alapvető, de támogat néhány különböző diagramtípust, és lehetővé teszi a tengelyek, címkék és a diagram összes szabványos összetevőjének testreszabását.

Három külső fájlt kell megadnia, ezért adja hozzá ezeket a HTML-kód HEAD részéhez:

Próbálja ki a billboard.js fájlt a legalapvetőbb diagrammal. Adja hozzá a következőket plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 adatok: {
 típus: "vonal",
 oszlopok: [
 [ "adatok", 10, 40, 20]
 ]
 }
});

A hozzá kötve tulajdonság meghatároz egy választót, amely azonosítja a cél HTML-elemet, amelyben a diagramot elő kell állítani. Az adatok a vonal diagram, egyetlen oszloppal. Vegye figyelembe, hogy az oszlopadatok egy négy értékből álló tömb, ahol az első érték egy karakterlánc az adat neveként („adat”).

Látnia kell egy diagramot, amely kicsit így néz ki, három értékkel a sorozatban, és egy jelmagyarázattal, amely „adatként” címkézi:

Nincs más hátra, mint a tényleges felhasználás adat abból az API-ból, amelybe már belép plotData(). Ez egy kicsit több munkát igényel, mert le kell fordítania egy megfelelő formátumra, és utasítania kell a billboard.js fájlt, hogy mindent helyesen jelenítsen meg.

Készítünk egy diagramot, amely bemutatja a teljes esettörténetet. Kezdje azzal, hogy épít két oszlopot, egyet az x tengelyhez, amely dátumokat tartalmaz, egyet pedig a tényleges adatsorokhoz, amelyeket a grafikonon ábrázolunk:

var keys = data.map (a => a.date),
 esetek = data.map (a => a.cases);
keys.unshift("dátumok");
esetek.unshift("esetek");

A hátralévő munkához az óriásplakát objektumon kell finomítani.

bb.generate({
 bindto: "#covid-all-us-cases",
 adatok: {
 x: "dátumok",
 típus: "vonal",
 oszlopok: [
 kulcsok,
 esetek
 ]
 }
});

Adja hozzá a következőket is tengely ingatlan:

 tengely: {
 x: {
 típus: "kategória",
 ketyegés: {
 szám: 10
 }
 }
 }

Ez biztosítja, hogy az x tengely csak 10 dátumot jelenítsen meg, így azok szépen el vannak helyezve. Vegye figyelembe, hogy a végeredmény interaktív. Amikor a kurzort a grafikon fölé viszi, az óriásplakát egy előugró ablakban jeleníti meg az adatokat:

Nézze meg ennek a nyomkövetőnek a forrását GitHub.

Variációk

Vessen egy pillantást arra, hogyan használhatja fel a forrásadatokat különböző módokon a billboard.js használatával megjelenített ábrázolás megváltoztatásához.

Egyetlen évre vonatkozó adatok megtekintése

Az általános diagram nagyon elfoglalt, mert rengeteg adatot tartalmaz. A zaj csökkentésének egyszerű módja az időtartam korlátozása, például egy évre (GitHub). Ehhez csak egy sort kell módosítania, és nem kell megérinteni a plotData funkció egyáltalán; elég általános ahhoz, hogy csökkentett adathalmazt kezeljen.

A másodikban .azután() hívás, csere:

plotData (adat);

Val vel:

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

A szűrő() metódus csökkenti a tömböt úgy, hogy meghív egy függvényt a tömb minden értékére. Amikor ez a függvény visszatér igaz, megtartja az értéket. Ellenkező esetben eldobja.

A fenti függvény igazat ad vissza, ha az érték dátum ingatlan nagyobb, mint „2022”. Ez egy egyszerű karakterlánc-összehasonlítás, de működik ezen adatok formátumánál, amely év-hónap-nap, nagyon kényelmes formátum.

Adatok megtekintése kisebb részletességgel

Ahelyett, hogy csak egy évre korlátoznánk az adatokat, a zaj csökkentésének másik módja az, hogy a legtöbbet eldobjuk, de megőrizzük az adatokat egy meghatározott időközönként (GitHub). Az adatok ekkor a teljes eredeti időszakot lefedik, de jóval kevesebb lesz belőle. Egy kézenfekvő megközelítés az, hogy minden héten csak egy értéket tartunk meg – más szóval minden hetedik értéket.

Ennek szokásos technikája a % (modulus) operátor. Az egyes 0-val egyenlő tömbindexek 7. modulusának szűrésével minden 7. értéket megtartunk:

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

Vegye figyelembe, hogy ezúttal egy alternatív formát kell használnia szűrő() amely két argumentumot használ, a második az indexet képviseli. Íme az eredmény:

Esetek és halálesetek megtekintése egy grafikonon

Végül próbálja meg az eseteket és a haláleseteket egy diagramon megjeleníteni (GitHub). Ezúttal meg kell változtatnia a plotData() módszer, de a megközelítés lényegében ugyanaz. A legfontosabb változások az új adatok hozzáadása:

halálesetek = data.map (a => a.deaths)
...
oszlopok = [ kulcsok, esetek, halálesetek ]

És finomítások, hogy a billboard.js megfelelően formázza a tengelyeket. Különösen ügyeljen az átadott objektumhoz tartozó adatstruktúra változásaira bb.generálni:

adatok: {
 x: "dátumok",
 oszlopok: oszlopok,
 tengelyek: { "esetek": "y", "halálok": "y2" },
 típusok: {
 esetek: "bár"
 }
}

Most határozza meg a több ábrázolandó tengelyt egy új típussal együtt esetek sorozat.

API-eredmények ábrázolása JavaScript használatával

Ez az oktatóanyag bemutatja, hogyan lehet egy egyszerű API-t és egy diagramkönyvtárat használni egy alapvető COVID-19-követő JavaScript-ben való létrehozásához. Az API számos egyéb adatot támogat, amelyekkel a különböző országok esetében dolgozhat, és tartalmaz adatokat a vakcina lefedettségéről is.

A billboard.js diagramtípusok széles skáláját használhatja a megjelenítéséhez, vagy egy másik diagramtárat is használhat. Tiéd a választás!

Hogyan készítsünk diagramot a Chart.js segítségével

A dinamikus adatok megjelenítése JavaScript segítségével még soha nem volt ilyen egyszerű.

Olvassa el a következőt

A szerzőről