Hoe een COVID-19-tracker in JavaScript te bouwen

Op zoek naar een snel project om je webdev-vaardigheden te oefenen? Je hebt waarschijnlijk tijdens de pandemie veel verschillende COVID-trackers en grafieken gezien - hier is hoe je je eigen kunt maken met minimale inspanning.

U leert enkele nuttige technieken in JavaScript, waaronder hoe u externe gegevens van een API kunt ophalen en hoe u een kaartbibliotheek kunt gebruiken om deze weer te geven. Laten we erop ingaan.

Wat je gaat bouwen

Deze handleiding helpt u de basisprincipes van het werken met een API met JavaScript te demonstreren. U leert hoe u gegevens van een externe bron kunt ophalen. U zult ook zien hoe u een kaartbibliotheek gebruikt om de opgehaalde gegevens weer te geven.

Alle code die in dit artikel wordt gebruikt, is beschikbaar in een Github opslagplaats.

De gegevensbron verkennen

Om de laatste COVID-gerelateerde cijfers te krijgen, gebruiken we ziekte.sh die zichzelf omschrijft als een "Open Disease Data API".

Deze API is uitstekend omdat:

• Het heeft veel verschillende gegevensbronnen, elk met iets andere formaten
instagram viewer
• Het is goed gedocumenteerd, niet met voorbeelden, maar met veel details over hoe elk van de ziekte.sh eindpunten werken
• Het retourneert JSON, wat gemakkelijk is om mee te werken vanuit JavaScript
• Het is volledig open en gratis te gebruiken, geen authenticatie vereist

Dit laatste punt is vooral belangrijk: voor veel API's moet u een ingewikkeld OpenAuth-proces doorlopen, of ze zijn gewoon niet beschikbaar voor JavaScript dat in een browser wordt uitgevoerd.

Voor deze zelfstudie gebruiken we de New York Times-gegevens voor de VS van disease.sh. Dit eindpunt bevat gegevens van de duur van de pandemie (sinds 21 januari 2020), in een formaat waarmee u gemakkelijk kunt werken. Bekijk enkele gegevens van de disease.sh eindpunt we zullen gebruiken:

Als je gewend bent om met JSON om te gaan, kun je dat misschien zonder problemen lezen. Hier is een klein fragment in een beter leesbare lay-out:

[{
 "date":"2020-01-21",
 "gevallen":1,
 "sterfgevallen":0,
 "bijgewerkt":1643386814538
},{
 "date":"2020-01-22",
 "gevallen":1,
 "sterfgevallen":0,
 "bijgewerkt":1643386814538
}]

De API retourneert een eenvoudige reeks objecten, waarbij elk object een gegevenspunt vertegenwoordigt met datum, gevallen, enz.

De HTML instellen

Voor nu zullen we een aantal zeer eenvoudige skelet-HTML opzetten. Uiteindelijk moet u een paar externe bronnen toevoegen, maar dit is voldoende om aan de slag te gaan:

Covid-gevallen, VS

De gegevens ophalen met JavaScript

Begin met het ophalen van de gegevens van de API en deze weer te geven in de browserconsole. Dit helpt u te controleren of u kunt ophalen van de externe server en het antwoord kunt verwerken. Voeg de volgende code toe aan je covid.js het dossier:

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

De Fetch JavaScript API is een nieuwer alternatief voor XMLHttpRequest (lees er in detail over op: MDN). Het maakt gebruik van een Promise die asynchroon programmeren met callbacks een beetje eenvoudiger maakt. Met behulp van dit paradigma kunt u verschillende asynchrone stappen aan elkaar koppelen.

Gebruik na het ophalen van de vereiste URL de dan methode van de Belofte om het succesgeval af te handelen. Parseer het lichaam van het antwoord als JSON via de json() methode.

Verwant: JavaScript-pijlfuncties kunnen u een betere ontwikkelaar maken

Sinds dan() altijd een belofte retourneert, kunt u blijven ketenen om elke stap af te handelen. In de tweede stap, voor nu, logt u eenvoudig de gegevens in op de console zodat u deze kunt inspecteren:

U kunt communiceren met het object dat in de console wordt weergegeven om de gegevens van de API te inspecteren. Je hebt al veel vooruitgang geboekt, dus ga door naar de volgende stap als je er klaar voor bent.

Verwant: Foutopsporing in JavaScript: inloggen op de browserconsole

De gegevens weergeven met billboard.js

In plaats van de gegevens te loggen, laten we ze plotten met behulp van een JavaScript-bibliotheek. Bereid je hierop voor door de vorige code bij te werken om er als volgt uit te zien:

ophalen (api)
 .then (respons => respons.json())
 .dan (gegevens => {
 plotData (gegevens);
 });
functie plotData (gegevens) {
}

We gebruiken de billboard.js bibliotheek om ons een eenvoudige, interactieve grafiek te geven. billboard.js is eenvoudig, maar het ondersteunt een paar verschillende grafiektypen en stelt u in staat om assen, labels en alle standaardingrediënten van een grafiek aan te passen.

Je moet drie externe bestanden toevoegen, dus voeg deze toe aan de HEAD van je html:

Probeer billboard.js uit met de meest eenvoudige grafiek. Voeg het volgende toe aan: plotData():

bb.genereren({
 bindto: "#covid-all-us-cases",
 gegevens: {
 typ: "lijn",
 kolommen: [
 [ "gegevens", 10, 40, 20 ]
 ]
 }
});

De binden aan eigenschap definieert een selector die het doel-HTML-element identificeert waarin de grafiek moet worden gegenereerd. De gegevens zijn voor een lijn grafiek, met een enkele kolom. Merk op dat de kolomgegevens een array zijn die uit vier waarden bestaat, waarbij de eerste waarde een tekenreeks is die fungeert als de naam van die gegevens ("gegevens").

U zou een grafiek moeten zien die er ongeveer zo uitziet, met drie waarden in de reeks en een legenda die deze als "gegevens" bestempelt:

Het enige dat u nog hoeft te doen, is de werkelijke gegevens van de API waar u al naar overgaat plotData(). Dit vereist wat meer werk omdat je het in een geschikt formaat moet vertalen en billboard.js moet instrueren om alles correct weer te geven.

We zullen een grafiek plotten die de volledige casusgeschiedenis laat zien. Begin met het bouwen van twee kolommen, één voor de x-as die datums bevat, en één voor de feitelijke gegevensreeks die we in de grafiek zullen plotten:

var-sleutels = data.map (a => a.date),
 cases = data.map (a => a.cases);
keys.unshift("datums");
gevallen.unshift("gevallen");

Het resterende werk vereist aanpassingen aan het billboard-object.

bb.genereren({
 bindto: "#covid-all-us-cases",
 gegevens: {
 x: "datums",
 typ: "lijn",
 kolommen: [
 sleutels,
 gevallen
 ]
 }
});

Voeg ook het volgende toe: as eigendom:

 as: {
 x: {
 typ: "categorie",
 Kruis aan: {
 aantal: 10
 }
 }
 }

Dit zorgt ervoor dat de x-as slechts 10 datums weergeeft, zodat ze mooi uit elkaar staan. Merk op dat het uiteindelijke resultaat interactief is. Terwijl u uw cursor over de grafiek beweegt, geeft het billboard de gegevens weer in een pop-up:

Bekijk de bron voor deze tracker in GitHub.

variaties

Bekijk hoe u de brongegevens op verschillende manieren kunt gebruiken om te veranderen wat u plot met billboard.js.

Gegevens slechts voor één jaar bekijken

De algehele grafiek is erg druk omdat deze zoveel gegevens bevat. Een eenvoudige manier om het geluid te verminderen, is door de tijdsperiode te beperken tot bijvoorbeeld één jaar (GitHub). U hoeft hiervoor slechts één regel te wijzigen en u hoeft de niet aan te raken plotData helemaal niet functioneren; het is algemeen genoeg om een ​​beperkte set gegevens te verwerken.

In de seconde .dan() bellen, vervangen:

plotData (gegevens);

Met:

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

De filter() methode reduceert een array door een functie aan te roepen voor elke waarde in de array. Wanneer die functie terugkeert waar, het behoudt de waarde. Anders gooit hij het weg.

De bovenstaande functie retourneert waar als de waarde is datum eigendom groter is dan ‘2022’. Dit is een eenvoudige tekenreeksvergelijking, maar het werkt voor het formaat van deze gegevens, namelijk jaar-maand-dag, een erg handig formaat.

Gegevens bekijken met minder granulariteit

In plaats van de gegevens te beperken tot slechts één jaar, is een andere manier om de ruis te verminderen, het grootste deel ervan weg te gooien, maar gegevens van een vast interval te bewaren (GitHub). De gegevens bestrijken dan wel de hele oorspronkelijke periode, maar veel minder. Een voor de hand liggende benadering is om slechts één waarde van elke week te behouden, met andere woorden, elke zevende waarde.

De standaardtechniek om dit te doen is met de % (modulus) operator. Door te filteren op de modulus 7 van elke array-index die gelijk is aan 0, behouden we elke 7e waarde:

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

Houd er rekening mee dat u deze keer een alternatieve vorm van moet gebruiken filter() die twee argumenten gebruikt, waarbij de tweede de index vertegenwoordigt. Hier is het resultaat:

Gevallen en sterfgevallen in één grafiek bekijken

Probeer ten slotte beide gevallen en sterfgevallen op één kaart weer te geven (GitHub). Deze keer moet je de plotData() methode, maar de aanpak is grotendeels hetzelfde. De belangrijkste wijzigingen zijn de toevoeging van de nieuwe gegevens:

sterfgevallen = data.map (a => a.sterfgevallen)
...
kolommen = [ sleutels, gevallen, sterfgevallen ]

En tweaks om ervoor te zorgen dat billboard.js de assen correct opmaakt. Let in het bijzonder op de wijzigingen in de gegevensstructuur die hoort bij het object dat is doorgegeven aan bb.genereren:

gegevens: {
 x: "datums",
 kolommen: kolommen,
 assen: { "cases": "y", "deaths": "y2" },
 soorten: {
 gevallen: "bar"
 }
}

Definieer nu de meerdere assen om samen met een nieuw type te plotten dat specifiek is voor de gevallen serie.

API-resultaten plotten met JavaScript

Deze tutorial laat zien hoe je een eenvoudige API en een grafiekbibliotheek gebruikt om een ​​eenvoudige COVID-19-tracker in JavaScript te bouwen. De API ondersteunt tal van andere gegevens waarmee u voor verschillende landen kunt werken en bevat ook gegevens over vaccinatiegraad.

U kunt een breed scala aan billboard.js-diagramtypen gebruiken om het weer te geven, of een andere kaartbibliotheek. De keuze is aan jou!

Hoe maak je een grafiek met Chart.js

Dynamische gegevens weergeven met JavaScript was nog nooit zo eenvoudig.

Lees volgende

Over de auteur