用Tableau画旭日图

2019-08-20  本文已影响0人  扫地sir

一直想写这篇旭日图(Sunburst Chart)的教程,但一直没有提笔。因为在public上搜sunburst,拆解后发现作品中有两种方法,本来想把两种方法研究透彻,分两篇介绍,但是有一种方法一直没研究明白就放弃了,虽然两种方法的原理都差不多,表计算的难易程度差很多,所以就只能介绍下面这种最简单的方法了。

这种较为简单的方法,来源于Toan Hoang大神的tableaumagic网站,属于比较早的一篇文章,因为原文表计算困惑了我好久,所以我对表计算进行了部分微调,以便于理解。

https://tableaumagic.com/sunburst-chart-tutorial/

这里要说的是,如果你看过前面的《用Tableau画圆形热力图》文章就会很快明白这篇文章的原理,那篇文章是画方形(每个方形只需要5个点就可以连在一起),由于每圈的数据比较多,所以多个方形连在一起,给人的感觉就是圆形。
旭日图就不一样了,由于每圈的数据比较少,方形肯定是不能成了,就需要画扇形,画扇形就需要更多的点来连接。

建立数据集

Label,Value Label,Value,Level,Distance,Path,sort
Europe,6000000,0.6,1,2,1,1
Europe,6000000,0.6,1,3,362,1
Asia Pacific,3000000,0.3,1,2,1,2
Asia Pacific,3000000,0.3,1,3,362,2
North America,1000000,0.1,1,2,1,3
North America,1000000,0.1,1,3,362,3
United Kingdom,4000000,0.4,2,3,1,4
United Kingdom,4000000,0.4,2,4,362,4
France,800000,0.08,2,3,1,5
France,800000,0.08,2,4,362,5
Germany,700000,0.07,2,3,1,6
Germany,700000,0.07,2,4,362,6
Spain,500000,0.05,2,3,1,7
Spain,500000,0.05,2,4,362,7
Singapore,1500000,0.15,2,3,1,8
Singapore,1500000,0.15,2,4,362,8
Hong Kong,1000000,0.1,2,3,1,9
Hong Kong,1000000,0.1,2,4,362,9
Japan,500000,0.05,2,3,1,10
Japan,500000,0.05,2,4,362,10
United States,700000,0.07,2,3,1,11
United States,700000,0.07,2,4,362,11
Mexico,300000,0.03,2,3,1,12
Mexico,300000,0.03,2,4,362,12

数据集很简单,欧洲、亚洲、北美是内圈,后面的国家分属这三个洲,level=1代表内圈,level=2代表外圈(如果有第三层level=3,以此类推),distance就是圆的半径,由于内圈需要占据半径2和3的这段空间,外圈需要占据半径3和4的这段空间(如果有第三层distance应该是4和5,以此类推),path是用来制作数据桶。sort是我增加的,就是label的升序,以免原文的手工排序。

创建计算字段

这里把index的值变成了0-722,步长为2的等差数列,配合X、Y计算。

这里我改了一下,原文还要乘以2,这里困惑我好久,我觉得没必要,另外X、Y也需要做相应微调。

计算扇形外环的半径

计算扇形内环的半径

确定每个扇形的起始点

IF [Index] < 362 THEN
   SIN(([Index]*[WC_Value]+[WC_Starting Point]*360)*PI()/180)*[WC_Min Distance]
ELSE
   SIN(((722-[Index])*[WC_Value]+[WC_Starting Point]*360)*PI()/180)*[WC_Max Distance]
END
IF [Index] < 362 THEN
   COS(([Index]*[WC_Value]+[WC_Starting Point]*360)*PI()/180)*[WC_Min Distance]
ELSE
   COS(((722-[Index])*[WC_Value]+[WC_Starting Point]*360)*PI()/180)*[WC_Max Distance]
END

这里X、Y也做了微调,原文是除360,这里改为除180

创建图形

如果操作正确应该出现上面的图,未必一次能成功,可以多试几次,我也经常遇到各种诡异的情况,明明操作正确就是没有图像。有时候是数据桶不起作用,可以删除重建试试。这里必需有耐心。

复杂的表计算

如果编辑正确,就会得到下面的图

原理解析

如图,当index在0-360的时候,画内圈,当index在362-722时候画外圈。

顺便复习前面的知识,圆上每个点的X坐标=a + sin(2×PI / 360×角度) × r ;Y坐标=b + cos(2×PI / 360×角度) × r。如果得到一个圆心为(0,0),半径为r的圆,简化以后就是X坐标=sin(角度×PI / 180)×r ,Y坐标=cos(角度×PI / 180)×r。

([Index]×[WC_Value]+[WC_Starting Point]×360)这段就是计算每个点的角度,这里如果你对画圆的原理比较了解,就会知道其实原始数据里的value值乘以360就是每个半圆所占的角度范围,欧洲占0.6×360=216度,亚洲占0.3×360=108度,北美占0.1×360=36度,合计正好360度。
欧洲是从0度开始画,画上面的亚洲这个半圆时候,就必需加上前面欧洲所占的216度,画北美的时候,就要加上欧洲和亚洲占的216+108=324度,就是[WC_Starting Point]×360的作用。这里可能不好理解,需要多研究消化。

要说的是,这种方法,不管嵌套几层,每层的value合计都是100%,不能有缺失,才能保证正确。这是由WC_Starting Point=RUNNING_SUM([WC_Value])-[WC_Value]的计算原理决定的,是按顺序的累计求和,顺序一变,或者缺失,起始点就会出错。
我提到的另一中复杂的方法,特别是最外圈是可以有缺口的,等以后再研究吧。

另外给大家介绍另一个Ken Flerlage大神的改进版地址https://public.tableau.com/profile/ken.flerlage#!/vizhome/SunburstTemplate_0/Sunburst,大神对这个方法进行了微调,可以控制半径的大小,有兴趣的同学可以下载研究。

此篇文章已发布到我的公众号:saodisir,有兴趣也可关注一下

上一篇 下一篇

猜你喜欢

热点阅读