用Tableau画旭日图

一直想写这篇旭日图(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,有兴趣也可关注一下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,992评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,212评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,535评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,197评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,310评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,383评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,409评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,191评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,621评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,763评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,403评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2 351

推荐阅读更多精彩内容