数据可视化设计浅析与研究(一)

去年参加阿里云栖大会的时候,见过一个巨大的 DashBoard 数据液晶大屏,用来展示安全生态领域的可视化数据,当时给我的印象就是「哇,好酷!」,然后,就没有然后了…虽然当时设计得很酷,数据也很美,但是呈现的信息对我是完全无感的,我没法快速解读数据,甚至看不懂某些图表是在表达什么信息,一度陷入自责。

 

后来反省发觉,既然对数据如此无感,不妨提升一下自己的数据解读和分析能力吧,毕竟:

1. 一个看不懂数据图表的设计师来做数据可视化设计,未免说不过去。

2. 产品 UI 一直强调回归到用户诉求层去指导设计,数据可视化也应该回归到数据源头,才能提升我们的可视化设计能力。

3. 团队提倡用数据思维来指导设计,而研究数据图表和知识显然是基本功。

4. 可视化设计与自己工作强关联,正好能学以致用。

所以有了最近关于数据可视化设计系列文章,欢迎拍砖。

PS: 本篇主要介绍数据可视化历史、主流数据图表类型以及学习数据可视化相关资料、工具等。

 

一. 数据可视化历史渊源

从人类诞生之日起,便有了信息的呈现形式,并伴随着人类发展足迹不断变迁。如今出现的任何信息可视化类型,并非一夜之前突现的新物种,几乎都是从过去经典的表达式中发展而来。

17000 年前

如果你问最早的信息图表设计师是谁,很多学者认为是远古时代的洞穴人,他们是最早用图像描绘成日常生活比如战斗,野生动物、死亡和庆祝活动等等。

法国发现的洞穴绘画遗址-拉斯科壁画,距今约17000年

 

公元前 3000 年

古埃及象形文字,作为那时的正式书写系统,开始使用符号来代表字母和概念,可追溯到公元前3000年。

 

公元前 550 年

希腊哲学家阿那克西曼德创造了第一个出版的世界地图,这可以说是最早的可视化地图了。

 

公元 950 年

欧洲人画出了基于时间变化的折线图,用于展示太阳,月亮等行星的位置变化趋势,开始出现如今的数据图表的雏形。

 

17 世纪

统计图形之父威廉·普莱费尔,发明了我们今天经常使用的折线图和条形图,也被认为创建了面积和饼图。普莱费尔是苏格兰工程师和政治经济学家,并在1786年出版了商业和政治地图集。

智能时代

随着时代的发展,智能时代AR、VR 技术的兴起,我们开始看多更多新颖的的数据可视化形式。

1992-2010年内世界小型武器和弹药的进出口贸易数据展示

 

“里约+20”地球峰会期间的Twitter话题汇集成一颗颗大树

 

二. 认识主流可视化图表

如今随着科学技术的发展,已经沉淀出丰富且经典耐用的信息可视化表达。无论在传统的纸质媒体,还是如今手机、电脑,电视等各类终端的电子媒体都得以大放异彩。目前,各大可视化工具中有非常详尽的图表类型介绍,比如 Excel2010 的版本里面,提供了 10 类共 53 个图表。AntV 平台则提供了 15 类近 200 个数据图表,现在我们就来普及一下基本知识。

常用可视化图表分类

目前主流的可视化平台把常用图表分成九大类(来自 AntV ),分别是:比较、分布、关联、占比、区间、流程、趋势、时间、地图。

1. 比较

显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小,通常用于展示不同分类间的数值对比,不同时间点的数据对比。

典型图表:柱状图、条形图、直方图、K 线图、矩形树图等

 

2. 分布

显示频率,数据分散在一个区间或分组。使用图形的位置、大小、颜色的渐变程度来表现数据的分布,通常用于展示连续数据上数值的分布情况。

典型图表:散点图、气泡图、热力图、箱型图

 

3. 占比

显示同一维度上占比关系

典型图表:饼图、环形图、堆叠面积图、堆叠柱状图

 

4. 关联

显示数据之间相互关系。 使用图形的嵌套和位置表示数据之间的关系,通常用于表示数据之间的前后顺序、父子关系以及相关性。

典型图表:和弦图、桑基图(我有点读不懂)

 

5. 区间

显示同一维度上值的上限和下限之间的差异。 使用图形的大小和位置表示数值的上限和下限,通常用于表示数据在某一个分类(时间点)上的最大值和最小值。

典型图表:仪表盘、堆叠图

 

6. 流程

显示流程流转和流程流量。一般流程都会呈现出多个环节,每个环节之间会有相应的流量关系,这类图形可以很好的表示这些关系。

典型图表:漏斗图、桑基图

 

7. 趋势

分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布,通常展示数据在连续区域上的大小变化的规律。

典型图表:折线图、K 线图、堆叠面积图

 

8. 时间(个人认为时间可以放在各大类型中作为一个维度)

显示以时间为特定维度的数据。使用图形的位置表现出数据在时间上的分布,通常用于表现数据在时间维度上的趋势和变化。

 

9. 地图

显示地理区域上的数据。使用地图作为背景,通过图形的位置来表现数据的地理位置,通常来展示数据在不同地理区域上的分布情况。

典型图表:地图

 

常用可视化图表举例分析

1) 柱状图

条形图

展示多个分类的数据变化和同类别各变量之间的比较情况。使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值。

优点:对比分类数据。

缺点:分类过多则无法展示数据特点。

 

# 相似图表

堆积柱状图:比较同类别各变量和不同类别变量总和差异。

百分比堆积柱状图:适合展示同类别的每个变量的比例。

 

2) 条形图(也可归到柱状图大类中)

类似柱状图,只不过两根轴对调了一下。

优点:类别名称过长,将有大量空白位置标示每个类别的名称。

缺点:分类过多则无法展示数据特点 。

 

#相似图表

堆积条形图:比较同类别各变量和不同类别变量总和差异。

百分比堆积条形图:适合展示同类别的每个变量的比例。

双向柱状图:比较同类别的正反向数值差异。

 

3) 折线图

折线图

堆积面积图

展示数据随时间或有序类别的波动情况的趋势变化。

优点:有序的类别,比如时间。

缺点:无序的类别无法展示数据特点。

 

# 相似图表

面积图:用面积展示数值大小,展示数量随时间变化的趋势。

堆积面积图:同类别各变量和不同类别变量总和差异。

百分比堆积面积图:比较同类别的各个变量的比例差异。

 

4) 散点图(以及气泡图)

散点图

 

气泡图

 

用于发现各变量之间的关系。

优点:存在大量数据点,结果更精准,比如回归分析。

缺点:数据量小的时候会比较混乱。

 

# 相似图表

气泡图:用气泡代替散点图的数值点,面积大小代表数值大小。

 

5) 饼图

饼图

玫瑰图

饼图可以很好地帮助用户快速了解数据的占比分配。

优点:了解数据的分布情况。

缺点:分类过多,则扇形越小,无法展现图表。

 

# 相似图表

环形图:挖空的饼图,中间区域可以展现数据或者文本信息。

玫瑰饼图:对比不同类别的数值大小。

旭日图:展示父子层级的不同类别数据的占比。

 

6) 词云

词云

 

7) 箱型图

箱型图

以上只是部分常用图表样式,更多详细的图标样式及其介绍,可前往阿里数据可视化平台 AntV 学习。

 

数据图表使用指南

数据图表如此繁杂多样,到底该如何灵活运用呢?

数据图表专家 Andrew abela 设计了一张汇总图,从全局出发,帮助我们快速确定图表样式

Andrew abela 绘制的图表选择指南被广泛运用

 

这其实为我们提供了一种快速选择数据图表类型的思考流程,四步走:

1.分析数据源

2.确定展示的类型

3.选择的变量类型及数量

4.选择对应的数据图表

 

三. 实用的学习通道

介绍这些基本知识是远远不够的,网络上有非常多的平台、工具和团队可以供我们深入学习和研究数据可视化设计,以下列举了我平时经常光顾的学习资源。

1. 了解数据可视化设计的历史渊源(完整版):

数据可视化图表发展史:http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9

 

2. 各类可视化图表的概念及用法(超详细):

蚂蚁金服可视化解决方案 AntV:https://antv.alipay.com/zh-cn/index.html

图表示例:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

图表用法:https://antv.alipay.com/zh-cn/vis/chart/index.html

 

3. 前端可视化图表库(前端可直接调用):

ECharts:http://echarts.baidu.com/index.html

AntV:https://antv.alipay.com/index.html

Google Chat:https://google-developers.appspot.com/chart/

 

4.数据分析工具:

Google Analytics: https://analytics.google.com

百度统计:https://tongji.baidu.com/

 

5.运用可视化工具搭建自己的可视化图表(可以建立自己的可视化图表):

BDP个人版:https://me.bdp.cn/home.html

平时还可以使用 Excel 或 Numbers 整理和输出可视化图表

 

除了学习巩固数据相关的基础知识以外,更需要在日常工作学习中培养习惯,养成数据化的思维方式。

  • 1.保持对数据的敏感度
  • 2.尝试利用可视化工具创建图表,锻炼分析整理的能力
  • 3.密切关注自家产品线的用户行为数据,解读各类数据指标,培养分析的习惯
  • 4.关注前沿技术和可视化新形式,保持开放包容的心态

好了,文章就介绍到这里,大家一起学来吧。

预告:下一篇系列文章着重介绍可视化设计的具体方法,譬如从色彩、布局、交互等方面如何设计数据图表,欢迎持续关注。

 

原文地址: 花厂设计招待所 (公众号)

作者:又彬


 

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码