0x00 内容
如何提升数据可视化的表现效果
主要探讨一下，哪些方面的改进和有益实践，可以使我们的数据可视化的呈现效果更加具有表现力。
目标有两个：
了解哪些方面的因素，会对数据可视化的呈现效果有影响；
熟悉数据层面/非数据层面提升可视化效果的实操经验，并能在工作中实际应用这些经验；
0x01 提升可视化效果的经验总结
之前的文章中，了解过根据数据可视化的目的、数据关系和特征，去选择合适的图表类型，进入可视化的设计。从大的方向上来说，影响数据可视化最终效果的因素，分为两个层面：
一是非数据层面
不受数据影响的情况，是我们在可视化设计阶段就可以把控的：比如说页面的整体布局、图表的辅助元素设计（包含网格线、背景、颜色的选取等）、交互的设计等。
二是数据层面
受数据影响可视化效果的情况一般包括：数据分布不均匀，存在极端值；某一维度下的属性值过多，信息繁杂不够聚焦；不同层级的，数据量级差异较大；数据条目较多等。以上这些情况的存在，可视化映射之后，就可能体现为，比如说某个柱形条的长度过长，饼图扇区的个数过多等，从而使可视化的最终效果不如人意。
从以上两个层面，来总结提升可视化效果的一些经验，从而使数据信息的传达更聚焦、有效，可视化作品的视觉呈现更加美观。
0x02 非数据层面
2.1.布局要强调最重要的数据信息，将用户注意力集中在可视化结果的最重要区域
进行可视化设计时，需要根据用户关注的重点数据，对可视化结果的重要性和优先级进行排序。通过对可视化空间的合理布局设计，将用户的注意力集中到可视化结果中最重要的一个或几个区域上。
通常情况下，用户的视觉中心，是位于整个页面的上方和中心区域。如果只有一个重点，放在最显眼的位置，如果有几个重点，尽量集中放置，吸引视觉焦点。除了通过重要信息的位置摆放来吸引用户视觉焦点，还可以通过突出的颜色编码来抓住用户的注意力。
2.2.图表设计要隐藏不必要元素，弱化辅助元素
在我们进行图表绘制时，需要去掉无意义的背景色填充和颜色区分，弱化网格线，突出真正重要的数据信息。虽然，网格线或者颜色映射可以辅助我们理解可视化图表中的信息，但是如果过于凸显，视觉上会显得杂乱、没有主次，干扰到你真正想展示的信息。对于这类元素，应该尽量隐藏和弱化。
2.3.交互操作要具有直观性、易理解性
一方面，图表中柱形条或趋势点等都代表实际的数据，但是为了可视化作品的简洁和美观，通常情况下，这些数据标签都会被隐藏；另一方面，由于人们查看数据的习惯是，先看总体和趋势，再看局部和细节。这两个方面的原因，要求可视化产品，需要提供给用户一系列的交互手段，来让用户按照自己的意图和关注点去探索数据。
常见的交互方式有：
1）移动和缩放：当前空间只能显示有限的数据时，或者需要关注局部数据时，可以使用移动和缩放。
一般情况下，移动和缩放是同时使用的两个交互动作。对于移动而言，如果当前显示空间没有把数据展示全，需要把后一数据条露出一部分，指引用户可以进行移动操作；对于缩放而言，其目的一般是为了在更大的空间去查看局部的细节数据，一般也需要移动图表来配合。
2）悬停或点击
悬停的的目的，是为了查看某个对象的详细信息，通常会以弹窗或者「图例+数据」的形式展现。
点击的目的，通常是为了进行数据下钻，在这种情况下，需要通过设计传达给用户可以进行交互的信息，如鼠标悬停变手型、对象的颜色变化或者以文字指引等。
3）图表联动
多图表联动，是可视化中比较常见的一种交互方式，图表联动的前提条件是，多个图表的指标含有共同的维度属性，所以当聚焦于某个图表的某一维度下的属性值时，其他图表会联动变化。
其数据格式通常如下：按维度1中的属性值聚合，可以得到左侧的柱状图对应的数据；按维度2中的属性值聚合，可以得到右侧的饼图对应的数据。
0x03 数据层面
3.1.当数据项较多时，需要精简数据项，突出重点
比例型分类数据，分类项建议保持在5～7个
比例型分类数据的可视化方式有：饼图、圆环图、百分比堆叠柱状图、百分比堆叠面积图等，其目的是为了展示个体分类项和总体之间的比例关系。
当需要按照某一个维度进行分组时，若该维度的属性值数目较多，那么就需要对属性值进行重新的归类和分组，通常的做法是，保留占比或实际值TOP5的分类项，剩余分类归为【其他】。
柱状图数据条过多时，保留头部和尾部
当需要用柱状图来对数据进行排行时，若数据条目较多，此时建议保留头部和尾部，中间的可以以省略号带过或者折叠起来，放大时再展开。头部和尾部的具体数目，可以依据具体需要来定，比如前5名和后5名、前10名和后3名等。
3.2.对于趋势图，若趋势不明显时，坐标轴数值可以不从0开始
当数据差异较小，导致折线的波动范围比较小，走势起伏不明显，此时如果为了更清楚看到数据的波动情况，坐标轴起始数值可以不从0开始，但是此时需要在页面提示用户，否则用户会误以为波动很大。
虽然，趋势图的主要目的，是查看数据的态势和波动规律，设置坐标轴不从0开始，可以更清晰的看到数据的起伏波动。但是，同时会给用户带来理解的成本，也有夸大差异的嫌疑，因此，不建议频繁使用。注意：柱状图的坐标轴起点，必须从0开始，否则柱形条的高度就不能代表数据间的差异。
3.3.当排行数据的类别名称较长时，可以用条形图替换柱状图
当类别名称太长时，虽然斜放可以避免重叠，但歪着头查看内容，和用户阅读的视觉习惯不符，此时可以考虑把柱条横向放置，把类别的名称置于柱条空隙之间或者柱形条左侧。
3.4.坐标轴需要做对应的单位转化
图表坐标轴的数值，受数据的大小影响，当数据较大时，一方面将坐标轴数值单位转化为我们熟知的K、W、M、亿需要一定的反应时间，另一方面较大的数值也会占用有限的可视化空间。因此，建议，在一个数据可视化平台内部，需要建立一套公共的单位转化规则，保证图表坐标轴单位转化规则的一致性。具体做法如下：
注意：一个图表中，坐标轴的数值单位需保持一致，一般是以最大数值的单位作为整个坐标轴的统一单位。
0xFF 总结
总结：
非数据层面：
布局需要凸显和强调最重要的信息；
弱化或隐藏图表设计中的辅助元素；
通过交互来给予用户探索数据的权利；
数据层面：
精简数据项，突出重点；
趋势图坐标轴可以不从0开始，但是要慎用；
系列名称较长时，需用条形图，横向摆放系列名称；
确立统一规则，对图表坐标轴数值进行单位转化；
参考阅读：
