Hur man bygger en COVID-19-spårare i JavaScript

Letar du efter ett snabbt projekt för att träna dina webbutvecklingsfärdigheter? Du har förmodligen sett många olika COVID-spårare och diagram under hela pandemin – så här gör du din egen med minimal ansträngning.

Du kommer att lära dig några användbara tekniker i JavaScript, inklusive hur man hämtar fjärrdata från ett API och hur man använder ett diagrambibliotek för att visa det. Låt oss gå in i det.

Vad du kommer att bygga

Den här guiden hjälper dig att demonstrera grunderna för att arbeta med ett API som använder JavaScript. Du lär dig hur du hämtar data från en fjärrkälla. Du kommer också att se hur du använder ett diagrambibliotek för att visa hämtad data.

All kod som används i den här artikeln är tillgänglig i en Github förvaret.

Utforska datakällan

För att få de senaste covid-relaterade siffrorna kommer vi att använda sjukdom.sh som beskriver sig själv som ett "Open Disease Data API".

Detta API är utmärkt eftersom:

• Den har många olika datakällor, var och en erbjuder lite olika format
instagram viewer
• Det är väldokumenterat, inte med exempel, men med massor av detaljer om hur var och en av de sjukdom.sh endpoints fungerar
• Den returnerar JSON, som är lätt att arbeta med från JavaScript
• Det är helt öppet och gratis att använda, ingen autentisering krävs

Den här sista punkten är särskilt viktig: många API: er kräver att du går igenom en komplicerad OpenAuth-process, eller så är de helt enkelt inte tillgängliga för JavaScript som körs i en webbläsare.

För den här handledningen kommer vi att använda New York Times uppgifter för USA från disease.sh. Denna slutpunkt inkluderar data från pandemins varaktighet (sedan 21 januari 2020), i ett format som är lätt att arbeta med. Ta en titt på några data från disease.sh slutpunkt vi kommer att använda:

Om du är van vid att hantera JSON kan du kanske läsa det utan problem. Här är ett litet utdrag i en mer läsbar layout:

[{
 "datum":"2020-01-21",
 "fall":1,
 "dödsfall":0,
 "uppdaterad":1643386814538
},{
 "datum":"2020-01-22",
 "fall":1,
 "dödsfall":0,
 "uppdaterad":1643386814538
}]

API: et returnerar en enkel uppsättning objekt, där varje objekt representerar en datapunkt med datum, fall osv.

Konfigurera HTML

För tillfället kommer vi att sätta upp lite mycket enkel skelett-HTML. I slutändan måste du inkludera några externa resurser, men det här räcker för att komma igång:

Covid-fall, USA

Hämta data med JavaScript

Börja med att bara hämta data från API: et och visa den i webbläsarkonsolen. Detta hjälper dig att verifiera att du kan hämta från fjärrservern och bearbeta svaret. Lägg till följande kod till din covid.js fil:

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

Fetch JavaScript API är ett nyare alternativ till XMLHttpRequest (läs om det i detalj på MDN). Den använder ett löfte som gör asynkron programmering med återuppringningar lite enklare. Med hjälp av detta paradigm kan du koppla flera asynkrona steg ihop.

När du har hämtat den nödvändiga webbadressen, använd sedan metod för löftet för att hantera framgångsfallet. Analysera svarets kropp som JSON via json() metod.

Relaterad: JavaScript-pilfunktioner kan göra dig till en bättre utvecklare

Eftersom sedan() alltid returnerar ett löfte, du kan fortsätta att kedja för att hantera varje steg. I det andra steget, för nu, logga helt enkelt data till konsolen så att du kan inspektera den:

Du kommer att kunna interagera med objektet som visas i konsolen för att inspektera data från API: t. Du har redan gjort många framsteg, så gå vidare till nästa steg när du är redo.

Relaterad: Felsökning i JavaScript: Logga till webbläsarkonsolen

Visa data med hjälp av billboard.js

Istället för att logga data, låt oss rita upp dem med hjälp av ett JavaScript-bibliotek. Förbered dig på detta genom att uppdatera den tidigare koden så att den ser ut så här:

hämta (api)
 .then (respons => response.json())
 .then (data => {
 plotData (data);
 });
function plotData (data) {
}

Vi kommer att använda billboard.js bibliotek för att ge oss en enkel, interaktiv graf. billboard.js är grundläggande, men det stöder några olika diagramtyper och låter dig anpassa axlar, etiketter och alla standardingredienser i ett diagram.

Du måste inkludera tre externa filer, så lägg till dessa i HEAD av din html:

Testa billboard.js med det mest grundläggande diagrammet. Lägg till följande till plotData():

bb.generate({
 bindto: "#covid-alla-oss-fall",
 data: {
 typ: "linje",
 kolumner: [
 [ "data", 10, 40, 20 ]
 ]
 }
});

De Bind till egenskapen definierar en väljare som identifierar mål-HTML-elementet i vilket diagrammet ska genereras. Uppgifterna är för en linje diagram, med en enda kolumn. Observera att kolumndata är en matris som består av fyra värden, med det första värdet en sträng som fungerar som datanamnet ("data").

Du bör se ett diagram som ser ut lite så här, med tre värden i serien och en förklaring som märker det som "data":

Allt som återstår för dig att göra är att använda den faktiska data från API: et som du redan passerar in i plotData(). Detta kräver lite mer arbete eftersom du måste översätta det till ett lämpligt format och instruera billboard.js att visa allt korrekt.

Vi ritar ett diagram som visar hela fallhistoriken. Börja med att bygga två kolumner, en för x-axeln som innehåller datum och en för den faktiska dataserien som vi plottar på grafen:

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

Det återstående arbetet kräver justeringar av skyltobjektet.

bb.generate({
 bindto: "#covid-alla-oss-fall",
 data: {
 x: "datum",
 typ: "linje",
 kolumner: [
 nycklar,
 fall
 ]
 }
});

Lägg även till följande axel fast egendom:

 axel: {
 x: {
 typ: "kategori",
 bocka: {
 antal: 10
 }
 }
 }

Detta säkerställer att x-axeln bara visar 10 datum så att de är bra fördelade. Observera att slutresultatet är interaktivt. När du flyttar markören över grafen visar skylten data i ett popup-fönster:

Kolla in källan för denna tracker GitHub.

Variationer

Ta en titt på hur du kan använda källdata på olika sätt för att ändra vad du ritar med hjälp av billboard.js.

Visa data bara för ett enda år

Det övergripande diagrammet är mycket upptaget eftersom det innehåller så mycket data. Ett enkelt sätt att minska bullret är att begränsa tidsperioden, till ett enstaka år till exempel (GitHub). Du behöver bara ändra en rad för att göra detta, och du behöver inte röra plotData funktion alls; det är tillräckligt generellt för att hantera en minskad uppsättning data.

På sekunden .sedan() ring, ersätt:

plotData (data);

Med:

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

De filtrera() metod reducerar en array genom att anropa en funktion på varje värde i arrayen. När den funktionen kommer tillbaka Sann, det behåller värdet. Annars kastar den bort den.

Funktionen ovan returnerar sant om värdet är datum egendom är större än "2022". Detta är en enkel strängjämförelse, men den fungerar för formatet för denna data som är år-månad-dag, ett mycket bekvämt format.

Visa data med mindre granularitet

Istället för att begränsa data till bara ett år, är ett annat sätt att minska bruset att kassera det mesta men behålla data från ett fast intervall (GitHub). Uppgifterna kommer då att täcka hela den ursprungliga perioden, men det blir mycket mindre av det. Ett självklart tillvägagångssätt är att bara behålla ett värde från varje vecka – med andra ord vart sjunde värde.

Standardtekniken för att göra detta är med % (modul) operatör. Genom att filtrera på modulen 7 för varje matrisindex som är lika med 0, kommer vi att behålla vart sjunde värde:

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

Observera att du den här gången måste använda en alternativ form av filtrera() som använder två argument, det andra representerar indexet. Här är resultatet:

Visa fall och dödsfall i en graf

Slutligen, försök att visa både fall och dödsfall på ett diagram (GitHub). Den här gången måste du ändra plotData() metod, men tillvägagångssättet är huvudsakligen detsamma. De viktigaste ändringarna är tillägget av nya data:

dödsfall = data.map (a => a.deaths)
...
kolumner = [ nycklar, fall, dödsfall ]

Och justeringar för att säkerställa att billboard.js formaterar axlarna korrekt. Notera särskilt ändringarna i datastrukturen som tillhör objektet som skickas till bb.generera:

data: {
 x: "datum",
 kolumner: kolumner,
 axes: { "cases": "y", "deaths": "y2" },
 typer: {
 fall: "bar"
 }
}

Definiera nu de multipla axlarna som ska plottas tillsammans med en ny typ som är specifik för fall serier.

Rita API-resultat med JavaScript

Den här handledningen visar hur man använder ett enkelt API och ett kartbibliotek för att bygga en grundläggande COVID-19-spårare i JavaScript. API: et stöder massor av annan data du kan arbeta med för olika länder och inkluderar även data om vaccintäckning.

Du kan använda ett brett utbud av billboard.js-diagramtyper för att visa det, eller ett helt annat kartbibliotek. Valet är ditt!

Hur man gör ett diagram med Chart.js

Att visa dynamisk data med JavaScript har aldrig varit enklare.

Läs Nästa

Om författaren