Sådan bygger du en COVID-19 Tracker i JavaScript

Leder du efter et hurtigt projekt til at øve dine web-dev-færdigheder? Du har sikkert set mange forskellige COVID-trackere og diagrammer gennem pandemien - her er, hvordan du laver dine egne med minimal indsats.

Du lærer nogle nyttige teknikker i JavaScript, herunder hvordan man henter fjerndata fra en API, og hvordan man bruger et diagrambibliotek til at vise det. Lad os komme ind i det.

Hvad du vil bygge

Denne vejledning hjælper med at demonstrere det grundlæggende i at arbejde med en API ved hjælp af JavaScript. Du lærer, hvordan du henter data fra en ekstern kilde. Du vil også se, hvordan du bruger et diagrambibliotek til at vise de hentede data.

Al kode brugt i denne artikel er tilgængelig i en Github depot.

Udforskning af datakilden

For at få de seneste COVID-relaterede tal, bruger vi sygdom.sh som beskriver sig selv som en "Open Disease Data API".

Denne API er fremragende, fordi:

• Det har mange forskellige datakilder, der hver tilbyder lidt forskellige formater
• Det er veldokumenteret, ikke med eksempler, men med masser af detaljer om, hvordan hver af de
  instagram viewer
  sygdom.sh endepunkter virker
• Det returnerer JSON, som er let at arbejde med fra JavaScript
• Det er helt åbent og gratis at bruge, ingen godkendelse påkrævet

Dette sidste punkt er særligt vigtigt: Mange API'er kræver, at du gennemgår en kompliceret OpenAuth-proces, eller de er simpelthen ikke tilgængelige for JavaScript, der kører i en browser.

Til denne tutorial bruger vi New York Times data for USA fra disease.sh. Dette endepunkt inkluderer data fra pandemiens varighed (siden 21. januar 2020) i et format, der er nemt at arbejde med. Tag et kig på nogle data fra disease.sh endepunkt vi bruger:

Hvis du er vant til at håndtere JSON, kan du muligvis læse det uden problemer. Her er et lille uddrag i et mere læsbart layout:

[{
 "dato":"2020-01-21",
 "sager":1,
 "dødsfald":0,
 "opdateret":1643386814538
},{
 "dato":"2020-01-22",
 "sager":1,
 "dødsfald":0,
 "opdateret":1643386814538
}]

API'en returnerer en simpel række af objekter, hvor hvert objekt repræsenterer et datapunkt med dato, sager osv.

Opsætning af HTML

Indtil videre opsætter vi noget meget simpelt skelet HTML. I sidste ende bliver du nødt til at inkludere et par eksterne ressourcer, men dette er nok til at komme i gang:

Covid-sager, USA

Hentning af data ved hjælp af JavaScript

Start med blot at hente dataene fra API'et og vise dem i browserkonsollen. Dette vil hjælpe dig med at bekræfte, at du kan hente fra fjernserveren og behandle svaret. Tilføj følgende kode til din covid.js fil:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
hente (api)
 .then (svar => respons.json())
 .then (data => {
 console.log (data);
 });

Fetch JavaScript API er et nyere alternativ til XMLHttpRequest (læs mere om det på MDN). Den bruger et løfte, som gør asynkron programmering med tilbagekald en smule lettere. Ved at bruge dette paradigme kan du kæde flere asynkrone trin sammen.

Når du har hentet den nødvendige URL, skal du bruge derefter Løftets metode til at håndtere successagen. Parse svarets krop som JSON via json() metode.

Relaterede: JavaScript-pilefunktioner kan gøre dig til en bedre udvikler

Siden derefter() altid returnerer et løfte, kan du blive ved med at kæde for at håndtere hvert trin. I det andet trin, for nu, skal du blot logge dataene til konsollen, så du kan inspicere dem:

Du vil være i stand til at interagere med objektet, der vises i konsollen, for at inspicere dataene fra API'en. Du har allerede gjort mange fremskridt, så gå videre til næste trin, når du er klar.

Relaterede: Fejlretning i JavaScript: Logning til browserkonsollen

Visning af data ved hjælp af billboard.js

I stedet for at logge dataene, lad os plotte dem ved hjælp af et JavaScript-bibliotek. Forbered dig på dette ved at opdatere den tidligere kode til at se sådan ud:

hente (api)
 .then (svar => respons.json())
 .then (data => {
 plotData (data);
 });
function plotData (data) {
}

Vi vil bruge billboard.js bibliotek for at give os en enkel, interaktiv graf. billboard.js er grundlæggende, men det understøtter et par forskellige diagramtyper og giver dig mulighed for at tilpasse akser, etiketter og alle standardingredienserne i et diagram.

Du skal inkludere tre eksterne filer, så føj disse til HEAD af din html:

Prøv billboard.js med det mest grundlæggende diagram. Tilføj følgende til plotData():

bb.generate({
 bindto: "#covid-alle-os-tilfælde",
 data: {
 type: "linje",
 kolonner: [
 [ "data", 10, 40, 20 ]
 ]
 }
});

Det binde til egenskaben definerer en vælger, som identificerer det HTML-målelement, som diagrammet skal genereres i. Data er for en linje diagram med en enkelt kolonne. Bemærk, at kolonnedataene er en matrix bestående af fire værdier, hvor den første værdi er en streng, der fungerer som dataens navn ("data").

Du bør se et diagram, der ser lidt sådan ud med tre værdier i serien og en forklaring, der mærker det som "data":

Alt, der er tilbage for dig at gøre, er at bruge den faktiske data fra den API, som du allerede går ind i plotData(). Dette kræver lidt mere arbejde, fordi du bliver nødt til at oversætte det til et passende format og instruere billboard.js til at vise alt korrekt.

Vi plotter et diagram, der viser den fulde sagshistorie. Start med at bygge to kolonner, en til x-aksen, som indeholder datoer, og en til den faktiske dataserie, vi plotter på grafen:

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

Det resterende arbejde kræver tweaks til billboard-objektet.

bb.generate({
 bindto: "#covid-alle-os-tilfælde",
 data: {
 x: "datoer",
 type: "linje",
 kolonner: [
 nøgler,
 sager
 ]
 }
});

Tilføj også følgende akse ejendom:

 akse: {
 x: {
 type: "kategori",
 kryds: {
 antal: 10
 }
 }
 }

Dette sikrer, at x-aksen kun viser 10 datoer, så de er pænt fordelt. Bemærk, at det endelige resultat er interaktivt. Når du flytter markøren over grafen, viser billboard data i en pop op:

Tjek kilden til denne tracker i GitHub.

Variationer

Tag et kig på, hvordan du kan bruge kildedataene på forskellige måder til at ændre, hvad du plotter ved hjælp af billboard.js.

Visning af data kun for et enkelt år

Det overordnede diagram er meget travlt, fordi det indeholder så mange data. En simpel måde at reducere støjen på er at begrænse tidsperioden, f.eks. til et enkelt år (GitHub). Du skal bare ændre en linje for at gøre dette, og du behøver ikke at røre ved plotdata funktion overhovedet; det er generelt nok til at håndtere et reduceret sæt data.

I den anden .derefter() ring, udskift:

plotData (data);

Med:

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

Det filter() metode reducerer et array ved at kalde en funktion på hver værdi i arrayet. Når den funktion vender tilbage rigtigt, det holder værdien. Ellers kasserer den den.

Funktionen ovenfor returnerer sand, hvis værdien er dato ejendom er større end '2022'. Dette er en simpel strengsammenligning, men den fungerer for formatet af disse data, som er år-måned-dag, et meget praktisk format.

Visning af data med mindre granularitet

I stedet for at begrænse dataene til kun et år, er en anden måde at reducere støjen på at kassere det meste af det, men beholde data fra et fast interval (GitHub). Dataene vil så dække hele den oprindelige periode, men der vil være meget mindre af dem. En oplagt tilgang er blot at beholde én værdi fra hver uge – med andre ord hver syvende værdi.

Standardteknikken til at gøre dette er med % (modulus) operatør. Ved at filtrere på modulet 7 for hvert array-indeks svarende til 0, beholder vi hver 7. værdi:

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

Bemærk, at du denne gang skal bruge en alternativ form for filter() som bruger to argumenter, det andet repræsenterer indekset. Her er resultatet:

Visning af tilfælde og dødsfald i én graf

Prøv endelig at vise både tilfælde og dødsfald på ét diagram (GitHub). Denne gang skal du ændre plotData() metode, men tilgangen er hovedsageligt den samme. De vigtigste ændringer er tilføjelsen af ​​de nye data:

dødsfald = data.map (a => a.dødsfald)
...
kolonner = [nøgler, sager, dødsfald]

Og tweaks for at sikre, at billboard.js formaterer akserne korrekt. Bemærk især ændringerne i datastrukturen, der hører til det objekt, der sendes til bb.generere:

data: {
 x: "datoer",
 kolonner: kolonner,
 akser: { "cases": "y", "deaths": "y2" },
 typer: {
 tilfælde: "bar"
 }
}

Definer nu de flere akser, der skal plottes sammen med en ny type, der er specifik for sager serie.

Plotning af API-resultater ved hjælp af JavaScript

Denne vejledning viser, hvordan man bruger en simpel API og et diagrambibliotek til at bygge en grundlæggende COVID-19-tracker i JavaScript. API'et understøtter masser af andre data, du kan arbejde med for forskellige lande, og inkluderer også data om vaccinedækning.

Du kan bruge en bred vifte af billboard.js-diagramtyper til at vise det, eller et helt andet diagrambibliotek. Det er dit valg!

Sådan laver du et diagram med Chart.js

Det har aldrig været nemmere at vise dynamiske data med JavaScript.

Læs Næste

Om forfatteren