Hvordan bygge en COVID-19-sporer i JavaScript

Leter du etter et raskt prosjekt for å øve på webutviklerferdighetene dine? Du har sikkert sett mange forskjellige COVID-sporere og diagrammer gjennom pandemien – her er hvordan du lager dine egne med minimal innsats.

Du vil lære noen nyttige teknikker i JavaScript, inkludert hvordan du henter eksterne data fra et API og hvordan du bruker et kartbibliotek til å vise det. La oss komme inn i det.

Hva du skal bygge

Denne veiledningen vil hjelpe deg med å demonstrere det grunnleggende om å jobbe med et API ved å bruke JavaScript. Du lærer hvordan du henter data fra en ekstern kilde. Du vil også se hvordan du bruker et diagrambibliotek til å vise de hentede dataene.

All kode som brukes i denne artikkelen er tilgjengelig i en Github oppbevaringssted.

Utforske datakilden

For å få de siste COVID-relaterte tallene, bruker vi sykdom.sh som beskriver seg selv som en "Open Disease Data API".

Dette API er utmerket fordi:

• Den har mange forskjellige datakilder, som hver tilbyr litt forskjellige formater
• Det er godt dokumentert, ikke med eksempler, men med mange detaljer om hvordan hver av de
  instagram viewer
  sykdom.sh endepunkter fungerer
• Den returnerer JSON, som er enkel å jobbe med fra JavaScript
• Det er helt åpent og gratis å bruke, ingen autentisering kreves

Dette siste punktet er spesielt viktig: mange APIer krever at du går gjennom en komplisert OpenAuth-prosess, eller er rett og slett ikke tilgjengelig for JavaScript som kjører i en nettleser.

For denne opplæringen bruker vi Data fra New York Times for USA fra disease.sh. Dette endepunktet inkluderer data fra varigheten av pandemien (siden 21. januar 2020), i et format som er enkelt å jobbe med. Ta en titt på noen data fra disease.sh endepunkt vi skal bruke:

Hvis du er vant til å håndtere JSON, kan du kanskje lese det uten problemer. Her er et lite utdrag i en mer lesbar layout:

[{
 "dato": "2020-01-21",
 "saker":1,
 "dødsfall":0,
 "oppdatert":1643386814538
},{
 "date": "2020-01-22",
 "saker":1,
 "dødsfall":0,
 "oppdatert":1643386814538
}]

API-en returnerer en enkel rekke objekter, hvert objekt representerer et datapunkt med dato, tilfeller osv.

Sette opp HTML

Foreløpig setter vi opp noe veldig enkelt skjelett-HTML. Til syvende og sist må du inkludere noen få eksterne ressurser, men dette er nok til å komme i gang:

Covid-tilfeller, USA

Henter dataene ved hjelp av JavaScript

Start med bare å hente dataene fra API-en og vise dem i nettleserkonsollen. Dette vil hjelpe deg å bekrefte at du kan hente fra den eksterne serveren og behandle svaret. Legg til følgende kode til din covid.js fil:

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

Fetch JavaScript API er et nyere alternativ til XMLHttpRequest (les om det i detalj på MDN). Den bruker et løfte som gjør asynkron programmering med tilbakeringinger litt enklere. Ved å bruke dette paradigmet kan du lenke flere asynkrone trinn sammen.

Etter å ha hentet den nødvendige URL-adressen, bruk deretter metoden til løftet for å håndtere suksesssaken. Parse responsens kropp som JSON via json() metode.

I slekt: JavaScript-pilfunksjoner kan gjøre deg til en bedre utvikler

Siden deretter() alltid returnerer et løfte, kan du fortsette å lenke for å håndtere hvert trinn. I det andre trinnet, for nå, bare logg dataene til konsollen slik at du kan inspisere dem:

Du vil kunne samhandle med objektet som vises i konsollen for å inspisere dataene fra API-en. Du har allerede gjort mye fremskritt, så gå videre til neste trinn når du er klar.

I slekt: Feilsøking i JavaScript: Logging til nettleserkonsollen

Vise dataene ved å bruke billboard.js

I stedet for å logge dataene, la oss plotte dem ved hjelp av et JavaScript-bibliotek. Forbered deg på dette ved å oppdatere den forrige koden til å se slik ut:

hente (api)
 .then (respons => response.json())
 .then (data => {
 plotData (data);
 });
funksjon plotData (data) {
}

Vi vil bruke billboard.js bibliotek for å gi oss en enkel, interaktiv graf. billboard.js er grunnleggende, men den støtter noen få forskjellige diagramtyper, og lar deg tilpasse akser, etiketter og alle standardingrediensene i et diagram.

Du må inkludere tre eksterne filer, så legg disse til HEAD av html-en din:

Prøv billboard.js med det mest grunnleggende diagrammet. Legg til følgende til plotData():

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

De bind fast til egenskap definerer en velger som identifiserer HTML-målelementet som diagrammet skal genereres i. Dataene er for en linje diagram, med en enkelt kolonne. Merk at kolonnedataene er en matrise som består av fire verdier, med den første verdien en streng som fungerer som dataens navn ("data").

Du bør se et diagram som ser litt slik ut, med tre verdier i serien og en forklaring som merker det som "data":

Alt som er igjen for deg å gjøre er å bruke den faktiske data fra API-en du allerede går over til plotData(). Dette krever litt mer arbeid fordi du må oversette det til et passende format og instruere billboard.js om å vise alt riktig.

Vi plotter et diagram som viser hele sakshistorien. Start med å bygge to kolonner, en for x-aksen som inneholder datoer, og en for den faktiske dataserien vi plotter på grafen:

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

Det gjenværende arbeidet krever justeringer av reklametavleobjektet.

bb.generate({
 bindto: "#covid-alle-oss-saker",
 data: {
 x: "datoer",
 type: "linje",
 kolonner: [
 nøkler,
 saker
 ]
 }
});

Legg også til følgende akser eiendom:

 akse: {
 x: {
 type: "kategori",
 sett kryss: {
 antall: 10
 }
 }
 }

Dette sikrer at x-aksen bare viser 10 datoer, slik at de er pent plassert. Merk at det endelige resultatet er interaktivt. Når du flytter markøren over grafen, viser tavlen data i en popup:

Sjekk ut kilden til denne trackeren i GitHub.

Variasjoner

Ta en titt på hvordan du kan bruke kildedataene på forskjellige måter for å endre det du plotter ved å bruke billboard.js.

Viser data bare for et enkelt år

Det generelle diagrammet er veldig travelt fordi det inneholder så mye data. En enkel måte å redusere støyen på er å begrense tidsperioden, til et enkelt år for eksempel (GitHub). Du trenger bare å endre én linje for å gjøre dette, og du trenger ikke å berøre plotData funksjon i det hele tatt; det er generelt nok til å håndtere et redusert sett med data.

I den andre .deretter() ring, erstatt:

plotData (data);

Med:

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

De filter() metoden reduserer en matrise ved å kalle en funksjon på hver verdi i matrisen. Når funksjonen kommer tilbake ekte, det beholder verdien. Ellers forkaster den den.

Funksjonen ovenfor returnerer sann hvis verdien er Dato eiendommen er større enn «2022». Dette er en enkel strengsammenligning, men den fungerer for formatet til disse dataene som er år-måned-dag, et veldig praktisk format.

Vise data med mindre granularitet

I stedet for å begrense dataene til bare ett år, er en annen måte å redusere støyen på å forkaste det meste, men beholde data fra et fast intervall (GitHub). Dataene vil da dekke hele den opprinnelige perioden, men det blir mye mindre av det. En åpenbar tilnærming er å bare beholde én verdi fra hver uke – med andre ord hver syvende verdi.

Standardteknikken for å gjøre dette er med % (modulus) operatør. Ved å filtrere på modulen 7 for hver matriseindeks som er lik 0, vil vi beholde hver syvende verdi:

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

Merk at du denne gangen må bruke en alternativ form for filter() som bruker to argumenter, det andre representerer indeksen. Her er resultatet:

Vise tilfeller og dødsfall i én graf

Til slutt, prøv å vise både tilfeller og dødsfall på ett diagram (GitHub). Denne gangen må du endre plotData() metoden, men tilnærmingen er hovedsakelig den samme. De viktigste endringene er tillegget av de nye dataene:

dødsfall = data.map (a => a.dødsfall)
...
kolonner = [nøkler, tilfeller, dødsfall]

Og justeringer for å sikre at billboard.js formaterer aksene riktig. Legg spesielt merke til endringene i datastrukturen som tilhører objektet som sendes til bb.generere:

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

Definer nå de flere aksene som skal plottes sammen med en ny type spesifikk for saker serie.

Plotte API-resultater ved hjelp av JavaScript

Denne opplæringen viser hvordan du bruker en enkel API og et kartbibliotek for å bygge en grunnleggende COVID-19-sporer i JavaScript. API-en støtter mange andre data du kan jobbe med for forskjellige land og inkluderer også data om vaksinedekning.

Du kan bruke et bredt utvalg av billboard.js-karttyper for å vise det, eller et helt annet kartbibliotek. Valget er ditt!

Hvordan lage et diagram med Chart.js

Det har aldri vært enklere å vise dynamiske data med JavaScript.

Les Neste

Om forfatteren