Visualizing COVID-19 Data with the HERE Maps API for JavaScript

Introduction

The first case of COVID-19 was recorded in 2019. The world quickly reacted to better understand the virus and its impact. Dashboards and visualizations that included charts, maps and graphics emerged. HERE created a comprehensive dashboard around this time. With changes in technology and the progression of the virus, the dashboard became obsolete. However, COVID is not going away, and while cases are not being reported at the same level, data is still coming in.

This blog post covers the basic repurposing of the original web app using the HERE Maps API for JavaScript and shows the recorded number of confirmed cases and deaths over time in over 3000+ locations as of July 2024. It will guide you on creating a similar user-friendly map interface showing global COVID-19 statistics. The web app relies on a fixed dataset stored in a CSV file, providing a detailed look at the pandemic’s worldwide impact, like the original.

Key Features of the Web Map or APP Visualization

1. Displaying Data from a Fixed CSV File

The tool is built around a static CSV file that contains global COVID-19 data, offering key information for each country, such as confirmed cases and reported deaths. While the data doesn’t update in real-time, it serves as a reliable reference for understanding how the pandemic evolved. This makes it useful for anyone looking to analyze historical trends.

2. Integration with the HERE Maps API for JavaScript

The HERE Maps API for JavaScript offers an interactive way to explore the data. Each country is represented by a green circle, indicating the presence of COVID-19 statistics. The size of the circle reflects the number of cases in that country—larger circles signify higher case counts. This visual approach makes it easy to get a global overview of the situation at a glance.

3. Pop-Up Details on Hover

Some countries display additional details through pop-up boxes that show both confirmed cases and deaths. For countries without a permanent pop-up, you can simply hover over the green circle to get a quick snapshot of the key data. This mix of static and hover-based information ensures that users can access the details they need without cluttering the map.

4. Country Selection and Map Navigation

A sidebar on the left provides a drop-down menu of countries to help with navigation. Selecting a country zooms the map in on that specific region. Below the dropdown, a full list of countries is shown, along with their COVID-19 statistics, making it easy to find and focus on specific data points.

5. Sidebar Displaying Comprehensive Country Data

The sidebar also serves as a handy companion to the map, displaying a full list of countries along with their corresponding case and death counts. Clicking on any country in the list automatically zooms in on it, providing quick access to that nation’s data. This feature allows for smooth navigation and better exploration of the dataset.

Focus on Design and Usability

Simplicity was a core focus in designing this COVID-19 web app. The green circles provide a clear, visual representation of the case numbers, making it easy to understand the data at a glance. Additional details are just a hover away, and the sidebar helps users explore the map effortlessly. The goal is to ensure a smooth, intuitive experience, whether the user is a casual browser or someone more familiar with data tools.

Since the app relies on a fixed CSV file, users can rely on the consistency of the data. It’s an excellent resource for those who need to conduct retrospective analyses or use the data for educational purposes. While the dataset doesn’t update in real time, it offers a valuable historical perspective, helping to identify broader trends in how COVID-19 spread globally.

Conclusion

The HERE COVID-19 web app provides a straightforward way to understand the global impact of the pandemic using the HERE Maps API for JavaScript. This revamped version set out to quickly show global cases and deaths, providing a snapshot of the toll of the pandemic. By combining interactive map features with a static dataset, it gives us a streamlined way to explore COVID-19 data.

In the part two, we’ll look at the technical aspects of the web app by deconstructing it step-by-step. We'll also provide some useful tips for developing with the HERE Maps API for JavaScript.

Thanks for reading and feel free to comment or reach out on our Slack workspace!