Creating a Japan COVID-19 Tracker using Mapbox GL JS and d3.js

Introduction

While preparing for the Mapbox GL JS exam, I challenged myself to create a project that would demonstrate my ability to integrate multiple technologies into a cohesive, interactive web application. I settled on developing a Japan COVID-19 Tracker that combines Mapbox GL JS for geospatial visualization and d3.js for dynamic data-driven visualizations.

The app uses data from the COVID-19 Japan API, which provides daily updates on cases, tests, and other key metrics. The goal was to project this data onto a map of Japan and pair it with insightful visualizations to make the information both accessible and engaging.

Features and Implementation

Mapping COVID-19 Data with Mapbox GL JS

Using Mapbox GL JS, I visualized all 47 prefectures of Japan, overlaying the map with real-time COVID-19 data. Each prefecture's color represents the severity of cases, with hover animations that provide detailed case breakdowns. This interaction was designed to make it easy for users to explore trends across the country visually.

Highlights:

• Prefecture-level visualization: Each prefecture dynamically updates its color based on case severity.
• Hover interactivity: Displays details like total cases, tests, and population percentages.
• Custom map styles: Tailored aesthetics to balance functionality and visual appeal.

Visualizing Trends with d3.js

To complement the map, I used d3.js to create a stacked bar chart that showcases the daily trend of cases and tests. This chart breaks down cases into four categories:

• Severe
• Active
• Recovered
• Deaths

Why d3.js?

d3.js excels at handling dynamic datasets and creating custom animations. By integrating it into the tracker, I was able to:

• Add transitions that respond to user interactions (e.g., hovering over a prefecture filters the data on the chart).
• Clearly visualize the progression of the pandemic in Japan, providing an intuitive understanding of the data.

The Challenges I Faced

Building this tracker came with its share of challenges:

1. Handling large datasets: The API provided detailed data, which required efficient processing to ensure smooth performance.
2. Syncing interactions between the map and chart: Hovering over a prefecture on the map updates the chart in real-time, and vice versa.
3. Designing responsive and intuitive UI/UX: The tracker needed to work seamlessly across different devices, including desktops and mobile.

Despite these hurdles, overcoming them was incredibly rewarding. The process taught me how to optimize performance, structure data-driven applications, and refine user experiences.

What I Learned

This project was an invaluable learning experience that enhanced my skills in:

• Geospatial data visualization: Deepened my understanding of Mapbox GL JS and its capabilities.
• Interactive data storytelling: Leveraged d3.js to transform raw data into compelling narratives.
• API integration and data management: Efficiently utilized a third-party API to create real-time updates.
• User experience design: Focused on creating intuitive, visually engaging features.

Conclusion and Next Steps

Developing the Japan COVID-19 Tracker was a fulfilling experience that allowed me to blend technical skills with creativity. I’m proud to share that I passed the Mapbox GL JS exam and gained the confidence to take on more ambitious projects using these tools.

I’m excited to explore further possibilities with Mapbox and d3.js.

Thanks for reading! 🌏