数据可视化设计:旭日图 Sunburst

1、旭日图的简介

旭日图(Sunburst Chart)是饼图的变形,简单来说是多个饼图的组合升级版。饼图只能展示一层数据的占比情况,而旭日图不仅可以展示数据的占比情况,还能厘清多级数据之间的关系。

在旭日图中,一个圆环代表一个层级的分类数据,一个环块所代表的数值可以体现该数据在同层级数据中的占比。一般情况下,内层数据是相邻的外层数据的父类别,最内层圆环的分类级别最高,越往外,分类越细越具体。

2、图表用法

旭日图可以更细分溯源分析数据,真正了解数据的具体构成。

2.1 不带数据占比的关系结构

旭日图中的“环”承载了大量带有层级关系的数据,层层嵌套,环环相扣,我们乍一看似乎很难读懂它的心。但其实只要我们多点耐心,就能发现旭日图在可视化这类数据时,真的有化繁为简的魔力。

最基础的旭日图是在树状图的基础上,把树状的层级关系转化为圆环的形式。相较于树状图,旭日图的圆形结构更节约空间。例如,美国专业咖啡协会用旭日图,清晰地描述了咖啡的味道。

咖啡风味旭日图

协会按照咖啡的“香”与“味”对咖啡的味道进行了分类,其中,味道被分为酸、甜、咸、苦,苦味又可以分为单纯的苦味和带辛辣的苦味,带辛辣的苦味又可以再分类……这种分类数据没有数值,因此在旭日图上,同一层的各环块弧长都是相等的,且不代表任何的数值。

在增加了交互功能之后,旭日图每一层的数据关系能更加清楚地展现出来。

带交互的咖啡风味旭日图

点击“香”的环块,环块就能延展到100%,同时代表“味”的环块会被收缩隐藏。这种交互不仅能把外层的、环块小的分类清晰地展现出来,而且可以很好地解决我们经常提到的“分类数据过多会使图表的易读性下降”的问题。

2.2 带有数据占比关系的旭日图

当每个分类数据都拥有具体数值时,我们可以通过环块的角度比较数值的大小。下图是全球十大温室气体排放国家的温室气体排放情况。它运用了与“咖啡风味旭日图”相同的交互方式,通过点击“中国”的环块,我们能在全局视角下看到中国在“能量”领域排放的温室气体最多,占到全球温室气体排放的19.98%。

World Resources Institute

除了“咖啡风味”和“全球温室气体”所用到的,通过点击拓展的交互方式之外,常见的还有通过鼠标悬浮凸显环块颜色的交互。下图是圣裘德儿童研究医院基于3347位患癌儿童的患病情况,分析了他们所患的17种癌症情况。

3347位患癌儿童情况

这17种癌症位于旭日图的第二层,分别属于造血系统恶性肿瘤(红色)、固体肿瘤(黄色)和脑肿瘤(蓝色)三种癌症类型,其中患造血系统恶性肿瘤的比重最大,有46.2%。第三层则为引起癌症的不同原因占比情况。

当鼠标移动到环块上时,被查看的环块颜色会被突出,其他则变成统一的灰色。同时,利用旭日图的“空心”,可以清晰地展示每个分类数据的具体数值和含义。在交互功能的加持下,旭日图可以更加顺畅和清晰地展示大量数据。

3、旭日图的应用场景

旭日图虽然是一个多级饼图,但在展示层级关系这一点上,与矩形树图非常相似。

不同于矩形树图,旭日图能把没有权重关系的层级关系清晰地展示出来,且可容纳的层级关系更多。除此之外,旭日图允许“缺口”存在。不同分类数据下,每一层的数据可以不用再细分,即旭日图的每个圆环不一定是完整的。可以说,在可视化层级数据方面,旭日图和矩形树图都表现优秀,而旭日图的适用范围要比矩形树图略大。

1)适用场景

旭日图不仅有饼图的优点,而且还能展示数据层级之间的关系,它通过矩形的面积、颜色和排列来显示数据关系,它超越了传统的饼图和环图,能在饼图上表示占比关系的基础上,增加表达了数据的层级和归属关系,能清晰的表达具有父子层次结构类型的数据。旭日图适合用于展示不同层级的数据。

旭日图示例

示例地址:https://echarts.apache.org/examples/en/editor.html?c=sunburst-borderRadius

旭日图示例

示例地址:https://echarts.apache.org/examples/en/editor.html?c=sunburst-book

旭日图示例

示例地址:https://echarts.apache.org/examples/en/editor.html?c=sunburst-drink

2)不适用场景

旭日图不适合用于数据分类过多、不能有负值、不能有零值的数据展示。当数据的比例相差比较接近时,人眼判别有难度的,则建议用其他图形。

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

推荐阅读更多精彩内容