现在我们已经熟悉了如何创建图表,我们应该缩小一点 谈谈要创建什么图表。 到目前为止,我们已经创建了一个折线图、散点图和条形图, 但还有更多基本类型可供选择,不属于简单类别的图表。
我们的图表格式是我们的用户获取的信息的最大因素——即便给定了相同的数据集! 让我们来看看我们用天气数据绘制的图表。
在第一章中,我们绘制了最高温度的时间线。看这张图表,我们可以看到温度是如何随时间变化的——每天或每个季节的天气有多一致?
在第二章中,我们创建了一个包含两个指标的散点图。看看这张图表,我们可以看到湿度和露点是如何相关的,回答以下问题:高湿度是否也意味着高露点?
在第三章中,我们创建了一个湿度值的直方图。看看这张图表,我们可以看到一个单一的指标有多少变化——大多数日子都保持在相同的湿度水平附近,还是它们都非常不同?
即使有了这三个示例和一个有限的数据集,我们也可以看到图表的类型将如何使用户能够回答非常不同的问题。还有许多其他类型的图表——因此,回答这个问题-什么类型的图表是最好的?它既重要,而且绝对是无限开放的。不过,别担心,这一章将为你提供快速做出决定的工具!
数据类型
给定一个数据集,第一个任务是确定可用指标的结构。让我们来看看我们的天气数据集的第一项。
这里有许多不同的值,但有两种基本类型:字符串和数字。
这两种类型可以粗略地(分别)分为两种基本类型的数据:
定性和定量。
定性数据(我们的字符串)没有数值,但可以放入
类别。 例如, precipType 的值可以是“rain”或“snow”
定量数据(我们的数字)是数字化的,可以被客观地测量。例如,温度最高的值从10°F到100°F。
这两种类型的数据都可以进一步分解。
定性数据
二进制数据只能被分为两类。
例如,如果我们的天气数据有一个真或假的下雨指标,
该指标将是二进制的。
定类数据可以放置在多个没有自然顺序的类别中。
例如,我们的天气数据具有公制图标,其中包含晴天和风等值——这些值无法排序。 定序数据可以按自然的顺序放在多个类别中。
例如,如果我们的天气数据用无风、微风和大风来表示风速值,则该指标将是有序的。
定量数据
离散数据的数值不能在两者之间进行插值,例如一个只能用一个整数(整数)表示的度量。
一个典型的例子是孩子的数量——一个家庭可以有1到2个孩子,但不能有1.5个孩子。根据天气数据,一个很好的例子就是发生的龙卷风的数量。
连续数据具有可以在其间插入的数值。 通常一个
指标将属于此类别 - 例如,最高温度可以是 50°F 或
51°F 或 50.5°F。
这种分类只是对数据类型进行分组的一种方式。 还有其他方法,但是
这种分类很常见,也是一个方便的起点。 当你在看
一个新的数据集,通过对每个指标进行分类来熟悉自己。
可视化指标的方法
现在我们了解了我们正在使用的指标,我们需要决定
如何在视觉上表现它们。 请记住,作为人类,我们能够判断
某些维度比其他维度更快或更精确。
让我们通过一些可能的方式来表示温度,例如:
size
我们可以通过调整元素的大小来表示温度:更高的温度更大
和较小的温度较低。 我们也可以只缩放高度或宽度
— 在制作直方图时,我们为更高的数字创建了更高的条形。
人类在感知大小差异(尤其是身高或
宽度)对象之间,当确切的差异很重要时,它是一个不错的选择。
位置
我们可以通过移动一个元素来表示温度:水平、垂直、甚至
对角线。 例如,我们可以制作一个温度较低的散点图到
左侧和右侧较高的温度。
和体型一样,人类在比较水平和垂直位置时非常快速和精确,这使得它在精度问题时是一个很好的选择。
颜色
我们可以通过给我们的元素一个不同的颜色来表示温度。 例如,我们可以用蓝色(较低温度)着色
到红色(更高的温度)来绘制散点图。 选择颜色可能会让人不知所措——别担心,
我们有一个章节来帮助解决本章中即将出现的问题。
与区分两种尺寸或两种位置相比,人类更不擅长区分两种颜色。 但是,我们可以更轻松地将颜色平均在一起,在可视化整张图的时候颜色也会成为一个很好的选择。 如果具体
值和整体情况很重要,请尝试显示整体情况并使用工具提示或配套表格逐步显示精确值。
还有其他维度(例如,方向或图案),但这些基本的
会让你在正确的道路上思考。 这些维度可能会让你想起
我们一直在使用的一个概念:Scales。 Scales 一直在帮助我们转换数据值
转化为物理维度:例如,将温度转化为以像素为单位的条形高度。\
当您的数据集充满了我们的天气数据等指标时,通常 在一张图表中将所有内容可视化并不理想。 聚焦图表是最有效的—— 坚持使用 2-4 个维度将帮助用户专注于重要的事情而不会不知所措。
把它放在一起
你很容易直接说:“哦,我知道,我要做一个柱状图!”但让我们进一步探讨一下:柱状图是用什么做成的?柱状图是
由大小(高度)不同且水平(位置)分布的条形组成。
在下一章中,我们将讨论常见的图表类型以及指标的类型和将它们可视化的方法如何应用于每种图表。 但是还有很多图表类型尚未创建! 现在你有了这个框架,你将能够查看数据集并集思广益以独特的方式将其可视化。
图表设计
现在您了解了这些基础知识,您就拥有了制作有效且直观的图表所需的工具。 一旦您决定了内容和方式,这里有一些技巧可以让这些图表易于阅读。
简化、简化、简化
许多图表库将包含默认样式,以满足尽可能多的用例。 这可以创建包含比必要更多元素的图表。 幸运的是,我们不需要依赖库,可以尽可能地剥离。
完成图表的创建后,对其进行批判性的审视并问自己:“这里的所有内容都需要吗?” 如果答案是否定的,请去除多余的东西! 无需给你的读者增加负担。
就地注释
在图表旁边放置图例以阐明颜色或大小比例可能很诱人。 虽然我们应该确保解释图表的每个部分,但问问自己是否可以直接标记这些元素。 就地注释使描述尽可能接近,这可以防止迫使读者在元素之间来回查看。
添加增强功能,但不要太多
作为最后两个技巧的推论,请检查您是否可以增强图表以帮助创建洞察力。 例如,如果图表的目标是显示趋势,请考虑添加趋势或参考线以使任何模式更加明显。
示例重新设计
让我们重新设计一个简单的图表,在实践中看到这些技巧。这张图表的目的是检查湿度随一年中的时间而如何变化。
我们已经决定使用一个时间轴来可视化这些数据
为了练习,花一分钟,写下你在这个图表上改进的方法,记住我们的目标。
- 目标:检查湿度如何根据一年中的时间变化
准备好深入了吗? 没有“正确”的方法可以改进此图表,但我们会尽力使其更容易快速理解。
我们要解决的第一个问题是数据的干扰。 虽然每日的下跌和上涨可能有助于回答其他问题,但它们只会分散我们调查季节性趋势的目标。 让我们将数据采样率降低到每周一个点,并使用 d3.curveBasis() 平滑我们的线条。
如果您继续关注,我们在文件底部有一个 downsampleData() 函数,我们可以传递我们的数据集 xAccessor 和 yAccessor 并接收具有每周值的采样数据集。
d3.line() 有一个方法 .curve() 可以传递一个插值函数。默认插值是线性的:直线直接连接点。 为了更顺畅请查看 d3-shape 文档中内置于 d3 的不同插值选项。 在这里,我们添加了代码 .curve(d3.curveBasis) 来减少特定数据点的重要性,并让读者了解整体路线形状。
让我们以圆点的形式重新添加原始点。 我们不想失去原始数据的精度,即使我们通过低频采样线获得基本趋势。
为了防止让注意力偏离我们的趋势线,我们将把这些点变成浅灰色。
现在有很多事情要做! 让我们稍微简化一下,去掉网格标记和图表背景。 我们还将为我们的 y 轴指定较少数量的刻度 (.ticks(3))——额外的刻度不会提供任何有用的信息,因为读者可以轻松地在值之间进行推断。
重新审视我们的目标,我们意识到我们希望根据一年中的时间关注趋势。 我们在 x 轴上显示月份,但我们可以为读者做一些工作并突出显示不同的季节。 让我们在主要数据元素下方使用 <rect> 来屏蔽每个季节。
虽然这个传说很有用,但它也有一些问题。
- 春天和秋天都是白色的,因为它们都是过渡性的季节。这就不清楚图表中有哪个是哪个。
- 正如我们在本章前面所讨论的,图例让读者在图表和图例之间来回查看。 为了解决这些问题,让我们直接在图表上标注这些季节,而不是有一个x轴。
让我们关注 y 轴。 旋转的 y 轴标签很棒——它们通常是将标签适合我们图表一侧的唯一方法。 但是,标签与值分离,旋转文本使其更难阅读。
相反,让我们通过将y轴的短语来表示y轴的单位。人类可读的标签让读者有更多更清晰了解,暗示着如何解释一个数字。
虽然我们让比较不同季节的趋势变得更容易,但要总结季节的总体比较情况并不容易。 我们可以对数据进行低频采样,每个季节只显示一个点,但这样我们就会失去对季节性趋势的所有见解。
相反,让我们添加季节性均值作为线条,这应该增强图表但不从主图上减少信息。
不错!现在我们可以很容易地看到,冬天的湿度很低,但没有春天那么低。让我们并排看两张图表。
虽然这两个图表显示了相同的数据,而且都很有帮助,但最终版本对我们的目标更有效:检查湿度如何变化,这取决于一年中的时间。