Eine React.js + Flask/MongoDB -Webanwendung, in der Informationen zum Coronavirus beschrieben werden, einschließlich Datensätze, Nachrichten, einer Zeitreihenanalyse und Informationen zur Impfstoffverteilung. Verwendet 6 APIs, um Daten über eine benutzerfreundliche Schnittstelle zu holen und zu präsentieren. Verwendet Chart.js & D3.js für dynamische Visualisierungen.
Hier finden Sie eine Videodemonstration der Webanwendung in Aktion.
Die Webanwendung hat 4 Abteilungen; eine für Datensätze, eine für bestimmte Nachrichten, eine für eine Zeitreihenanalyse und eine für Impfstoffverteilungsstatistiken. Jede dieser Registerkarten verwendet seine eigene einzigartige REST -API, die aus dem Flask -Backend abgerufen wird. Die Rest -API ruft von ihrer unterschiedlichen API von einer seriösen Organisation (z. B. data.gov, CDC.gov, Covidtracking.com oder newsapi.org) ab.
Diese Webanwendung besteht aus zwei Hauptprozessen: dem Python Backend und React Front End. Erstens beginnt das Python -Backend damit, den JSON von jeder jeweiligen API für ihre spezifische Route zu holen (da Flask ihre Rückgabetupfer auf diese spezifische Registerkarte der URL weiterleitet) und durch den JSON radelt, um alles zu greifen, was er benötigt. Nach Anhang dieser spezifischen Indizes an ein Array wird dieses Array in Form eines JSON -Wörterbuchs zurückgegeben, und Flask gibt es als REST -API für das vordere Ende zurück. Das vordere Ende formatiert dann die Daten, die sie erhalten (in Bezug auf Datensätze und deren Metadaten oder positive und negaitve -Fälle pro Tag), und präsentieren sie entweder in einer Liste, in einer scrollbaren DIV oder in der grafischen Darstellung, die auf die Registerkarte entspricht, auf die es die Daten bedient.
Die folgenden Bilder skizzieren die Anwendungsfunktionen zusammen mit der Benutzeroberfläche. 
Die erste Abteilung enthält relevante Datensätze, die sich auf den Coronavirus beziehen. Jeder Datensatz "Cell" enthält den Titel des Datensatzes, des Autors, der für die Veröffentlichung verantwortlichen Organisation, des Datums, das er veröffentlicht wurde, und eine kurze Beschreibung des Datensatzes. Es bietet auch einen Download -Link zum Datensatz, der nützlich ist, wenn man sich die Daten selbst ansehen möchte. Die Daten und Metadaten werden von Data.gov bereitgestellt.

Die zweite Abteilung enthält Informationsstatistiken zum Coronavirus. Es enthält auch eine Zeitreihenanalyse in Form eines Diagramms und holt Daten aus dem Covid -Tracking -Projekt ab.

Die Zeitreihenanalyse wird in Form eines Diagramms dargestellt, wobei die Punkte auf dem Covid -Tracking -Projekt aufgetragen werden. Im Folgenden finden Sie ein Bild des Graphen mit allen verschiedenen Parametern, die in einem einzelnen Diagramm dargestellt sind.

Das folgende Bild darstellt die dynamische Natur des Diagramms mit einstellbaren Parametern, um den Bedürfnissen des Benutzers zu erfüllen. Wenn der Benutzer keinen patikulären Parameter anzeigen muss, kann er ihn einfach herauskreuzen und die Grafik und die Achsen automatisch mit einer reibungslosen Animation einstellen.

Der zweite Diagramm repräsentiert die Ableitung (oder Änderungsrate) spezifischer Werte (z. B. Gesamtfälle pro Tag, Krankenhausaufenthalte pro Tag usw.). Diese Grafik hat typischerweise eine oszillierende Natur aufgrund von Covid -Testpraktiken, ist jedoch ein guter Hinweis darauf, wie schwerwiegend das Problem im aktuellen Moment ist, verglichen mit historisch gesehen, wie es war. Ähnlich wie im letzten Diagramm ist dieses Diagramm auch dynamisch, sodass der Benutzer den Diagramm nach eigenem Ermessen ändern und anpassen kann.

Unten ist ein Bild der Fußzeile, mit dem Datum, an dem die Daten zuletzt aktualisiert wurden, direkt aus der Covid -Tracking -Projekt -API gezogen.

Die dritte Division enthält Nachrichten über den Coronavirus. Jede Nachrichten "Cell" enthält den Titel des Artikels, des Autors, der Veröffentlichung, des veröffentlichten Datums, eines Bildes des Titelbildes und einer kurzen Beschreibung des Datensatzes. Es bietet auch einen Link zum Artikel für zukünftige Anzeigen oder Lernen mehr. Die Daten und die Metadaten werden von newsapi.org bereitgestellt.


Die vierte Division enthält relevante Impfstoffinformationen, einschließlich Verteilungsstatistiken, einer Visualisierung der Statistiken und einer US -Karte, die den Fortschritt des Impfstoffs von CDC.gov anzeigt.

Diese Abteilung enthält Impfstoffdosis -Sendungen und -verwaltungen pro Juristriktion, die alle in Form eines scrollbaren Divs sind. Es gruppiert sie auch nach Region, um einen leichteren Zugriff auf den Endbenutzer zu erhalten.

Diese Abteilung enthält außerdem ein Balkendiagramm der obigen Daten (Impfstoffdosis -Sendungen und -verwaltungen nach Gerichtshof), das dem Benutzer hilft, die Daten in einem viel einfacheren Sichtformat zu betrachten.

Schließlich wird eine US -Karte vorgestellt, um den Fortschritt des Impfstoffs geografisch zu sehen. Durch den Überschwebung über einen Staat kann man die oben dargestellten Daten (formatiert auf kartierte Weise) anzeigen und gleichzeitig den aktuellen Zustand ihrer Intensivkapazität betrachten. Je tiefer die roten, desto wichtiger ist der Ausnahmezustand in diesem spezifischen Zustand.
