专栏名称: EasyCharts
EasyCharts,易图表,我们将定期推送各种数据可视化与分析教程,包括Excel(Power BI)、Origin、Sigmaplot、GraphPad、R、Python、Matlab、Tableau、D3.js等。
目录
相关文章推荐
前端早读课  ·  【第3376期】Ling(灵):追求极致响应 ... ·  2 天前  
前端充电宝  ·  前端的本质 ·  3 天前  
前端充电宝  ·  前端的本质 ·  3 天前  
前端早读课  ·  【第3373期】使用 Bun 实现部分预渲染的优势 ·  5 天前  
前端早读课  ·  【第3372期】在 Node.js 中使用 ... ·  6 天前  
前端Q  ·  前端构建系统浅析 ·  1 周前  
51好读  ›  专栏  ›  EasyCharts

流量结构分布图——桑基图(Sankey)

EasyCharts  · 公众号  · 前端  · 2017-05-16 11:38

正文

桑基图作为相对复杂的图表种类,平时很少用到,不仅仅是因为它的引用场景相对狭窄,另一方面则是制作难度相对较大,门槛较高。


不过针对第一个问题,如果你能很好地理解自己所涉及到的业务数据结构及想要表达和呈现的维度信息,那么关键时刻使用桑基图确实会让你的报告锦上添花。


桑基图用于表达流量分布于结构对比,最初的发明者使用它来呈现能量的流动与分布。


百度百科给了桑基图相对完善的解释:


桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图。它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于能源、材料成分、金融等数据的可视化分析。因1898年Matthew Henry Phineas Riall Sankey绘制的“蒸汽机的能源效率图”而闻名,此后便以其名字命名为“桑基图”。

因1898年Matthew Henry Phineas Riall Sankey绘制的“蒸汽机的能源效率图”而闻名,此后便以其名字命名为“桑基图”。


桑基图最明显的特征就是,始末端的分支宽度总和相等,即所有主支宽度的总和应与所有分出去的分支宽度的总和相等,保持能量的平衡。


现如今的可视化软件行业如此发达,制作此类桑基图已绝非难事,从最高端的JS库(D3、Ecgarts、highlight)到主流的数据科学编程工具(R、Python等)亦或者人人都能上手的自助式BI工具(PowerBI、Tableau等)都可以胜任此项工作。


本文将着重分享使用R语言中的d3network工具包以及PowerBI可视化工具来制作桑基图的大致过程(Tableau的桑基图还是太繁琐,这里不再展示,感兴趣可以自己探索)。


R中有两个包有现成的桑基图函数:


Networkd3、d3Network,包名大同小异,而且函数的参数都是一样的,很怀疑是不是同一批人搞的。


桑基图的数据结构很简单,只有三列数据信息:


  • 起点:

  • 终点:

  • 权重:



虽然只有三列数据,但是桑基图可以做出多级节点,在数据整合上,我们需要事前现将所有节点对应的起点、终点和权重值都顺序的纵向合并为三列字段。



第一个图是我们要呈现的原始数据,这样看来有两组对应关系,即大区对应地区、地区对应省份,我们如果要呈现这两组信息,只筛选出大区与地区对应关系及其权重值、地区与省份对应关系及其权重值,并将两组三变量数据表进行列对齐合并。(说的有点绕了,其实就是图表上有多少节点对,那么数据就有多少个三变量观测值)。



以下是R语言代码的实现过程:


library(Networkd3)

library("d3Network")

library(xlsx)


setwd("D:/R/File/")

Sankey

Sankeylinks

Sankeynodes

Sankeynodes$index

Sankeylinks

Sankeylinks


Sankeydata

Sankeyname



使用d3Network包中的桑基图函数实现:

d3Sankey(Links=Sankeydata,Nodes=Sankeyname,Source="Source",Target="Target",Value="Value",NodeID="name",  

fontsize=12,nodeWidth=30,file="TestSankey.html")



遗憾的是该包对中文支持不够友好~


#------------------------------------------


使用Networkd3包里面的桑基图函数实现:

sankeyNetwork(Links=Sankeydata,Nodes=Sankeyname, Source ="Source",

Target = "Target", Value = "Value", NodeID = "name",

units = "TWh", fontSize = 12, nodeWidth = 30)


这次出来的结果还是挺满意的:



以上两种方式做出来的动态图表(调用了D3的在线图形库,格式是html格式的,如果你需要将HTML嵌入PPT中使用,那么本公众号早前曾经推送过一篇此类文章,讲解如何在PPT中嵌入HTML对象)。


http://mp.weixin.qq.com/s/_mDogi4G6LRTRiaAZIWaRw


PowerBI版讲解:


接下来讲解如何在PowerBI中实现以上桑基图效果,因为改图表并未包含在PowerBI的内置基础图表库中,所以我们需要在他的在线社区中下载该图表的可视化插件。


https://store.office.com/en-us/appshome.aspx?productgroup=PowerBI


关于如何下载PowerBI图形可视化插件,如何导入、加载和使用,此前的另一篇文章中也介绍的很详细。


当Power BI遇见R语言



然后导入你的桑基图数据源:



拖入对应字段:(仍然是三个字段,起点,终点,权重)



保存本地文件,并发布到PowerBI的云空间:



如果你还没有申请PowerBI的账户,那么最好去他的平台申请一个(提示需要使用教育邮箱或者工作邮箱,即.com\.edu结尾的)。


发布成功之后,你的PowerBI控件中就存在此图表对象,以后你更新本地的那个PowerBI文件的时候,只需点击发布,空间中的对象也会同步更新。


然后打开你的PPT(需13及16版以上才可以)的应用商店内找到PowerBIFile插件。


点击添加,输入之前申请的账号密码,就会出现你的已存储的仪表盘对象,点击对应的桑基图对象,就可以完成导入。


导入后的桑基图无论是在PPT的编辑状态还是PPT的放映状态都可以保留所有的动态效果。(这就是微软的PowerBI与office平台对接后带来的强大优势,非常适合作为大屏幕交互演示来蹭亮点)




最后好像再强调一遍,Sankey是特定场景下呈现流量关系与结构对比所使用的,不要觉得这种图表很炫酷就各种乱用,数据可视化的要义很重要的一条就是,不可乱用图表,适当的场景使用合适的图表。


数据源会分享在魔方学院QQ群中:


欢迎关注魔方学院QQ群



推荐文章
前端充电宝  ·  前端的本质
3 天前
前端充电宝  ·  前端的本质
3 天前
前端Q  ·  前端构建系统浅析
1 周前
总裁俱乐部  ·  2017 新十大关系,绝了!
7 年前
杂学杂问  ·  杂学杂问 4月17日早读分享
7 年前