A React.js + Blask/MongoDB Web應用程序,詳細介紹了有關冠狀病毒的信息,包括數據集,新聞,時間序列分析和疫苗分銷信息。利用6個API來通過用戶友好的接口獲取和呈現數據。利用Chart.JS和D3.js進行動態可視化。
這是有關Web應用程序的視頻演示。
Web應用程序有4個部門;一個用於數據集,一個用於特定新聞,一個用於時間序列分析,另一個用於疫苗分銷統計。這些標籤中的每一個都利用了它自己的獨特REST API,它是從燒瓶後端獲取的。 REST API從其著名組織提供的獨特API(例如data.gov,cdc.gov,covidtracking.com或newsapi.org)中獲取。
該Web應用程序由兩個主要過程組成:Python後端和React前端。首先,Python後端首先從各個API中獲取其特定路線的JSON(因為燒瓶將其返回值路由到URL的該特定選項卡),然後循環在JSON中,抓住了所需的一切。將這些特定索引附加到數組之後,然後以JSON詞典的形式返回該數組,並將其返回為前端的REST API。然後,前端將其收回的數據格式化(它是數據集及其元數據或正面的元數據或每天的否定案例),將其呈現在列表,可滾動的DIV或圖形表示中,分別與該標籤上的任何標籤上的數據。
下面的圖像概述了應用程序功能及其用戶界面。 
第一部門包括與冠狀病毒有關的相關數據集。每個數據集“單元格”都包括數據集的標題,作者,負責發布的組織,發布日期以及數據集的簡要說明。它還提供了數據集的下載鏈接,如果要查看數據本身,則很有用。數據和元數據由data.gov提供。

第二師包含有關冠狀病毒的信息統計信息。它還包含圖形形式的時間序列分析,並從Covid跟踪項目中獲取數據。

時間序列分析以圖的形式表示,其中繪製的點是從Covid跟踪項目中獲取的。下面是圖形的圖像,其中所有不同參數在單個圖中表示。

下圖表示圖表的動態性質,具有可調節參數以滿足用戶的需求。如果用戶不需要查看Paticular參數,則可以簡單地將其劃出,並且圖形和軸自動調整,所有這些都可以通過平滑的動畫進行調整。

第二個圖表示特定值的衍生(或變化率)(例如每天總病例,每天住院等)。該圖通常由於共同測試實踐而具有振盪性質,但可以很好地表明與歷史上的問題相比,當前時刻的嚴重程度有多嚴重。與最後一個圖相似,此圖也是動態的,允許用戶根據其酌處權更改和調整圖形。

下面是頁腳的圖像,該日期是最後更新的日期,直接從COVID跟踪項目API中取出。

第三師包含有關冠狀病毒的新聞。每個新聞“單元格”都包含文章的標題,作者,出版物,發布的日期,封面圖片的圖像以及數據集的簡要說明。它還提供了一篇文章的鏈接,以供將來查看或學習更多。數據和元數據由newsapi.org提供。


第四師包含相關的疫苗信息,包括分佈統計,統計數據的可視化以及從cdc.gov表示疫苗進展的美國地圖。

該部門每次裁判中包含疫苗劑量的運輸和管理,所有這些都以可滾動的形式。它還按區域進行分組,以便於最終用戶訪問。

該部門還包含其上方數據的條形圖(疫苗劑量運輸和判決管理),這可以幫助用戶以更容易查看格式查看與自身的數據。

最後,為了在地理位置上查看疫苗的進度,提出了美國地圖。通過徘徊在一個狀態下,可以查看上面顯示的數據(以映射方式進行了格式),並同時查看其ICU能力的當前狀態。紅色越深,緊急狀態狀態越重要。
