查看原文
其他

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

你们的表哥 南京路表哥 2021-02-25

上周表哥讲了对比数据的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的教程,表哥应该还会继续出,大家掌握了它,就能轻松做出很多漂亮的图表,敬请期待。

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





第五期教程就到这里了,如果有其他想学习的内容,或者对这样的教程形式有更多建议,欢迎后台留言,想看的朋友越多,你们就能越早看到它!
作   者 | 邹   磊
编   辑 | 小   唐
设   计 | 邹   磊

扫描二维码
 关注表哥
▽ ▽

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存