在全球新冠死亡破百万之际，美数课发布了《一百万，一个全球悲剧》🔗。以水墨山水画为意象，将200多个国家和地区的每日死亡数可视化出来，也在刚刚闭幕的2020中国可视化与可视分析大会中，成为艺术展览的六个受邀展览作品之一。

今天的教程里，课代表想以这个项目，来讲述一个信息饱和的话题里，如何推陈出新。

✦✧✧✧✧

让图表“站”起来

在发这篇报道之前，美数课已经从不同角度报道了全球新冠疫情的发展：

-《全球确诊破千万死亡破50万，新冠持久战怎么打？》🔗

……

一件事被媒体反复报道，读者是很容易产生认知疲劳的。尤其是在新冠疫情纪录不断刷新下，人们的关注不仅无法持续，甚至有着自我保护式的回避和麻木。

但是，重要的事情，是需要反复叙说的。这个时候，换种形式是一种重要方法。

于是，美数课开始探索三维可视化的交互产品。

三维可视化报道有许多经典的案例。比如，纽约时报在2015年发表过一个讲利率的作品：

 ⌂ https://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html

以及华尔街日报的纳斯达克股价“过山车”：

 ⌂http://graphics.wsj.com/3d-nasdaq/

那么问题来了，我们是怎么实现三维可视化的？

✧✦✧✧✧

可视化：横看成岭侧成峰

在上述的两个经典案例中，纽约时报的项目给予了更多灵感。

一个关于利率这样“干燥”话题的项目，也可以这么引人入胜。更重要的是，在可视化中，横看成岭侧成峰。也就是说，这组数据，从不同视图看过去，都是具有实际意义的。

理解了这个项目突破性的内核，就可以思考全球新冠逝者突破百万有哪些值得表达的内容。

这篇报道的核心是通过可视化回溯全球新冠死亡人数突破百万的历程，因此时间、国家都是必不可少的维度。在死亡人数上，我们最后用了WHO的全球各国每日新增死亡人数的数据。相比累计死亡人数，每日新增死亡人数能更好地体现差异性和趋势变化。

我们先用Excel生成图表来观察它的趋势。结果我们看到的是“一团乱麻”，乍一看并不能看出什么太显著的规律。

按计划，我们要让图表“站”起来（三维化），来观察不同角度的可视化效果。我们使用了THREE.js（https://threejs.org/），它是一个基于WebGL，能够在网页上实现三维效果（场景、模型、动画、光影等等）的JS库。简单来说，网页里想创建三维的东西，用它就对了！

接下来要做的是将数据和THREE.js结合在一起，生成三维图表。THREE.js提供了非常多的基础几何体（Geometry），我们探索了几种接近可视化需求的几何体：

线性几何体（Line）：可以表现趋势，但从别的角度看并没有可视化含义。

圆柱几何体（CylinderGeometry）：是一种可行的选择。但柱形只能按照一天一个来生成，我们的数据每个国家都有200多天，国家数量多了之后会出现明显的卡顿。下图渲染了100个国家超过2万个小柱子，已经有些不流畅了。

我们最后采用的是拉伸几何体（ExtrudeGeometry），横向的每一个面代表一个国家，这样即使生成200多个国家也完全不会卡顿。

✧✧✦✧✧

赋形：配色提升意境

上面的模型是不是有了种峰峦交错的感觉？

但这个夜店风的配色好像有点太出戏了……于是，我们的设计师决定尝试中国山水水墨画的风格，运用黑、白、灰给予了模型水墨画的质感。我们用着色器材质（ShaderMaterial），按照一个国家的历史单日死亡最大值给模型重新附上渐变色。最后改下背景，水墨风的feel就出来了。至此，建模工作就完成啦。

在细节调整上，我们延续水墨画的色彩体系，使用类似青绿的颜色来高亮重点的图表，使用类似赭石的颜色来批注图表。

✧✧✧✦✧

悬念：看山不是山

接下来就是要通过镜头变化来讲故事。

如何让读者进入这个项目时，立刻就被吸引，但能越看越惊喜，越看越感触？

我们在同组动画设计师的建议下，一开始就将镜头深入到了“山峦”之中。在代码添加的雾气效果里，读者可能会联想到一些意象，或是水墨画，或是《纪念碑谷》这样的电子游戏。但是，他们暂时无从了解，这些形状与新冠逝者有何联系。这样，就构成了一定的叙事悬念。

然后，我们再使用镜头的翻转、切换、拉伸，让读者看到模型的不同面向，从而走近数据。

在THREE.js中，镜头运动可以做很多酷炫的效果，举个例子：

为了让各个角度在可视化上有意义，我们需要在特定的角度，将三维图表转化为二维图表。我们在查阅资料后发现，可以通过在透视相机（PerspectiveCamera）和正交投影相机（OrthographicCamera）间进行切换来实现这个效果。

通过这样的转化后，在侧视图就可以以柱形图的形式，看出各国每日死亡人数的峰值是多少；在俯视图，以热力图的形式呈现出各国每日死亡人数的趋势。

在结合镜头运动和镜头切换后，就可以实现项目中的各种效果：

✧✧✧✧✦

后记

在debug的时候，我们把百万死亡这个概念结合到了加载页里。把100万和100%结合在一起：

项目发布以后，有一位读者评论道：“这并不是真的水墨山川，而是死亡叠起的峰峦。”

水墨峰峦是可视化呈现后的一种意象，它如果能够让读者给予新冠疫情再多一次注视，也许就能让现实生活中多一份谨慎，多一丝关怀。

这期分享到此结束。

◒◡◒

┊推 - 荐 - 阅 - 读┊