让我们来谈谈常见的图表类型。本章可以通过以下几个方面来帮助您:
沟通
在讨论您的界面的一部分时,为事物使用普遍理解的名称很重要。 想象在不知道“按钮”这个词的情况下试图谈论一个按钮。 拥有图表的通用语言可以更轻松地谈论现有和潜在的图表。
快速可读性
每次用户看到图表时,他们都需要调整自己的方向以弄清楚如何阅读它。 有一些方法可以帮助加快该过程,例如添加标签和图例。 但最大的帮助是使用熟悉的图表类型。
由于大多数人之前都遇到过基本的时间线,因此在时间线中显示数据将有助于不想花太多时间学习新可视化的用户。
常见的图表也有隐含的含义。 例如,烛台图通常与股票数据相关联——这种关联可以加速(或阻碍)您的用户,具体取决于使用情况。
灵感
对于更复杂或独特的图表,通用图表是一个很好的起点。
只制作基本的图表类型可能看起来很无聊,但是在这些图表之一的框架中思考数据集有助于集思广益。 如果您将数据绘制为直方图,您的读者可能会获得哪些见解? 雷达图呢?
此外,有时最基本的图表最适合新功能。
图表类型
让我们浏览一下一些常见的类型,并讨论每种类型的示例。
这些图表类型在通用图表文件夹中都有相应的代码。一定要在浏览器中查看它们,并深入挖掘代码。我保证你会从每个例子中学到很多东西。请将代码作为资源——下次当您想要实现类似的图表时,代码将在这里指导您,使用我们在本书中使用的相同框架。
时间线
时间轴显示了一个跨越时间(x轴)的连续度量值(x轴)。
对于这些图表,我们将练习将其分解为它的组成部分——我们可视化的是什么类型的指标,它们是在什么维度上可视化的?
Dimensions(维度): - 线上一点的垂直位置代表一个连续的度量值 - 线上一个点的水平位置代表一个连续的度量值(时间)
它们对于显示一段时间内的趋势非常有用。 例如:这个股票价值在过去一年里有没有增加? 该股票价值是否存在每周模式?
创建时间线图表时要回答的一个重要问题是:我希望看到什么样的间隔? 在查看年度数据时,按照每天一个点显示数据可能过于突兀。 在查看尖峰图表时,很难掌握整体趋势。
或者,加大间隔,比如显示每个月的平局数据,这样数据就能屏蔽极端值。
创建时间线时要问的另一个问题是:我希望我的线条有多平滑? 如果您的用户想知道时间线的确切点,请坚持使用线性插值(d3.line() 的默认设置)
一条更平滑的线有助于展示更大的图像——从某种意义上说,我们在猜测点之间的缺失值是什么。
我们可以通过使用不同的插值并将它们传递给 d3.line().curve() 来改变平滑度。 这是我们使用不同插值的线(原始点被可视化为点):
一般来说,d3.curveMonotoneX() 是一个不错的选择,因为它穿过每个点。使用其他插值,例如 d3.curveBasis(),该线将“跳过”点以创建更平滑的线,这会使添加工具提示变得棘手 ,并且也不会确保您的线路保持在您的bounds内。
需要谨慎的一件事是用数据撒谎——确保你不会误导读者认为你拥有比实际更多的数据点。 表示趋势的一种方法是显示原始点和趋势线,就像我们在上一章中所做的那样。
热图
您可能最熟悉 Github 贡献图中的热图。
热图具有三个维度:x、y 和色标。 在这种情况下,x 轴对应周,y 轴对应星期几,色标域是每天的贡献数。
维度: - 正方形的垂直位置表示一周中的哪一天(离散) - 正方形的水平位置表示一年中的一周(离散) - 正方形的颜色表示连续或离散的度量值(通常使用顺序颜色刻度尺 )
在我们代码库的热图中,我们可以循环使用不同的指标来表示我们的色标。 例如,月相热图显示了一个非常清晰的 27 天周期。
或者,如果我们查看最低温度热图,我们可以看到四个季节之间温度的逐渐变化。
热图不一定需要随时间显示一个指标。 例如,
以下热图显示了亚洲国家(x 轴)不同指标的百分位数
(y 轴)。 请注意,热图单元不一定是方形的
热图非常适合显示随时间变化的趋势和指标之间的相关性。
分辨色阶的细微差异比分辨条形尺寸更难,因此如果您需要显示确切数字,请远离它们或添加信息丰富的工具提示。
雷达图
雷达图不是最常见的图表类型,但在查看多个指标时,它们可能非常有用。
它们至少由三个轴组成,其中每个轴代表一个度量值。
维度:-每个条线上的点的位置表示连续或离散的度量值。
虽然它们对进行精确测量不是很有帮助(很难判断图表 1 和图表 2 上的变量 A 有多大),但在比较许多图表和许多指标时,它们确实很出色。 每个图表都会创建该实例的配置文件,并且可以轻松比较多个配置文件以找到相似之处和异常值。
有几种方法可以显示多种配置文件:
- 显示多个不同颜色的多边形,所有这些都在同一个图表上。当配置文件少于5个时,这种方法效果很好。
- 显示一个图表,可在配置文件之间切换。 当您想一次专注于一个配置文件时,这很有效,图表旁边可能有更多信息。
- 显示多个雷达图表。在没有额外信息的情况下,比较5个以上的配置文件时效果很好。
如果我们查看一组天气数据的雷达图,我们可以挑选出模式。
例如,六月的日子有一个共同的模式(向上和右边),而 11 月初的日子有不同的模式(甚至几乎到处都是)。 此外,我们可以看到 11 月 4 日有点异常,风速异常低。
鉴于我们对季节的了解,这些模式似乎很明显——冬天的天气与春天的天气不同。 但是我们可以更深入地查看更精细的模式——例如,第二组的日子风更大、湿度更低。 此外,我们对季节之间的天气变化了解很多。
想象一下,查看不太熟悉的数据的雷达图——雷达图将帮助我们快速找出许多指标的模式。
散点图
散点图很适合于观察两个度量值(x轴和y轴)之间的关系
维度:-点的水平位置表示连续的度量,垂直位置的点表示连续的度量。
当图表为方形时,它们的效果最佳,为两个指标提供相同的范围。
在散点图中可以寻找三种基本模式。
正相关:
这两个指标相互关联并以线性方式一起增加。
负相关:
这两个指标是反相关的,一个减少,而另一个增加。
例如,风速和气压的散点图将会有一个负相关的模式,因为寒冷的日子往往会有更大的气压。
Null: 这两个指标是不相关联的
例如,风速和湿度的散点图将没有模式,因为风速和湿度根本不相关。
在散点图中可能可以看到许多更复杂的模式。例如,散点图可以是指数型的或u形的。
这些模式不太常见,也更难解释。散点图也可能有一条最佳拟合线,这是对这两个指标如何关联的最佳猜测
当观察散点图时,请记住数据分析的黄金法则之一:相关性并不意味着因果关系。即使散点图有一个很强的正模式,你也不能得出度量a是由度量B导致的结论,反之亦然。
有时会在散点图中添加一个额外的维度——每个类别的色标或不同的形状。 例如,我们在第 2 章中给不同种类的降水赋予了不同的颜色。\
这可以帮助识别数据集中的分组。
饼图和甜甜圈图(环形图)
这是最具争议的图表类型之一,那就是饼状图!饼图和甜甜圈图非常相似,甜甜圈图只是一个中间裁剪的饼图。
维度:切片的角度表示一个连续的或离散的度量值。
我敢打赌你已经听过很多关于饼图的意见。 有争议的污名部分来自它们在不适当情况下的过度使用,或者在 3d 中显示它们的流行。 我还没有找到 3d 饼图的合适用途。
话虽如此,饼状图可能会很有用——主要是因为它们在本质上与“一个整体的一部分”的概念联系在一起。我们以前都曾把一个派或一个披萨切成多个部分,同时也专注于制作大小相同的薄片。当用户看到一个饼状图时,很明显他们看到的是一个整体的组成。
然而,由于人类的感知,比较条的长度比比较切片的大小要容易得多。在大多数情况下,使用饼状图,另一种图表类型会更有效。以下是一些关于制作有效的饼状图的建议:
- 将切片数限制为五个或更少。 请注意,我们将最后几个切片合并到“其他”类别中,以将重点放在较大的切片上。
- 按大小对切片进行排序。
- 直接给每个切片贴上标签
确保查看/code/08通用图表/饼/文件夹中的代码示例,以查看d3的电弧形绘制功能的操作!
直方图
我们已经熟悉了下一个图表类型——我们在第三章中制作了我们自己的直方图。直方图是独特的,因为它们只与一个度量有关。
维度:
每个条形的水平位置表示一个离散度量(通常是分箱连续度量)。条形的高度表示一个离散度量(属于范围内的数据点的计数)
当您要查看单个度量的值的变化时,请使用直方图。我们的是高温还是低温,还是温度在一个值附近变化?
有五种基本类型:
- 正态分布
具有正态分布的直方图以平均值为中心。通常,这些数据。大多数依赖偶然的指标最终呈正态分布,比如按性别身高。
例如,一个全女性阶层的身高范围很可能是一个正态分布。 - 向右倾斜
当我们观察露点时,我们看到了一个倾斜的右直方图的例子。这个直方图只是稍微向右倾斜,但你可以看到尾巴在左边。
- 向左倾斜 与向右偏斜相反,在向左偏斜的直方图中,一个值更有可能位于值的下半部分。 当指标具有下限时,通常会发生这种情况,因为值不能低于某个数字。
- 双峰 一个双峰直方图有两个清晰的峰。
我们在第三章中观察最高温度时看到了一个双峰直方图的例子。每天的温度似乎在45度左右或80度左右——代表了冬季和夏季的极端情况。
- 均衡的 一个均衡的直方图没有清晰的峰值,而且看起来相当平坦。
当我们观察月相时,我们看到了一个对称直方图的例子。月相是循环的,每天都相等,所以每个值的可能性都是相等的。
试着重新访问第三章中的直方图,看看你的每个指标的分布属于哪个类别。
箱线图
箱线图非常适合显示离散或分箱的连续指标——通常是随着时间的推移或相对于另一个指标。
每个框显示一个类别的值分布。 例如,此图表中的第一个框显示了 1 月份所有湿度值的范围。
维度: - 每个框的水平位置代表一个离散指标 - 每个框的垂直位置和须线表示一个连续的指标 - 每个框和须的高度代表一个连续的指标。
中间线代表中位数(中间值),框涵盖从 25%(25% 的值较低)到 75%(75% 的值较低)的值。 “胡须”从任一方向的中位数延伸到四分位距 (IQR) 的 1.5 倍。 通过 IQR,我们指的是第 25 个和第 75 个百分位数之间的差异。 位于胡须之外的任何异常值都显示为点。
请注意,对于放置胡须末端的位置有不同的约定。 例如,一些图表覆盖了所有带有胡须的数据点,而一些图表覆盖了高于和低于均值的一个标准差。 我们对中位数的 1.5 倍 IQR 的定义是一个很好的中间立场,它将显示变化,但也能抵抗异常值。
通过寻找离群点,我们可以看到 3 月和 4 月都有两个异常炎热的日子。 查看胡须,我们可以看到 3 月和 6 月的最高温度之间没有重叠。 此外,三月的最高气温都非常相似,而二月的变化很大。 如果我们只看每个月的平均或中值温度,我们将无法对值的范围做出任何结论。 箱线图增加了复杂性,需要更多的练习才能阅读,但包含了大量关于可变性的信息。
箱线图比我们之前创建的图表更复杂——请务必查看 /code/08-common-charts/box-plot/ 文件夹中的代码。 请注意,我们为每个月份的元素创建了一个 <g> 元素,以将它们放在一起,并使用我们的数据绑定进入/退出模式使事情变得更容易。
结论
这只是冰山一角。 还有更多类型的图表和许多尚未发现的图表类型! 请记住将本章用作起点或灵感来源。 并确保查看每个示例的代码或尝试自己重新创建图表以巩固您的技能。