新冠疫情态势防控可视化大屏项目详细介绍

创作初心

在新型冠状病毒感染肺炎疫情的肆虐下，本次作品的创作初心是希望能够运用自身所能，为对抗本次疫情尽一份绵薄之力。通过阿里巴巴所提供的DataV可视化工具，从用户实际需求出发，结合最新政府疫情大屏开发经验，从全国，省，市三个维度出发，层层递进，设计了“中国疫情态势防控预警洞察分析”，“江苏省新型冠状肺炎疫情动态大屏”，“进京人员监控可视化大屏”三款产品，深层次的挖掘基层拉网排查痛点。在整理分析好的数据基础上，进行可视化处理，建立一些对抗疫一线指战员有参考意义的数据模型，以便于提前进行防控预警处理，及时止损，更好的为抗击新型冠状病毒感染肺炎疫情做出贡献。

参赛组织：江苏粒度科技有限公司

作品一

作品名称：中国疫情态势防控预警洞察分析

团队信息：

• 前端工程师：郑大成
• 后台数据师：胡建国
• 界面设计师：杨章彬（队长）

作品链接：

https://datav.aliyuncs.com/share/a57ab02483189181e774b970f4fb2f90

作品截图

作品简介

以数据大屏的表现形式，对新型冠状病毒感染的肺炎疫情全国态势进行防控预警与洞察分析。本作品针对2019年的新型冠状病毒感染的肺炎疫情作出数据可视化处理，以全国疫情总态势作为切入点，直观全面的疫情态势的总趋势以及提早进行防控预警洞察分析，分析全国疫情数据，用最直观的表现手段，减少用户的认知负荷，提高决策者的决策效率与精准度。以国内确疫情概况为基本，深入挖掘分析各项数据指标，分析趋势占比，以直观展现疫情多维度的信息和走势，为疫情防控提供高效的信息视图。

• 风格上：采取了黑暗系的风格，在整体作品情绪上反映了现在疫情严重性，危险性，代表着成熟稳重。
• 色彩上：根据现在疫情，以病毒绿为主色调，搭配其他颜色分别代表确诊疑似等等，做到色彩符合主题，并且鲜明丰富。
• 排版上：分为三部分，分别是上左右的布局方式，上面的属于全国性数据，不与地图联动，所以位于上方隔开，左右占比分别是1 ： 0.618的黄金比例。左边地图，右边详细数据，左右地图数据会进行交互联动。
• 数据上：数据是保持实时更新的真实数据。
• 内容上：把全国数据和省级数据分开，上面放全国数据，下面一开始也是全国数据，不过是可以进行交互的数据，是可以切换到省级数据的。右侧一开始是全国性的疫情占比和疫情趋势以及数据热搜等等，点击地图后，右侧数据全部切换到所点击的省的疫情占比和疫情趋势以及数据热搜。右侧地图则展示全国确诊人数的热力图与热迁移图，还有点击到省的确诊小区以及医治医院。
• 交互上：地图上的热力图把鼠标放上去便可看到省级数据，点击则可把右侧数据全部更换成所点击的省级数据，地图上还会显示省级的热门城市的迁移飞线，代表迁移人流，左上角则可切换迁入人流或者迁出人流，点击全国就可以把数据和地图都回到全国的数据展示。

作品技术说明：

• 展示形式：使用阿里云的产品DATAV进行数据模型搭建，其使用组件有折线图、饼图、轮播列表、数字翻牌器、平面地图、tab切换列表、词云等可视化组件工具对相关数据进行直观展示。其中穿插着其他软件进行辅助，例如静态动态图片等等。
• 交互功能： 地图可以进行交互，点击省市，右侧数据栏回出现具体省市的详细数据。地图左上角点击交互可以看到地图上飞线展示热门门城市的迁出和迁入，点击全国按钮回到全国数据展示。
• 数据集规模：数据集的范围为全国疫情情况、实时播报、确诊小区数、发热门诊数、热门迁徙省份、热门迁徙城市、疫情热搜。
• 数据集的质量：大屏指标信息主要是疫情态势方向，涉及了全国和各省的确诊数量，死亡数量，治愈数量；每日疫情态势等。本案例的获取途径都是从国内互联网标杆企业获取，数据的质量较好。
• 业务架构：业务架构分为四层数据获取，数据整合，数据处理，数据可视化大屏应用
• 系统架构：数据源是阿里、腾讯、百度和丁香园的公开疫情地图；处理框架是java springboot框架，用来处理从数据源获取的数据，然后通过数据接口把数据返回出去；可视化大屏接入数据接口进行展示。
• 数据集获取方法：从阿里、腾讯、百度疫情、丁香园四个平台，上的数据进行了爬取和分析，找出了大屏所需要的数据，为了满足大屏指标的需求，对爬取的数据进行了处理。
• 地图坐标数据来源：http://datav.aliyun.com/tools/alas/#&lat=31.17624126124065&lng=112.25114999999998&zoom=7
• 大屏疫情数据来源：

1）阿里：

https://alihealth.taobao.com/medicalhealth/influenzamap

2）腾讯：

https://news.qq.com/zt2020/page/feiyan.htm 

3）百度: 

https://voice.baidu.com/act/newpneumonia/newpneumonia

4）丁香园：

https://ncov.dxy.cn/ncovh5/view/pneumonia?from=timeline

作品价值及影响力

中国疫情态势防控预警洞察分析主要是协助防疫部门管控针对于国家来针对疫情的情况对接下来的各大城市的防疫部署和推动相关政策。以及预测未来的疫情情况，预知疫情拐点，各地疫情发展趋势，及时的控制疫情并且提供了重要信息，有助于决策接下来各大城市的管控力度，例如学生开学和员工开工，公共交通等，疫情对各大城市的经济影响等，这些重大社会问题。

作品二

作品名称：江苏省新型冠状肺炎疫情动态大屏

团队信息：

• 前端工程师：李博
• 后台数据师：鄢文康
• 界面设计师：王群（队长）

作品链接：https://datav.aliyuncs.com/share/8c6546205e9beb70071d4a9178d6d86b

作品截图：

作品设计流程：

• 作品布局：

采用中轴对称型设计，左边为确基本疫情动态相关信息，右边是对左边数据多维度展开分析，中间为主要信息，平面立体相结合。

• 作品色彩

大屏整体颜色为绿色调。一是绿色是较为醒目的颜色，二是绿色是大自然的颜色，象征着健康的生命、希望、安全、平静，这也是对本次疫情的希望。

• 作品点缀

在部分重点数据上采用高亮效果处理，同类数据采用相同颜色。

红色：代表累计确诊人数；

橙色：代表现有确诊人数；

绿色：代表治愈人数；

灰色：代表死亡人数。

• 作品动效：

可视化数据大屏相比于传统图表与数据仪表盘，如今的数据可视化致力于用更生动、友好的形式。所以在本张作品中，添加了动效，让整个画面更加生动。（具体动效可点击作品链接观看）

• 作品交互：

作品指标说明：

作品技术说明

• 数据来源：
  • 接口链接1：https://news.qq.com/zt2020/page/feiyan.htm?from=singlemessage&isappinstalled=0&scene=1&clicktime=1579666166&enterid=1579666166#/?pool=jiangsu&channelId=。通过腾讯新闻的原始接口进行jason解析以及过滤器对数据进行过滤，获取江苏省的实时数据，以及全国实时数据。
  • 接口链接2：https://lab.isaaclin.cn/nCoV/zh。通过此接口获取最新疫情数据，数据来源于Github DXY-COVID-19-Data，再添加相应的过滤器展示出各市的疫情动态情况。
  • 接口链接3：https://voice.baidu.com/act/newpneumonia/newpneumonia?city=%E6%B1%9F%E8%8B%8F-%E6%B1%9F%E8%8B%8F。通过百度获取疫情数据——地图右上角展现一个实时的江苏省新闻信息，数据来源于百度；热门的迁徙的迁入与迁出，做的是动态切换效果，数据来源于百度，过滤器取Top10的数据。
• 所用Datav主要技术：
  • 蓝图编辑器：蓝图编辑器一般称为visual programming或者flow based programming，即通过可视化连线的方式，定义图层与图层之间的交互行为。蓝图编辑器区别于回调 id，可以保证交互和数据的实时性和同步性。大屏使用了蓝图编辑器进行交互操作，可以实现中间地图的累计确诊人数和现有确诊人数的切换，和人员流动迁入迁出地的切换。以地图的交互制作为例，整理 Tab 列表和区域热力层的交互需求。 例如单击 Tab 列表中的某一列，可将区域热力层显示或隐藏。Tab 按钮作为上游触发组件，当发生Tab 点击时发出事件，下游组件产生响应，通过判断Tab 组件按钮的点击值实现隐藏和显示功能。

  • 

  • 设置组件数据源：本次的数据源主要采用API接口的形式，在添加过API数据源后，勾选数据过滤器，启用数据过滤器功能。可单击右侧的+，添加一个数据过滤器，或者单击下拉框，选择一个已有的过滤器，实现数据结构转换、筛选和一些简单的计算。通过在组件内部数据配置时新建的过滤器同样会排列显示在项目过滤器列表中，并且在列表中可以看到过滤器和组件之间的依赖关系。数据响应结果实时展示了组件所使用的数据。当组件数据源发生变化时，数据响应结果会对应展示最新的数据。如果系统反应延迟，单击右侧的刷新图标，获取组件的最新数据。当响应结果满足组件的数据格式标准时，达到展示的要求。

  • 

作品价值及影响力

本张作品以江苏省新型冠状肺炎疫情动态为切入点，围绕着确诊病人人数分布这一数据，多维度挖掘、拓展相关数据。根据实时的数据变化可以产生即时变化，根据大量数据在机器学习模型内的计算分析后，直观展示了江苏省实时疫情发展趋势，各市疫情轻重等情况以及预测未来疫情发展趋势等。为及时控制疫情提供了重要信息，面向政府部门、相关职能机构、指挥员、抗疫人员等可提供可靠、可理解、易沟通的信息，来进行政策制定、关注方向的数据支撑和决策辅助，以此快速直观分析疫情并开展高效的抗疫、防控等工作，大大降低江苏省内疫情发展趋势的作用。是具有参考意义的数据模型。在数据的支撑下，全国、各地级市均可复用此可视化大屏，具有复用性。

作品三

作品名称：进京人员监控可视化大屏

团队信息：

• 前端工程师：刘建欣、万锦
• 后台数据师：张振
• 界面设计师：巩雪（队长）

作品链接：https://datav.aliyuncs.com/share/140711394ea66e635924955c4e58cc7f

作品截图：

作品设计说明：

• 布局排版：划分信息主次、针对不同数据选用适当的图表等可视化展现工具
• 色彩搭配：选用深色背景辅以不同半透明色块划分模块，给予良好的视觉体验
• 重点信息：搭配不同颜色突出各项重点信息，使可视化页面的重点数据更加直观
• 页面交互：根据交互需求设计交互效果及交互按钮,交互时间轴。作品页面可跳转展现市级、区级防疫信息，且每个层级侧重展示点不同，可以满足不同层次的管理者或者是使用者的需求

• 地图信息

作品中的地图以北京市级为划分，从市级隔离站点、确诊小区点位分布到聚焦区域的详细信息显示，层层递进，可预测疫情的区域发展趋势，得出疫情防控的重点地区，便于管理部门进行针对性防疫管理，以及个人可以选择性避开严重区域。

在市层级地图信息的展现上，为了给予用户更直观的体验，我们叠加了时间的概念。通过时间轴的控制，可以对北京市每日确诊小区的变换进行轮播展示。

结合两边的数据面板的显示，我们发现，进京人员分布较多的区域，确诊小区的活跃度就越高，其主要集中在朝阳区、海淀区、丰台区等几个区。

• 数据信息

作品技术说明：

• 数据源收集：

作品可获取数据来源包括北京市政府官方公告、北京市卫健委公告、铁路及民航信息发布等。 地图行政区域数据来源：地图服务http://geojson.io

新冠肺炎确诊人数数据来源：各官方微博、官方网站发布公开信息，丁香园整合接口https://lab.isaaclin.cn/nCoV/。确诊人员乘坐交通工具情况数据来源：各官方微博发布的乘车信息，整合接口http://2019ncov.nosugartech.com/。其他指标数据可在实际应用场景下从相关部门进一步实时获取。

• 业务架构：

• 系统架构：

作品价值及影响力

在返工潮的作用下，作为热门迁入地北京将迎来大批返城人员，本次可视化作品以返京人员为切入点，从北京市到区（以朝阳区为例）的维度清晰反映出整体进京人员来源地、进京人员区域分布、健康情况统计、乘坐交通等信息。再到局部区域监测人员和返京被监测人员，以及确诊小区的详情等。能够满足需求方想要了解的数据，可以提供给省、市级领导等需求方使用，以此来对返京人员进行有效控制，避免因复工返程而造成疫情进一步严重。