Due to the pandemic, we have personally struggled with visualizing the vastness of the data presented to us. We would want to see the data of current deaths and worldwide data, but the data presented when searching through google seemed very bland. We therefore decided to design and implement a new worldwide visual representation software of the current data.

What it does

The program fetches data from an API, then processes this data into various visual representations, such as maps, graphs, tables, and pie charts.

How we built it

We were able to use a variety of front-end frameworks to build this visualization software, including but not limited to: HTML, CSS, Javascript, Node.js, etc. By importing Apache Echarts through a front-end Node.js module, we were able to generate beautifully presented charts and graphs, as well as scatter plots which update in real time as the map view is changed. We also used the most updated data imported from an API (an amalgamation of different datasets including John Hopkins) for accuracy.

Challenges we ran into

It was very interesting to see how different servers processed .csv files differently. It seemed that the Netlify server processed certain .csv files differently as compared to the VS Code Live Server, which made it a challenge for us to figure out the errors. Another challenge was to make the dashboard responsive so that people with different sized screens could be able to view the content without much difficulty.

Accomplishments that we're proud of

We were able to complete our goal — to help others and ourselves — to visualize complex data. We were extremely proud of our ability to merge two APIs together. For instance, one of our APIs only had the country name and its current cases, but the coordinates for the countries weren’t there, so we decided to find another API that had countries and their corresponding coordinates. We then looped through with a quick-sort to merge the data as one, eventually formulating our own APIOps. We are also proud of designing an eye-catching website.

What we learned

We learned APIOps: operations done on APIs. We’ve also each individually learned separate front-end frameworks, such as Bootstrap, as well as Node.js modules for the front-end. From an aesthetic standpoint, we learned how to make a website presentable, even though the layout and color schemes can always be improved upon. As a team, we learned pair programming and how to divide and conquer projects. We used the standard Waterfall approach when designing the software. On the JS side, we were able to retrieve and manipulate data into associative arrays and allow for user interaction in the DOM.

What's next for COVID-19 Live Dashboard

To further progress with this website, we can implement a drill-down data processing system which configures the data within the USA for each county and state. On top of, the map would allow users to search for specific restaurants, parks, public spaces, and buildings for which you will be able to see the current daily cases around that area.

Share this project: