Tableau:画桑基图(详细版)

网上已经有很多教程讲解了怎么使用Tableau来画桑基图。该篇博客只是想把画桑基图过程中涉及到的各个部分都弄清楚，篇幅可能会很长。

1.基本函数

1.1 INDEX()

  该函数可以返回分区中当前行的索引(索引编号从1开始)。下面以Tableau自带的【订单(示例-超市)】数据为例进行说明。创建计算字段【index】，定义如下：
然后将【订单日期】拖拽到【行】中，并将其维度设为【年】，将【销售额】和【index】拖拽到【列】中。设置【index】的计算依据为【表向下】，然后将图表类型改为【文本表】，即可得到如下结果。

1.2 RUNNING_SUM()、RUNNING_AVG()

  这两个函数属于同一类，以RUNNING_AVG()为例说明。RUNNING_AVG返回给定表达式从分区中第一行到当前行的累积平均值。仍以上述数据为例，定义如下计算字段【fun1】：
将【fun1】的计算依据设置为【表向下】。可以得到如下结果(其实现方式与前文相同，不在赘述)。

在上图中：$$2931056=2931056$$$$3181488=\frac{2931056+3431919}{2}$$依此类推。

2 画Sigmoid曲线

  画Sigmoid曲线需要用到【线】标记下的【路径】选项。将某一个字段拖拽到【路径】中，相当于将原本汇总的数据按字段进行分组，然后将新形成的点串联成线。 举个例子，先定义两个计算字段【index】和【fun】，其中【index】的定义与前文相同，【fun】的定义如下：

将【index】和【fun】分别拖到【列】和【行】中，此时表中只有一个点(因为INDEX()是聚合函数)。如下图：

接下来，将【标记】中的【自动】改为【线】，并将【维度】中的【子类别】拖到【路径】选项中，编辑【index】和【fun】的计算依据，将其【计算依据】都改为【特定维度】下的【子类别】。将【列】中的【index】复制到【标签】选项中，得到如下结果：

上图中的线将索引号从1到17的点连接了起来得到了一条抛物曲线。下面来画sigmoid曲线。修改【index】和【fun】的定义，具体如下：

重复刚才画抛物线的步骤，即可得到下图，sigmoid曲线就完成了。

3 画桑基图

  桑基图并不是Tableau的基础图形，所以在Tableau中画桑基图比较麻烦。观察桑基图可以发现，其主要有三部分构成，左右两根柱子(这两部分可以用柱状图来实现)，中间是多条sigmoid曲线。Tableau中的桑基图就是通过将两个柱状图和sigmoid曲线在【仪表板】中拼接来制作的。
  以Tableau自带的【订单(示例-超市)】数据为例，完成从产品类型到地区的流向桑基图。具体步骤如下：
第0步：构造数据
  画桑基图的时候，一般不会在原始数据上直接操作。原因是sigmoid曲线的平滑程度和弯曲程度完全取决于【路径】中使用的字段。如果该字段中不同数值较少，则sigmoid曲线不够平滑而且弯曲度也不够(前文中的sigmoid曲线就有这个问题)。如果不同取值太多，数据量太大，图表的加载也会耗时。所以一般都是先按照桑基图的具体要求，将数据进行汇总再增加辅助列，在新的数据上画桑基图。
  将数据按【类别】和【地区】字段对【销售额】进行汇总，然后使用 分析->查看数据，复制所有数据并保存到excel文件中。(这里我将汇总计算出的销售额的小数部分舍弃了)。

打开保存的excel文件(sheet命名为【桑吉图1】)，先将【销售额】字段中的人民币符号删除(否则Tableau会把该字段当作维度字段，就无法进行数值计算了)， 之后再增加一个常数列，处理之后的数据如下：

再增加一个新的sheet表(命名为【桑吉图2】)，其表中的数据如下。

然后在Tableau中打开此文件。将excel文件中的两个sheet表连接起来，再将两个无用的line字段隐藏起来即可。下面将在这组数据上制作桑吉图。

第1步 画左、右两个柱状图
  先来画左边的【类别】柱状图。将相关字段拖到相应的位置，然后将【总和(销售额)】的【快速表计算方式】改为【合计百分比】即可(【标记】中的【标签】中的【总和(销售额)】也需要做这个做这个操作)。具体如下图：


然后画右边的柱状图，操作与【类别】柱状图相同，只需要把【类别】换成【地区】就可以了，过程不再赘述。其结果如下；

第2步 画中间的sigmoid曲线
  先根据【类型】创建数据桶，其定义如下：

【类型(数据桶)】可以产生从1到49、间隔为1的正整数集合。将该字段拖拽到【路径】中，可以保证每个sigmoid曲线都由49个数据点生成，让sigmoid曲线更平滑。
接下来，需要创建多个计算字段，具体如下；

名称	定义	作用
index	(INDEX()-25)/5	将index的计算依据改为【类型(数据桶)】之后，可以保证index取值范围在[-4.8,4.8]之间
sigmoid	1/(1+exp(-[index])	sigmoid曲线
rank1	RUNNING_SUM(SUM([销售额]))/TOTAL(SUM([销售额]))	sigmoid曲线的左起点高度
rank2	RUNNING_SUM(SUM([销售额]))/TOTAL(SUM([销售额]))	sigmoid曲线的右终点高度
ft	[rank1]+([rank2]-[rank1])*[sigmoid]	sigmoid曲线函数
size	RUNNING_SUM(SUM([销售额]))	调整sigmoid曲线粗细，占比越大曲线越粗

先将各个字段拖拽到相关位置，具体如下：

调整【index】【size】和【ft】的计算依据。【index】和【size】的计算依据为【类别(数据桶)】，而【ft】的计算依据比较麻烦，需要分别配置三个计算字段的计算依据，依次如下：



最后得到的sigmoid曲线如图：

第3步 美化桑基图

• sigmoid曲线的右边结尾处变成了折线，原因不明，所以一般都是调整【index】坐标轴显示范围，让结尾不显示即可。
  
• 两个柱状图的【大小】要调整到最大，否则柱状图和sigmoid曲线拼接之后不连贯(会有如下图所示的间隙)。
  
  找到对应柱状图的工作薄，在如下位置调整柱状图大小：
  
• 两个柱状图要进行排序，按照桑基图的原理，同颜色的sigmoid曲线从左边对应颜色的柱状图区块发出(因为我们是按照【类别】来给sigmoid曲线设置颜色的)，而对于右边柱状图的每个区块，应该要收到三条不同颜色的sigmoid曲线，并且区块越长，sigmoid曲线越粗。 据此需要来检验两个柱状图内部的区块排序是否合理，若不合理，则需要认为调整排序。这里需要将两个柱状图的排序方式改为按 数据源 降序 排序。以【类别】排序进行说明：
  
  至于为什么是降序排序？（这与【rank1】和【rank2】的计算依据有关，以后会补充到其他博客文章里)。
• 调整柱状图和sigmoid曲线三个部分的高度。若有必要，可以添加【空白】对象辅助调整。调整之后的桑基图如下：
  

补充1

在画sigmoid曲线时，如果出现如下情况：

原因在于【类型(数据痛)】上只提供了两个数据，这里需要把缺失数据显示出来。把【类型(数据桶)】拖拽到【行】上，勾选【显示缺失值】。再将其拖拽回【路径】中即可。

补充2

各个计算字段表计算依据设置说明：https://blog.csdn.net/yeshang_lady/article/details/117082473。

补充3

  基于在补充材料2中发现的一些问题做了一些优化，主要是修改了一些计算字段的定义，具体如下：

计算字段	公式
销售额1	IF [类型]=1 THEN [销售额] ELSE 0 END
index	不变
sigmoid	不变
rank1	RUNNING_SUM(SUM([销售额1]))/TOTAL(SUM([销售额1]))
rank2	RUNNING_SUM(SUM([销售额1]))/TOTAL(SUM([销售额1]))
size	TOTAL(SUM([销售额1]))
ft	不变

  各个计算字段的表计算依据设不变，最终画出的sigmoid曲线部分如下图，这样原先的桑基图中右侧曲线突变的部分就删除了。

参考文献

1. https://www.jianshu.com/p/22c3ec5ea4e0
2. https://www.jianshu.com/p/824cee5c40b4