美文网首页
用Tableau画旭日图

用Tableau画旭日图

作者: 扫地sir | 来源:发表于2019-08-20 16:00 被阅读0次

    一直想写这篇旭日图(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的升序,以免原文的手工排序。

    创建计算字段

    • 创建Path (数据桶)
    • Index=(INDEX()-1)*2

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

    • WC_Value=WINDOW_MAX(MAX([Value]))

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

    • WC_Max Distance=WINDOW_MAX(MAX([Distance]))

    计算扇形外环的半径

    • WC_Min Distance=WINDOW_MIN(MIN([Distance]))

    计算扇形内环的半径

    • WC_Starting Point=RUNNING_SUM([WC_Value])-[WC_Value]

    确定每个扇形的起始点

    • X
    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
    
    • Y
    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

    创建图形

    • [Path (数据桶)]拖到标记“详细信息”选项卡上
    • [X]拖到列功能区,[Y]拖到行功能区,右键选择计算依据都为[Path (数据桶)]
    • 改变标记类型为“多边形”,将[Index]拖到“路径”选项卡上,并右键选择计算依据为[Path (数据桶)]
    • [Label]拖到标记“颜色”选项卡上

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

    复杂的表计算

    • 右键单击[X]、[Y]分别编辑表计算,编辑方法一样。
    • [WC_Value]、[WC_Max Distance]、[WC_Min Distance]三个一样,选择“特定维度”,勾选[Label]、[Path (数据桶)]([Label]一定在最上面),重启间隔选择[Label]
    • [Index]选择“特定维度”,勾选[Path (数据桶)]
    • [WC_Starting Point]选择“特定维度”,勾选[Label]

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

    • 调整扇形的顺序,右键颜色上的[Label]标签,调整排序依据
    • 最后编辑颜色

    原理解析

    如图,当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,有兴趣也可关注一下

    相关文章

      网友评论

          本文标题:用Tableau画旭日图

          本文链接:https://www.haomeiwen.com/subject/pynssctx.html