数据可视化之旅：常用图表对比

最新推荐文章于 2024-06-24 23:26:01 发布

IT农民工1

最新推荐文章于 2024-06-24 23:26:01 发布

阅读量8.4k

点赞数 2

《七天数据可视化之旅》第五天：常用图表对比

640?wx_fmt=gif

作者：Destiny

来源：木东居士

Destiny，某物流公司数据产品经理，目前从事数据平台搭建和可视化相关的工作。持续学习中，期望与大家多多交流数据相关的技术和实际应用，共同成长。

0x00 前言

在之前分享的【数据图表的选择】三篇文章中，已经把不同类型数据图表的用法和适用场景做了一遍梳理。但是，在实际的业务场景中，如何根据拥有的数据集、想要展现的数据模式，去选择最合适的图表，需要不断的去实践和总结。

因此，今天这篇文章分享的内容，是来对比常见相似图表的差别和适用的数据集。

本篇将通过一些来源于实际业务场景的数据集实例，来进行不同的可视化方案对比，从而总结出根据可视化目的、数据集特征，去选择图表类型的一般套路。图表对比部分，会选择一些常见的，且比较容易混淆的图表类型来做对比，以「可视化目标→数据集准备→图表选择和对比→经验总结」的方式来行文。

0x01 常用图表对比

1.柱状图 VS 条形图

1）可视化目标

展示2019年上半年`销售额Top10的手机品牌`、`销售额Top10的手机型号`。

2）数据集准备

手机品牌	销售额（元）
Apple	1,900,000,000
……	……
魅族	400,000,000

手机型号	销售额（元）
Ipnone X 64G 黑色	120,600,000
……	……
魅族 16th Plus 8GB+128GB 远山白	46,500,000

3）图形对比

640?wx_fmt=jpeg

4）总结

相同点：
- 柱状图和条形图的数据结构是相同的，都是由「一个分类字段+一个连续数值字段」构成。
- 当数据的记录数不大于12条，分类字段的字符长度小于5时，此时柱状图和条形图可以互换。
不同点：
- 柱状图：
  若分类字段，恰好是「时间序列」，此时建议使用柱状图，因为柱状图能更好地体现数据随时间的变化情况。
- 条形图：
  若分类字段的字符长度较长，且数据的记录数大于12，此时建议使用条形图。
  一方面，斜置的文字和用户阅读的习惯相悖，同时也占用页面空间，影响可视化图表的美感。

2.柱状图 VS 直方图

1）可视化目标

展示某家出售小商品的店铺，不同品类的商品销售数量。
已知某家出售小商品的店铺，其商品定价范围在[0,100）之间，现需展示该店铺在售商品的价格分布，要求每10元作为一个区间。

2）数据集准备

数据集1:

价格区间	订单数
[0,10）	10
[10,50）	27
[50,100）	43
[100,+∞）	6

数据集2:

价格区间	在售商品数量
[0,10）	13
[10,20）	16
[20,30）	16
[30,40）	25
[40,50）	11
[50,60）	14
[60,70）	9
[70,80）	7
[80,90）	6
[90,100）	3

3）图形对比

640?wx_fmt=jpeg

4）总结

相同点：
- 柱状图和直方图的数据结构是相同的，都是由「一个分类/分组字段+一个连续数值字段」构成。
- 都是由柱形条构成。
不同点：
- 分析目的和适用场景不同。
  「柱状图」主要是比较数据的大小，「直方图」是用来展示数据的分布。
- 映射到X轴上的数据属性不同。
  在柱状图中，X轴上的变量是分类数据，例如不同的手机品牌、店铺或网站在售商品的分类。
  在直方图中，X轴上是连续的分组区间，这些区间通常表现为数字，且一般情况下组距是相同的，例如将在售商品的价格区间分为的“0-10元，10-20元……”。
- 宽度代表的意义不同。
  在柱状图中，柱子的宽度没有实际的含义，一般为了美观和整齐，会要求宽度相同；
  在直方图中，柱子的宽度代表了区间的长度（即组距），根据区间的不同，柱子的宽度可以不同，但其宽度原则上应该为组距的整倍。
- 表示数据大小的方式不同。
  柱状图，是通过柱形条的高度，来映射数据的大小，且柱子之间有间隔；
  直方图，是通过面积来表示数据的大小，且柱子之间紧密相连，没有间隔。

3.堆叠柱状图 VS 百分比堆叠柱状图

1）可视化目标

展示某影院2019年上半年总票房趋势及华语片、外语片趋势。
展示某影院2019年上半年总票房收入构成占比趋势。

2）数据集准备

数据集1:票房收入（元）

月份	国产片	外语片
1月	800,000,000	900,000,000
……	……
6月	1,700,000,000	800,000,000

数据集1:票房收入占比

月份	国产片	外语片
1月	49%	51%
……	……
6月	70%	30%

3）图形对比

640?wx_fmt=jpeg

4）总结

相同点：
- 堆叠柱状图和百分比堆叠柱状图，都适合用来展示分类数据的构成对比或构成随时间的变化趋势。
- 当映射到X轴上的数据为时间序列时，此时可以用堆叠面积图or百分比堆叠面积图来代替。
不同点：
- 堆叠柱状图：
  既可以对比各构成部分的数值差异，还可以观测各组数据的整体差距。
- 百分比堆叠柱状图：
  只能对比整体中的各构成部分的占比差异，无法对比不同整体的差异。

4.折线图 VS 面积图

1）可视化目标

展示2019年上半年，全国承运包裹量趋势。
展示2019年上半年，中通、圆通、申通三家快递公司的承运包裹量趋势。
展示2019年上半年，全国及主流快递公司的承运量趋势。
展示2019年上半年，主流快递公司的承运量占全国总承运量的趋势。

2）数据集准备

数据集1:全国承运包裹量

月份	销售额（元）
1月	300,000,000
……	……
6月	430,000,000

数据集2:中通、圆通、申通三家快递公司的承运包裹量

月份	中通	圆通	申通
1月	30,000,000	24,000,000	26,000,000
……
6月	34,000,000	25,000,000	30,000,000

数据集3：全国及主流快递公司的承运量趋势

月份	顺丰	三通一达	EMS	其他快递
1月	32,000,000	50,000,000	10,000,000	8,000,000
……
6月	35,000,000	49,000,000	11,000,000	5,000,000

数据集4:主流快递公司的承运量占全国总承运量的趋势

月份	顺丰	三通一达	EMS	其他快递
1月	32%	50%	10%	8%
……
6月	35%	49%	11%	5%

3）图形对比

折线图和面积图可以互换的情况：

640?wx_fmt=jpeg

折线图和面积图不能互换的情况：
显示构成或占比时，应该使用面积图☞堆叠面积图or百分比堆叠面积图。

640?wx_fmt=jpeg

4）总结

相同点：
- 折线图和面积图展示的是数据随时间的变化趋势，因此映射到X轴的数据类型一般为「时间/日期」。
- 二者均可以展现一个或多个变量和时间的关系，这种关系包括，周期性变化、季节性变化、异常波动等。
- 在大部分情况下，折线图和面积图是可以互换的。
不同点：
- 折线图：
  通过数据点的纵坐标来映射数值的大小，一般只用来表示数据的趋势。
- 面积图：
  通过面积来映射数值的大小，「面积图」除了可以替换折线图外，还可以用来表示整体及其构成部分随时间的变化趋势。
注意点：
- 当使用面积图表示多系列的趋势时，需要对代表不同系列的面积区块颜色设置透明度，透明度可以减少不同系列之间的遮盖，帮助我们看到不同序列之间的重叠关系和更多信息。
- 当一个图表中，系列值过多时，折线图会比面积图更直观，因为减少了系列的覆盖和重叠，能更清晰的看看到各个系列的趋势变化。

5.堆叠面积图 VS 百分比堆叠面积图

1）可视化目标

若某家公司主要有电商、物流、云计算三块的业务，现需要展示2015～2019这五年，集团的年度收入趋势及其三大业务的收入趋势。
若某家公司主要有电商、物流、云计算三块的业务，现需要展示2015～2019这五年，三大业务对集团的年度收入的贡献比例。

说明：假设集团有且只有这三项业务，且总收入=电商业务收入+物流业务收入+云计算业务收入。

2）数据集准备

数据集1：总收入构成

年份	第一产业	第二产业	第三产业
2015年	60,000,000	30,000,000	10,000,000
……			……
2019年	100,000,000	60,000,000	40,000,000

数据集2：总收入贡献占比

年份	电商	物流	云计算
2015年	60%	30%	10%
……			……
2019年	50%	30%	20%

3）图形对比

640?wx_fmt=jpeg

4）总结

相同点：
- 堆叠面积图和百分比堆叠面积图，映射到X轴的均为【时间序列】。
- 两者都可以展示各构成部分，随时间的变化趋势，只不过「堆叠面积图」的是构成部分的实际值随时间的变化趋势，「百分比堆叠面积图」展示的是构成部分的占比随时间的变化趋势。
不同点：
- 堆叠面积图：
  除了可以展示各构成部分随时间的变化趋势，还可以展示整体随时间的变化趋势。
- 百分比堆叠面积图：
  只能展示各构成部分占总体的比例随时间的变化，无法观测总体随时间的变化趋势。
  此外，从任何一个时间节点纵切下来，各部分占比之和必须为100%，即必须等于该节点的整体。

6.堆叠面积图 VS 堆叠柱状图

1）可视化目标

展示某个国家，近6年来GDP的增长趋势及其三大产业的产值趋势。
展示2019年第二季度，6大主流手机品牌的总出货量排名，及其各品牌在5大洲的出货量对比。

2）数据集准备

数据集1：三大产业产值单位为【元】

年份	第一产业	第二产业	第三产业
2013年	3,000,000	1,000,000	6,000,000
……			……
2019年	5,000,000	2,000,000	10,000,000

数据集2：出货量单位为【部】

手机品牌	亚洲	欧洲	非洲	美洲	销售额（元）
Ipnone X 64G 黑色	130,000	90,000	50,000	40,000	20,000
……					……
小米	60,000	20,000	40,000	20,000	10,000

3）图形对比

640?wx_fmt=jpeg

4）总结

相同点：
- 堆叠面积图和堆叠柱状图的数据集格式类似，都是由「一个分类字段+多个连续数值字段」构成，且多个连续数值字段，是一个整体的各组成部分。
- 两者都可以观测某一节点的总体数值和各组成部分的具体数值，都有数据对比的功能。
不同点：
- 堆叠面积图：
  堆叠面积图的分类字段，一般是时间序列。
  当既需要分析整体随时间的变化趋势，又要了解整体的各构成项随时间的变化情况时，应该使用【堆叠面积图】。
  从其目的可以看出，堆叠面积图的分类字段(即时间序列)，是按照时间的先后顺序排列的。
- 堆叠柱状图：
  堆叠柱状图的分类字段，一般是非时间类型的分类数据。
  当既要对比不同整体的数据大小，又要观测整体各构成项的数据大小时，应该使用【堆叠柱状图】。
  若整体的构成项过多，为了突出重点，需要对构成项进行重新归类，展示TOP5的分类，剩下则归为「其他」。

7.散点图 VS 气泡图

1）可视化目标

展示华为不同型号手机的售价和成本的分布。
展示华为手机不同型号手机的售价、成本和对应型号的销量。

2）数据集准备

数据集1:

手机型号	售价（元）	成本（元）
HUAWEI P30	3688	1400
HUAWEI P30 Pro	4988	1600
HUAWEI Mate 20	3199	1200
HUAWEI Mate 20 Pro	5099	2000
……	……
HUAWEI nova 5	2799	1000

数据集2:

手机型号	售价（元）	成本（元）	销量（部）
HUAWEI P30	3688	1400	1,000,000
……	……
HUAWEI nova 5	2799	1000	200,000

3）图形对比

640?wx_fmt=jpeg

4）总结

相同点：
- 散点图和气泡图，均是用来展示数据分布情况的一种图形。
- 散点图和气泡图，都是将两个字段映射到x,y轴的位置上，(x,y)的取值确定一个圆点或气泡在直角坐标系中的位置。
不同点：
- 散点图：
  一般用来展示二维数据(x,y)的分布，侧重于研究二维数据的两个变量x,y之间的相关性，如身高和体重之间的相关关系。
  散点图中，还可以展示多组数据系列的对比，比如男性身高体重和女性身高体重分布规律的对照。
- 气泡图：
  一般用来展示三维数据（x,y,z）的分布情况，相较于散点图，气泡图增加了一个维度的数据展示，且将其数值映射到气泡的大小上。
  气泡图，也可以展示多组数据系列的分布，以发现不同系列的分布规律和差异。
注意点：
- 一般来说，散点图主要是用于研究数据集的分布规律和相关性，并不是很侧重去看每个数据点的具体取值。
  当数据集数量过大时，不适合将全部数据点展示在散点图中，此时需要对总体进行抽样显示，通常采用分层抽样的方法进行，但是分层抽样的依据和影响因素需要依据具体的业务场景而定。
- 相较于散点图，气泡图不太适合过多数据容量的情况，气泡太多会使图表难以阅读。
  此外，对于气泡图中隐藏的一些数据信息，通常可以使用交互来辅助图标信息的阅读，如悬停显示详细数据、缩放观测被遮盖的数据点等。