地球可视化案例：未来的日食

这是华盛顿邮报开发的一个针对未来世界上将会发生的日食事件的交互式地球可视化案例。
image.png
在美国一个世纪以来发生的第一次日食跨越东西海岸的日食之后，《华盛顿邮报》创建了一个交互式地球可视化图，显示了未来直到2080年的日食以及他们的路径和发生时间。
image.pngimage.png
这个可视化案例的主体部分是一个旋转的 3D 地球仪。地球仪上绘制了很多条带状轨迹，每一组条带代表一次日食发生的范围。所有的条带共同展示了未来几十年内日食的总体路径和它们将在世界上发生的位置。除此之外，条带的阴影明暗度表示了每次日食发生的时间段。
image.png
同时他们也提供了多种等的交互模式。如 hover 可以显示这一条带的详细信息、发生时间等，如果在页面上输入出生年份，它会告诉您一生中还剩下多少次日食和它们的相关信息。还可以对地球进行位置拖动，暂停旋转等操作。最后他们还提供了美国本土历史所有日食的叠加可视化：
image.png

By @龙朱

埃塞俄比亚儿童发育迟缓问题

截至2016年，三分之一的埃塞俄比亚儿童发育迟缓。目前的发育迟缓率为38％，比撒哈拉以南非洲地区的平均水平高4个百分点。饮食多样性是特别优先事项。尽管许多孩子有足够的食物可吃，但饮食中营养的充足性尚不清楚。 2016年，只有14％的6到23个月大的儿童至少从四种食物中获得了足够多样化的饮食。

儿童发育迟缓占比与母亲的教育程度发展情况如下图。教育程度越高的母亲，儿童发育迟缓的比例更低。而从 2000 到 2016 年，发育迟缓儿童的占比在各个教育程度母亲的情况下都有所下降。埃塞俄比亚的教师普遍认为工资太低。
motherducation.gif

母亲的富裕程度对儿童发育迟缓比例的影响如下图。可以发现越富裕的母亲，儿童发育迟缓的概率更低：
motherwealth.gif

从城镇与农村住所附近的生活用水情况来看，是非常不公平的。
water.gif

埃塞俄比亚的自然环境也很不稳定，常常遭受自然灾害和极端天气，导致 850 万埃塞俄比亚人（约占人口的 10％）没有粮食保障。
image.png
By @十吾(shiwu-5wap2)

Scrollytelling 的过去、现在和未来1_PjvTDSCxOgKytDVk07ugRA.gif

自从人机交互被提出，滚动就是解决用户每次只能浏览有限内容的有效方案。
Scrollytelling 始于 2012 年纽约时报的 Snow Fall: The Avalanche at Tunnel Creek，里面使用了全屏播放视频、视差滚动等技术展示了 6 段故事，也赢得了当年的普利策奖。
image.png
2015 年 OpenVizConf 上也有专门的介绍 SO YOU THINK YOU CAN SCROLL。
当然也要避免过度滥用，The Scrollytelling Scourge 中就提出部分场景下使用 stepper 是更好的选择。
但总的来说，相比视频播放，用户在滚动时，可以随意控制播放速度的快慢，可以停下来仔细阅读，完成后再进入下一段。
比如这就是一个很好的例子，和折线图结合：
https://www.nytimes.com/interactive/2020/07/23/us/coronavirus-hotspots-countries.html

By @沧东(cangdong)

反转Y轴

通常来说，当我们绘制一个笛卡尔系（直角坐标系）图表的时候，y 轴（通常是数值）都是从原点开始，以小到大的顺序向上延伸。但是在一些特殊情况下，我们需要让 y 轴的顺序反转。

Line-20200909.png 20130201Fgr.jpg
通常情况下的 y 轴 反转的 y 轴

何时反转

比如上面的右图，y 轴表示的是深度。从人类通常的认知来看，越往“下”才是越“深”，所以此时 y 轴顶部为 0 可以示意为地平面，而深度向下发展。如果还是用正常的 y 轴，反而和读者认知相反，增加了阅读难度。

特别想指出的是，上面的右图其实还可以优化，如果 x 轴也可以固定到顶部，那就更加有“从地平线开始”向下延伸深度的意思，更加直观。

类似的情况还有当 y 轴表示：排名、错误率等情况。总结一下就是：常识上越小的数值在越靠“上”的情况。比如排名，第一名总是放在最高处的。比如错误率，错误率越低的总是越好的。

但是错误率这一个例子，其实是有争议的。因为错误率从低到高向上延伸其实也没什么问题。对于折线图、柱状图一类的笛卡尔系图表，读者在阅读的时候往往会很关注“最高点”，即折线的最高点、最高的柱子。这时候就要把握图表设计的一条核心规则：以分析目的为导向来设计图表，也就是这张图想表达的是什么，读者读这张图的目的是什么，读完以后可能的后续操作是什么。比如，如果这张图表想告诉读者“出错率最高的部门是哪个”，那就可以用正常 y 轴，凸显出那些最差的部门。如果这张图是想告诉读者“表现最好的部门是哪个”，那就可以反转 y 轴，这时候最高的那些点表示的就是出错率最低的部门。

所以 y 轴顺序的选择上，考虑两点：认知常识、高点信息和图表目的的关系。

代码实现

虽然 y 轴反转一下看起来是很简单的，但是实现起来有时候不是那么好做。有些图表类库不支持这样的能力，或者支持得不够灵活，或者文档中没有太多提及。

以 AntV/G2 为例，官方的基础折线图 demo 中添加两行代码就可以实现。

Screen Shot 2020-09-09 at 10.39.11 AM.png
基础折线图

对于基础的折线图，我们要反转 y 轴，实际上需要操控整个坐标系（coordinate）。

  1. chart.coordinate().scale(1, -1);
  2. // 或者（效果一样的）
  3. chart.coordinate().reflect('y');

我们对 y 轴的 scale * -1 这样就可以使得 y 轴被反转。我们可以发现坐标系默认了一个原点的连接。x 轴的位置随着 y 轴被“翻”上去了。

对于某些场景来说（比如说上文的“深度”的例子），这样子就足够了，x 轴在顶部可以表达一个地平线的示意。但是在其他一些场景中这不是我们想要的实现效果，也许我们还是希望 x 保留在传统的底部位置。

Screen Shot 2020-09-09 at 10.44.44 AM.png
反转坐标轴：y 轴

我们可以通过固定 x 轴位置的方式来解决这个问题。

  1. chart.axis('year', { position: 'top' });

设置 x 轴（映射为年份 year 字段）的位置在“顶部”。一个比较不直观设置是，虽然我需要它在底部，但是因为坐标系被反转了，所以这里设置它为“top”实际上才是让它固定到“底部”。

Screen Shot 2020-09-09 at 10.45.39 AM.png
固定 x 轴位置
_
一般的图表类库也都是通过类似的一到两步来完成这件事：反转轴、固定轴；可以查看相应的文档来找到具体的操作方法。但是也有一些工具是没有提供这种能力的，这时可能就需要考虑手工修改数据（预先排序、增加排序字段、取负值、数字转化为字符串，等等）之类的办法来 hack 这个效果了。hack 的方法太杂不做赘述，只提供这个思路。

特殊设计

关于 y 轴反转，在可视化设计的应用上有一个很经典的案例：Simon Scarr 的 Iraq’s Bloody Toll。

both.png

这个作品由两幅 infographics 组成，左侧的为主。它的标题是“伊拉克的血腥代价”，其主体部分是一张柱状图，描述不同年份的死亡人数。值得注意的是，这张图就是反转 y 轴的柱状图，而作者之所以这么设计，是希望整张图像呈现出“鲜血往下流淌”的感觉，从而更加凸显出作品的主题，使读者非常揪心于伊拉克的形势。

而第二部分，则是直接将左侧的作品进行三步处理：垂直翻转画面、整体变换颜色、修改标题为“伊拉克：死亡人数下降”。如此一来这个柱状图给人的感受就是在传达“事情已经好转了”。你看，只是简单的三步，整个作品传达的效果完全不同了。

By @步茗Neo(neowang)

50 Years Swiss Music Charts

该音乐可视化项目来自D ONE可视小组，歌曲数据来自 Spotify 的数据库，额外添加了诸如舞蹈性和情绪属性。他们将所有10939首歌曲，排名和属性网络转变成一个步入式互动星空，从而帮助观看者随着时间的推移更好地理解数据集。
image.png
D ONE小组将此多维数据投影到2D图表上，并用大小和颜色展示了其他维度的属性。
该项目将星空作为坐标系，水平轴为时间轴，垂直轴为代表 “情绪”，橙色=欢快，蓝色=悲伤，星星的大小=排名。每个星星都是可点击的，并且可以收听。
image.png
image.png
从颜色分布可以看出，忧郁音乐逐年占领了音乐市场的主导。
image.png

By @缨缨

Such Great Heights: Where Are the World’s Tallest Buildings?

人类似乎总是在力争超越自己过去的成就，组成我们城市的最高建筑物们就是十分有力的证据。从石器时代开始，人类在建筑上的壮举就不断随着时间的推移而发展。

我们可以从下面这张可视化视图中，找到每一个大陆上熠熠生辉的摩天大楼。同时，每个大洲都有着它自己的特色。

image.png

亚洲的高楼是不断增长的。迪拜的哈利法塔是亚洲最高的建筑，也是中东最受欢迎的旅游景点之一。只要乘一分钟的电梯就可以到达哈利法塔的顶峰。登上这座高楼，天空似乎也不再是人类的极限。

北美的高楼是混凝土丛林。世界贸易中心因「9·11事件」而建立，它也被非正式地称为「自由塔」。它高 541 米（1776 英尺），象征着美国独立宣言通过的那一年。

欧洲的高楼关键词是俄罗斯。这个大洲最高的五座建筑全在俄罗斯。最高的建筑是拉赫塔中心，一个位于圣彼得堡的大型混合用途非住宅建筑项目。

大洋洲高楼的景色在下面。我们很容易就能够想到，大洋洲排名前五的高楼都位于澳大利亚，排第一的是Q1大厦。它位于冲浪者的天堂——黄金海岸，提供了一个天顶瞭望台向游客提供 360 度眺望景观，北为布里斯本北部区域，西为黄金海岸内陆区域，南为新南威尔士州拜伦湾，东为太平洋。

南美洲高楼的景色要从顶部观赏。南美洲最高的建筑主要是住宅，排名前五的高楼中，位于巴西、阿根廷和委内瑞拉的高楼都符合这个规则。但智利是这一规则的一个例外。智利的大圣地亚哥塔是一个零售和办公综合体，也是拉丁美洲最大的购物中心。

非洲的高楼处于萌芽阶段。莱昂纳多大厦位于南非最大的城市约翰内斯堡，它是这座城市的瑰宝。值得一提的是，非洲最高的建筑由一个以女性为主的建筑团队所设计。

可以预计的是，在未来几年，还会有更多的宏伟建筑在这个世界拔地而起。

By @珂甫(pddpd)

Visualizing Fuzzy Overlapping Communities in Networks

图是可视化关系网络（Network）的主要手段，网络中的节点根据彼此之间的的联系紧密程度划分成许多聚类，一个节点可以从属于一个或多个这种群体。群体之间会有很多的重叠（Overlap），这种重叠可以分为确切的（Crisp）和模糊的（Fuzzy）。确切重叠表示对于一个节点，我们可以明确地知道它是否从属于一个群体，而模糊重叠表示一个节点在一定程度上从属于一个群体，因此可以把确切重叠看作模糊重叠的特例，模糊重叠更符合结点和群体的实际关系。

针对一个网络，如何展示群体间的这种重叠关系，对我们分析网络的结构，发现特殊个体具有重要作用。现在已经有了较多的工作来可视化确切重叠，其中最主要的方法是对重叠节点染色，或者使用欧拉图，凸包等形式来表现群体间的关系。但是可视化模糊重叠的工作很少，这篇来自2013年IEEE InfoVis的文章就是针对网络模糊重叠的可视化提出来一套新颖的布局算法，并给出来两个案例研究。
image.png

可视化设计
为了在图中保持群体结构，作者提出了如下的布局算法：

  • 提取出每个群体中的核心节点，这些节点的模糊度为 0，因此只从属于这一个群体；
  • 提取出这些核心节点之间的边，得到每个群体的核心图；
  • 对核心图进行布局；
  • 把群体中的非核心节点加入到核心图中进行布局，只调整非核心节点的位置，保持核心图布局不变；
  • 对所有布局好的群体，把他们合并起来。

为了表现模糊，作者针对节点和元节点分别设计了一种符号。
image.png

案例分析
image.png
案例中的数据来自一所小学 10 个班级 232 名学生和 10 名老师，记录了这些人之间每天的相互接触。通过结果我们可以看出，大约 19% 的学生和其他班级有接触，老师在所教的两个班级中接触均衡，基本布局在两个群体中间。而被聚类算法划分错群体的学生，因为网络关系复杂，所有会和其他班级学生混在一起。

总结
这篇文章对于网络中的群体模糊重叠问题设计了一套多层次的布局算法，在保留了每一个群体结构相对稳定的前提下，清楚展示了模糊个体在多个群体间的关系，为我们分析网络中的活跃点和群体间的关系提供了有力帮助。但作者没有提供很丰富的交互手段来对布局结果进行操作和调整。

By @聚则(moyee-bzn)**