แอปพลิเคชันเว็บ React.js + Flask/MongoDB ที่ให้รายละเอียดเกี่ยวกับข้อมูลเกี่ยวกับ coronavirus รวมถึงชุดข้อมูลข่าวการวิเคราะห์อนุกรมเวลาและข้อมูลการกระจายวัคซีน ใช้ 6 APIs เพื่อดึงข้อมูลและนำเสนอข้อมูลผ่านอินเทอร์เฟซที่เป็นมิตรกับผู้ใช้ ใช้ chart.js & d3.js สำหรับการสร้างภาพแบบไดนามิก
นี่คือการสาธิตวิดีโอของเว็บแอปพลิเคชันที่ใช้งานได้
เว็บแอปพลิเคชันมี 4 แผนก; หนึ่งสำหรับชุดข้อมูลหนึ่งสำหรับข่าวเฉพาะหนึ่งรายการสำหรับการวิเคราะห์อนุกรมเวลาและหนึ่งสำหรับสถิติการกระจายวัคซีน แต่ละแท็บเหล่านี้ใช้ API REST ที่เป็นเอกลักษณ์ของตัวเองซึ่งดึงมาจากแบ็กเอนด์ขวด ส่วนที่เหลือ API ดึงมาจาก API ที่แตกต่างจากองค์กรที่มีชื่อเสียง (เช่น data.gov, CDC.GOV, covidtracking.com หรือ newsapi.org)
เว็บแอปพลิเคชันนี้ประกอบด้วยสองกระบวนการหลัก: แบ็กเอนด์ Python และ React Front End ครั้งแรกแบ็กเอนด์ Python เริ่มต้นด้วยการดึง JSON จากแต่ละ API ที่เกี่ยวข้องสำหรับเส้นทางที่เฉพาะเจาะจงของพวกเขา (ตามที่ขวดกำหนดค่าการคืนค่าของพวกเขาไปยังแท็บเฉพาะของ URL) และวนผ่าน JSON คว้าสิ่งที่ต้องการ หลังจากผนวกดัชนีเฉพาะเหล่านั้นเข้ากับอาร์เรย์แล้วจะส่งคืนอาร์เรย์นั้นในรูปแบบของพจนานุกรม JSON และ Flask จะส่งคืนเป็น REST API สำหรับส่วนหน้าจนถึงปัจจุบัน ส่วนหน้าจากนั้นจัดรูปแบบข้อมูลที่ได้รับ (ไม่ว่าจะเป็นชุดข้อมูลและข้อมูลเมตาของพวกเขาหรือกรณีบวกและ negaitve ต่อวัน) นำเสนอในรายการ, DIV แบบเลื่อนได้หรือการแสดงกราฟิกตามที่เกี่ยวข้องกับแท็บใดก็ตามที่ให้บริการข้อมูล
ภาพด้านล่างร่างฟังก์ชั่นแอปพลิเคชันพร้อมกับส่วนต่อประสานผู้ใช้ 
ส่วนแรกรวมถึงชุดข้อมูลที่เกี่ยวข้องที่เกี่ยวข้องกับ coronavirus ชุดข้อมูลแต่ละชุด "เซลล์" รวมถึงชื่อของชุดข้อมูลผู้แต่งองค์กรที่รับผิดชอบในการเผยแพร่วันที่เผยแพร่และคำอธิบายสั้น ๆ ของชุดข้อมูล นอกจากนี้ยังมีลิงก์ดาวน์โหลดไปยังชุดข้อมูลที่มีประโยชน์หากต้องการดูข้อมูลของตัวเอง ข้อมูลและข้อมูลเมตานั้นจัดทำโดย data.gov

ส่วนที่สองมีสถิติข้อมูลเกี่ยวกับ coronavirus นอกจากนี้ยังมีการวิเคราะห์อนุกรมเวลาในรูปแบบของกราฟและดึงข้อมูลจากโครงการติดตาม COVID

การวิเคราะห์อนุกรมเวลาแสดงอยู่ในรูปแบบของกราฟโดยมีจุดที่พล็อตถูกดึงมาจากโครงการติดตาม COVID ด้านล่างเป็นภาพของกราฟที่มีพารามิเตอร์ที่แตกต่างกันทั้งหมดแสดงในกราฟเดียว

ภาพด้านล่างแสดงถึงลักษณะแบบไดนามิกของกราฟพร้อมพารามิเตอร์ที่ปรับได้เพื่อตอบสนองความต้องการของผู้ใช้ หากผู้ใช้ไม่จำเป็นต้องดูพารามิเตอร์ paticular พวกเขาสามารถข้ามมันออกและกราฟและแกนปรับโดยอัตโนมัติทั้งหมดด้วยภาพเคลื่อนไหวที่ราบรื่น

กราฟที่สองแสดงถึงอนุพันธ์ (หรืออัตราการเปลี่ยนแปลง) ของค่าเฉพาะ (เช่นกรณีทั้งหมดต่อวันการรักษาในโรงพยาบาลต่อวัน ฯลฯ ) โดยทั่วไปกราฟนี้มีลักษณะการสั่นเนื่องจากการทดสอบ COVID แต่เป็นข้อบ่งชี้ที่ดีว่าปัญหารุนแรงเพียงใดในช่วงเวลาปัจจุบันเมื่อเทียบกับในอดีตที่เคยเป็นมา คล้ายกับกราฟสุดท้ายกราฟนี้ยังมีไดนามิกทำให้ผู้ใช้สามารถเปลี่ยนแปลงและปรับกราฟตามดุลยพินิจของพวกเขา

ด้านล่างเป็นภาพของส่วนท้ายพร้อมกับวันที่ข้อมูลได้รับการอัปเดตล่าสุดดึงโดยตรงจากโครงการติดตาม Covid Project API

ส่วนที่สามมีข่าวเกี่ยวกับ coronavirus แต่ละข่าว "เซลล์" มีชื่อเรื่องของบทความผู้เขียนสิ่งพิมพ์วันที่เผยแพร่ภาพของภาพหน้าปกและคำอธิบายสั้น ๆ ของชุดข้อมูล นอกจากนี้ยังมีลิงค์ไปยังบทความสำหรับการดูในอนาคตหรือการเรียนรู้เพิ่มเติม ข้อมูลและข้อมูลเมตานั้นจัดทำโดย newsapi.org


ส่วนที่สี่มีข้อมูลวัคซีนที่เกี่ยวข้องรวมถึงสถิติการกระจายการสร้างภาพสถิติและแผนที่ของสหรัฐอเมริกาที่แสดงถึงความคืบหน้าของวัคซีนจาก CDC.GOV

แผนกนี้มีการจัดส่งปริมาณวัคซีนและการบริหารต่อคณะลูกขุนแต่ละคนทั้งหมดอยู่ในรูปของ div ที่เลื่อนได้ นอกจากนี้ยังจัดกลุ่มตามภูมิภาคเพื่อให้เข้าถึงผู้ใช้ปลายทางได้ง่ายขึ้น

การแบ่งนี้ยังมีกราฟแท่งของข้อมูลด้านบน (การจัดส่งปริมาณวัคซีนและการดูแลระบบตามกฎหมาย) ซึ่งช่วยให้ผู้ใช้ดูข้อมูลที่สัมพันธ์กับตัวเองในรูปแบบที่ง่ายกว่ามาก

ในที่สุดแผนที่ของสหรัฐอเมริกาจะถูกนำเสนอเพื่อดูความคืบหน้าของวัคซีนในเชิงภูมิศาสตร์ ด้วยการโฉบเหนือสถานะหนึ่งสามารถดูข้อมูลที่นำเสนอข้างต้น (จัดรูปแบบในรูปแบบที่แมป) รวมถึงการดูสถานะปัจจุบันของความจุไอซียูพร้อมกัน ยิ่งมีสีแดงลึกเท่าใดสถานะของเหตุฉุกเฉินก็ยิ่งสำคัญยิ่งอยู่ในสถานะที่เฉพาะเจาะจงนั้น
