新冠疫情全球数据可视化

简述

新冠疫情自2019底爆发已有1年零3个月之久,很多媒体都有对疫情数据做出可视化与分析,但大多数据可视化都是二维地图的可视化。在一次浏览github的过程中,我无意发现了一个3D地球的可视化工具Globe.GL[1],就萌生把全球新冠疫情数据通过这个工具可视化出来的想法。这也是一个比较新颖的新冠疫情数据呈现方式,索性就接着作业的机会来实现。

借助全球的新冠疫情数据,我实现了近一年以来全球的疫情情况演变趋势的可视化,通过播放动画的方式呈现可视化结果,从中我看出了我国人民同心协力抗击疫情的优秀成果,也看见了美国为首的西方列国在面对疫情时的举足无措。做到最后也感受到了可视化的魅力,让我对世界有了更全面的认识。

 

数据源

疫情从最开始的中国本土爆发至世界性蔓延已过去了一年时间,一开始还担心数据获取上有一定困难,但经过google后发现,国外已有不少团队对每日的全球疫情信息进行了有效的整理,其中“Worldometers daily data”[2]就是一个在git开源的数据集。这个数据集每天都会自动更新数据源,数据主要来源是各国卫生部门公开的数据,在后台他会自动整合数据到规整格式,最终生成为csv文件。

 

(1)确诊人数据源

数据主要包括如下参数:

  1. 省份/州
  2. 国家/区域
  3. 经度、纬度
  4. 每日的确诊人数

 

(2)死亡人数数据源

数据主要包括如下参数:

  1. 省份/州
  2. 国家/区域
  3. 经度、纬度
  4. 每日的死亡人数

 

(3)病愈人数数据源

数据主要包括如下参数:

1. 省份/州

2. 国家/区域

3. 经度、纬度

4. 每日的病愈人数

 

 

在后续的开发过程中发现,Globe.GL中的经纬度数据要求是国家的经纬度信息,上述新冠疫情数据集中的经纬度数据和国家名称命名规范不能满足这个可视化工具的需求。因为,上述数据集中数据是每个国家详细城市的经纬度数据,在Globe.GL上使用这些经纬度信息不能映射到正确的国家地图板块上。所以我专门获取了适用于Globe.GL的经纬度数据集——Natural Earth[3]。后续的工作主要是提取其中的地理信息,和疫情数据做出整合。并且,在开发过程中考虑到,通过颜色来直观体现疫情的严重性,需要把确诊人数映射到颜色上,但后来发现不能直接根据确诊人数的多少直接进行映射,因为国家的人口基数同,可能会造成错误的视觉效果,所以还需要获取每个国家的总人口数据。很幸运的是,在获取的每个国家地理信息的数据集中就包含了国家人口的信息。

系统详述

  • 系统技术栈

编程语言:JavaScript,HTML,CSS

后台运行环境:Node.js

前端运行环境:浏览器

项目构建工具:snowpack[4]

可视化工具:globe,gl,d3.js[5]

 

  • 系统架构

 

图2 系统架构图

 

  • 数据处理

Node.js最大优势就在于它的异步操作上,作为爬虫这总存在大量请求IO的任务来说再合适不过,比python的单体爬虫效率高一个层次,所以选择用Node.js直接作为数据处理后台。

  1. 爬取疫情数据
  2. 爬取地理信息数据

由于得到的数据全部是csv数据文件,所以需要使用csv解析库进行解析,JavaScript第三方库提供了很好的支持,通过异步解析,在很短时间内就将数据加载到数据对象中,得到这些数据对象之后,根据国家名程或者经纬度进行数据整合。其中有些国家名称不合规范,我事先写好了映射函数直接进行替换即可得到规整数据集。

其中,爬虫任务和数据解析整合属于定时任务,可以在服务器写一个shell脚本定时执行.js文件即可获取实时更新的疫情数据。

 

  • 数据可视化

三维地球的可视化我使用的是globe,gl提供的地球模型和一些加载数据的API。对于可视化视觉方案我使用的是d3.js提供的一些API。比如根据不同国家确诊数量对颜色从黄色到红色的映射就使用了d3.js提供的颜色比例尺的API操作函数。

可视化的内容主要是,以每个国家的国旗作为国家标识,展示每个国家的确诊人数,死亡人数,病愈人数,同时展示每个国家人口基数。

可视化的颜色映射,在开发过程中发现通过颜色信息通道来展现疫情的严重性,如果不考虑每个国家的人口基数,就很难得出一个合理的视觉效果。所以我在衡量疫情严重性中加入了人口基数影响。

主要的思想是:严重程度 = min(确诊人数 : 人口基数 + 0.25min(死亡人数 : 病愈人数,1),1)

其中0.5参数是调整出来效果不错的经验值,这个公式基本反映了疫情严重程度。

      

       因为数据是时序数据,我也就想到了用动画的方式来展示可视化结果,通过动画呈现,能明显看到地球上每个国家颜色的变化,从而知道疫情的走势变化。通过d3.js提供的一些控件我也可以通过拖拽播放进度条直接查看具体日期的疫情数据。

结果展示

我将最终工程文件部署到了阿里云服务器,可通过访问http://47.98.249.202/ 查看数据可视化结果。

 

图3 可视化平台

 

参考

[1] https://github.com/vasturiano/globe.gl

[2] https://github.com/bumbeishvili/covid19-daily-data

[3] https://github.com/nvkelso/natural-earth-vector

[4] https://www.snowpack.dev

[5] https://d3js.org/

 

 

猜你喜欢

转载自blog.csdn.net/weixin_38708854/article/details/113885592