܄

#榜样的力量#万博思图新冠全球疫情地图丨数据猿新冠战“疫”公益策划

【数据猿导读】 疫情期间,谣言与真相齐飞,而疫情实时动态数据对于居民提高自我防护意识,做好疫情防控工作,起着至关重要的作用。而疫情数据的可视化呈现(包括地图、图表等形式),能够让大众即看即懂,对疫情发展态势和分布有更加直观的了解,也能助力政府进行疫情监测管控。

#榜样的力量#万博思图新冠全球疫情地图丨数据猿新冠战“疫”公益策划

该项目案例由万博思图提交申报,参与数据猿推出的《寻找新冠战“疫”,中国数据智能产业先锋力量》的公益主题策划活动。

疫情当前 万博思图的企业责任与初心

一场突如其来的新冠疫情,让全世界的人都始料不及。正值阖家团圆的春节时期,中国却拉开了一场生死时速的救援,海内外社会各界纷纷行动起来,同心抗“疫”。在这场生死较量中,中国企业纷纷站了出来,结合自身业务模式,以技术、物资、服务等多种形式驰援战疫,成为抗疫大潮中一道温暖的风景。
而万博思图自疫情初始就没有缺席。春节期间,万博思图领导头带头向武汉捐款,万博思图员工们虽然身在四方,却积极响应,通过各种渠道、形式支援武汉抗疫。

数据战役 万博思图发力疫情监测防控

疫情期间,谣言与真相齐飞,而疫情实时动态数据对于居民提高自我防护意识,做好疫情防控工作,起着至关重要的作用。而疫情数据的可视化呈现(包括地图、图表等形式),能够让大众即看即懂,对疫情发展态势和分布有更加直观的了解,也能助力政府进行疫情监测管控。

作为一家数据可视化企业,为了切实支持疫情防控工作,万博思图全体员工放弃春节假期,临危受命,于2月初紧急开发上线疫情可视化监测大屏,帮助政府在疫情的可视化监控、疫情态势研判、资源部署调度等方面发挥作用,方便管理人员整体把握疫情,支撑科学决策,并面向政府机构免费开放3个月,助力疫情防控。

万博思图_疫情_公益策划-1

疫情监测防控指挥大屏1

万博思图_疫情_公益策划-2

疫情监测防控指挥大屏2

除了通过大数据可视化助力科学防疫,公司也试图从社会人文层面对此次疫情进行探析。从2月初开始,万博思图陆续推出疫情热点信息图报告,希望以图文结合、生动明晰的形式,解读疫情中的经济民生百态,从更深入更全面的角度帮助大众了解疫情、战胜疫情。

在整个疫情可视化项目期间,万博思图深刻地了解了疫情数据呈现的逻辑,积累了丰富的疫情数据可视化经验,为新冠全球疫情地图的上线做了铺垫。

疫情蔓延,国际疫情追踪成当务之急

从3月底开始,国内疫情趋于平复,而国际疫情加速蔓延,全球累计确诊新冠肺炎病例和死亡人数不断攀升,全球疫情陷入焦灼状态。国内疫情防控重点也开始转向境外输入防控。

为了追踪全球疫情演变,同时帮助国内做好国际人口流动管控,万博思图再次紧急上线新冠全球3D数据地图疫情,以强大的系统交互、酷炫的视觉体验,实现对全球疫情的可视化追踪呈现。

万博思图_疫情_公益策划-3

项目开发起止时间

1、2020年4月6日项目正式启动

4月初,国际疫情呈现加速蔓延趋势,为了可视化追踪国际疫情演变,助力国际人口流动管控,万博思图正式启动新冠全球疫情可视化地图项目。

2、2020年5月5日项目一期上线

克服了数据源获取、前端可视化呈现等众多挑战,历时1个月,万博思图新冠全球疫情地图一期重磅上线,并正式面向大众开放。

3、2020年6月5日项目英文版上线

万博思图新冠全球疫情地图一期英文版上线。

应用场景

本次上线的新冠全球疫情地图,是一个具有强大交互功能的全球疫情数据实时呈现系统。它面向全球每一个关心疫情态势的人开放,每个人都可以通过系统查看自己所在国家或所关心地区的疫情发展态势。

整体立意创新 强大3D感知

为了以更艺术化、具象化的形式帮助大众了解新冠病毒在全球的蔓延态势,万博思图可视化设计师在系统首页下足了功夫。

基于美国CDC发布的新冠病毒球体模型,可视化设计师创造性地模拟了人体肺部被新冠病毒入侵后的场景,并通过巧妙使用地球肌理,形象地展示了新冠病毒的入侵场景和全球疫情态势。

万博思图_疫情_公益策划-4

使用鼠标滚轮缩放,进入首屏3D模式,主视觉由新冠球体变成3D疫情地图,可立体感知各国疫情态势。同时,系统支持3D立体与2D平面双视图切换,方便横向比较各国的疫情风险等级。

万博思图_疫情_公益策划-5

3D立体视图

万博思图_疫情_公益策划-6

2D平面视图

全球疫情热力追踪 实时权威数据

为了方便用户更加直观地评估、比较各国疫情风险等级, 系统整体以热力图的形式呈现,从绿色至紫色,颜色越深,疫情风险等级越高,越需要引起警惕。同时,热力图支持查询各国、各地区现存确诊、累计确诊、累计治愈、累计死亡的实时数据,鼠标挪至热力图上对应国家板块,各维度实时数据,数据实时更新,权威准确。

万博思图_疫情_公益策划-7

多维指标体系 疫情态势多维呈现

除了全球疫情热力地图,系统通过设置 重点国家新增确诊趋势图、全球累计确诊现有确诊趋势图、病死率国家TOP10排名等多维图表,构建起全球疫情态势的多维疫情指标体系。

万博思图_疫情_公益策划-8

重点国家新增确诊趋势图

万博思图_疫情_公益策划-9

全球累计确诊现有确诊趋势图

万博思图_疫情_公益策划-10

病死率国家TOP10

重点国家数据联动下钻 疫情逐级探析

为了方便用户重点了解某个国家的疫情态势,系统提供强大的联动下钻功能,支持对单个国家的疫情数据进行省/州/市下钻,并联动相应数据图表进行展示。从宏观的全球态势,到微观的省市疫情,系统构建起了一个疫情逐级探析体系。

以美国为例,在平面视图中点击美国,即可下钻展示美国疫情热力地图,同时,旁边相应的疫情图表也会联动变成美国疫情实时数据,方便对美国疫情进行多维探析。

万博思图_疫情_公益策划-11

重点国家数据下钻

强大时间轴组件 三级时间颗粒

系统底部设置万博思图自主研发的强大时间轴组件,并设置“年”、“月”、“日”三级时间颗粒,可逐级查看各时间节点的疫情数据。

同时,时间轴支持进程播放,点击播放按钮,即可联动系统其它图表,动态查看某一时间范围内的疫情变化趋势。

面临挑战

针对本次疫情可视化系统,为了能够有一定突破和提升,在项目立项的时候就指定较高的目标,因此我们付出了很多的努力和挑战,最大的挑战有以下5点:

1、首先可视化设计是可视化系统最重要的环节。针对本次可视系统设计我们更多的创新,从整体结构,布局,动画效果,数据表现方式以及每一处的色彩搭配,均需考虑采用了全新的设计理念和方式;

2、pc端尺寸及兼容性适配问题。一般定制化可视化项目是专门针对大屏端进行设计开发的,所以我们需要对页面和图表组件进行自适应和兼容性的考虑;

3、业务操作逻辑繁多,数据联动关系复杂。有统计数据图表、时间维度数据、地理纬度数据,不同纬度数据间还需要联动下钻,比如地图下钻、单日疫情时间轴与地图联动、时间轴历史数据播放与地图数据联动以及下钻地图的时间轴联动等等多层级联动逻辑开发需求;

4、pc端性能优化。在展示形式上面我们有3D显示要求、时间轴平滑操作要求,还有历史播放接口的频繁调取, 这一切的功能需求都对我们后端和前端的性能要求提出了巨大挑战;

5、项目中对疫情可视化展示,要解决疫情数据源,疫情数据主要通过国家卫健委和世界卫健委官方网站发布。这两个官方网站发布的疫情数据都不能直接用于可视化展示,数据必须经过下载文本内容,抽取疫情数据,清洗处理为结构化数据才可以进行可视化。

实施过程

该项目在我们不断的打磨改进,经过努力,终于让疫情数据以一种全新的展示方式呈现出来,既美观绚丽,又简单全面直观的展示了疫情的演变历程和当前国美外实时状况。

接下来将从美术设计,技术实现和疫情数据采集三个方面介绍本次项目的具体实施过程。

可视化设计创意

针对疫情系统的可视化展示,我们在外观设计上也采用了全新的设计理念。

1、首先入场动画我们采用了刺突糖蛋白与地球结合的形式形成了新冠病毒的形态,漂浮在人体的肺部,生动的体现了此次疫情对人类的伤害以及在全世界范围内的严重性。

万博思图_疫情_公益策划-12

2、当鼠标滚轮向上滑动,便进入到了新冠全球数据地图的展开页面,整个页面我们是从功能清晰,交互便捷的出发点上加上了我们的创意进行最终的呈现。包括页面中颜色的使用以及图表的形态我们始终遵循一个理念:创意新颖、展示美观、交互逻辑清晰。

万博思图_疫情_公益策划-13

3、在中央主视觉上,我们以颜色以及分布点的大小来区分了各个国家现存确诊的数量以及累计确诊的数量,并以在地图上高低不同的柱来表示各个国家累计死亡的数量。并且当鼠标经过某一国家,可以清晰查看该国家的现存确诊、累计确诊、累计死亡、累计治愈的具体数据。

万博思图_疫情_公益策划-14

4、在主视觉两侧的图表中我们可以清晰直观的看到全球的累计确诊、现有确诊、新增确诊、累计死亡、累计治愈等具体数据以及发展趋势。在图表上我们不仅是形态上的创意,颜色的使用上我们也从美观与功能上也充分考虑了整个页面的和谐统一,例如:黄色代表确诊、红色代表死亡等。

万博思图_疫情_公益策划-15

5、通过鼠标滚轮的操作我们可以无缝下钻到平面世界地图,更加方便查看各个国家的疫情数据。

万博思图_疫情_公益策划-16

6、下方的时间轴我们设计了历史回放按钮,可以从时间选择框内选取想要观看回放的时间区间,点击回放按钮,在历史回放的过程中,中间主视觉地图的变化可以清楚生动的看到这个时间区间内各个国家的累计确诊与现存确诊在选定时间范围内的发展变化趋势。

万博思图_疫情_公益策划-17

可视展示技术

我们从架构、技术选型、数据对接上都做了相对应的实施方案,以确保项目的落地成型。

1、保证客户在观看的时候有良好的用户体验,也便于项目传播推广。

万博思图_疫情_公益策划-18万博思图_疫情_公益策划-19

2、技术选型上,我们针对地图部分采用了WebGL技术,做到了从新冠球体到疫情地球再到平面地球,最后下钻到国家层面地图的平滑过渡;对3D编程也使用了GLSL编程方式,这样能充分调动硬件性能,提高渲染效率。

3、数据对接上的难点主要在于时间轴的联动和历史数据的播放,这主要取决于时间轴组件的设计架构和数据接口对接是否合理。我们设计的时候按历史播放数据和地图钻取数据进行了详细区分和筛选,以减少历史播放时实时变化的图表数量来控制前端显示的性能开销;在数据上我们也是主要针对历史数据进行数据流的形式处理数据,这样就能让历史数据播放的时候能更平滑流畅。

数据采集

为了保证数据的权威性和可持续采集,我们先后尝试了各种方案,如直接爬取腾讯、百度、国家疫卫健委官网情等疫情数据或接摘录疫情网站的数据。这些方案前者会被不断改变的反扒技术限制,数据采集存在不可持续性,后者工作量太大。同时也考虑过一些第三方服务接口,但是这些接口数据不完整。经过分析后还是觉得国家卫健委官网和世界卫健委官网数据源最权威可靠。

因此,通过以下两种方式解决国内和世界疫情数据的采集。

1、采集国家疫情数据。我们先从国家以及各省卫健委官网将每天发布的疫情内容保存为html文件,然后通过本地解析页面DOM元素找到疫情内容,抽取疫情数据,结构化后持久化存储。

万博思图_疫情_公益策划-20

国家卫健委官网疫情数据

万博思图_疫情_公益策划-21

处理持久化的国家疫情数据

2、世界疫情数据采集。从世界卫健委官网下载发布的疫情数据pdf文件,在本地批量解析pdf文件的中数据表格内容,抽取疫情数据持久化存储。

万博思图_疫情_公益策划-22

世界卫健委官网疫情数据

万博思图_疫情_公益策划-23

处理持久化的世界疫情数据

3、经过计算,翻译处理后数据通过接口,提供疫情标准的JSON格式数据为各种可视化图表提供实时可筛选查询的数据。

应用效果

与国外约翰霍普金斯大学推出的“网红世界疫情地图”相比,万博思图推出的新冠全球疫情地图更加符合国内用户的阅读习惯。同时, 大量创意交互元素的加入,也使得该系统在可视化呈现上更为出色,为用户多角度、自由地发掘更多的信息提供了环境和条件,提升用户体验的流畅度。
 
系统一经上线,便获得网易新闻、搜狐网、极客网、国际在线、中国网、techweb、CSDN等数十家新闻媒体的转载报道,各网站纷纷转载,成为新的“网红疫情地图”,在可视化行业领域内收获了良好的口碑,平台的日均访问量也激增至1万+。

为了能让更多用户了解到这样一个方便强大的疫情数据可视化平台,我们也积极在微博、B站、抖音、知乎等社交平台上做了推广,全网共获得超千万次曝光和点赞。很多用户给万博思图留言互动,正如一名普通用户在B站给万博思图的留言所说“疫情期间,能挤出宝贵的企业经营时间,耗费人力物力开发这样一个疫情可视化平台,真的是难能可贵了。”

通过新冠全球疫情地图项目,万博思图不仅履行了自己的社会责任,为疫情防控贡献出科学的力量,更证明了自己在可视化领域的实力。在未来,万博思图将继续坚守自己的初心与责任,持续优化改进,为疫情防控提供更加强大优秀的可视化产品。

关于万博思图

万博思图(webstudio),国内卓越的大数据服务知名品牌,专注数据可视化分析与展示、可视化系统可视化产品(万博DataVis)、企业官网建设与运维、营销推广。自2007年成立以来,坚持以品质立足、创新驱动发展,提供各行业领域及应用场景全覆盖的数据可视化分析展示与官网营销解决方案。

经过多年的市场拓展,万博思图业务广泛覆盖智慧城市、智慧物流、工业互联网、物联网、新能源、生产可视化、网络安全、汽车、智慧零售、电商、园区管理、经济民生、教育服务、绿色环保、政务系统等11个行业及8个应用场景。

近年来,万博思图积极布局物联网业务,加大物联网应用探索力度,并加速推进“软硬一体化‘’进程。在整个产业生态中,我们致力于成为以应用服务与运营为核心的整体解决方案提供商和服务商。

公司拥有丰富的设计经验、深厚的技术底蕴搭建核心团队,秉承着匠人精神,提供可视化高端定制服务,先后服务于国家互联网应急中心、华润电力、百度、京东、泰康、顺丰、德邦、福田、宝沃、奔驰等国家各机关单位、央企、大型品牌集团。

万博思图以成为最值得信赖的大数据可视化服务第一品牌为愿景, 承载时代赋予的使命,展示数据魅力、洞悉数据价值,助力万千企业实现数据驱动的精细化运营。


来源: 数据猿

声明:数据猿尊重媒体行业规范,相关内容都会注明来源与作者;转载我们原创内容时,也请务必注明“来源:数据猿”与作者名称,否则将会受到数据猿追责。

我要评论

精品栏目

[2017/12/19]

大数据24小时

More>

[2017/12/18-22]

大数据周周看

More>

[2017/12/18-22]

大数据投融资

More>

[2017/12/18-22]

大咖周语录

More>

[2017/12/13-20]

大数据周聘汇

More>

[2017/12/12-19]

每周一本书

More>

返回顶部