By: Chris Wu
Mapbox China just launched a real-time map to visualize the spread of the Coronavirus (2019-nCoV) epidemic with Sinomaps, the leading map publishing house in China. The new map uses real-time data and heatmaps to display both the current and historical spread of 2019-nCoV over the past few weeks.
How we built it:
First, we selected a highly customized global topographic basemap and chose a heatmap to represent the density of the data. We integrated live and historical data to display the progression of the virus over time using both the growing heatmap and a time-series table.
This dynamic map uses the Mapbox GL engine to run seamlessly on mobile, web, and large-screen devices. To make the map accessible to a broad audience, we included a toggle to switch between Chinese and English language support with the default language shown based on system preference. By using our tile servers around the world, this map should load quickly for the end-user regardless of their location.
Map design
When designing the map, we broke it into three parts: basemap design, data processing, and interactive user interface, built on React and Mapbox GL JS.
“When we started designing the map, we mainly considered two important features. First, a dynamic map that shows the relationship between data changes and time, and lets the map ‘talk’; the second, a custom map style, which uses open-source Mapbox global topographic map, and fine-tune the color system to achieve the complementary expression of data.” — Mofei Zhu, Front-end Engineer, Mapbox China
To make the data stand out, we chose a dark style as the basemap. In Mapbox Studio, we started with the Monochrome basemap, selected the Dark variation, then began customizing it to fit our needs.
We then added our terrain-rgb data layer on top of the original basemap to create the detailed topographic map we wanted. To highlight the China provincial and administrative divisions, we modified the borders’ colors and weights. Finally, we brightened the ocean layer to a slightly blue hue to complete the underlying map.
Data processing
As no single source database for live data on the virus exists, we chose to use Toutiao’s Coronavirus Update Source. This database aggregates data from China’s National Health Commission, provincial health agencies, provincial and municipal governments, official channels of Hong Kong, Macao, and Taiwan, and other public real-time data. The data is saved as JSONs, enabling us to update the data daily.
We use multiple APIs in the data pipeline to show historical trends, including data for individual cities or countries. The biggest challenge in building the map was the need to repair data due to format differences manually — often, different regions are updated at various intervals, which makes it challenging to track in aggregation.
Data visualizations
Alongside the map, we added the time-series chart and accumulation table as a supplemental way to display data trends. If the preference is to view the map only, both chart and table can be closed and reopened, a feature which is optimal for devices with smaller screens.
For the overall UI design, we chose a cleaner font type and near-translucent font backgrounds, as they complement the heatmap colors and visualizations well.
We also included colorfill and cluster as additional options to view the data.
We will work to improve the map over time, and if you have feedback to share, email it to me. Learn more about resources and guidelines on building similar maps for 2019 n-CoV or other public health outbreaks in our recent post.
Disclaimer: Mapbox and Sinomaps hereby disclaim any and all representations and warranties with respect to the webpage mapbox.cn/coronavirusmap, including accuracy, fitness for use, and merchantability. Reliance on the map for medical guidance is strictly prohibited.
Chris Wu - Head of Product and Business Strategy, China - Mapbox | LinkedIn
Maps feature data from Mapbox and OpenStreetMap and their data partners.
Visualizing the progression of the 2019-nCoV outbreak was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.