案例：新冠病例数据的更多可能——《11699位患者和我们的这一年》 #70
Description
Discussed in #63
Originally posted by Tiffany0718 November 15, 2021
第二小组
小组成员：陈琪雯、潘筱楠、王亦千、李思恬、黄捷
《11699位患者和我们的这一年》
作品链接：http://h5.thepaper.cn/html/zt/2020/12/liudiao/index.html
一、内容介绍
引入：情境再现
以新冠疫情爆发初期人们手机上密集的新闻弹窗将观众带回到2020年初。
手机屏幕上的时间从2019年12月31日到2020年1月31日，以新闻标题简短地回顾了疫情爆发初期所发生的一切。随后出现了 “我们该如何记住2020年这场疫情”字样。
截至2020年10月23日，澎湃收集到11699名在中国确诊的新冠患者的流调详情，报道中例举了几位如：和丈夫一起在浙江务工的女士在自驾回家的途中感染、一名50岁的男性船员在武汉岸上卸货时感染。
关于武汉的数据
在中国，疫情最初在武汉爆发，在11699份数据中，27%的患者和上面两位一样，发病前去到过武汉。
澎湃将这些数据整理后，把它们分成组，以代表他们之间的传染关系。这里的每棵树代表一簇有传染关系的患者们。树干的两段连着两名患者，上面移动的光电是传染方向，没有光点则说明这两名患者只是接触、但不一定谁传给谁。
一共有1191条树干带着光点，635条树干没有光点。这意味着，1191组患者存在着明确的传染关系。
家人、亲戚之间的传染占75%，其他传染关系如同事、朋友、公共场合擦肩而过的人，占21%。
关于全国的数据
52条传染链，最开始的源头都曾到过武汉。
但很快，疫情蔓延全国，131条传染链，传染源都不曾接触过武汉。
关于症状的数据
病毒不断更新，对出现症状的判断也越来越不确定了。
树状图展示了“没有记录症状”、仅有呼吸系统症状”、“呼吸系统及其他症状”、“没有呼吸系统症状”四类患者，放大的效果展现更多关于个体的细节。
提出邀请
还有更多不同的数据维度，澎湃新闻邀请大家尝试挖掘探索，用自己的方式书写这特殊的一年。
数据链接：https://github.com/839Studio/liudiao_data
二、可视化效果分析
话题引入：沉浸式的生活化表达
报道开篇首先呈现了一个手机锁屏页面，不断有消息提醒弹出，并且弹出速度不断加快。从国家卫健委专家组初抵武汉，到各地病例不断增多，几秒钟的时间为我们呈现疫情爆发初期的时间脉络，而手机锁屏页面这样的生活化表现也让我们更加带入到当时焦虑、恐慌的情绪中。
随后画面推进入一个宇宙般的浩瀚星海，其中每一个星星一样的小蓝点代表一位在中国确证新冠的患者。读者仿佛可以沉浸入这个美丽却深不见底的空间中，11699名患者的流调数据仿佛触手可及却又远在天边，给人一种震撼的、宏大的审美快感。
传染关系：沉浸式的交互体验
澎湃用“树”表现患者间的传染关系，树干两端链接两名患者，移动的光点是传染方向，没有光点则代表方向不明。平视和俯视两种视角向我们充分展示了“传染簇”数量规模之壮观。
而且，我们可以随意点击蓝色圆点查看患者的具体流调数据，还可以任意拖拽画面，改变观察视角，在“传染簇”中自由穿梭，方便深入了解每位病例间的联系，也提升了作品的互动性，让读者沉浸式地“体会数据”，而不是干巴巴的“阅读数据”。
感染症状：宏观到微观的推进式呈现
对于感染症状分布，作品先用柱状图总体呈现，随后画面迅速拉近，我们才会发现这些柱形都是由一个个代表患者的小蓝点组成。这样的设计，给读者带来了一种“渺沧海之一粟”的震撼感。从宏观到微观的推进式呈现，让读者深刻感受到了时代的大背景下个人遭遇的飘摇与无奈。
三、技术实现
该作品实现了炫酷的视觉效果，其背后是开源项目的支持。分析其调用的插件发现都来自于下面这个强大优秀的开源网站，网站上的代码库可以直接调用。
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
BootCDN是猫云联合Bootstrap中文网共同支持并维护的前端开源项目免费CDN服务，致力于为Bootstrap、jQuery、React、Vue.js一样优秀的前端开源项目提供稳定、快速的免费CDN加速服务。BootCDN所收录的开源项目主要同步于cdnjs开源项目仓库。
本作品中调用的插件主要有：
1、 three.js
Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。创建一个场景 – three.js docs (threejs.org)（如果对该插件的应用有更多的兴趣，可以参考该网站进行学习）
利用Three.JS可以制作出很多酷炫的3D动画，并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。通过Three.JS可以实现全景视图，这些全景视图应用在房产、家装行业能够带来更直观的视觉体验。在电商行业利用Three.JS可以实现产品的3D效果，这样用户就可以360度全方位地观察商品了，给用户带来更好的购物体验。另外，使用Three.JS还可以制作类似微信跳一跳那样的小游戏。随着技术的发展、基础网络的建设，web3D技术还能得到更广泛的应用。Three.js - 走进3D的奇妙世界。 - 知乎 (zhihu.com)（点击有更详细的介绍）
2、 jquery（jQuery）
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
可以实现的效果
（1）快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
（2）提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
（3）创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
（4）提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
（5）增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
（6）更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
可以实现的网页效果预览（在网站开发中很有用的8个 jQuery 效果【附源码】 - 梦想天空（山边小溪） - 博客园 (cnblogs.com)）
如果有自学的兴趣这里推荐一个网站（jQuery 安装 | 菜鸟教程 (runoob.com)）
3、 gsap（GSAP - GreenSock）
GreenSock动画平台（GSAP）可以对JavaScript可以操作的所有内容进行动画处理（CSS属性，SVG，React，画布，通用对象等），同时解决了不同浏览器上存在的兼容性问题，而且速度极快（比jQuery 快20倍）。大约有1000万个站点和许多主要品牌都使用 GSAP。动画其实是每秒多次改变元素属性值，元素看起来就仿佛在动一样，比如淡入淡出，旋转，移动等。而GSAP捕捉一个起始值和一个结束值，然后每秒在它们之间插值60次。如果从技术上面来讲，GSAP其实应该被称为“GreenSock属性操纵器”（GSPM）。
GSAP非常的灵活，几乎可以处理所有页面上可以通过JS进行改变的元素，例如：
• CSS：2D和3D变换，颜色，width，opacity，border-radius，margin，和几乎所有CSS值。
• SVG属性：viewBox，width，height，fill，stroke，cx，r，opacity，等插件，像MorphSVG和DrawSVG可用于高级特效。
• 任何数值，例如，呈现为的对象。对3D场景中的相机位置进行动画处理或过滤值。GSAP通常与Three.js和Pixi.js一起使用。
GSAP几乎可以做到你想要的任何动画，包括DOM的拖动，滚动触发，运动路径插件等等，唯一的缺点就是它包含可以实现的动画实在是太多了，需要花费一定的时间进行学习，不像Animate.css和Anime.js这些动画库一样简单易用，不过如果你的网页需要大量动画，GSAP不失为一个很好的选择。
如果想要学习也可以参考（Learning Center - Learning Center - GreenSock）。
四、不足与反思
这篇作品无疑是一篇优秀的数据新闻，为公众传达了清晰宏观的疫情整体图景，在知识管理和知识共享上做的非常好，但同时也存在一些问题：
1、 核心问题不明确。作为一篇疫情发展后期的数据新闻，这篇报道更多的是一种数据的呈现，而非解释或者预测。从知识社会学的角度来审视这篇报道，它生产的是一种熟悉性知识，而非理解性知识。读者可能会被酷炫的视觉呈现所震撼，但读完之后又会觉得没有任何信息增量，从内容来看只是一个新冠疫情的年终总结。
2、 数据挖掘不充分。报道使用到的数据库记录了11699例确诊病例的流调详情，这是一份非常庞大的数据库，作者舍弃了深度而去追求广度，最后形成了一篇看起来像是数字博物馆的作品。在报道的最后，作者也说：“这份数据还有许多不同的数据维度，我们邀请你一起尝试探索挖掘，用自己的方式去书写这特殊的一年。”因而这份数据库还有非常大的挖掘空间和挖掘潜力。
3、 数据分析偏向前端。我们将这篇作品与其他以疫情为主题的数据新闻报道进行了对比。本篇报道的数据分析主要是针对人们如何确诊新冠、如何被传染、有哪些症状，但对于后端的疫情影响、疫情防控分析不足。这也是因为整篇报道立足的数据库是确诊病例流调数据库，数据库本身还具有一定的局限性。关于疫情影响的数据新闻，推荐阅读《后疫情时代 | 我们如何被新冠肺炎改变了生活？》，其中分析了疫情对于全国各地人民卫生习惯、经济收入、心理心态、未来预期的影响。
因而我们作出以下的反思：首先数据新闻要发挥自己“大数据”，“强逻辑性”以及“时空延续性”的优势，不仅去关注更复杂、更重大的社会议题，还要尝试从多种维度去分析解释、甚至预测。“把数据与社会、数据与个人之间的复杂关系用可视化手段向公众展示，以客观、易于理解的报道方式激发公众对公共议题的关注与参与。”第二，要树立问题意识，明确核心问题。随着网络时代的发展，信息数据收集技术和各种可视化技术会更加多样和成熟。所以我们更要明确，数据新闻不只是“各式各样的数据”和“五花八门的可视化技术”的堆积，而要充分挖掘数据背后蕴含的问题，做数据新闻也要坚守做传统新闻时“以人为本”的初心。密切关注人类社会，做人性化的新闻设计，让数据带上人情味，做“落到实地”的数据新闻，才能真正走得长远。
五、再创作方向
1、标题是《11699位患者和我们这一年》，但整篇报道更多地偏向11699位患者，作为同样是疫情亲历者的“我们”却没有什么笔墨。
新闻开头部分的引入，弹窗的形式唤起了2020年初每个人的状态。当时成千上万的人闭门不出，时刻密切地关注着一切有关新冠疫情的消息，无可避免地，相当一部分人出现了替代性创伤、焦虑、疑病、恐惧等心理现象。“我们”虽然不是患者，但是“我们”身上的信息也可以被挖掘和呈现，作品可以增加这方面的内容。
2、澎湃提供的流调数据中有常住地、起始地、中转地、目的地、收治及隔离地。利用这些数据可以展现春运期间的人口流动趋势，以及全国各地中哪些地方的收治压力大，隔离压力大。
结语：新冠疫情开始已经将近两年，在过去的两年内，成百上千的报道关注并报道新冠疫情。时至今日，与新冠相关的数据是否还有更大的挖掘空间？这篇报道为我们提供了一种可能，而它也期待着我们探索出更多的再创作方向。