The Shape of Dreams

这是一个关于梦境探索的可视化项目。主创团队将整个探索分为了四章,即从四个方面进行探索。

在第一章,分析的是梦境的元素。主创团队收集和研究了 2009 到 2019 年间谷歌上关于 What does it mean to dream about…, Why do I dream about…, Meaning of dreaming… 这类问题的七种语言的查询结果。

以梦到蛇和掉牙为例,以下是各语言体系下对于蛇和掉牙查询数量的统计。
image.pngimage.png
接下来,他们发现有些独特的主题只会出现在特定的语言中。比如:梦见采摘蘑菇只出现在俄语中;梦见骆驼只有在阿拉伯语中;葡萄牙语梦到的大蒜;西班牙语中的鬣蜥;英语中的狐狸。
image.png
在 2016 年全年中,阿拉伯语查询关于旅行的梦境次数达到了峰值。
image.png

最终将所有的结果汇总如下,可以对特定语种在不同年份对于梦境关键词检索次数进行比较,也能切换不同的语种查看不同语种下的梦境关键词。
image.png
在第二章里开始探索梦境世界观。通过将第一章的梦境元素按照小的分类(共12类)进行聚合分析,以找出构成梦境的这些主要类目,以及这些年来随着不同的语言它们如何变化。从2019年日语的数据中可以看出,大部分日本人梦到天气这个主题最感兴趣。

image.png

每片花瓣代表了一种类别,花瓣大小代表了类别里面的元素数量

第三章开始探索随时间的流逝,人们对某些梦的含义的兴趣的变化趋势。
首先人们对梦到飞行这个话题会持续感兴趣。
image.png
随后发现人们对于梦到水和逃离的关注度逐年上升。
image.png
然后发现梦的主题特征是与真实事件相吻合的。例如,梦见海啸在 Google 搜索中达到了顶峰,这与日本发生海啸的月份相吻合。
image.png

第四章中主要探索了梦境和不同语种之间的关系网。实线代表了两种语言之间存在相同的梦境元素,线的粗细代表了元素的数量。
image.png

总之,该项目按照研究步骤,将每一步的探索结果都以故事章节的形式串联了起来,能够清晰地看到整体的研究路径。

by @缨缨

结合移动设备和大屏幕的图可视化交互

除了传统的桌面显示环境,研究者们也在思考用其它的显示设备和更自然的交互方式设计可视化。这篇文章将可被检测位置的移动设备和大屏幕结合起来支持图可视化的交互和分析。作者设计了一套全面的交互模型支持对图的交互、分析任务,包括选择、展示细节、焦点转换、交互式透镜、数据编辑等。已有许多工作支持在桌面环境下利用鼠标、键盘对图可视化探索、分析,但是这种方式需要用户待在桌面前,限制了移动范围,并且鼠标、键盘交互的方式不够直接。移动设备的发展让用户可以通过触摸、点击、移动等肢体交互方式探索可视化,但是移动设备显示面积小,展示的信息内容有限。大屏幕显示能够展现出丰富的信息,但是传统的交互方式又难以直接应用到大屏幕上。因此,这篇工作充分利用了移动设备交互自然大屏幕显示信息丰富的优点,利用丰富的交互方式,对图可视化探索、分析。
image.png
该交互系统由大屏幕、追踪系统、移动设备构成。

大屏幕上会通过点边图的方式展现一个大图,比如作者合作网络。用户可以通过点击大屏幕上的节点或者刷选一个区域选择要分析的目标,在移动设备上会展示已选择节点的具体信息。系统还支持通过移动设备远距离定位大屏幕上的区域,被定位的区域在大屏幕上通过矩形框高亮,该区域的子图会在移动设备显示。用户可以在移动设备上直接选择节点。
image.png
用户选择了一个子图之后,在移动设备上可以改变点边图布局为邻接矩阵方式,这样可以快速知道一个作者和其它作者的合作情况。用户可以对子图的拓扑结构进行修改,同时会从大屏幕上得到相应的反馈。
image.png
当一个节点的邻居没有完全在移动设备上显示时,为了观察节点的合作者情况,作者使用了’Bring Neighbours’技术,点击节点,它的所有邻居会在节点周围显示。系统还支持基于属性对节点过滤,满足过滤条件的节点将被放大显示。
image.png
总而言之,该工作结合了移动设备和大屏幕的优点,设计了一系列交互方式支持对图可视化的交互和探索。优点是交互方式新颖,且支持的任务丰富,缺点是硬件成本高,相应技术难以推广。随着 AR/VR 技术的发展,可视化又多了一种显示环境,已有的可视化工作利用了 AR/VR 技术,但如何将 AR/VR 技术与已有的显示环境结合起来也是一个有趣的问题。

by @聚则(moyee-bzn)

Visualizing the Social Media Universe in 2020

我们每个人都能够感受到,社交媒体已经渗透到人类生活的方方面面。如今,庞大的社交媒体宇宙总计拥有 38 亿用户,约占全球总人口的 50%。预计未来几年还将会有额外的 10 亿用户接入互联网,可能会使得社交媒体宇宙进一步扩大。

从图中我们可以看到,全球月活用户数排名前 10 的社交媒体中,中美两国各自拥有 5 个。

社交媒体迅速发展的同时,也伴随着一系列的问题产生。一些公司(例如 Facebook)发现自己成了政治光谱两边的靶子。随着人们越来越关注隐私和数据,社交媒体将成为塑造未来的政府、企业和政治的前沿和中心。

可能只有时间会告诉我们,社交媒体宇宙将来会达到多么庞大的用户数量。
image.png
by @珂甫

SIGGRAPH 2020 Art Paper: Enhanced Family Tree

来自 SIGGRAPH 2020 Art Papers 的获奖作品,使用了 3D 树展示族谱,数据来自 China Biographical Database 和上海图书馆。

演示视频(原文中也有三个):https://www.youtube.com/watch?v=nEovLXTSNGg
image.pngimage.png
你会不会有皇室血统呢?推荐看下他们的演示视频,确实有种置身历史长河的感觉。
image.png

by @沧东(cangdong)

Atom:绑定视觉标记与数据项的单元可视化

Atom 是一种单元可视化的语法,它在视觉标记和数据项之间保持了严格的映射。

单元可视化是一种“绑定式”的可视化方法,它将用户输入的每个数据与某个确定的视觉标记进行一一映射,每个标记独立存在,对用户而言非常直观(反例:基于聚合操作的洞察查询)。

Atom 提供了一种自下而上的构建主义方法来创建单元可视化。
它的绘制流程/规则是: ::=
即每次绘制需要指定绘制空间 Root (Canvas),布局模式 Layouts 和视觉标记 Marks。

Layouts 和 Marks 都可以进行多重定义,实例:

  1. data, width, height, padding 等语法指定数据和绘制空间

image.png

  1. layouts 语法指定布局,可套娃(嵌套/多层布局)

image.png三个套娃式 layouts

  1. mark 语法指定视觉标记模式

image.png
指定每个数据的标记 mark 实心圆点。

最终展示结果:
image.png
三个 layout 分别指定单组数据的排布方式(L1),数据的组内分类(L2),单个数据的布局方式(L3)

Atom 也提供诸如铺满布局 isShared 等的功能:
image.png
复杂实例=>泰坦尼克号的乘客数据可视化:
image.png
可视化解释:

  • 布局:按照仓位分类,区域=>总票价
  • 标记:点的大小=>单张票价,蓝色=>生还,黄色=>死亡

Atom编写顺序:

  • Layouts 按仓位一级布局
  • X 方向均匀排布
  • Y 方向按票价设置子布局高度并铺满布局
  • Mark 按照票价设置标记点大小并铺满布局

by @龙朱

美国国会人员占比

中间栏是美国人口的组成,左侧是民主党,右侧是共和党。

从信仰来看,大部分是新教、天主教、独立者。可以看出民主党中大多数是新教和天主教,约占总人口三分之一的独立者在民主党中几乎没有,而共和党的组成更加单一,新教占多数,其次是天主教。虽然犹太人在总人口中占比不大,但在民主党中却占有很大但比例。

从种族来看,共和党基本上全部都是白种人。

从性别上来看,虽然美国总人口男女比例基本持平,但在两个党派中男性都占多数,特别是共和党,女性只占了约四分之一。
image.png
by @十吾(shiwu-5wap2)

美国房东与房客的地图可视化

image.png
数据来源:https://www.census.gov/data/developers.html 美国人口普查API(有JS SDK)。

美国人口普查数据使得我们可以更简单的获取全美国范围内的房东以及房客的信息,但是当使用多边形去可视化每一个区域的数据之后,效果并不理想,他失去了人群最重要的特点之一密度。通常,出租房屋空间会导致人口密度增加,因为出租的房屋通常较小被分为了多个房间。但是,显示所有者与承租人的比例的图却失去了这个意义。相反,如果我们以人而不是区域为单位查看数据,可以一次性捕获两个维度的信息。
image.png

多边形可视化来看,并不能看出人群密度的分布信息

image.png

以每个人为一个点,可以明显看出人口分布的趋势

那怎样以人口普查数据构建一个基于每个人的地图可视化呢?

首先将人数转换为相等数量的点,这些点都属于这个区块的多边形。对于每个多边形,我们将点输入一个函数中,该函数首先计算边界框,然后在该边界框内生成一个随机点。之后测试该点是否在实际的多边形内部或仅在其边界框中。如果该点落在多边形内,则将其保存,否则将被丢弃。循环往复,直到多边形内的点数与人口普查中为该区块记录的人数相同为止,然后移至下一个区块。(还有一种更高效的方法:Delaunay_triangulation 随机选择一个在区域中的三角形,并使用重心生成随机点三角形内的左边。这样可以避免边界点,并且生成速度更快,尤其是对于形状上很窄的多边形而言,但是代码实现也会更加复杂)最终可视化结果: http://ryantm.io/population/

by @明多牧(mingduomu)

加餐

image.png
是不是被如何优雅地展示多平行边折磨得焦头烂额?是不是看到别人家的包裹效果眼馋不已?是不是觉得自定义节点特别难上手?

鱼与熊掌不可兼得?不存在的,AntV G6 可以在功能丰富、性能强大的基础上还能够很好用、很易用。

G6 最新版本 3.7.0 已经发布,欢迎大家使用和反馈,新版本更多的特性请参考发布稿

AntV G6 是一款开源的图可视化引擎,专注于图可视化及图分析领域。 欢迎关注和 star 我们的 GitHub:https://github.com/antvis/G6 官网:https://g6.antv.vision/zh/

image.png