数据可视化用法研究

数据可视化用法研究

2023年｜类型：编著｜标签：专业理论

在广告领域里面，从数据接入到数据治理，再到数据应用都会不同程度地遇上可视化。数据表是最常见的表达，满足数据以明细的方式查看。在这个基础上，逐步丰富数据的表达：引入更多的图表、搭配适当的色彩、结合必要的解释、细化图形的语义。可以使得界面的重点信息更加突出、准确、合理、生动。具体而言，我们可以分别探讨图表用法、色彩用法、轴与标记用法、图形语义用法。

图表用法

名称规律

Chart 通常指各种类型的视觉元素的可视化，如条、柱、线、符号等。适用于比较不同的数据集，显示分布情况、或者层次关系。如 Pie Charts
Graph 通常指点、直线、曲线构成的可视化。适用于说明数据的趋势、模式、相关性。如 Line Graphs。
Plot 通常指坐标系中一系列点的视觉表现。适用于说明数据在不同时期、不同变量之间的进展、分布或关系。如 Scatter Plots。
Diagram 通常指一个系统或者概念的结构、关系或过程，通常由形状、符号和线条组合在一起，用于描述构成和关系。适用于系统、工程、建筑等领域，以直观地表示复杂的概念。如 Alluvial Diagram。

使用目的

Comparison 比较
Connection 联系
Correlation 相关性
Cumulation 堆积
Diff 差异
Distribution 分布
Multidimensional 多维
Nominal 无序分类
Ordinal 定序分类
Part-to-whole 整体与局部
Progression 进展
Ranking 排序
Trend 趋势

图表类型

Alluvial / Sankey Diagrams 冲击图 / 桑基图

目标：Distribution 分布、Connections 联系
用法：是一种描述从一组值流向另一组值的可视化表达。旨在显示数据集的两个指标，并记录他们的分布情况，突出流动关系。

Area Chart 面积图

目标：Trends 趋势、Cumulation 堆积、Part-to-whole 整体与局部
用法：与折线图类似，在线以下用颜色和图案填充。默认是可以重叠的。

比较不同观察对象的指标趋势

比较不同观察对象对总量指标的贡献

比较不同观察对象在总量指标中所占百分比，突出占比关系

Bar Chart 条形图

目标：Comparisons 比较、Nominal 无序分类、Ranking 排序
用法：使用水平条竖向排列来显示不同类别之间的比较。图表的 Y 轴显示被比较的具体维度（没有特定顺序），X 轴代表一个离散的值。

默认观察对象字母顺序，根据使用情况考虑按指标的值大小排序

比较观察对象在两个及以上的指标，并强调绝对差异

比较观察对象在同一指标下的不同维度的占比，以及总量

比较观察对象在同一指标下的不同维度的占比

针对观察对象在正面和负面维度分别排名。如果顺序不重要，还可以针对某一维度进行排名，以使值易于比较

比较离散数据或显示随时间变化的趋势

不同观察对象具有统一的参考值

不同观察对象都有对应的参考值

不同观察对象，在同一指标上具有不同维度（如今年、去年）的比较，并且有突出其中之一的意图

不同观察对象需要会被划分到某一组，或者不同观察对象具有层级

Box Plots 箱线图

目标：Distribution 分布
用法：通过 5 个数字来描述数据的分布的标准方式，这 5 个数字包括：最小值，第一分位，中位数，第三分位数，最大值，箱线图能够明确的展示离群点的信息，同时能够让我们了解数据是否对称，数据如何分组、数据的峰度。

Bubble Plot 气泡图

目标：Comparison 比较、Correlation 相关性
用法：旨在探索变量之间的关系。可以通过X轴、Y轴、颜色以及大小，分别探索二维到四维的变量关系。

Bullet Chart 子弹图

目标：Part-to-whole 整体与局部、Progression 进展
用法：快速了解某一指标在目标基准上的表现。通常有三级，一级值(深蓝)经常用于实际值，二级值(目标线)经常用于目标值，三级值(浅蓝)表达额外的价值。

Calendar Chart 日历图

目标：Distribution 分布、Trend 趋势
用法：用于显示长时间跨度内，随着时间的推移而变化的可视化工具。

Candlestick Chart 蜡烛图

目标：Diff 差异
用法：一种财务图，用于描述证券、衍生品或货币的价格变动。

Circle Pack Chart 圆堆积图

目标：Nominal 无序分类、Part-to-whole 整体与局部
用法：用于显示大量的分层数据。其类似于树状图，但是使用圆形代替矩形。圆填充图表使用包含（嵌套）来显示层次结构数据。

Column Chart 柱形图

目标：Comparison 比较、Ordinal 定序分类、Progression 进展、Diff 差异、 Ranking 排序
用法：使用垂直条横向排列来显示不同类别之间的比较。图表的 X 轴显示被比较的具体维度（随时间变化的多个数值，或者有内在顺序的数值，如年龄、范围、评级），Y 轴代表一个离散的值。

比较随时间变化的多个值，或者具有内在顺序的值（如年龄、评级、范围等），通过柱状图来传达进展或者趋势

在基础图形上，不同观察对象按照值大小排序，并赋予一定的语义

在基础图形上，不同观察对象都有对应的参考值

10.4-Column-Chart-with-Ref.-Points-and-Forecast

在基础图形上，需要同时表达参考值与预估值

在基础图形上，不同观察对象，在同一指标上具有不同维度（如今年、去年）的比较，并且有突出其中之一的意图

Combo Chart 线柱组合图

目标：Comparison 比较、Trend 趋势、Correlation 相关性
用法：一种综合了折线图和柱形图的可视化方案。适用于两组指标因比例不同而难以直接比较的场景。

Donut Chart 环形图

目标：Part-to-whole 整体与局部
用法：和饼图类似。

Funnel Plot 漏斗图

目标：Diff 差异、Progression 进展、Part-to-whole 整体与局部
用法：适用于表达业务流程不同阶段的数据，用来定位一个流程中的潜在问题。

基础漏斗

在基础漏斗上，需要观察来源占比

Gantt Diagram 甘特图

目标：Progression 进展、Correlation 相关性
用法：一种说明项目进度，并拆分任务的条形图。纵轴列出任务，横轴列出时间间隔。甘特图里面会说明任务的开始、结束和持续时间，以及潜在的依赖。

Gauge Chart 仪表图

目标：Part-to-whole 整体与局部、Progression 进展
用法：通过数值显示它与整体总数之间的关系。通常是使用量或者剩余量。

Heat Map 热力图

目标：Distribution 分布
用法：将包含在矩阵中的单个值表示为颜色，是一种二维的可视化。通过数据类型来判断使用类别色板还是梯度色板。

Histogram 直方图

目标：Distribution 分布
用法：适用于观察数值型数据的分布。其中数据被分成档位，按照每个档位来计数，观察数值落入范围的频次。直方图的使用习惯是去除条形图中间的空隙。

Icicle Chart 冰柱图

目标：Nominal 无序分类、Part-to-whole 整体与局部、Multidimensional 多维
用法：适用于层级数据的可视化。按照四个方向之一，层层下钻来实现。

Line Graph 折线图

目标：Trend 趋势、Comparison 比较
用法：适用于显示一段时间内的趋势，并比较几个数据集。它以时间顺序，按照固定的时间间隔绘制数据。

显示一段时间内的一个或者多个指标趋势

19.2-Line-Graph-with-A-Target-and-Forecast

在基础图形上，需要同时表达参考值与预估值

在基础图形上，需要借助 Moving Average 来描述一系列数据点随时间的平均变化，来辅助做趋势的判断。（如在股市交易中，代表过去一段时间里的平均成交价格，用于判断预期市场现在与未来可能的走势。）

19.4-Line-Charts-shared-Same-Horizontal-Axis

如需要度量不同单位的趋势，最好避免使用具有双轴的折线图，因为它们会混淆值变化的解释。最好使用两个共享同一水平轴的单独的线

Lollipop Graph 棒状图

目标：Comparison 比较
用法：与柱形图类似。主要解决在柱形图中遇到的由于大量的、临近的高值在水平线上看不出差异的问题。更加突出当前值。

Network Diagram 网络图

目标：Connection 联系
用法：直观地表示网络结构的方式，是通过一系列的节点和连线形成的网状结构。

Parallel Coordinates Graph 平行坐标图

目标：Trend 趋势、Multidimensional 多维
用法：将多个变量的单个数据元素可视化。每个变量对应一个纵轴，每个数据元素显示为沿着轴线的一系列连接点。

Pie Chart 饼图

目标：Part-to-whole 整体与局部、Diff 差异
用法：最好是在只有2～3个切片的时候使用，并且是在不需要立即得到每个片段的确切数值时使用。切片最多10个，第10个将把往后的合成其他。使用时，注意数值从大到小排序，以提高阅读效率。

Polar Chart 极地图

目标：Distribution 分布
用法：适用于以二维图的形式显示多变量数据观察，沿着径向和角度轴表示数据。

Radar Chart 雷达图

目标：Comparison 比较
用法：适用于从整体上去比较多个维度，是整体均衡还是个别突出。

Scatter Plot 散点图

目标：Correlation 相关性、Diff 差异
用法：适用于探索不同指标之间相关性。

需要探索数据点在两组之间的关系时

需要突出类似值之间的变化，揭示数据集之间的差异时

Strip Chart 条纹图

目标：Distribution 分布
用法：类似于一维的散点图。

Sunburst Plot 旭日图

目标：Nominal 无序分类、Part-to-whole 整体与局部、Multidimensional 多维
用法：适用于从根节点到叶子结点的分层数据的可视化，与冰柱图类似。展示多层数据的分类占比。

需要展示自然分层数据时

需要展示结构分层数据时

Ternary Plot 三元图

目标：Comparison 比较、Distribution 分布
用法：将三个变量的比率描述为一个等边三角形中的位置。广泛用于三个分组数据比较、筛选，通过三元图可以直观展示数据在三个分组的分布情况，高效率地筛选离群元素，同时配合方差分析等统计检验方法可以找到不同分组中显著富集的元素。

Tree Map 树图

目标：Part-to-whole 整体与局部、Nominal 无序分类、Multidimensional 多维
用法：适用于可视化大量类别之间部分与整体关系的场景，只要数据是分层的，且类别之间的精确比较不是主要问题。

需要展示部分与整体之间关系

需要展示部分与整体之间关系，并且突出继承

Tree Diagram / Dendrogram 树状图

目标：Connection 联系
用法：显示分层数据的结构。按照是否显示各层节点，又分为树状图和聚类树状图。前者适用于层级展现，后者适用于分层聚类所产生的集群。

Trendline Chart 趋势线图

目标：Trend 趋势、Correlation 相关性
用法：是叠加在图表上的一条线，揭示了数据的总体方向。

Violin Plot 小提琴图

目标：Distribution 分布
用法：适用于数值型数据的统计。

Word Tree 词树

目标：Connection 联系
用法：适用于显示哪些词最常在目标词之后或之前，或显示术语的层次结构。

Waterfall Chart 瀑布图

目标：Diff 差异、Part-to-whole 整体与局部
用法：适用于理解一个初始值（例如，净收入）是如何被一系列正负值影响的场景。显示了一个随着数值的增加或减少而运行的总数。每一个柱子通过颜色区分正负。

如果不代表随时间的变化，请使用带有水平条的水平瀑布图

如果代表随时间的变化，请使用带有垂直条的垂直瀑布图

Wind Rose Chart 风玫瑰图

目标：Distribution 分布
用法：适用于可视化风速和风向在特点地点的分布。

色彩用法

整体上，我们可以将色彩分为：

Discrete (Categorical) Palettes 分类色板
Monochromatic Palettes 单色系色板
Diverging Palettes 分歧色系色板
Semantic Palettes 语义色板

色彩类型

Discrete (Categorical) Palettes 分类色板

定义

色板目的：是尽可能提供数据点之间的区分；
数据类型：无序分类变量数据，之间无本质的内在联系；
使用规范：存在指定的使用序列。如果类别数量是确定的，可以用指定使用序列覆盖默认色板；
色彩规范：不带任何语义；

Discrete (Categorical) Palettes on Light Sample created by Tencent TVision

Discrete (Categorical) Palettes on Dark Sample created by Tencent TVision

用法

默认使用顺序第一色彩

当需要借助色彩区分类别，请按照指定顺序依次使用

当需要在多个观察维度中，强调其中某一个属性

当需要在多个观察对象中，强调多个观察对象内在联系并进行分组

如果数据类别的确切数量是可知的，可以使用以下替代色彩覆盖默认的分类序列：

Discrete-Categorical-Palettes-On-Light-Solid

Alternative Categorical Sequence on Light based on Exact Number of Data Categories Sample, NOT VERIFIED

Discrete-Categorical-Palettes-On-Dark-Solid

Alternative Categorical Sequence on Dark based on Exact Number of Data Categories Sample, NOT VERIFIED

替代示例：

注：分类色板的数量，所研究的选品从 6 色至 14 色都有，也有论文表示选择 5 色至 10 色 (Healey & Christopher, 1996)，有颜色区分命名研究表示除白色以外可以命名 8 色 (David L. Post, Frances A. Greene, 1985)，Colin Ware 在《 Information Visualization: Perception for Design》也指出大多数文明里，除了黑白灰三色以外，还会出现 9 色。

Monochromatic Palettes 单色系色板

定义

色板目的：突出本质上的联系与梯度；
数据类型：有序分类变量，有本质的内在联系或者顺序；
使用规范：存在指定的使用序列。如果类别数量是确定的，可以用指定使用序列；
色彩规范：单色彩有大小、强弱、暖冷的二元指向性；

Monochromatic Palettes on Light Sample created by Tencent TVision

Monochromatic Palettes on Dark Sample created by Tencent TVision

用法

当需要在多个观察维度中，表达维度的定序特点，如年龄段

在连续变量中，通过连续色彩表达

Diverging Palettes 分歧色系色板

定义

色板目的：突出二元对立的内在联系与梯度；
数据类型：有序分类变量，有二元对立的内在联系或者顺序；
使用规范：存在指定的使用序列。如果类别数量是确定的，可以用指定使用序列；
色彩规范：双色彩有大小、强弱、暖冷、正负的二元指向性；涉及语义则使用语义色彩；

在一般场景中，只用突出对比即可：

Diverging Palettes on Light Sample created by Tencent TVision

Diverging Palettes on Dark Sample created by Tencent TVision

如若遇到需要突出绝对的好坏之分、正负之分、冷暖之分的场景，可以使用色彩情感更加强烈的分歧色系色板：

Diverging Palettes within Hot & Cold on Light Sample created by Tencent TVision

Diverging Palettes within Hot & Cold on Dark Sample created by Tencent TVision

用法

默认使用，突出相对性

正负、冷暖，突出绝对性

Semantic Palettes 语义色板

定义

色板目的：强调正负、好坏、程度；
数据类型：有序分类变量；
使用规范：表达分类；
色彩规范：色彩有严格的语义；

Semantic Palettes on Light Sample created by Tencent TVision

Semantic Palettes on Dark Sample created by Tencent TVision

用法

强调其中一个

强调正负

强调范围内或者范围外，指一个需要关注的区间

强调严重等级

基于品牌快速制定可视化色彩

确定主题色彩。
选择配色算法。基于主题色，使用配色算法制定 8 色，并为其制定 10 个梯度，得到单色系色板。（此处我们使用了自研的配色工具来实现。）
选择分歧色系色板。从单色系色板中，挑选 2 组配色，得到分歧色系色板。
选择分类色板。从所有颜色中，进行固定数量的色彩搭配。
验证分类色板。先验证区分度，再验无障碍。相邻颜色之间 Delta-E >= 30 即可满足区分度，可以使用 IwantHue 进行验证；颜色在红色盲、绿色盲等视觉障碍中依旧具备一定的识别度，可以使用 Viz Palette 进行验证。
选择语义色板。基于主题色，借助 CIElab / HCL 色彩空间，以主题色的C、L值为参考值，调整红、橙、黄、绿、蓝的 C、L 值，使得语义色板与主题色保持较为一致的色调，即具备相近的饱和度和亮度。