Jak vytvořit COVID-19 Tracker v JavaScriptu

Hledáte rychlý projekt k procvičení vašich dovedností webového vývojáře? Pravděpodobně jste během pandemie viděli mnoho různých sledovačů a grafů COVID – zde je návod, jak si vytvořit vlastní s minimálním úsilím.

Naučíte se některé užitečné techniky v JavaScriptu, včetně toho, jak načíst vzdálená data z rozhraní API a jak k jejich zobrazení použít knihovnu grafů. Pojďme do toho.

Co budete stavět

Tato příručka vám pomůže demonstrovat základy práce s API pomocí JavaScriptu. Dozvíte se, jak načíst data ze vzdáleného zdroje. Uvidíte také, jak používat knihovnu grafů k zobrazení načtených dat.

Veškerý kód použitý v tomto článku je dostupný v a Github úložiště.

Prozkoumání zdroje dat

K získání nejnovějších údajů o COVID použijeme nemoc.sh který sám sebe popisuje jako „Open Disease Data API“.

Toto API je vynikající, protože:

• Má mnoho různých zdrojů dat, z nichž každý nabízí mírně odlišné formáty
• Je to dobře zdokumentováno, ne s příklady, ale se spoustou podrobností o tom, jak každý z nich nemoc.sh koncové body fungují
instagram viewer
• Vrací JSON, se kterým se z JavaScriptu snadno pracuje
• Je zcela otevřený a zdarma k použití, nevyžaduje se žádné ověření

Tento poslední bod je obzvláště důležitý: mnoho rozhraní API vyžaduje, abyste prošli komplikovaným procesem OpenAuth, nebo jednoduše nejsou dostupná pro JavaScript spuštěný v prohlížeči.

Pro tento tutoriál použijeme Údaje New York Times pro USA od nemoci.sh. Tento koncový bod zahrnuje data z doby trvání pandemie (od 21. ledna 2020) ve formátu, se kterým se snadno pracuje. Podívejte se na některá data z nemoc.sh koncový bod budeme používat:

Pokud jste zvyklí pracovat s JSON, můžete si to přečíst bez problémů. Zde je malý úryvek ve srozumitelnějším rozložení:

[{
 "date":"21.01.2020",
 "případy":1,
 "smrti":0,
 "aktualizováno":1643386814538
},{
 "date":"22.01.2020",
 "případy":1,
 "smrti":0,
 "aktualizováno":1643386814538
}]

API vrací jednoduché pole objektů, každý objekt představuje datový bod s datem, případy atd.

Nastavení HTML

Prozatím nastavíme velmi jednoduchou kostru HTML. Nakonec budete muset zahrnout několik externích zdrojů, ale pro začátek to stačí:

Případy Covid, USA

Načítání dat pomocí JavaScriptu

Začněte tím, že získáte data z API a zobrazíte je v konzole prohlížeče. To vám pomůže ověřit, že můžete načíst ze vzdáleného serveru a zpracovat odpověď. Přidejte následující kód do svého covid.js soubor:

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

Fetch JavaScript API je novější alternativou k XMLHttpRequest (podrobně si o něm přečtěte na adrese MDN). Využívá Promise, který usnadňuje asynchronní programování se zpětnými voláními. Pomocí tohoto paradigmatu můžete zřetězit několik asynchronních kroků dohromady.

Po načtení požadované adresy URL použijte pak metoda příslibu zvládnout případ úspěchu. Analyzujte tělo odpovědi jako JSON prostřednictvím json() metoda.

Příbuzný: Funkce šipek JavaScriptu z vás mohou udělat lepšího vývojáře

Od té doby pak() vždy vrátí Promise, můžete pokračovat v řetězení, abyste zvládli každý krok. Ve druhém kroku zatím jednoduše přihlaste data do konzole, abyste si je mohli prohlédnout:

Budete moci interagovat s objektem zobrazeným v konzole a zkontrolovat data z API. Už jste udělali velký pokrok, takže až budete připraveni, přejděte k dalšímu kroku.

Příbuzný: Ladění v JavaScriptu: Přihlášení do konzole prohlížeče

Zobrazení dat pomocí billboard.js

Místo protokolování dat je vykreslujeme pomocí knihovny JavaScript. Připravte se na to aktualizací předchozího kódu, aby vypadal takto:

načíst (api)
 .then (response => response.json())
 .pak (data => {
 plotData (data);
 });
function plotData (data) {
}

Budeme používat billboard.js Knihovna nám poskytne jednoduchý interaktivní graf. billboard.js je základní, ale podporuje několik různých typů grafů a umožňuje vám přizpůsobit osy, štítky a všechny standardní složky grafu.

Budete muset zahrnout tři externí soubory, takže je přidejte do HEAD svého html:

Vyzkoušejte billboard.js s nejzákladnějším grafem. Přidejte následující do plotData():

bb.generate({
 bindto: "#covid-all-us-cases",
 údaje: {
 typ: "řádek",
 sloupce: [
 [ "data", 10, 40, 20 ]
 ]
 }
});

The bindto vlastnost definuje selektor, který identifikuje cílový prvek HTML, ve kterém se má generovat graf. Údaje jsou pro a čára graf s jedním sloupcem. Všimněte si, že data sloupce jsou pole sestávající ze čtyř hodnot, přičemž první hodnota je řetězec, který slouží jako název těchto dat („data“).

Měli byste vidět graf, který vypadá trochu takto, se třemi hodnotami v řadě a legendou, která to označí jako „data“:

Vše, co zbývá, je použít skutečné data z API, do kterého již přecházíte plotData(). To vyžaduje trochu více práce, protože jej budete muset přeložit do vhodného formátu a dát pokyn billboard.js, aby vše zobrazoval správně.

Vytvoříme graf, který ukazuje celou historii případu. Začněte vytvořením dvou sloupců, jeden pro osu x, která obsahuje data, a jeden pro skutečnou datovou řadu, kterou vyneseme do grafu:

var keys = data.map (a => a.date),
 případy = data.mapa (a => a.případy);
keys.unshift("data");
case.unshift("případy");

Zbývající práce vyžaduje vylepšení objektu billboardu.

bb.generate({
 bindto: "#covid-all-us-cases",
 údaje: {
 x: "data",
 typ: "řádek",
 sloupce: [
 klíče,
 případy
 ]
 }
});

Přidejte také následující osa vlastnictví:

 osa: {
 X: {
 typ: "kategorie",
 klíště: {
 počet: 10
 }
 }
 }

To zajišťuje, že osa x zobrazuje pouze 10 dat, takže jsou pěkně rozmístěna. Všimněte si, že konečný výsledek je interaktivní. Když najedete kurzorem na graf, billboard zobrazí data ve vyskakovacím okně:

Podívejte se na zdroj tohoto trackeru GitHub.

Variace

Podívejte se, jak můžete různými způsoby použít zdrojová data ke změně toho, co vykreslujete pomocí billboard.js.

Zobrazení dat pouze za jeden rok

Celkový graf je velmi zaneprázdněný, protože obsahuje tolik dat. Jednoduchý způsob, jak snížit hluk, je omezit časové období, například na jeden rok (GitHub). K tomu stačí změnit jeden řádek a nemusíte se ho dotýkat plotData vůbec fungovat; je dostatečně obecný na to, aby zvládl omezenou sadu dat.

Ve druhém .pak() zavolat, vyměnit:

plotData (data);

S:

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

The filtr() metoda redukuje pole voláním funkce pro každou hodnotu v poli. Když se tato funkce vrátí skutečný, zachovává hodnotu. Jinak to zahodí.

Výše uvedená funkce vrátí hodnotu true, pokud je hodnota datum majetek je větší než „2022“. Toto je jednoduché porovnání řetězců, ale funguje to pro formát těchto dat, což je rok-měsíc-den, což je velmi pohodlný formát.

Zobrazení dat s menší zrnitostí

Spíše než omezení dat na pouhý jeden rok je dalším způsobem, jak snížit šum, vyřadit většinu z nich, ale zachovat data z pevného intervalu (GitHub). Data pak budou pokrývat celé původní období, ale bude jich mnohem méně. Zjevným přístupem je ponechat si pouze jednu hodnotu z každého týdne – jinými slovy každou sedmou hodnotu.

Standardní technika, jak toho dosáhnout, je s % (modulový) operátor. Filtrováním podle modulu 7 každého indexu pole rovného 0 zachováme každou sedmou hodnotu:

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

Všimněte si, že tentokrát budete muset použít alternativní formu filtr() který používá dva argumenty, druhý představuje index. Zde je výsledek:

Zobrazení případů a úmrtí v jednom grafu

Nakonec zkuste zobrazit případy i úmrtí na jednom grafu (GitHub). Tentokrát budete muset změnit plotData() metoda, ale přístup je hlavně stejný. Klíčovými změnami je přidání nových údajů:

úmrtí = data.map (a => a.deaths)
...
sloupce = [ klíče, případy, úmrtí ]

A vylepšení, která zajistí, že billboard.js naformátuje osy správně. Všimněte si zejména změn datové struktury patřící k předávanému objektu bb.generovat:

údaje: {
 x: "data",
 sloupce: sloupce,
 axes: { "cases": "y", "deaths": "y2" },
 typy: {
 případy: "bar"
 }
}

Nyní definujte více os, které se mají vykreslit, spolu s novým typem specifickým pro daný objekt případy série.

Vykreslování výsledků API pomocí JavaScriptu

Tento tutoriál ukazuje, jak pomocí jednoduchého rozhraní API a knihovny grafů vytvořit základní sledovač COVID-19 v JavaScriptu. API podporuje spoustu dalších dat, se kterými můžete pracovat pro různé země, a zahrnuje také data o pokrytí vakcínami.

K zobrazení můžete použít širokou škálu typů grafů billboard.js nebo úplně jinou knihovnu grafů. Volba je na tobě!

Jak vytvořit graf pomocí Chart.js

Zobrazení dynamických dat pomocí JavaScriptu nebylo nikdy jednodušší.

Přečtěte si další

O autorovi