译文｜如何为你的数据可视化设计一个有用的调色板

点击下方公众号，回复资料分享，收获惊喜

正文共： 1878字 54图

预计阅读时间： 5分钟

以下文章翻译自datawrapper官网，作者对其进行了梳理和再编辑，原文点击文末 阅读原文。

颜色键示例

颜色键(color key) （也称为颜色图例(color legend)）的目标是帮助读者尽快弄清楚可视化中的彩色元素的含义。精心设计的颜色键可能意味着读者浏览您的可视化并决定它太难弄清楚与读者实际阅读它之间的差异。

在本文中，我将解释如何为分类和定量颜色图例创建有用、真实、易于浏览的颜色图例。我们将从简单的技巧开始，并以一系列复杂、聪明和有趣的颜色图例结束。

确保可视化图表需要一个颜色图例

如果你不向他们解释颜色，你的读者将不知道颜色表示什么。但这种解释不需要以关键字的形式发生，可以直接使用标签样式，下面几幅可视化图表直接使用文本标签表示对应的图形属性，如下所示：

文本标签表示分类类别

柱形图类别直接用文本标签表示

用不同颜色文本表示地图不同区域

使用文本标签表示图形信息

分类数据颜色图例

当不同的颜色代表不同的命名类别时（例如蓝色表示风能，黄色表示太阳能），您看到的是一个分类颜色图例。以下是设计这些图例时要注意的事项：

• 使用网格排版和分组

将颜色图例项放入尽可能少的行中虽然在图层空间占比中占据优势，但其仅适用于较少的图例选项。如果你的图例有很多个项目，或者你需要很多字母来描述它们，它可能会变得不堪重负。如果是这种情况，请考虑使用网格布局(grid layout) -即图例选项设置成几行几列的网格布局样式。

图例网格布局样式01

图例网格布局样式02

如果能对颜色图例进行分类后再进行网格布局排版：

先分类后网格布局图例样式

• 构建长项目

如果你的颜色图例项文本相当长，你应该尝试重写和缩短文本内容，同时还可引入换行操作，对其进行网格布局排列，如下：

为了更好的可读性，使图例文本较长的项目左对齐，并选择合适的字体。

• 使用样式对图例进行划分，而不仅仅是颜色

如果构建的图例中彩色元素具有不同的形式（如粗线、细线、虚线、矩形等），那么在颜色图例中显示这些形式是帮助读者在图表中快速找到它们的绝佳方法。您将经常在地图中看到这种情况，如下所示：

使用不同颜色、线类型进行图层属性的标记

置信区间样式的图例：

• 对颜色图例选项进行排序

另一个小技巧是在图例键和图表中以相同的顺序放置颜色。习惯于从左到右阅读的读者首先想知道图表左上角的颜色代表什么，所以它也应该在颜色图例选项中排在第一位。

如果彩色元素的大小不同（如在饼图、分类分区统计图或气泡图中），首先在键中显示“最大”颜色，然后显示第二大颜色、第三大颜色，依此类推。

定量数据颜色图例

在为淡色系双向渐变色系设计颜色图例时，请考虑以下策略，以使其更易于理解：

• 避免更多分类

对于分类色阶，答案似乎很明显：让我们标记尽可能多的值！但是，如果您有很多类，则显示所有类的值通常不是最佳选择。它们可能会重叠，相反，如果边界很明显，请考虑跳过每隔一个类。如以下示例：

对于未分类的色阶也是如此：您可以显示许多子部分，仅显示其中的几个，或者仅显示最小值和最大值（如果色阶发散，则显示中心值）：

请确保只标记明显不同的颜色。在像下面这样的高度插值色阶中，没有必要同时标记“几乎深蓝色”和“深蓝色”——读者无论如何都无法区分它们：

• 添加轴刻度

如果选择连续色阶而不是分类色阶，则可能会想在键中标记更多值，可以在色标中添加“轴刻度”。请注意，这仅在刻度以有用、可预测的方式间隔时效果很好。

• 考虑不显示值

有些情况下，图例可以只显示一般的“更少/更多”或“更差/更好”等大致样式，如下所示：

• 颜色图例定制化设计

如果彩色区域中或周围有特殊元素，考虑将它们也包含在颜色键图例中。例如，如果可视化效果中的彩色数据点具有轮廓，请在颜色图例中使用轮廓。

• 使插值明显

如果您的色阶使用非线性插值，则需要更好的表现它们。在上面的例子中，第一类和最后一类比其他类大得多，在这种情况下，需要标记最小值和最大值。如下所示：

如果数据的类是一致的，则不需要标记最小值和最大值。

另外一种优雅的图例构建方法是根据颜色键类填充的范围为其指定不同的宽度：

当空间允许时，这会使您的颜色键看起来更有趣，并很好地传达您的插值：

• 在双向渐变色阶中，使不均匀的极端变得明显

如果双向渐变色阶中的极端没有覆盖与中心相同的范围，请在颜色和颜色键中使其明显。如果你的中心值更接近一个极端，那么在键的设计上也应该更接近；

优秀图例案例

相关推荐