如何3分钟内制作出一张漂亮的流动桑基图？

上周表哥讲了对比数据的15种表现形式，通过后台的留言，发现你们对其中的桑基图最感兴趣，所以这周就讲讲如何做出一张漂亮的桑基图。

表哥保证，一篇文章就能让你明白，到底什么是桑基图？如何制作桑基图？桑基图的注意事项有哪些？

什么是桑基图？

这里表哥要先介绍一张非常著名的图，就是查尔斯·米纳德（Charles Minard）绘制的《1812年拿破仑东征图》。这张图形象的描绘了拿破仑在1812到1813年进攻俄国时所遭受的灾难性损失。

图中黄色为进军路线，黑色为撤退路线，线条的宽度代表拿破仑的军队人数变化，从图中可以清楚的看到，在深入寒冷的俄国腹地时，拿破仑军队的人数在逐渐的减少，到黑色线条撤退返回时，线条细的都快看不见了（活着返回法国的只有1万余人）。这张图呢，就是大家现在看到的桑基图的祖师爷。

下面这两张就是你们现在常见的桑基图。

↓↓↓

简单来说，桑基图是一种表现数据间包含和权重关系流向的统计图表，常见的布局形式有左右流向布局和上下流向布局，其中线条的粗细代表了数值的大小，线条的颜色代表不同的分支种类，通过线条流动的位置和归属，来表现各类别数据之间的包含关系。

如何快速制作桑基图？

桑基图介绍完后，就是大家最喜欢看的教程环节，我们应该如何快速制作出一张桑基图呢？

其实方法非常的简单，借助网站在线直接生成就好了。你还记得吗？表哥之前曾提到过一个网站，叫RAWGraphs，这就是我做桑基图时经常会用到的网站，在这里强烈推荐给大家。（别误会，不是广告，我这点阅读量还恰不到饭！）

我一般把RAWGraphs简单叫做RAW，它是一个在线快速生成可视化图表的网站，对于不懂代码的小白来说， 它的操作真的是非常友好。

有多简单呢？你只需要把数据拖上去，2-3分钟内就能生成各种各样的可视化图表。而且啊，它还支持导出SVG格式的图片，这样大家就可以在Adobe Illustrator中进行美化加工。

好消息是，它的2.0版本也即将发布，在自定义性和图表形式的丰富度上会继续提升。等2.0推出以后，表哥肯定第一时间会给大家带来最新的体验教程。

首先，我们需要准备一份适合用桑基图来表达和展示的数据。

这个数据中要至少包含一列数值，至少包含两列分类标签，也就是说一个数字同时归属于至少两个分类阵营。比如说下面这个样例数据里，有一个数据是2008年1月旅游开支1000元，这个1000元就同时对应2008年1月和旅游开支这两个分类。我们使用桑基图呢，就可以同时看到各个分类之间的包含和权重关系。

数据的格式最好就是使用规范格式，也就是你们在做数据透视表时要用到的样式，我自己会叫它堆叠样式，第一行是各列的字段名，接下来每一行数据就是一条完整记录。（💡堆叠样式在使用工具网站时会经常用到，建议大家在日常整理数据时都使用堆叠样式）。

这里表哥以《2018年度医院排行榜前10（综合）》数据为例，给大家带来桑基图的生成教程（后台回复桑基图，可获得数据）。

第一步，我们打开RAW网站，点击绿色按钮USE IT NOW!，然后将数据复制粘贴到这个网站中。出现绿色提示信息后，就代表数据加载成功了。

💡如果你的数据并没有在 Excel 中进行堆叠，那么RAW有一个贴心的功能，可点击右下角的 Data is stacked now. Click here to stack it 进行数据格式的规范化转换。

第二步，我们鼠标往下滑动，会发现有很多图表样式，这里选中Alluvial Diagram（桑基图也成为冲击图）。

往下滑动，会出现 Map your Dimensions 的操作界面。与此同时，数据的标题/字段名行已经变成了绿色块，出现在了画面左侧（可以看到 RAW 非常的智能，它将数据进行了模块化封装处理）。

第三步，我们将左侧数据块中的医院名称和所在城市拖放在【Steps 】中，将综合得分拖拽到【Size】中。

【Steps 】影响的是分类的连接，每拖一个数据块到【Steps】中，就多一个分类的连接。【Size】影响的是线条的粗细，也就是数值的大小，所以我们将综合得分拖拽到了这里。

拖拽完成后，我们会发现桑基图已经生成了。

这里我们可通过左侧的选项对图表进行细节的调整（比如图表的大小、节点黑色矩形的大小、线条透明度、配色、排序方式）；

第四步，因为RAW的细节调整还不够完善（比如自定义字体、字体大小等等），剩下的细节调整我们可以导出SVG，在AI中加工。

鼠标往下滑，选择SVG，随便命名一个名字，点击Download。

在AI中美化桑基图

第一步，将导出后的SVG用AI打开，拖拽到新建的画板中，通过不停的按快捷键【Shift + Ctrl / Command + G】取消编组 。编组取消后，我们按着所在城市的类别对线条进行配色的调整。（对AI还毫无概念的新朋友，可以先移步之前的教程，熟悉一下AI的使用）

第二步，我们选择任意一个文字，执行菜单栏 →【选择】 → 【相同】→ 【外观】，这样我们将所有的文字全部选中，就可以统一调整字体和文字大小了。

文字调整后，我们发现整体文字有点偏下，可将文字全部选中，按快捷键【Shift 】加鼠标，对文字进行微调，直到视觉上对齐为止。

第三步，文字对齐后，可在上方加上分类的说明信息，告诉读者左边和右边两个类别分别代表什么。

最后加入【标题】、【注】、【数据来源】、【线条粗细的说明】和其他元素，再根据版面调整下间距，那么这张通过RAW生成的桑基图的美化在AI中就完成了。

制作桑基图的一些注意小事项

1.控制分类的数量

桑基图的分类尽量保持2-3个以内，如果分类众多，读者的理解成本就会加大。

2.按需标注数值

如果想更清楚更直接地让读者知道线条粗细的数值，可将数字放在节点的旁边。

3.增加参考线指引

如果分类说明文字与图表较远，可通过虚线连接的指引方式，引导读者。      

4.信息置于节点矩形内

如果你做的是竖向桑基图，那么可将节点的矩形放大，这样可将文字或者数字信息放置在节点上，这样就增加了图表的美观度。

5、增加一些装饰细节

可增加一些装饰性的元素，比如主题Icon，让画面更加丰富。

总结

通过表哥的桑基图教程，相信你可以很快速的掌握制作技巧。如果遇到问题，可以留言咨询。

当然，RAW这个网站不仅可以做桑基图，网站中的图表样式还有很多，表哥也基于这个网站做了很多的创新可视化图表，比如下图：

还是表哥一直提到的方法论理念：不要局限于工具、软件本身，任何的工具、软件都是为你的作品服务的!只要是能够提升效率，完成作品，我们就可以在多种工具、软件、网站中进行跨界的结合使用。

关于RAW的教程，表哥应该还会继续出，大家掌握了它，就能轻松做出很多漂亮的图表，敬请期待。

如果大家还想要更多干货，热情来得更猛烈些吧！欢迎【转发】、【点赞】、【在看】，你们的捧场，就是表哥继续创作的动力！

---

第五期教程就到这里了，如果有其他想学习的内容，或者对这样的教程形式有更多建议，欢迎后台留言，想看的朋友越多，你们就能越早看到它！

作   者 | 邹   磊

编   辑 | 小   唐

设   计 | 邹   磊

扫描二维码
 关注表哥

▽ ▽