应该选择什么图表来显示数据

在《用数据讲故事》这本书中,作者在第二章就阐述了图表的选择倾向,其实经常使用且表达效率较高的图表仅12种,在书中有明确的标识,如下图:


image.png

image.png

紧接着,作者阐述了他最常用的几个图表以及原因。
我们以三个指标来衡量图表是否应该在项目中使用。
when?什么情况下使用
why?优势在哪
how?怎么使用用

1. 简单文字

when:当只有一两项数据需要分享或者展示的时候使用。
why:尽可能的突出数据,并消除干扰。
how:在表格或者图形中只放关键数据,也可以用较小的辅助性文字进行解释说明,辅助受众理解图表。


image.png

image.png

2. 表格

when:比图形更简单,在和多个受众沟通时可以使用
why:可以使用不同的计量单位,显示的时候比图形更加简单(web中如果数据庞大时,表格处理速度更快,用户体验更好)
how:在现场演示的时候尽量不要使用表格,可以把表格放在附录中,使用一个链接满足受众的需求。让设计融入背景,让数据占核心地位,不要让厚重的边框和阴影争夺受众的注意力,可以使用窄边框或者空白来区分表格的元素。


image.png

3. 热力图

when:当我们想把表格中的细节和视觉暗示结合起来时,使用热力图。
why:相较于表格,热力图更能重点突出某些数据,提升了表格的易读性,更容易吸引受众的兴趣点。
how:给表格填充不同的颜色,重要的数据背景颜色更明显,给受众提供视觉上的暗示。

image.png

上图中的最大值58%和最小值11%可以快速的被受众发现。

4. 散点图

when:在展示两件事的关系时很有用。
why:因为散点图可以同时将数据对应到X轴和Y轴上,受众很容易观察到是否存在某种关系。
how:对关注的数据填充颜色,和其余数据产生鲜明对比。


image.png

如果要关注每英里成本高于平均值的数据时,可以在平均值上设置水平线,并把关注的数据标注其他显眼的颜色。


image.png

5. 折线图

when:绘制连续的数据或者有过渡关系的数据。
why:可以清晰的观察数据的变化趋势。
how:在多条折线时,颜色对比度高一些,尽量避免视觉上的混淆。当x轴为时间轴时,数据必须有相同的时间间隔(避免产生误导)。

image.png

6. 斜率图

when:适用于两个时间段或者两笔数据对比
why:可以清晰的看出两组数组的相对趋势(相对提升,相对降低)


image.png

不论是折线图还是斜率图,重点都在于数据的变化,如果数据相差不大的时候,图像会过于平缓。

7. 条形图

when:想展示最大值,最小值,占比时使用。
why:常见,受众的学习成本低,可以更加专注于数据。易于阅读,并能很快得出结论。
how:图形一定要有原点,尽量以0为原点,否则会造成错误的视觉比较。


image.png

是否应该保留坐标轴?
如果受众关注整体趋势,可以考虑保留坐标,但是把颜色设为灰色来降低重要性。

条形图的宽度应该大于条形图之间空白的宽度


image.png

image.png

8. 堆叠竖直条形图

when:堆叠竖直条形图的用例有些受限。它旨在比较各类别之间总体区别的同时还能看出每个类别中子成分的占比情况。
why:在比较整体数量的同时还能看子成分的占比
how:大多数作图框架(echarts为例)的默认颜色都会比较鲜艳,很快会产生视觉上的压力,而且在没有基线的情况下,很难比较不同类别间的子类别大小。


image.png

只有比较紧贴X轴的子类别时很容易,比较其他子类别很困难。(X轴相当于一根基线)

9. 瀑布图

when:瀑布图可用于抽离出堆叠条形图中的一部分进行重点关注,或者展示起点和结果以及其中的上升下降等变化。
why:分离子类别的数据,可以清晰看到总数的变化原因。
how:重点突出变化的数据。如果图表中没有瀑布图,可以使用堆叠条形图,并隐藏靠近X轴的部分(需要对数据分组并进行计算)。


image.png

10. 水平条形图

when:对分组数据进行整理时使用。
why:首先水平条形图易于阅读,在类别名称过长时更加有效,因为文字从左往右开始书写,符合大多数受众的阅读习惯。当受众看到数字时就看到了结果,一目了然。
how:同组数据中的不同类别需要在颜色上加以区分。并对展示的数据的显示顺序进行分析,如果类别有默认的顺序,不妨尝试使用默认顺序。如果要暗示受众某种特性的信息,可以自定义排序。


image.png

一般受众的阅读习惯是“之”字型阅读(逐行阅读),请把最重要的类别放到最前面,并将数值以降序进行排列。

11. 堆叠水平条形图

原理类似堆叠竖直条形图。


image.png

12. 面积图

只有在可视化相差极大的数值时使用。


image.png

总结:图表是数据的载体,也是让数据变得直观的方式,所以在选择图表的类型时,首要条件就是能清晰的将信息传递给受众。为什么准确无误的给受众提供数据,在每次选择图表时都要问两个问题,受众是谁?你希望他们了解什么或者做什么?回答了这些问题后才能做出优秀的可视化方案。用作者的话说,“无论是信息图还是其他——不仅仅是指定主题的事实堆积,而是要讲述一个故事。”

需要避开的陷阱

书中作者提到几中平时应该避免的图形,饼图,甜甜圈图(环形图),3D图形,双y轴等。其中饼图作为开发中最常用的一种图形,在数值相差不大的情况下很容易误导受众,比如书中提到了一个关于市场份额的例子。

“图中展示的饼图(基于实际案例)展示的是 A、B、C 和 D 四个供应商的市场份额。如果我要求你简单观察一下——在这张图中哪家供应商的份额最大——你会得出什么结论?”


image.png

在没有标注数值的情况下,视觉就是我们最直观的衡量方式,明显感觉供应商B的份额最大。接下来,看一下标注数据的图表。


image.png

发现其实占有率最高的是供应商A,那么问题出在哪里呢?
倾斜使得饼图上方的部分显得距离更远,因而看起来比实际要小,下方的部分距离较近,所以看起来相对更大一些。

作者反复强调,不要使用3D图形进行可视化,因为它会扭曲数据的视觉效果。

不使用饼图还有一个原因,人眼不善于在二维空间进行定量的度量,当饼图的各部分数值很相近时,我们无法判断那一块更大。
更好的解决方案就是使用水平直方图来代替饼图,数值从大到小依次排列,这样受众就能清晰的看到哪个供应商的市场份额更大。


image.png

那么不使用甜甜圈图(环形图),也是类似的道理,饼图是让受众比较角度和面积,而甜甜圈图则是让受众比较弧度,这同样难以完成。

“数据可视化的黄金定律之一是:永远别用 3D 图形。跟着我重复一遍:永远别用 3D 图形。唯一的例外是当你的确在绘制三维空间时(即便如此,事情会很快变得棘手,所以千万谨慎)——在绘制一维空间时,永远别用 3D 图形。正如在之前饼图的示例中所见,3D 使数据发生倾斜,从而更难甚至无法解读和比较。”
摘录来自: [美] Cole N. Knaflic. “用数据讲故事”。 iBooks.

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

推荐阅读更多精彩内容