敢不敢算一算双十一花了多少钱？

昨天不知道有多少同学和课代表一样“剁手”了，很多人可能默默地在心里算账。

🤔我到底花了多少钱？

💰分别花在哪些类别？

如何统计这些数据呢？除了我们熟悉的条形图或者饼图，课代表今天想推荐一个新的图表形式 —— 桑基图。

课代表以身作则来直面自己的“剁手”记录👐。可以看到左边是大类，右边是品类中的细分产品，线条的粗细代表的课代表花费的金额的多少（课代表就在此不泄漏消费金额了），起始端与终点端的金额是一致的。

看着扎心的消费总结，课代表后面只能白粥配腐乳来过冬，弥补花钱一时的快感。

当然上面只做了一层单向的流动，我们还可以多层。比如这张2019年国家年度预算，图上显示了 各类收入部分 ➡️ 总额 ➡️ 各类支出部分 ，让钱的入袋与开支都一目了然。

 ⌂ 图源：twitter 

如果细分更多的话，还可以做更多层次的流动。

⌂ 图源：The Visual Agency

关于桑基图的历史可以追溯到1898年。其创建者 Matthew H. Sankey 用此图画出了蒸汽机能量损失的性质和程度。桑基图的命名也是根据创建者的名字而来。

⌂ 图源：维基百科

但桑基图最著名的图表之一是可视化制图先驱查尔斯·约瑟夫·米纳德 (Charles Joseph Minard)绘制的《1812年拿破仑东征地图》，它将桑基图和地理信息相结合。这张图表创建于1869年，实际上早于上图作者1898年的“第一个” 桑基图。

该图描绘了拿破仑的军队自离开波兰－俄罗斯边界后军力损失的状况，黄色代表军队往俄国行进，黑色则代表自俄国撤退。粗细为军队人数，除此之外，图表还包含了行军距离、当时温度、经纬度、移动方向的信息。

⌂ 图源：维基百科

米纳德非常熟练运用桑基图叠加地图的模式。比如，他还绘制了法国酒品出口地图。

⌂ 图源：维基百科

当然，地理信息并不是必要元素。我们日常做的桑基图，只要保证始末两端的流量大小一致，一般情况下，桑基图的结构一般情况是左右结构或者上下结构。

介绍了那么多桑基图，很多同学最关心的可能是如何制作桑基图？

国外有 Flourish、RawGraphs（之前课代表也介绍过这两个工具），国内可以用 hanabi花火、镝数可以制作。（当然如果大家有更好用的桑基图工具可以留言给课代表哈～）

和之前的教程一样，课代表以美数课制作的图作为案例来一步一步拆解。

课代表选择用 RawGraphs 生成桑基图。

▼ Step 1 ： 复制粘贴我们的数据。（公众号后台回复 16 获取数据）

▼ Step 2 ：选择桑基图（Rawgraphs 里面桑基图的命名为 Alluvial Diagram）

▼ Step 3 ：在 Steps 里面选入我们桑基图的基本结构，依次拖入【区域】【省份自治区】，再在我们的 Size 拖入【数量】决定的。轻松几步就可以完成一个桑基图的雏形了！

▼ Step 4 ：RawGraphs 里可修改图表的尺寸颜色（当然这个也可以后期在 Adobe Illustrator 里面修改）

▼ Step 5 ：下载 SVG 格式，为了方便我们在Adobe Illustrator里面进行进一步加工。

如果想要快速做完一个桑基图，上面的几步骤已经足够了。

但是课代表这次为了更好的配合我们的滑雪主题，想在桑基图中融入滑雪图片，所以在Adobe Illustrator 又进行了进阶型操作。

▼ Step 6 ：RawGraphs里面的桑基图结构默认是左右结构。根据主题我们修改成上下结构。我们可以选择图形右键-【变换】-【旋转】-【270度】。但最大面积的部分居右，不符合我们常规的的阅读习惯，所以我们可以再右键-【变换】-【镜像】-【垂直】，让东北区域居于左边。

▼ Step 7 ：但我们的文字也同时改变了方向。所以课代表教大家一个非常好用的技巧，可以把所有文字一起旋转方向。我们右键撤销编组三次（动图中课代表用了快捷键【Command/Ctril + Shift + G】），然后选择文字和桑基图部分，然后再按住 Shift 键，只选中桑基图部分，然后就可以单独选出文字了 ，右键-【变换】-【分别变换】，修改旋转角度【90度】，并再次以【镜像X轴】一次。

▼ Step 8 ：不知道同学们注意到了没有，我们最后制作的图表上还有叠加滑雪的图片。这里运用到 Ai 里面的【剪切蒙版】，可以让我们指定的形状中填充图片。 

我们先把东北的区域图表选中，因为它们本质是线段，所以我们先要给它们扩展变成可以填充的面，在菜单上选择【对象】-【扩展】，需要重复操作两次。然后把东北区域部分复制一次，放到旁边备用。

再找到一张合适的滑雪图片，然后同位置复制两次（Ctrl+C，Ctrl+F)，把照片放在桑基图后面，同时选中黑龙江和照片，右键【建立剪切蒙版】，再重复操作吉林和辽宁部分。

最后把之前复制备用的东北部分，压在图片上。

▼ Step 9 ：最后就是颜色的调整和文字的调整了！

如果你不满足于静态桑基图，或许也可以尝试一下让桑基图动起来。

比如纽约时报做了一个新式动态图表——流动的桑基图。图中每一个点是一个小男孩，玫红色是黑人小孩👦🏿，绿色是白人小孩👦🏼，他们的起点都是富裕家庭长大的小孩。但成人之后，他们会走向不同的阶级。

这种有路径模式的数据，做桑基图最适合不过了！作者很机智的用动态形式呈现给我们一个新的视觉形态。

⌂ 图源：纽约时报（https://www.nytimes.com/interactive/2018/03/27/upshot/make-your-own-mobility-animation.html）

有网友也用 D3.js 模仿了纽约时报制作的效果，感兴趣的同学们可以复制下链接（https://bl.ocks.org/1wheel/0a58f8bf5a14f6a534b9043a9c63dd1d）查看源代码。

微信后台回复 16，获取此教程数据。

我是美数课代表，有什么建议或意见都可以留言告诉我🌝

下节课见！