AntV
首发于AntV

【独家揭秘1】2020 SEE Conf 可视化工作坊有趣又专业,带你细细领略神秘内容(实战篇)

【独家揭秘】2020 SEE Conf 可视化工作坊有趣又专业,带你细细领略神秘内容。

由于内容较多,所以分为两篇介绍:

  • 实战篇
  • 进阶篇
刘大拐弯儿:【独家揭秘2】2020 SEE Conf 可视化工作坊(进阶篇)zhuanlan.zhihu.com图标

很多人问工作坊中提供的课件「让天下没有难做的图表」在哪里购买。

现在官方购买地址已经出炉了:

可戳链接 :t.cn/AisKuVdB

也可扫码购买:



【独家揭秘】2020 SEE Conf 可视化工作坊有趣又专业,带你细细领略神秘内容。

由于内容较多,所以分为两篇介绍:

  • 实战篇 ↓↓↓↓↓↓↓↓↓
刘大拐弯儿:【独家揭秘】2020 SEE Conf 可视化工作坊有趣又专业,带你细细领略神秘内容(实战篇)zhuanlan.zhihu.com图标
  • 进阶篇



2020 年 SEE Conf 落下帷幕啦,大家一定收获满满,并且印象深刻吧!

相信在现场的大家,有参与到我们 AntV 的平行坐标系连线装置,在装置旁边有个「可视化工作坊预报名确认处」,小编已经被无数人问这是什么,我能报名吗?很多人表示没有报上名非常遗憾。⬇️

没关系,接下来让小编带着大家回顾一下工作坊到底讲了什么神秘内容吧!

在整个工作坊中分为三部分

  • 第一部分是带大家玩一个预热游戏,让大家从现实世界慢慢进入到可视化的世界中;
  • 第二个部分,讲师先演示一个简单的例子,再发布练习任务,让大家真实地走一遍从数据到图表的过程;
  • 第三个部分,讲师详细地剖析,如何让数据变得栩栩如生,印证了 AntV 的口号,「Liven Data Lively」
本篇文章包含第一、二部分

第一部分:预热连线游戏

第一部分:连线游戏,并写出解读出来的图表关键词
我们工作坊的小伙伴非常给力,不仅连线正确,而且把图表解析的头头是道

此处艾特 @禹洋 ,为 carry 全场的回答点赞。

这三张图表是可视化历史上经典的图表,从上至下分别是:

图一《丹麦-挪威王国 80 年进出口贸易趋势》1786,William Playair 在《商业与政治图解集》发表丹麦-挪威王国 80 年进出口贸易趋势的图解,当时是对表格的重大改进。1755 年拐点,因为该国在印度周边建立了殖民地与附属国,垄断了出口贸易,导致出口额激增。

这张图表的意义在于,当时世界上对数据的展示方式以表格为主,这张区间差额面积图可以算得上世界上第一张彩色统计图表。

图二《拿破仑东征图》1869,法国工程师 Charles Joseph Minard 绘制了 1812 年“拿破仑东征图”,描述了拿破仑在 1812 到 1813 年进攻俄国时所遭受的灾难性损失,让人直观感受到拿破仑的 40 万大军,如何在长途跋涉 2500公里 和严寒之中逐步溃散,被爱德华·塔夫特(Edward Tufte)誉为是迄今为止最好的统计图表。等到兵临莫斯科城下,法军早已军心涣散。1812年 10 月 19 日拿破仑下令撤退。

这张图表为什么盛名在外?因为它是一个非常巧妙的以河流图为主的复合图表,将时间、空间、温度信息、地理位置信息、人文历史结合的天衣无缝,用可视化的方式讲述了一个著名的战争故事。

图三《伦敦霍乱溯源图》1854,伦敦爆发霍乱,但一直找不到原因,当时的流行观点是霍乱是通过污染或者“肮脏的空气”来传播的(巴斯德的细菌理论还没建立),John Snow 教授,也是一名医生,在地图上统计上每户人家得病的人数,通过小柱子长短来表示。最后发现大多数的病例都围绕这某一口水井。于是他做了一件事:把井的把手给卸掉了,于是传染病就被控制住了。

这张图表可以说是现在大家熟知的热力图的雏形了。

第二部分:实例 & 实战,设计一个会讲故事的图表

从数据到可视化,我们借鉴了经典的「双钻模型」,把整个过程概括为「探索」-「聚焦」-「设计」-「评估」,讲师在这个过程中用一个真实的案例,带着大家走了一遍这样的过程。

2.1 探索阶段

首先我们需要了解业务背景、产品分析、观察数据、了解目标用户。

业务背景:人民日报编辑想通过微博和 Twitter 为读者推送一个信息可视化专题,用来宣传新中国在医疗卫生、生活水平、经济发展上取得的长足进步。

产品分析:在中外主流社交媒体上发推,内容需通俗易懂,具备故事性和传播性,为吸引眼球,可考虑应用动效+快速播放。

观察数据:在桌子上,我们为参会者准备了一份选取 World Bank 公开数据集,包括 1 个时序型字段(year[1960,2017]);6 个主要国家的人口数量、预期寿命和全球平均预期寿命;13 个数值型字段。

了解用户:已有用户为微博和 Twitter 上的关注者;潜在用户为转发该 post 或搜索 #相关话题# 可见用户;中文用户多,非中文需考虑。

2.2 聚焦阶段

我们需要了解用户目标,明确设计目标。

用户目标:世界相关国家历年人口预期寿命的变化中,中国的突出表现。

设计目标:内容专业聚焦 -- 双语模式、标注数据来源;有效传递、清晰易懂 -- 多端适配、Dark Mode

2.3 设计阶段

在设计阶段,分为:「确定图表类型」 -- 「观点阐述 」-- 「交互设计」--「视觉设计」

如何确定图表类型?

展现内容:历年主要国家寿命变化,预期寿命为主指标,总人口为辅助指标,年为时间域。

分析目的:趋势,对比

图表类型:折线图为主,顶部指标卡为辅

通过以上分析,我们可以在给出的教具中,在趋势目的中选择一个「堆叠面积图」


观点阐述:展现 1960 年以来全球主要国家人均预期寿命中,中国预期寿命和人口增长迅速,预期寿命增加了 32.7 岁,位居全球第一。

交互设计:在屏幕可视区域内出现时,自动播放

视觉考量:采用 AntV 默认色版,与国家国旗颜色呼应。

经过以上设计,如下一个生动的多端适配图表就诞生啦!

2.4 评估阶段

参考 AntV 的设计原则 「准确」、「有效」、「清晰」、「美」,我们可以给图表进行打分,看看哪里可以做得更好。


总结一下,讲师通过范例的形式,带着大家设计了一个会讲故事的图表,需要以下四个步骤。

👏接下来就是小伙伴实战环节咯!


桌子上的课件 2 张

一张关于 IMDB 和豆瓣的电影数据 ↓

一张涵盖上个章节我们介绍的四个阶段 + 设计方案绘制区域

四个阶段
方案绘制区域

讲师确定了一个主题为:年关将至,电影频道打算出一期高分电影赏析清单,进行品牌传播、输送流量。

通过每个组组长(红点)和用户(蓝点)的勾选,每个组就明确了各自的用户、设计目标、语言、显示终端等关键信息。

讲师幕阑讲解中
激烈地讨论和绘制自己的方案
工作坊小伙伴介绍各自的方案



优胜组

经过现场各组举手表决,第七组成为了优胜组。

优胜组获得了我们工作坊精心准备的《让天下没有难做的图表》海报,每人一份:


欢迎大家扫码加入 AntV 可视化设计大家庭,一起交流切磋,让我们的热爱一起发光~


了解更多:

AntV — 蚂蚁金服旗下开源的可视化解决方案

Chartcube — 在线图表工具,制作图表从未如此简单

Kitchen — Sketch 智能设计工具集,10 秒画出优雅图表

数据可视化设计,欢迎持续关注。


刚刚举办的 SEE Conf 大会,更多精彩请戳 ↓

参加第三届蚂蚁体验科技大会 SEE Conf 2020 是什么体验?www.zhihu.com图标

编辑于 2020-01-11

文章被以下专栏收录