AntV 墨者周刊第三十一期 · 使用带有细节的徽标让你的可视化蕴含更多信息、创作例程、单子探索 - 知乎

语言: CN / TW / HK

时间 2020-10-27 15:02:00 osc_c1s5s3wj

主题: felix barchart mason mapbox nightingale xeno planet bma ede doh

使用带有细节的徽标让你的可视化蕴含更多信息

无论是统计数据可视化，还是关系数据可视化，在一张图中，我们通常都只会包含着2—4个纬度的信息，这些信息通过数值/颜色/形状被感知。但是你是否想过一张图上其实能在徽标上做一些细节，这样让图蕴含的数据更加多维。在很多时候我们可以将不是那么重要的信息，通过细节的方式加入到徽标中。

举个最简单的例子，在关系图中，节点就是一种能蕴含很多信息的徽标（Badge），我们经常会给各个节点加入各种样式的信息，这样就让这个节点展示了更多纬度的信息，比如下面这个G6示例，在同一张图上展示了节点关系，时间，完成率等多个信息。

下面我们来看一个更加的复杂而有趣的例子，这个例子是在地图可视化里面的：

在这个灵感来自于甜品的地图中，展示了世界各地的HPI（The Happy Planet Index），简单来说就是各国人民的生活水平以及情况，那么他是怎么在细节中展示的多维度信息呢。地图中的板块颜色代表了其各地的GDP水平，而在此之外，他还有五个细节展示了其他纬度的信息：

甜甜圈颜色代表了HPI总体水平
甜甜圈上的糖豆表示了其生活期望
甜甜圈上的点缀表示了其经济足迹
地图上的星星表示了其富裕程度
地图上的点缀表示了支出水平

这样由主而次的设计细节，能让用户一眼看出重点的总结信息（GDP，HPI），也可以让用户可以注意细节时后观察细节的参数。

接下来我们就看看，怎样用图形化的方式来让一个徽标就能具备足够多的细节，向大家介绍——「蝴蝶徽标」

它是由可视化设计师Ruta Gokhale提出的一种蕴含多种信息的徽标，这样的徽标也被称为数据驱动的徽标，它本身就已经蕴含的多种信息，在模式化下可以被人和机器阅读提取信息。

这些徽标，确定了三个总体主题-数据，可视化和社会。这些数据来自于基于以上三个主题的调查问卷。蝴蝶的翅膀使用颜色来代表这些主题，绿色用于数据，棕色用于可视化，紫色用于社会。

蝴蝶上翼表示参与者的技能，调查中有九个问题，要求参与者自我评估技能水平。每个问题的自我报告的技能水平由符号数量表示。

下翼代表了数据可视化中最重要的问题是什么？根据收集到的所有答案，得到了通用的几个关键字。每个类别关键字的累积被使用的次数作为分数。该分数是相对的，并使用每种颜色的深浅进行表示。如果回答中没有所选出来的任何关键字，则该部分将显示为灰色。蝴蝶的身体有两个数据点。参与者在数据可视化领域的经验是由蝴蝶身上的条带数量来表示的。如果未提供答案或没有经历，则将身体的尖端突出显示。这样的徽标巧妙的把调查问卷的结果，巧妙的展示在了同一个徽标之中，并且每一种徽标都有区分度。

关于徽标的展示从来不止颜色或者形状这样单一的某些组合，通过常规标志的组合，并把它融入人们熟悉的形状之中，首先简化了信息的展示（类似于代码中的encode），同时也增加了可对比性，而且从主到次的的信息细节呈现，让用户粗看和细品会有不同的感受，让一张图的感受层次也更加丰富了。依照这样的理念，相信可视化的形式也会更加多样话。

参考文章：

https://blog.mapbox.com/doh-making-a-simspons-inspired-map-with-expressions-86e633b61ede

https://medium.com/nightingale/paint-me-a-portrait-89c6144ae168

by @明多牧(mingduomu)

创作例程

创作者（作曲家，画家，作家，科学家，哲学家）如何找到时间创作作品？梅森·柯瑞（Mason Currey）调查了数百名创意者为了节省时间，每天工作而运用的严格的“每日仪式”。有些人遵循相同的纪律制度数十年，而另一些人则只有在从事特定作品时才锁定模式。 “创意例程”将 Currey 研究的例程可视化。

从这个可视化中，可以找到一些有趣的发现。例如莫扎特、W.H.Auden 等人不怎么热爱运动；雨果一天当中创作的时间其实很短，大约只有一小时，大部分时间在进行社交活动或吃饭；被调查的所有人的睡眠时间都很短，平均都在四个小时以内。

by @十吾(shiwu-5wap2)

单子探索：一叶知秋

在日常学习、工作和生活中，人、事、物之间以各种各样的关系彼此关联着：人们之间存在着社交网络关注的关系；研究人员之间存在着项目合作、论文合作者的关系；著作之间存在着引用的关系等等。这些存在关系的数据构建出了一个关系信息空间。对这个空间进行浏览 (navigation) 有助于我们更好地探索其中存在的关系结构。而对关系信息空间进行浏览并不总是很容易的，尤其是当这个空间存在着异构的、或大规模的数据项。这篇文章则提出了一种新的浏览关系信息空间的方法——单子探索。

在可视化领域，Ben Shneiderman 在1996年提出了信息探索准则“先总览、再缩放和过滤，再分析细节”，在此后的十几年中被奉为设计经典。对数据进行聚合、总结是提供总览的主要手段，但这种方法通常会牺牲对丰富细节关系的描述。而这篇文章则从一个新的角度提出了关系信息空间的浏览方法，即从空间中的个体 (Monad) 出发，探索与其相关的其他个体，通过有效地切换关注个体以实现对空间的整体认知。

本文作者从社会学理论中借鉴三个法则：

单子通过与其他的关系而定义（Having)；
关系的差异性（Difference)；
单子间的移动（Movement) 来实现关系信息空间中的浏览。

根据这三个法则，他们提出了一种基于环形布局的可视化设计，如下图所示。在界面的中央是一个搜索框，数据中的数据项（即为单子）按环形布局排布。在这个角坐标系中，每个单子的角度是按照类别而固定的，这也正是在浏览过程中保证稳定的上下文环境(context)的一个关键设计。而单子的径向距离取决于其与中央单子的关联程度，越大越近。通过点击周围单子，可以实现中央单子的切换。此外，在这个形式上所设计的交互都保持连续、自然的过滤效果。

他们使用一本名为“Beautiful Trouble: A Toolbox For Revolution”的书作为测试数据。在这本书中，文章间交叉引用的情况很多。他们总结了5类不同的单子类型，构建出一个关系数据。再将他们提出的单子探索方法同步更新到书籍网站上，在 6 个月的时间里，有 4890 名来访者使用了他们的工具，获得 12 份反馈意见。这些反馈中对他们的方法有沉浸感良好、很容易学会、反馈积极等积极的印象。

有兴趣的同学可以点击这里进行体验。我简单试用了下，有以下几点感受：

在数据的展现形式上较为新颖，值得我们去学习；
对于普通的常识性知识的查看和浏览，通过这种形式能够满足；
数据之间的关联关系展示的不够直观，甚至有点混乱；
只能做简单的信息浏览，并不能很好地探索分析；
点击单个节点时，丢失全局信息之间的关系。

by @聚则(moyee-bzn)

Xeno Graphics: Wired but (sometimes) useful charts

一个展示各种奇怪不常见图表的网站

Horizon chart: A space-efficient time series visualization technique

Time map: 用户展示事件在二维时间维度下的特征

Tree map bar chart：

Cycle plot：

在面对这些奇怪的图表中，读者甚至会有恐惧的心理，文章称这种心理为Xenographphobia，第一眼看见这种奇怪图表时，可能就会觉得 1）这些图表比较酷、2）不清楚这些图表在表达什么意思。但但能理解这些图表中，也会发现这些图表也会很适合一些场景。

一方面因为从来没见过，这些奇怪的图表给读者带来了学习门槛，读者需要花时间精力才能理解；但另一方面，但如果不拥抱和学习这些新图表，这不会出现目前我们认为常见的通用图表了；这些奇怪的图表也可能是以后常见的通用图表。

by @翎刀(zqlu)

The Ultimate Data Dog

从数据上来看，什么品种的狗狗是最好的呢？根据美国犬业俱乐部（American Kennel Club）提供的数据，作者研究了狗狗的智力、寿命、遗传疾病等特征，建立了如下图所示的坐标系。横轴表示作者根据数据计算出的分数，纵轴表示不同品种狗狗的受欢迎程度。通过这个视图，我们可以快速对比狗狗得分和其受欢迎程度。