So erstellen Sie einen COVID-19-Tracker in JavaScript

Suchen Sie nach einem schnellen Projekt, um Ihre Webentwicklungsfähigkeiten zu üben? Sie haben während der Pandemie wahrscheinlich viele verschiedene COVID-Tracker und -Diagramme gesehen – hier erfahren Sie, wie Sie mit minimalem Aufwand Ihre eigenen erstellen können.

Sie lernen einige nützliche Techniken in JavaScript kennen, darunter das Abrufen von Remote-Daten von einer API und die Verwendung einer Diagrammbibliothek, um sie anzuzeigen. Lassen Sie uns darauf eingehen.

Was Sie bauen werden

Dieser Leitfaden hilft dabei, die Grundlagen der Arbeit mit einer API unter Verwendung von JavaScript zu demonstrieren. Sie lernen, wie Sie Daten von einer entfernten Quelle abrufen. Sie werden auch sehen, wie Sie eine Diagrammbibliothek verwenden, um die abgerufenen Daten anzuzeigen.

Der gesamte in diesem Artikel verwendete Code ist in a GitHub Repository.

Erkundung der Datenquelle

Um die neuesten COVID-bezogenen Zahlen zu erhalten, verwenden wir Krankheit.sh das sich selbst als „Open Disease Data API“ bezeichnet.

Diese API ist ausgezeichnet, weil:

• Es hat viele verschiedene Datenquellen, die jeweils leicht unterschiedliche Formate bieten
• Es ist gut dokumentiert, nicht mit Beispielen, aber mit vielen Details darüber, wie jedes der Krankheit.sh Endpunkte funktionieren
• Es gibt JSON zurück, mit dem Sie einfach von JavaScript aus arbeiten können
• Es ist völlig offen und kostenlos zu verwenden, es ist keine Authentifizierung erforderlich

Dieser letzte Punkt ist besonders wichtig: Viele APIs erfordern einen komplizierten OpenAuth-Prozess oder sind einfach nicht für JavaScript verfügbar, das in einem Browser ausgeführt wird.

Für dieses Tutorial verwenden wir die Daten der New York Times für die USA von disease.sh. Dieser Endpunkt enthält Daten aus der Dauer der Pandemie (seit dem 21. Januar 2020) in einem einfach zu handhabenden Format. Schauen Sie sich einige Daten aus dem an disease.sh-Endpunkt wir werden verwenden:

Wenn Sie den Umgang mit JSON gewohnt sind, können Sie das möglicherweise problemlos lesen. Hier ein kleiner Auszug in besser lesbarer Form:

[{
 "date":"2020-01-21",
 "Fälle": 1,
 "Todesfälle":0,
 "aktualisiert": 1643386814538
},{
 "date":"2020-01-22",
 "Fälle": 1,
 "Todesfälle":0,
 "aktualisiert": 1643386814538
}]

Die API gibt ein einfaches Array von Objekten zurück, wobei jedes Objekt einen Datenpunkt mit Datum, Fällen usw. darstellt.

Einrichten des HTML

Fürs Erste richten wir ein sehr einfaches HTML-Skelett ein. Letztendlich müssen Sie ein paar externe Ressourcen einbeziehen, aber das reicht für den Anfang:

Covid-Fälle, USA

Abrufen der Daten mit JavaScript

Beginnen Sie damit, einfach die Daten von der API abzurufen und sie in der Browserkonsole anzuzeigen. Auf diese Weise können Sie überprüfen, ob Sie vom Remoteserver abrufen und die Antwort verarbeiten können. Fügen Sie den folgenden Code zu Ihrer hinzu covid.js Datei:

var api = ' https://disease.sh/v3/covid-19/nyt/usa';
holen (api)
 .then (Antwort => Antwort.json())
 .then (Daten => {
 console.log (Daten);
 });

Die Fetch-JavaScript-API ist eine neuere Alternative zu XMLHttpRequest (lesen Sie darüber ausführlich unter MDN). Es verwendet ein Promise, das die asynchrone Programmierung mit Callbacks etwas vereinfacht. Mit diesem Paradigma können Sie mehrere asynchrone Schritte miteinander verketten.

Verwenden Sie nach dem Abrufen der erforderlichen URL die dann Methode des Versprechens, um den Erfolgsfall zu behandeln. Analysieren Sie den Text der Antwort als JSON über die json() Methode.

Verwandt: JavaScript-Pfeilfunktionen können Sie zu einem besseren Entwickler machen

Seit dann() gibt immer ein Versprechen zurück, Sie können jeden Schritt weiter verketten. Melden Sie im zweiten Schritt die Daten vorerst einfach in der Konsole an, damit Sie sie überprüfen können:

Sie können mit dem in der Konsole angezeigten Objekt interagieren, um die Daten von der API zu überprüfen. Sie haben bereits viele Fortschritte gemacht, also fahren Sie mit dem nächsten Schritt fort, wenn Sie bereit sind.

Verwandt: Debugging in JavaScript: Anmeldung an der Browser-Konsole

Anzeige der Daten mit billboard.js

Anstatt die Daten zu protokollieren, zeichnen wir sie mit einer JavaScript-Bibliothek. Bereiten Sie sich darauf vor, indem Sie den vorherigen Code so aktualisieren, dass er folgendermaßen aussieht:

holen (api)
 .then (Antwort => Antwort.json())
 .then (Daten => {
 plotData (Daten);
 });
Funktion plotData (Daten) {
}

Wir verwenden die billboard.js Bibliothek, um uns ein einfaches, interaktives Diagramm zu geben. billboard.js ist einfach, unterstützt jedoch einige verschiedene Diagrammtypen und ermöglicht es Ihnen, Achsen, Beschriftungen und alle Standardbestandteile eines Diagramms anzupassen.

Sie müssen drei externe Dateien einfügen, also fügen Sie diese dem HEAD Ihres HTML-Codes hinzu:

Probieren Sie billboard.js mit dem einfachsten Diagramm aus. Fügen Sie Folgendes hinzu PlotDaten():

bb.generieren ({
 bindto: "#covid-all-us-cases",
 Daten: {
 Typ: "Linie",
 Säulen: [
 [ "Daten", 10, 40, 20 ]
 ]
 }
});

Der zu binden -Eigenschaft definiert einen Selektor, der das Ziel-HTML-Element identifiziert, in dem das Diagramm generiert werden soll. Die Daten sind für a Linie Diagramm, mit einer einzigen Spalte. Beachten Sie, dass die Spaltendaten ein Array sind, das aus vier Werten besteht, wobei der erste Wert eine Zeichenfolge ist, die als Name dieser Daten („Daten“) fungiert.

Sie sollten ein Diagramm sehen, das ungefähr so ​​aussieht, mit drei Werten in der Reihe und einer Legende, die es als „Daten“ bezeichnet:

Alles, was Sie noch tun müssen, ist, das Tatsächliche zu verwenden Daten von der API, die Sie bereits durchlaufen PlotDaten(). Dies erfordert etwas mehr Arbeit, da Sie es in ein geeignetes Format übersetzen und billboard.js anweisen müssen, alles korrekt anzuzeigen.

Wir zeichnen ein Diagramm, das die vollständige Fallgeschichte zeigt. Beginnen Sie mit dem Erstellen von zwei Spalten, eine für die x-Achse, die Datumsangaben enthält, und eine für die eigentliche Datenreihe, die wir in der Grafik darstellen werden:

var keys = data.map (a => a.date),
 Fälle = data.map (a => a.Fälle);
keys.unshift("dates");
cases.unshift("cases");

Die verbleibende Arbeit erfordert Anpassungen am Billboard-Objekt.

bb.generieren ({
 bindto: "#covid-all-us-cases",
 Daten: {
 x: "Datum",
 Typ: "Linie",
 Säulen: [
 Schlüssel,
 Fälle
 ]
 }
});

Fügen Sie außerdem Folgendes hinzu Achse Eigentum:

 Achse: {
 x: {
 Typ: "Kategorie",
 ankreuzen: {
 zählen: 10
 }
 }
 }

Dadurch wird sichergestellt, dass die x-Achse nur 10 Daten anzeigt, sodass sie gut verteilt sind. Beachten Sie, dass das Endergebnis interaktiv ist. Wenn Sie Ihren Mauszeiger über das Diagramm bewegen, zeigt Billboard Daten in einem Popup an:

Überprüfen Sie die Quelle für diesen Tracker in GitHub.

Variationen

Sehen Sie sich an, wie Sie die Quelldaten auf unterschiedliche Weise verwenden können, um zu ändern, was Sie mit billboard.js darstellen.

Anzeigen von Daten nur für ein einziges Jahr

Das Gesamtdiagramm ist sehr voll, weil es so viele Daten enthält. Eine einfache Möglichkeit, das Rauschen zu reduzieren, besteht darin, den Zeitraum zu begrenzen, beispielsweise auf ein Jahr (GitHub). Sie müssen dazu nur eine Zeile ändern, und Sie müssen die nicht berühren plotDaten überhaupt funktionieren; es ist allgemein genug, um einen reduzierten Datensatz zu verarbeiten.

In dieser Sekunde .dann() anrufen, ersetzen:

plotData (Daten);

Mit:

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

Der Filter() -Methode reduziert ein Array, indem sie eine Funktion für jeden Wert im Array aufruft. Wenn diese Funktion zurückkehrt wahr, es behält den Wert. Andernfalls wird es verworfen.

Die obige Funktion gibt true zurück, wenn der Wert ist Datum Eigentum ist größer als „2022“. Dies ist ein einfacher Zeichenfolgenvergleich, aber er funktioniert für das Format dieser Daten, das Jahr-Monat-Tag ist, ein sehr bequemes Format.

Anzeigen von Daten mit weniger Granularität

Anstatt die Daten auf nur ein Jahr zu beschränken, besteht eine andere Möglichkeit, das Rauschen zu reduzieren, darin, das meiste davon zu verwerfen, aber Daten aus einem festen Intervall aufzubewahren (GitHub). Die Daten decken dann den gesamten ursprünglichen Zeitraum ab, aber es wird viel weniger davon geben. Ein naheliegender Ansatz besteht darin, nur einen Wert aus jeder Woche zu behalten – mit anderen Worten, jeden siebten Wert.

Die Standardtechnik dafür ist mit der % (Modulus)-Operator. Indem wir nach dem Modulus 7 jedes Array-Index gleich 0 filtern, behalten wir jeden siebten Wert bei:

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

Beachten Sie, dass Sie dieses Mal eine alternative Form von verwenden müssen Filter() die zwei Argumente verwendet, wobei das zweite den Index darstellt. Hier ist das Ergebnis:

Anzeigen von Fällen und Todesfällen in einem Diagramm

Versuchen Sie schließlich, sowohl Fälle als auch Todesfälle in einem Diagramm anzuzeigen (GitHub). Dieses Mal müssen Sie die ändern PlotDaten() Methode, aber der Ansatz ist im Wesentlichen derselbe. Die wichtigsten Änderungen sind die Hinzufügung der neuen Daten:

deaths = data.map (a => a.deaths)
...
Spalten = [ Schlüssel, Fälle, Todesfälle ]

Und optimiert, um sicherzustellen, dass billboard.js die Achsen korrekt formatiert. Beachten Sie insbesondere die Änderungen an der Datenstruktur, die zum übergebenen Objekt gehört bb.generieren:

Daten: {
 x: "Datum",
 Spalten: Spalten,
 Achsen: { "Fälle": "y", "Todesfälle": "y2" },
 Typen: {
 Fälle: "Balken"
 }
}

Definieren Sie nun die mehreren zu plottenden Achsen zusammen mit einem neuen Typ, der spezifisch für die ist Fälle Serie.

Zeichnen von API-Ergebnissen mit JavaScript

Dieses Tutorial zeigt, wie Sie mit einer einfachen API und einer Diagrammbibliothek einen einfachen COVID-19-Tracker in JavaScript erstellen. Die API unterstützt viele andere Daten, mit denen Sie für verschiedene Länder arbeiten können, und enthält auch Daten zur Impfabdeckung.

Sie können eine Vielzahl von Billboard.js-Diagrammtypen verwenden, um es anzuzeigen, oder eine andere Diagrammbibliothek insgesamt. Es ist deine Entscheidung!

So erstellen Sie ein Diagramm mit Chart.js

Das Anzeigen dynamischer Daten mit JavaScript war noch nie so einfach.

Lesen Sie weiter

Über den Autor