首次发现病例的那一天，你在哪，又在做些什么

向帆，设计师、学者，清华大学美术学院副教授。一席第540位讲者，万象课程「见所未见」主讲人。

2020年1月23日，农历腊月二十八，向帆和合作者决定开始疫情数据可视化的工作。转天，「疫情的流图」发布，接下来是每一天的更新、讨论、改进。

如何看见疫情在时空中的变迁趋势，如何看到差异，又如何让人还能有点盼头？

流图第一次推送时，有条留言说：真想把进度条拖回去。三年过去了，走走散散。课程上线后，同事说看到结尾突然想哭，疫情之初就做了这样的视觉呈现，放开后的今天，我们走向流图的终点了吗？

我能不能替大家做一张疫情的信息图，让大家一起怀着希望等待疫情的结束？

第6课 疫情的流图

疫情刚开始的时候，我们都关在家里面，不知道外面发生了什么，每天都听新闻。那个时候我就在想，什么是病毒，病毒怎么传播？什么时候结束？现在怎么样了？

我就去看了一些文献，大部分关于病毒的研究其实都是在做时空关系，就是它怎么在时间线上传播，在不同的地域间传播。但是时间和空间其实是最难描述的。

寻找疫情的描述方式

当时的媒体报道，最简洁的方式就是地图。地图上的省份颜色越深，就说明这个省份疫情越严重。

如果过两天更严重了怎么办？它可能会变成黑色。再过两天还有病例出来怎么办？颜色就不能再深了。这就说明，如果疫情持续发展的话，地图的表达就会有问题。

而且这个地图看起来就很紧张，西藏才刚报道有一个病例，为什么整个西藏都已经红了？我觉得这在视觉认知上好像不太准确。

第二种方式就是画新增确诊和疑似病例两根线，这个图也让我们看得不太明白。

当时北京理工大学的孙远波老师就把媒体上面表达疫情的可视化都搜集来了，发现它们几乎都是相似的方式。可能大家面对紧急信息沟通这样的重大任务，一下子还不知道该怎么办。

为什么我们这么想看？实际上我们想看到疫情的尽头，不管它怎么样，不管几波几折，终归会走到终点上去。

但我现在在曲线上的什么位置呢？它什么时候往下降？

如果我们用这个纸模型把每天做成一棱，疫情是哪天开始转折了可能就看得比较清楚。

如果全国总体的比例是这样变化的，那每个省份应该怎么表达？每个省份可以有自己的曲线图，摞在一起就能看见此起彼伏的变化。但这也很有问题，因为前后会遮挡。

看着自己做的模型，我想起了一个著名的案例，就是英国工程师威廉·普莱费尔 (William Playfair) 设计的一个曲线图。

▲ Playfair,W (1786) Commercial and Political Atlas and Statistical Breviary

他讲的是英国与丹麦和挪威之间的贸易关系，前面一层是进口，后面一层是出口。

左边叠加的部分（上图黄色区域）说明英国买的东西多；随着国家的经济实力上升，我们看到右边上面的板块有一个重叠的部分（绿色区域），说明英国开始从海外赚钱了。

但这个图很容易让人迷惑，当不同曲线高度接近时就很难分辨；而且图层前后叠加，谁在前，谁在后？它们必须是透明的，否则可能被其他层完全覆盖。

这个问题怎么解决？威廉·普莱费尔是前后叠加，我们可以把每天每个省的感染人数，按照百分比垂直叠加，这样是不是就看得清楚了？

确实有一个聪明人这么做过，这个人叫瓦滕伯格 (Martin Wattenberg)，他从美国人口统计局拿到了每年新生儿的名字，做成这样一张图：

▲ https://namerology.com/baby-name-grapher/

人数越多，这一层就越厚，重叠起来我们就看到人们都爱取什么样的名字。比如在1880年到1930年之间，人们最爱取的女孩的名字叫Mary。就像我们有些人会叫国强，这些名字都跟时代相关。

我们输入自己的英文名字，就会发现自己的名字是什么时候最流行的。

这个项目一公布出来立刻有很多人喜爱，因为人们都想知道自己的名字是哪个年代的，都愿意去搜索。

作者也惊呆了，他只是拿到了一个社会型统计的数据集，没想到跟个人的兴趣连接起来了。

我在想，这个方式能够用来表达疫情吗？好像也行，但它看起来比较像山脉，感觉挺沉重的。

那么疫情应该怎么表达呢？我在网上发现了这样一张图：

我觉得这张图表达疫情可能是最好的，因为它有一个从左到右的时间线的变化，它可以气势汹汹地来到，然后慢慢地消失。 

这个图形特别符合我内心的愿望。我在想，我能不能替大家去做一张疫情的信息图，让大家一起怀着希望等待疫情的结束。

这是一个什么样的图形结构呢？实际上它可以这么理解，我们会在Excel里用柱状图来一天一天列下来，我们现在让它居中排列，它的外轮廓就会形成流线形。

有了这个流线形的图，是不是会感觉到从左到右好像有一种时光的流逝感，有一点盼头？

我就做了这么一个模型，形成一个有流向的河流的形状。河流肯定会有支流，这些支流是怎么汇进来的，又是怎么消失的？这样就会有总量和分量的信息表达。如果有很多也不怕，因为它按照百分比控制每一天柱状的高度。

有这样想法的人当然不止我一个，计算机科学家拜伦 (Lee Byron) 说实际上更有流动感的图上下不应该是对称的。他设计了一种算法，让流动的状态更随机一些，去表达流行音乐的变化。

这就是一个电台的流行音乐的流行度变化，从左到右，我们就会看到什么音乐一直流行，什么音乐突然流行一段时间就不流行了，这样看起来就特别有时光感。

▲ Lee Byron, Streamgraph

而且如果把时间线拉得更长一些，我们就会看到什么样的音乐是主流，什么音乐是一时间的。

他把这个图命名为“流图”(Streamgraph)。其实流图这个词应该说是他创造的，但他也不是世界上第一个用这种方式表达信息的人。在他之前还有一些学者用河流图呈现新闻事件。

1960 年代发生了古巴导弹危机，美国人突然发现苏联在离美国本土很近的古巴部署了导弹。学者针对事件的新闻报道做了词频统计，看哪些词出现得最频繁，按照时间把这些词列出来：

事件刚爆发的时候，新闻报道有很多是“武器”这样的关键词，但是随着时间变化，我们就会发现中间出现了“合作”，出现了“肯尼迪”。

这张图让我这个并没有出生在 1960 年代的人觉得还是蛮生动的，即便身处现在，我也能够看到当时那个波澜壮阔的历史，看到一场危机是怎么化解的。

所以我就想，无论是拜伦的音乐流图，还是新闻的河流地图，可能都很适合我们向公众去解释一个突发事件，它是怎么到达高点，又是怎么消失的。

疫情之流

我就跟我的合作者朱舜山一起讨论，能不能用这种方法向公众解释疫情的状态？我们从网上收集了一些数据去可视化，最早看到的图形是这个样子的，你会看到一个起点，也会看到增长的状态：

每天我们就把它发布在朋友圈里面，大家会问，明天将会怎样，什么时候是拐点？

我们就在想，这个图不应该仅仅是我们看到，应该让更多人看到。我们应该设计一个程序，让大家都能够在手机上使用，而且可以不断地优化和检测我们的设计。

我们就邀请了很多学生、朋友一起来参与，在很短的时间里把这个程序开发出来了。这张照片是开发出来以后第一次给我妈妈用，她就会问我为什么这个地方这么高，为什么这么低。这就像是一次对用户的观察吧。

在每天的图形观察中，我们也在理解这个图应该用什么颜色和宽度。随着每天的数据进来，它的变化是不是清楚的，能不能客观地反映疫情的情况？

比如2020年5月，左边这张图中红色的是当天新增患者最多的国家（美国）；过了一年多再去看，这张图就变成了右边这个样子。

它是怎么变的？大家可以看一个动画：

我们发现流图每隔一段时间变化就会非常明显。实际上一个原因是因为手机屏幕的宽度是固定的，一年和两年都是压到这个宽度，外形就会改变。

我也才意识到，我们做的是一个面向未来的设计，无法预料未来峰值是多少。

我前面讲到的案例，像流行音乐或者新闻事件，我知道它的最高峰是多少，就可以设定高度和宽度的百分比。但是面对疫情，我们是不知道最高峰的，它也就变成了我们意外的样子。

那它是不是就没有用？我想也许还是有一点用的，我们通过外形，起码知道现在比以前更严重还是更缓和了，会知道截至目前的最高峰大概出现在哪里。

我们当时开发软件的时候，从GitHub上面下载了4种开源程序，它们都可以帮我们生成这样的图形，所以我们不需要去做基础的研究，只要分析哪一种更适合表达疫情，哪一种看起来不太紧张，不会让人太沮丧，又兼具信息的正确性，这个时候其实就特别需要设计师的视觉考量。 

当时也有其他学科的学者和我们一样拿到了一些开源代码，右边这个图就是别的学科学者做出来的疫情可视化：

明明数据一样，为什么呈现出来会这么不一样？我想这可能说明在可视化设计当中，并不是有代码就行，或者能看见就行。同样的数据可能有不同的表达方法，人们会发现不同的结果。

这是一种叫作“远读”的信息阅读方法，你可以看到整体的信息变化状态，但是必然要损失一些细节。

这个图的外形对我们认知整体情况是有帮助的，但是细节看不清，那我们如何表达各个省份之间疫情的差异和变化？

如果我们用这种圈层图的方式，可能会获得更具有精度的观察。

有了这样一个思路，我们就把当时的数据灌进去，大圈是国家或省，省里有市，这样就可以把行政单位层级化地表示，我们就可以看到各地的疫情状态是怎么变化的：

圆圈的位置是算法自动排列的，会根据当天的新增病例在整体中的排序来定位。这个位置不是由人来决定的，是由当天的数据来决定的。就像病毒一样，好像不属于我们掌控的范畴，但是我们又能看清楚它出现在什么地方。

▲ 链接：http://zeelab.cn/WuhanCircleGraph/，可扫描二维码使用，最后更新时间为2022-04-19

这个图做完以后，我们也把它放在网上给大家看。很多朋友说圈层图比流图看得更清楚了，我能知道自己家乡怎么样了，我们省还有什么地方疫情没有那么严重。

作为开发者，我们也很好奇他们怎样使用，看到了什么。所以我们就问，你们在怎么使用它，能拍一张照片吗？

收到他们发来的照片时，感到特别惊异的是很多人都在给孩子用。他们说这个方法可以比较容易地跟孩子讲为什么我们不能离开家，外面发生了什么，病毒是什么。

病毒的隐喻

朋友给我提了一个问题：我们家孩子问我，病毒是蓝色的吗？

这个问题让我重新反省了一下——我为什么会设计成蓝色？

因为在疫情初期，我看到科学期刊上的一张图片是蓝灰色的，我专门调用了那个蓝灰色来设计我们的圈层图。

我又查到各种各样的病毒图片，有些看起来像玻璃，有些看起来像花朵，但如果我们仔细看，图下方往往会标注一个词，叫作 3D illustration，也就是说新冠病毒的这些恐怖画面，实际上是人工建模渲染的。

那真的新冠病毒是什么颜色呢？根据显微镜下看到的图片，它应该是没有颜色的。

那我们是不是不应该把新冠病毒穿上这么多奇怪的衣服、染上奇怪的颜色？好像答案并不那么简单。

首先，我们不能不去可视化它。如果不可视化它，人们就不能够理解新冠病毒，当人类看不见那个东西的时候，它是最恐怖的。

但如果要把它画出来让人们看见，这其中还有很多考量。人们愿不愿意看，能不能看得懂，看不看得清楚？我们应该怎样去描绘它？

描绘是充满隐喻性的，描绘本身隐藏着人对一个事件的理解。

▼ 观众留言

观看全部课程，请扫描下方二维码或点击阅读原文。今日为限免最后一天。