世界博物馆

大英博物馆与谷歌艺术与文化实验室合作,搭建了名为“世界博物馆”的网站。世界博物馆是一个跨时间、大陆和文化的互动体验网站,网站上是大英博物馆收藏的物品。在这个网站上面,这些文物被映射到时间线上,用户可以探索和建立与世界文化之间的联系。
进入网站,首先浮现的是颜色各异的色块,然后散成成千上万的粒子,每个粒子都是博物馆所收藏的一件文物作品。主界面上,左侧为时间轴,底部按地域将文化区分为5大洲,点击每个具体的文物,就可以查看更详细的信息。
1549020767102-18fdc27e-7989-4aff-9906-042ced565adf.gif
by 聚则

How Many Kids We Have and When We Have Them

《How Many Kids We Have and When We Have Them》记录了一组数据,人们分别是什么年龄的时候生孩子,不同阶段总共生了几个。这是一个简单的统计场景,关键是这个作品的 storytelling 方式让人觉得“神清气爽”,值得借鉴。
1549077645617-f76ce9ae-8bfa-47a5-b56c-8aabccdc46fe.gif
by @步茗Neo(neowang)

A Day in the Life of Americans

墨者修齐 2019-02-11·世界博物馆、CartoColor、关于颜色辨别、Gephi布局指引 - 图3

Flowing Data 上最“贴题”的可视化案例。1,000个美国人一天的时间分配,每个点代表一个人,颜色代表“当前活动的终止状态”,譬如某个人下一分钟起床吃饭了,那他目前在 sleeping 这个区域,这个区域其他人大部分是黄色,但这个人的颜色会提前变为绿色,到点了就移动到 Eating & Drinking 区域。

大部分可视化讲求的都是“一针见血”的信息传递,准确、有力、富洞见。绝大多数教程也会告诉你,在什么情况下用什么样的图表什么样的可视化方案效率会更高,大部分情况下增加维度、增加动画会降低信息传达的效率。不过这个例子似乎提供了另一种角度:也许某些情况下我们不想要一个干巴巴的结果。你告诉我“1000个美国人一天24小时里每一个时刻都至少有3个人在睡觉”,我除了“嗯哼~”以外,不会有更多的共鸣。但如果这个结论是我盯着这个动画,花了十几秒发现的规律,那似乎这个结论更有趣了一点。何况不同的人盯着看十几秒,得出的洞见也许完全不同,它的传达是“模糊的”、“探索式的”,甚至是“千人千面的”。

多一个时间轴相当于给画布增加一个非视觉维度,再配合动画,感觉时序数据的可视化可以有很多新鲜有趣的玩法。
by @绝云(leungwensen)

CartoColor

[GitHub] [主页]
数据可视化过程中,配色是一件很微妙的事情,ColorBrewer这款应用能够根据定制选择出用色方案。而CartoColors 则更加方便快捷的给出各种不同的配色方案,用户只需要进行点击,就可以复制一整套配色数值,非常方便快捷,能够很好的帮我们决定我们的系统用色。
墨者修齐 2019-02-11·世界博物馆、CartoColor、关于颜色辨别、Gephi布局指引 - 图4
by @司马淇(simaqi)

Gephi 布局指引

Gephi Tutorial Layouts,Welcome to this advanced tutorial. It will teach you the fine art of network layout in Gephi: how to use algorithms that place the nodes inside the graphic space.

对常用图布局做了一个比较概括的总结,作者认为图布局通常分一下四大类以及对应的使用场景:

墨者修齐 2019-02-11·世界博物馆、CartoColor、关于颜色辨别、Gephi布局指引 - 图5
墨者修齐 2019-02-11·世界博物馆、CartoColor、关于颜色辨别、Gephi布局指引 - 图6

关于颜色辨别与针对色盲色弱的可视化设计优化

8% Better — Data Graphics and Colour Vision
Information graphics should allow all viewers to easily understand raw data. These graphics can also provide interesting and alternative perspectives on a dataset.
Unfortunately, in many cases aesthetics take precedence over clarity, with poor use of colour and little or no labelling. Such graphics are difficult for viewers to decipher, especially viewers with some form of visual impairment.
Unfortunately, in many cases aesthetics take precedence over clarity, with poor use of colour and little or no labelling. Such graphics are difficult for viewers to decipher, especially viewers with some form of visual impairment.
墨者修齐 2019-02-11·世界博物馆、CartoColor、关于颜色辨别、Gephi布局指引 - 图7

波函数坍缩

波函数坍缩算法(WFC)接受一个结构化的输入,渐进生成一个与之类似的输出。常见的用途是用来做图像生成。
墨者修齐 2019-02-11·世界博物馆、CartoColor、关于颜色辨别、Gephi布局指引 - 图8
最近有人用这个算法实现了一个无限之城,并开源了。代码地址
墨者修齐 2019-02-11·世界博物馆、CartoColor、关于颜色辨别、Gephi布局指引 - 图9
具体原理可以看这篇「The Wavefunction Collapse Algorithm explained very clearly」里面举了一个很生动的例子来解释这个算法:

想象一下你正在计划一场婚礼。问题来了,办几桌宴席、嘉宾坐哪里都需要考虑。不巧的是,为了照顾大家的情绪和满足各种条条框框的习俗,你需要调节几个问题:

  • 老爹不能坐在老妈两张桌子以内的距离
  • 老妹如果不能和其他兄弟姐妹坐一桌,会开启可怕的狂暴模式
  • 最好不要让叔叔和环保主义者挨在一起坐

此情此景下,你可以选择波函数坍缩来解决这个看似棘手的问题。先画一张空白的座位表,记录下规则。我们可以构建一张每个座位对应一个人的一一对应图,每个座位都可以对应任何人,也就是我们的初始波函数。座位计划波函数就从这种变化万千的情况下开始了,开始的座次就是就是每个座位有效布局的完全叠加。先选择一个位置,随机安排名单中一个人进去,此时座位波函数开始坍缩。随后,确定下的每个人都影响后面人员的排布。不断重复这个过程,直到每个座位的波函数都坍缩了或者遇到了矛盾无法安排,则重新开始。如果能按规则安排下每个人则完成。

by @青湳(qingnan)