引言:
本文将带领大家更系统全面地认识可视化图表,同时通过分析可视化图表的底层逻辑,帮助大家扩展思维去创作更具个性化的图表。
可视化图表的定义、使用领域
「定义」可视化图表是实现数据可视化的工具,本质是通过图形作为载体,将抽象的数据转化成视觉上具象的图表以传达信息,具有美观、直观的特点。
「使用领域」所有与数据管理相关的行业都需要用到可视化图表。它可以为数据分析提供帮助,辅助管理者获取执行方向、做出决策,同时也能为管理者预估未来发展情况。
用途分类、视觉表现分类,通过合理分类挑选合适的图表
有些人可能觉得为什么要了解分类呢?我一张表格吃遍天不行吗?大不了换成条形图、饼状图随便往上套。只是为了减少设计工作量确实可以,但从图表使用者的角度来说,这样的图表价值很低,甚至一文不值。
因为一般来说不同图表传达的信息重点不同,信息量也不同。当我们实际需求没那么多,又或者我们需要关注的重点信息只有那么一两个,那么图表中多出的信息就会造成视觉冗余,导致视觉噪音大,难以抓住重点。当我们实际需求一张图就能解决,却用了多个图表去完成,那么又会导致不必要的屏幕空间占用。
根据不同的使用情形,我们可以从视觉导向和需求导向两个方面进行分类。
根据需求导向可以分为:数据展示、同类对比、趋势走向、类型占比、关系流向、频率分布六大类。根据视觉导向可以分为:圆形、矩形、线形、其他四大类。
可视化图表根本目的是实现传达信息的需求,在多个图表都可以实现需求时,可以在视觉角度上进行二次筛选。
现在我们按照需求类型对可视化图表进行分析:
「数据展示」
1. 表格
表格作为可视化图表的基础,可以事无巨细地展示多组数据,提供最原始纯粹的数据,这既是它的优点也是缺点。如果追求数据的原始纯粹,那么表格是不二之选,如果目的是分析数据特征,图表就是最差的选择。
优点:数据原始纯粹
缺点:不能直观体现数据特征
使用情形:需要获取原始详细的数据信息时,如:采购清单、商品信息表、人员信息表等
2. 日历
日历展示日期,多为表格形式呈现,一般用于选取时间的交互。
3. 钟表图
钟表图用带刻度的圆展示具有周期特性的时间。目前时间往往直接用数字文本表达更加便捷清晰,而钟表图的使用主要是为了实现美观的界面表现。
4. 茎叶图
茎叶图将数据归纳到各自所在的区间内,保留原始数据的同时,可以观察数据的分布情况。既可以展示某一组别下的数据,也可以对两组数据同时进行展示与对比。
优点:数据原始纯粹、便于观察数据分布情况
缺点:页面占用的情况被数据量影响,导致画面占用情况不可测,难以预留空间
使用情形:记录适量的数据并得到直观的数据分布情况,比如录入学生成绩等
5. 象形图
象形图将数据的指代对象图形化,直观展示当前数据所指的对象,可以展示值也可以展示状态。
优点:美观
缺点:指代对象可能会有歧义
使用情形:强调主题、美化页面等
6. 仪表盘
仪表盘用带刻度的表盘和指针展示具有上下限的对象在某一时刻的指标数据状态。
优点:直观展示数据指标状态,同时可以观察数据波动情况
缺点:只能展示短期内的数据波动,不能完整地展示长期数据波动
使用情形:观察某一指标下短时间内的数据波动和状态,如:网速、车速等
7. 子弹图
子弹图对数据进行刻度划分,并用矩形条长度指代值的大小,在此基础上展示数值阶段。
优点:直观展示数据指标状态
缺点:只能展示某一时刻或某一时段内的整体指标数据状态
使用情形:观察某一指标下的整体指标数据状态,如:污染度、湿度等
8. 雷达图
雷达图可以看成极坐标化的多个子弹图组合,数据点连接成闭合的圈,用圈的面积指代整体值的大小,用数据点距离中心点的距离指代对应指标值的大小。
优点:多个指标同时展示,屏幕空间利用率提高
缺点:指标不宜过多,否则杂乱难读
使用情形:查看某一对象的多个指标评分情况,如:一家公司的各部门能力情况、一个学生各学科评分等
「同类对比」
9. 条形图
条形图可以展示多个对象就某一指标下的数据情况,利用横向的长条矩形长度指代数据值,通过长度对比,得到数据大小的对比。
优点:除了对比,经过排序后还可展示纵向的数据排名
缺点:当数据之间数值差距过小就难以进行对比
使用情形:多个独立的对象在某个指标下进行对比时,如:各类产品的销售情况、各地区的售卖情况等
10. 柱状图
柱状图与条形图基本一样,都是展示多个对象就某一指标下的数据情况,并利用矩形长度进行数据对比,区别只是柱状图的矩形是竖着的,条形图是横着的。这便导致柱状图相比条形图具有了趋势变化的观感。
优点:除了对比,还可以展示横向的数据变化
缺点:当数据之间数值差距过小就难以进行对比,当横坐标指代对象为独立无联系的个体时,容易造成趋势印象
使用情形:多个具有联系的对象在某一指标下进行对比时,如:某一产品各月销售情况、某一产品在各地区(销售地与产地间的距离在进行排序后)的销售情况等
11. 玫瑰图
玫瑰图又称鸡冠花图,是极坐标化的条形图,每个扇形角度都是相等的,通过半径不同的扇形面积来表示数据大小,用以进行数据对比。由于其具有圆周的形式,适合用来对具有周期属性的数据对象作对比。
优点:美观、对象具有周期属性时可展示周期规律
缺点:因为半径和面积是平方关系,因而会将数据的比例夸大,不适用于数据差异过大的数据,且数据对象过多会导致分辨不清
使用情形:数值之间差距较小时对数据进行对比、周期型的数据对比,如:具有同一属性(表现相近)的不同产品之间进行对比、一周内的数据对比等
12. 蝴蝶图
蝴蝶图又称旋风图,是两组共享同一纵坐标的条形图,相比普通条形图更能直观反映两组数据之间的比较。
优点:简洁直观
缺点:当数据之间数值差距过小就难以进行对比,不适合两组以上的数据比较
使用情形:对两组对象就其子对象的数据指标进行比较,如:对两组方案在各节点的销售情况进行比较、男女性别在不同年龄段的人口比较等
13. 堆叠条形图
堆叠条形图是具有总分结构的条形图,相比普通条形图可以直观地查看对象的组成结构,同时能够对其各组成的数据进行比较。
优点:具有总分结构、除了对比,经过排序后还可展示纵向的数据排名
缺点:堆叠类型过多会导致眼花缭乱,当数据之间数值差距过小就难以进行对比
使用情形:需要进行解构的数据比较,如:总量下的库存量+销量+损耗量对比、产品总销量下的各型号销量对比等
14. 堆叠柱状图
堆叠柱状图是具有总分结构的柱状图,相比普通柱状图可以直观地查看对象的组成结构,同时能够对其各组成的数据进行比较。由于其柱体竖着排布,导致具有趋势变化的观感。
优点:具有总分结构、除了对比,还可以展示横向的数据变化
缺点:堆叠类型过多会导致眼花缭乱,当数据之间数值差距过小就难以进行对比,当横坐标指代对象为独立无联系的个体时,容易造成趋势印象
使用情形:需要进行解构的数据比较,如:某一产品总量下的各月库存量+销量+损耗量对比、某一产品下各类型号在各地区(销售地与产地间的距离在进行排序后)的销售情况等
15. 堆叠玫瑰图
堆叠玫瑰图是极坐标化的堆叠条形图,含总分结构。每个扇形角度都是相等的,通过半径不同的扇形面积来表示数据大小,用以进行数据对比。由于其具有圆周的形式,适合用来对具有周期属性的数据对象做总分对比。
优点:美观、对象具有周期属性时可展示周期规律、具有总分结构
缺点:因为半径和面积是平方关系,因而会将数据的比例夸大,不适用于数据差异过大的数据,且数据对象过多会导致分辨不清
使用情形:需要进行解构的数据比较,数值之间差距较小时对数据进行对比、周期型的数据对比,如:具有同一属性(表现相近)的不同产品下的各型号之间进行对比、一周内的各型号数据对比等
「趋势走向」
16. 折线图
折线图将数据点连接成线,可以显示随时间变化的连续数据,适合展示相等时间间隔下的数据波动趋势。
优点:直观易懂,能及时感知趋势
缺点:展示的数据对象不宜过多,否则多条折线会使得信息杂乱难读
使用情形:需要获取时间线下数据的波动趋势时,如一年中产品的销量变化等
17. 路径图
路径图在地理位置上展示地理对象之间的路线情况。
优点:简明直观
缺点:由于现实地理的变化,需要保持更新
使用情形:需要指示两地或多地之间的路线时,如:地图导航等
18. 风场图
风场图主要用于展示气象数据中的风向及风速等信息,帮助与气象相关的行业工作者获取风场信息。
19. 折线面积图
折线面积图在折线图的基础上增加了面块。可以显示随时间变化的连续数据,适合展示相等时间间隔下的数据波动趋势,且用面块进行量的表达。
优点:直观易懂,能即时感知趋势和总量情况
缺点:展示的数据对象不宜过多,否则多个面块会使得信息杂乱难读
使用情形:需要获取时间线下数据的波动趋势和总量情况时,如一年中产品的销量变化和总销量情况等
20. 范围面积图
范围面积图是由两条展示上下限的折线面积图组成,可以显示随时间变化的连续数据的上下限波动情况。
优点:能及时感知上下限的变化趋势,以及上下限之间的差值情况
缺点:只能展示时间段内的极值,不能代表时间段内的众数
使用情形:如一周内的最高温与最低温变化情况等
21. 瀑布图
瀑布图用第一个柱子代表初始值,随横轴变量情况,在前者的数据基础上展示下一数据的波动值,并往往在最后的柱子上展示最终值。
优点:重在强调变化量,对于变化量的展示更直观
缺点:变化量小时会导致矩形过短不宜读
使用情形: 需要反映某一数据经过一系列增减变化后的情况时,如:产品库存变化情况、营业过程中的收支情况等
22. 堆叠面积图
堆叠面积图是具有总分结构的面积图,相比普通面积图可以直观地查看对象的组成结构,同时能够对其各组成的数据进行比较。
优点:直观易懂,能及时感知趋势、总量、组成量的情况
缺点:只能展示一个数据对象
使用情形:需要获取时间线下数据的波动趋势和总量、组成量情况时,如一年中产品的销量余量变化情况等
「类型占比」
23. 饼状图
饼状图使用扇形组成的圆反映某个部分占整体比例的情况,由于视觉重心是扇形的面积,更适合研究结构性占比。
优点:直观展示每个组成部分在整体中的占比
缺点:组成结构过多会使其花哨难读
使用情形:需要获取某一对象的组成占比情况,如:总收入中各项收入的占比等
24. 环形图
环形图是空心的饼状图,扇形改为圆弧来反映某个部分占整体比例的情况。视觉中心由原来的扇形面积转变为圆弧的长度,更适合研究组成结构的占比比较。且镂空的部分可以腾出空间容纳更多信息。
优点:直观展示每个组成部分在整体中的占比、空心部分可容纳更多信息
缺点:组成结构过多会使其花哨难读
使用情形:需要获取某一对象的组成占比情况并需要展示更多相关信息时,如:总收入中各项收入的占比以及总收入值等
25. 水波图
水波图使用球体内填充水的表现形式来展示某一对象的百分比情况。
优点:美观直观
缺点:由于球形结构的特征,水位高度和所占球体的面积表达不成正比,可能对实际数据造成误判
使用情形:需要美化且不追求严谨的占比信息时,如:任务进度、数据读取进度等
26. 矩形树图
矩形树图是转换成矩形的饼图,通过各部分的矩形面积占比表达值的占比。
优点:直观展示每个组成部分在整体中的占比,矩形的屏幕空间利用率更高
缺点:分类占比太小时会使文本难以排布
使用情形:需要获取某一对象的组成占比情况,如:总收入中各项收入的占比等
27. 旭日图
旭日图是层叠过后的饼图,反映整体与部分的各内容占比情况。
优点:直观反映数据的结构层级及其占比
缺点:由于层级之间的半径不同导致的圆环长度不同,容易对数据大小有错误认知,且不适合分类过多的情况,否则画面复杂难读
使用情形:需要进行分级展示的占比情况,如:子公司的各产品销售情况等
「关系流向」
28. 弦图
弦图展示不同对象之间的数据关系,对象的总值以外圈的圆弧代替,数据值的关系以弧线的形状或颜色进行表达。
优点:直观美观
缺点:对象不宜过多,否则杂乱难读
使用情形:需要分析多个对象之间的数据流向时,如:不同国家之间的人口流动情况等
29. 韦恩图
韦恩图也叫文氏图,主要展示不同对象之间的集合关系。
30. 桑基图
桑基图通过矩形代表对象的总值及其层级关系,并用带有宽度的线条展示数据流向和分布。(注意前后总值保持守恒)
优点:直观美观
缺点:对象不宜过多,否则杂乱难懂
使用情形:需要分析数据流向分布时,如:不同人群的爱好分布、不同产品的销售地区分布等
31. 甘特图
甘特图使用条形和时间标尺显示多任务进度情况。
优点:直观展示多项任务的进度情况
缺点:在实际使用中需时刻保持更新避免失效数据造成错误判断
使用情形:需要统筹管理多项任务进度时,如:公司内各部门针对某一项目的进展情况等
32. 金字塔
金字塔通过堆叠的三角形展示不同对象之间的层级关系或占比。
优点:简明美观
缺点:只能展示单一层级关系,无法呈现多线关系
使用情形:需要展示对象层级关系或不同层级的数量占比时,如:各财富区间内的人数占比、公司内职级下的人数占比等
33. 漏斗图
漏斗图用自上而下的多层梯形展示各个环节的流量存余。一般可以从中得出不同环节的流失率或转化率。
优点:直观反映流程推进下的流量存留情况
缺点:只能用于单流程单向的情形
使用情形:需要展示单一流程节点下的数据存留,如:购买流程中的用户存余等
34. 思维导图
思维导图通过线条将文本、图片、链接等信息连接起来,帮助理清思路、增强记忆和加深理解。
35. 力导向图
力导向图通过线条将信息连接,用来展示信息之间的复杂关系。信息节点可以处在二维空间也可处在三维空间,只是视觉表达上的不同。信息节点之间存在斥力,同时有关系的节点之间存在引力,因此可以通过权重设置来展现亲疏关系。一般用于展现关系网络等。
36. 工艺流程图
工艺流程图往往利用图像化的形式展现某项工艺的工艺流程。
37. 组织架构图
组织架构图将文本或图像进行连接,一般展示某公司的组织架构或某平台的数据架构等。
「频率分布」
38. 词云
词云通过提取关键词的方式,将大量与主题对象相关的文本呈现出来,并通过字体大小、字色显眼程度、文本排布等,将相关性最高、频率最高的关键词凸显出来。通常用于展现主题或内容时,将大量数据简化,具有可靠而直观的特点。
39. 热力图
热力图主要分为两种,一种地理热力图,一种日历热力图,都是通过颜色来表达某一指标的热度频率。通常以红到蓝代表热度频率由高到低。
40. 散点图
散点图将多个数据点分布在坐标网格中,通过其散点的排布情况可以得出整体的变化趋势及频率分布情况。
优点:多个数据点可以使数据分析更加可靠可信
缺点:只是展示 xy 轴的相关性,不能得出因果联系
使用情形:对原始数据需要进行整理分析其变化趋势或频率分布情况时,如:不同售出量的产品规格等
41. 四象限图
四象限图也叫波士顿矩阵图,将数据用散点图的模式排布,用定制好的标准作为坐标原点,使得坐标轴分割后的每组象限具有不同的含义。通过数据点的散布情况对数据进行分析,同时便于为下一步行动做出指示。
优点:简明直观
缺点:需要认识到划分的指标原点是否合理、考虑到现实的多种影响,根据四象限图得出的分析是否能够直接用来作为行动指示
使用情形:需要分析数据的类型情况,如:时间管理、能力意愿、市场销售等
42. 气泡图
气泡图是在散点图的二维基础上增添了三维(气泡大小)系数,相比气泡图多了一个变量。
优点:可以展示三个维度下的数据分布情况
缺点:数据不宜过多,否则气泡太多使得图表花哨难读
使用情形:需要在三个维度上对数据进行分析时,如:衣服销量与月份、气温的关系等
43. 直方图
直方图与柱状图外观很像,区别在于直方图用于展示频数分布情况,且横坐标必须是具有连续性质的参数,因而在外观上,直方图柱子无间隔。
优点:便于展示大量数据集的统计结果
缺点:仅适用于连续的数据、样本量不能太少(一般需要大于 50 个)、分段区间的细密程度(间隔数)对分布情况会存在误差
使用情形:需要得到频率分布情况或判断生产质量是否稳定时,如:一批产品的总体质量分布情况等
44. 核密度图
核密度图可以看作经过平滑处理的直方图,对数据分布进行了一个估计概括。
优点:直观、可以对离散点进行推算
缺点:计算复杂度高、带宽参数选择困难、对边界附近的估计不准确
使用情形:需要得到数据分布特征时,如南北地区的身高分布特征等
45. 箱线图
箱线图是将多个数据分布用矩形(箱体)和线条(上下须)进行表达的图表,可以看作多组直方图的变形,每一个箱线就是一组数据分布,四分位数的第一分位是上须,第二分位是箱体中位数线的上部分,第三分位是箱体中位数线的下部分,第四分位是下须,箱线外的点代表离群点。
优点:直观展示多组数据的分布情况,主要展示最值、四分位数、数据走势
缺点:只对连续性变量做分布
使用情形:需了解多组数据的分布情况时,如:多种型号的产品质量分布等
46. 小提琴图
小提琴图可以看作箱线图与核密度图的结合,相比箱线图可以更直观展示数据的整体分布,保证呈现出的数据分布情况更加准确,在数据具有多个峰值时也能展示出来。
优点:美观、能够直观展示多组数据整体分布情况,包括峰度、偏度等
缺点:计算复杂度高、带宽参数选择困难、对边界附近的估计不准确、只对连续性变量做分布
使用情形:需了解多组数据的详细分布情况时,如:多种型号的产品质量分布等
47. 三维曲面图
三维曲面图和气泡图一样都是在三个参数维度展现数据分布情况,但在展现方式上为三维的曲面形式,要求三个维度都具有连续性,一般用于寻找两组变量下的最佳组合。
优点:美观、三维展示响应变量分布情况
缺点:要求三个维度都具有连续性
使用情形:需寻找两组变量下的最佳组合,如:不同地理维度、不同月份下的宜人温度等
而当我们根据视觉导向进行分类时,可以将上述图表分为:
圆形因其圆润的形状和曲线,更容易丰富和美化页面。
矩形因贴合屏幕的四方形状,更有利于容纳更多的信息,提高屏幕空间利用率。同时多个图表的情况下,在视觉上更显得整齐。
线性的图表通常展现多条流线或分支线,在数据少的情况下更容易产生大量留白。若合理利用这个留白特征可以使可视化页面具有呼吸感,不至于画面沉闷拥堵。
除圆形、矩形、线性外,还有一些其他视觉特性的图表,如规则的三角形金字塔,但还有一些不规则的图表,这些图表容易因为数据的不同而在视觉表现上有很大变化,在使用这些不规则图表时需要根据实际情况提前规划好布局和空间,以免数据波动时影响画面的平衡和美感。
通过底层逻辑创作更多个性化图表
通过对上述图表进行归纳总结,我们可以整理得到图表在传达不同信息时的使用的图形特征,这里用表格进行了归纳总结。
对象的区分:不同图形、不同颜色、不同文本、不同图像
对象周期性:圆、环
对象层级性:图形、颜色的堆叠
对象阶段性:图块的上下/左右
对象相关性:连线、图中位置(位于空间轴或平面轴)
值的大小:面积填充、线条长短、点的位置、颜色顺序
值的对比:需要彼此相邻
值的变化:面积大小变化、线条长短/方向变化、位置变化、颜色变化
由此我们可以根据需求自由组合,定制更符合需求、更美观的专属图表。
比如上图为网易数读《火锅界的瑞幸,卷死海底捞》中使用的图表,从本质上是蝴蝶图,但摒弃了以往枯燥的条形图形象,转变成环形图的样式,使之拥有了环形的外观美感,又兼具蝴蝶图的数据对比功能。
再比如网易数读《月薪 2 万,吃不起面包》,通过将条形图和象形图结合,使得图表立时变得生动有趣,也是非常成功的例子。
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI绘画创意与实战
已累计诞生 655 位幸运星
发表评论 已发布6条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓