现在非常流行可视化数据,那么今天咱就来讲讲桑基图[1]。
Sankey图通常用于科学领域,特别是物理领域。它们被用来表示能量输入,有用的输出和浪费的输出。
下边这个图非常典型,是从欧盟官网[2]扒拉下来的。它展示了2016年欧盟国家能量流动的趋势,不同的颜色代表不同领域的消耗。我加上了svg描边动画stroke-dashoffet以及stroke-dasharray,做出了动态效果。
来,横屏开始。可以点击这个桑基图的任意区域,会有惊喜哦~
好,转回来。
下面呢,就是我根据桑基图是思想改造的一个图,数据来源于 WTO 2016年世界贸易量[3],我选取了中国大陆、美国、日本、中国台湾地区的出口量关系,旨在通过展现这些国家/地区的贸易量来探究中国的国际形势。
然后接着横屏吧,记住哦,中国大陆、美国、日本、中国台湾。(憋说你找不到他们在哪里)
从上图我们可以看到中国目前的局势啦,具体的后边我会再跟大家分享,会用到上边这张图噢。
1.入门版
国外有些人开发了一些网站,免费制作桑基图,操作简单,但是外观不是特别好看。
https://sankey.csaladen.es/
http://sankeymatic.com/build/(推荐)
2.我没用过版
很多啦,但是我都没有试过。
3.程序员版
最漂亮的就是用 js 库调用,包括百度的 echarts.js 、非常著名的 d3.js 。
https://github.com/d3/d3/wiki/Gallery
当然我们不需要完全自己做,现在很多网站展示的都是svg,我们可以直接拷贝代码下来,放进Ai进行二次操作、美化,难度也不大,非常推荐。
领取专属 10元无门槛券
私享最新 技术干货