数据可视化的基本过程和图表如何选择

广州/UI设计师/4年前/769浏览
数据可视化的基本过程和图表如何选择
Jun0036

数据可视化的基本过程和图表如何选择

一、基本过程


我们要的不是数据,而是数据告诉我们的事实。大多数人面临这样一个挑战:我们认识到数据可视化的必要性,但缺乏数据可视化方面的专业技能。部分原因可以归结于,数据可视化只是数据分析过程中的一个环节,数据分析师可能将精力花在获取数据、清洗整理数据、分析数据、建立模型,但在最终的展示沟通上力不从心。

这也是“写代码的干不过做PPT”的部分原因。实际上,只要掌握了可视化的技能,我们的工作就更容易受到leader的认可。

可视化工具包括但不限于,Tableau,Excel,PowerBI,Python,R

可视化之前:探索性分析与解释性分析

二者之间有很重要的区别:探索性分析指理解数据并找出值得分析或分享给他人的精华。这就好比,在牡蛎中寻找珍珠,可能打开一百个牡蛎(尝试很多种方法)才最终找到两颗珍珠。而解释性分析,我们迫切希望能够言之有物,讲好某个故事--专注于两颗珍珠。

大多数时候我们汇报工作就是要做好解释性分析的工作。

可视化过程

一个完整的数据可视化过程,主要包括以下4个步骤:

确定数据可视化的主题

提炼可视化主题的数据

根据数据关系确定图表

进行可视化布局及设计

可视化元素由3部分组成:可视化空间+标记+视觉通道

可视化空间

数据可视化的显示空间,通常是二维。三维物体的可视化,通过图形绘制技术,解决了在二维平面显示的问题,如3D环形图、3D地图等。

标记

标记,是数据属性到可视化几何图形元素的映射,用来代表数据属性的归类。

根据空间自由度的差别,标记可以分为点、线、面、体,分别具有零自由度、一维、二维、三维自由度。如我们常见的散点图、折线图、矩形树图、三维柱状图,分别采用了点、线、面、体这四种不同类型的标记。

视觉通道

数据属性的值到标记的视觉呈现参数的映射,叫做视觉通道,通常用于展示数据属性的定量信息。

常用的视觉通道包括:标记的位置、大小(长度、面积、体积。。。)、形状(三角形、圆、立方体。。。)、方向、颜色(色调、饱和度、亮度、透明度。。。)等。

确定图表

数据之间的相互关系,决定了可采用的图表类型。常见的数据关系和图表类型的对应关系如下图所示:


二、图表选择


无论是公司运营、数据分析、产品设计或者是进行数据大屏设计等,越来越多职业需要和数据打交道,如何选择合适的数据可视化图表,精准的发掘数据背后的含义,让数据说话显得尤为重要。

 

根据可视化专家 Andrew Abela 对该数据关系分类方式的提炼,他提出将图表展示的数据关系分为四类:比较、分布、构成和联系。我们在选用图表前首先要想清楚:要表达什么关系。本文基于Andrew Abela的分类方法,结合公交及客流分析项目案例经验,重点介绍并补充了不同分类中较为常用的图表及其使用的注意事项,力求让大家更快捷准确地掌握可视化设计图表的用法。


对比(各项目的排名)


使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小,显示一段时间内的数据变化或显示各项之间的比较情况——是差不多,还是一个比另一个更多或更少?

 

1.柱状图:


基础柱状图,使用柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值。当需要比较的数据条目较少时,一般可选用柱状图。

优势:柱形图利用柱子的高度,能够比较清晰的反映数据的差异,一般情况下用来反映分类项目之间的比较,也可以用来反映时间趋势。

注意:柱形图的局限在于它仅适用于中小规模的数据集,当数据/分类太多时不易分辨。一般而言,不超过12个。

通常来说,柱形图的横轴是时间维度,用户习惯性认为存在时间趋势。如果遇到横轴不是时间维度的情况,可以用颜色区分每根柱子。

上图是一个不同交通方式出行的图表,展示不同出行方式的对比


2.条形图


当需要比较的条目较多时(12以上),一般可选用条形图,条形图是横向的柱状图,适合的展示数据不宜多余30条。

优势:当条目过多或者项目的标签文本比较长时,横轴空间有限,导致文本会出现重叠或倾斜,容易造成阅读困难,而使用条形图,文本可以横向排布,便于用户阅读。

3.双向柱状图:


双向柱状图(又名正负条形图),使用正向和反向的柱子显示类别之间的数值比较。

上图是某地客流量流入&流出对比图,流入人口使用正向柱状图表示、流出人口使用反向柱状图表示


4.折线图:


折线图用来反映随时间变化的趋势。当我们需要描述事物随时间维度的变化时常常需要使用该图形。 柱形图强调各数据点值之间的差异,更适于表现离散型的时间序列;折线图则强调起伏变化的趋势,适合表现连续型的时间序列。所以当时间序列的数据点较少时,可以使用柱形图,而当数据点较多时,则建议使用折线图。

上图表示不同月份的客流量


5.面积图:


当只展示数据的趋势时,折线图和面积图完全等价,都可以使用,通常使用折线图更多。

注意:当在大型会议室展示数据时,即读图人离图表可能较远的情况,使用面积图能让后排的人看的更清楚。当比较多个度量数据的趋势时,建议使用折线图。如使用面积图,则存在数据序列之间相互遮挡的情况,除了靠近横轴的那个数据序列外,很难观察出其他数据序列的变化趋势。

上图表示2015~2019年内不同分类的人口出行方式


6.雷达图:


雷达图是一种表现多维(4维以上)数据的图表,可以展示出数据集中各个变量的权重高低情况,非常适用于展示性能数据。

注意:(1) 如果雷达图上多边形过多会使可读性下降,使整体图形过于混乱。特别是有颜色填充的多边形的情况,上层会遮挡覆盖下层多边形。

(2) 如果变量过多,也会造成可读性下降,因为一个变量对应一个坐标轴,这样会使坐标轴过于密集,使图表给人感觉很复杂。所以最佳实践就是尽可能控制变量的数量使雷达图保持简单清晰。

上图表示A路和B路两公交路线的线路运营评价雷达图,分别从线路直达性、公交换乘率、高峰拥挤度、客流均衡性和出行速度比这五个维度进行考核,可以看出两条线路各方面都比较平衡


构成(占总体的百分比)


主要关注每个部分所占整体的百分比,如果你想表达的信息包括:“份额”、“百分比”以及“预计将达到百分之多少”,这时候可以用到饼图;

 

7.饼图


饼图广泛得应用在各个领域,用于表示不同分类的占比情况,通过弧度大小来对比各种分类。饼图通过将一个圆饼按照分类的占比划分成多个区块,整个圆饼代表数据的总量,每个区块(圆弧)表示该分类占总体的比例大小,所有区块(圆弧)的加和等于 100%。

优势:在一张饼图上比较一个数据系列上各个分类的大小占比还是很方便高效的。

上图是各种出行方式客流量情况


注意:饼图不适用于多分类的数据,原则上一张饼图不可多于 9 个分类,因为随着分类的增多,每个切片就会变小,最后导致大小区分不明显,对于数据的对比是没有什么意义的。所以饼图不适合用于数据量大且分类很多的场景,可改选用条形图进行展示。


上图是各个省的人口的占比情况,因为这张图上包含的分类过多,就出现了简介中提到的问题,很难清晰对比各个省份的人口数据占比情况,所以这种情况下,推荐使用横向柱状图


分类占比差别不明显的也需要慎重选择用饼图进行数据展示,如下图,各类别占比几乎一样,用户无法看出数据差异,此时更建议使用柱状图展示。

相比于具备同样功能的其他图表(比如百分比柱状图、环图),饼图需要占据更大的画布空间,且很难进行多个饼图之间的数值比较。

上图中不同出行方式的客流量相近,所以不太适合使用饼图,此时可以使用柱状图来呈现


8.环图


环图其本质是饼图将中间区域挖空。

优势:环图相对于饼图空间的利用率更高,可以使用它的空心区域显示文本信息,比如标题等。

注意:环图与饼图一样,注意避免用于展示分类过多或者占比差别不明显的数据。

上图这种用法与饼图类似,是不同出行方式的客流量情况


9.南丁格尔玫瑰图:


南丁格尔玫瑰图是在极坐标下绘制的柱状图,使用圆弧的半径长短表示数据的大小(数量的多少)。

由于半径和面积的关系是平方的关系,南丁格尔玫瑰图会将数据的比例大小夸大,尤其适合对比大小相近的数值。

由于圆形有周期的特性,所以玫瑰图也适用于表示一个周期内的时间概念,比如星期、月份。

上图是一个时间周期内各国客流量的对比


10.堆叠柱状图


堆叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。它可以形象得展示一个大分类包含的每个小分类的数据,以及各个小分类的占比,显示的是单个项目与整体之间的关系。

注意:堆叠柱状图的一个缺点是当柱子上的堆叠太多时会导致数据很难区分对比,同时很难对比不同分类下相同维度的数据,因为它们不是按照同一基准线对齐的。

上图显示的是某地全方式日客流情况,通过堆叠柱状图,我们可以很清晰对比同一种客流量哪一天更大


分布(项目的频率情况)


是关心各数值范围内各包含了多少项目,可以根据地理位置数据,使用图形的位置、大小、颜色的渐变程度来表现数据的分布,展示不同分布特征。

 

11.热力图


热力图尤其关注分布,它可以不需要坐标轴,其背景常常是图片或地图,一般情况用专有的色系彩虹色系。

上图是某地人口热力图,用于显示地区人口分布


12.分级统计地图


分级统计地图是一种在地图分区上使用视觉符号(通常是颜色、阴影或者不同疏密的晕线)来表示一个范围值的分布情况的地图。在整个制图区域的若干个小的区划单元内(行政区划或者其他区划单位),根据各分区的数量(相对)指标进行分级,并用相应色级或不同疏密的晕线,反映各区现象的集中程度或发展水平的分布差别,最常见于人口数据的可视化,这些数据以省、市登地理区域为单位。

上图展示广东省各市客流量情况


关系(变量之间的关系)


主要查看两个变量之间是否表达出我们预期所要证明的模式关系,比如预期销售额可能随着折扣幅度的增长而增长,这时候可以用气泡图来展示,用于表达“与……有关”、“随……而增长”、“随……而不同”变量间的关系;也可使用图形的嵌套表示数据之间的关系,通常用于表示数据之间的前后顺序、父子关系以及相关性。

 

13.散点图


散点图也叫 X-Y 图,它将所有的数据以点的形式展现在直角坐标系上,以显示变量之间的相互影响程度,点的位置由变量的数值决定。

通过观察散点图上数据点的分布情况,我们可以推断出变量间的相关性。如果变量之间不存在相互关系,那么在散点图上就会表现为随机分布的离散的点,如果存在某种相关性,那么大部分的数据点就会相对密集并以某种趋势呈现。数据的相关关系主要分为:正相关(两个变量值同时增长)、负相关(一个变量值增加另一个变量值下降)、不相关、线性相关、指数相关等。那些离点集群较远的点我们称为离群点或者异常点。

上图对不同地区经济发展水平和客流量两个维度进行比较,可以看到所有的数据点比较集中,呈正相关关系,即经济发展水平越高,相应的客流量会越大。


 14.气泡图


气泡图是一种多变量图表,是散点图的变体,也可以认为是散点图和百分比区域图的组合。

气泡图通常用于比较和展示不同类别圆点(这里我们称为气泡)之间的关系,通过气泡的位置以及面积大小。从整体上看,气泡图可用于分析数据之间的相关性。

注意:气泡图的数据大小容量有限,气泡太多会使图表难以阅读。但是可以通过增加一些交互行为弥补:隐藏一些信息,当鼠标点击或者悬浮时显示,或者添加一个选项用于重组或者过滤分组类别。另外,气泡的大小是映射到面积而不是半径或者直径绘制的。因为如果是基于半径或者直径的话,圆的大小不仅会呈指数级变化,而且还会导致视觉误差。

上图展示各大洲各个国家人均消费总值、人均入境次数及人口的数据。其中横坐标表示人均消费总值,纵坐标表示人均出境次数,气泡的大小表示人口数量,然后用颜色来区分各个大洲。可以看出人均消费总值和人均入境境次数的相关性,大致呈正相关,并且人均入境次数较多的地区主要集中在亚洲、欧洲和大洋洲


15.矩形树图


矩形树图采用矩形表示层次结构里的节点,父子节点之间的层次关系用矩形之间的相互嵌套隐喻来表达。从根节点开始,屏幕空间根据相应的子节点数目被分为多个矩形,矩形的面积大小通常对应节点的属性。每个矩形又按照相应节点的子节点递归的进行分割,知道叶子节点为止。

优势:相比起传统的树形结构图,矩形树图能更有效得利用空间,并且拥有展示占比的功能。

注意:当分类占比太小的时候文本会变得很难排布。相比起分叉树图,矩形树图的树形数据结构表达的不够直观、明确。

是客流归属地客流量预测分析


以上就是为大家介绍的图表基本使用情况,适用于日常工作中大多数的图表制作。希望大家都可以需要根据自己想要表达的信息选择合适的图表,让数据可视化帮助我们的大脑减负,替我们的数据说话。

1
阅读原文
|
Report
|
5
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
#想赢的都在亨氏里!
Homepage recommendation
相关收藏夹
UI学习档
UI学习档
UI学习档
UI学习档
作品收藏夹
可视化设计
可视化设计
可视化设计
可视化设计
作品收藏夹
2021可视化大屏
2021可视化大屏
2021可视化大屏
2021可视化大屏
作品收藏夹
设计规范
设计规范
设计规范
设计规范
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
IP形象设计
IP形象设计
IP形象设计
IP形象设计
精选收藏夹
作品收藏夹
大家都在看
Log in