数据可视化的艺术

欢迎你们前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

跨越不一样地域的数千个网站的原始数据保存在庞大的数据库中，这些原始数据便是网站正在测量的网络组件、页面性能、可用性，以及页面内容指标（Page content metrics）。当咱们将这些数据呈现给他人而没有对其进行正确组织和分类时，这将致使难以阅读、分析和肯定结论。

经过图形方式来组织和分类这些数据集，并将其呈现，则能够更轻松地达成您的目的。接下来，咱们将看到各类各样的图表类型，这些图表经常会在性能分析中使用到，而且在基于数据类型的各类场景中也适用。

经常使用的图表类型有以下几种：

1. 条形图（Bar chart）。
2. 折线图（Line chart）。
3. 散点图（Scatterplot chart）。
4. 直方图（Histogram）。
5. 累积分布图（Cumulative distribution chart）。
6. 地理图（Geo chart）。
7. 气泡图（Bubble chart）。

为了准确地肯定表明一组数据的图表类型，咱们来看看实际情景下的一些性能分析案例。

使用案例之其一

一般在分析性能数据时，咱们会遇到须要根据某些定性数据（Qualitative data）对数据进行排名的状况。例如，考虑美国不一样城市网站性能的定性数据，让咱们试试肯定哪一种图表有助于以最佳方式解释数据。

条形图以垂直线条形式展现数据。这适用于须要比较可分类的不一样定性数据的状况。所以，当咱们想要在性能分析中展现排名数据时，使用条形图是恰当的。

Catchpoint 的数字体验智能平台提供了以不一样级别的分解来生成条形图的选项，这是按排名顺序展现定性数据的一个有效方法。

横轴：城市名称；纵轴：页面响应时间（单位 ms）。

上面的条形图展现了美国不一样城市的网页加载时间排名。经过看这张图，咱们很容易找出哪一个城市比其余城市表现更好。

使用案例之其二

考虑另外一种状况：咱们须要研究一段时间内的性能数据，以查看性能是否有任何变化。

折线图能够用来表示特定时期内，网站的定性性能数据的持续分布。这能够肯定性能受到影响的时间范围。Catchpoint 能够灵活地提供折线图（可一次绘制 10 种不一样指标的折线图），以提供详细信息以找出问题的根源。

从上面的折线图中，咱们看到 10 月份的性能表现发生了变化，缘由是页面上的内容总数有所增长。

所以，折线图可帮助您了解性能变化，而且分析出一段时间内性能变化背后的根本缘由。

使用案例之其三

错误过滤（Error filtering）是数据分析的重要组成部分。它能帮助识别不一样的错误以及发生错误的时间，从而评估网站的可用性。这也有助于评估网站的可用性，所以，此图表类型常常用于性能分析中，以监控网站的可用性。

一些解决方案提供了一种轻松的方式来过滤特定时间范围内不一样的错误类型。散点图是能直观地展现全部这些错误的方法，它绘制出了每次失败的测试运行。

横轴：时间；纵轴：页面响应时间（单位 ms）。

上图展现了指定时间间隔内，网络测试所出现的全部错误，人们能够经过单击数据点并查看瀑布式数据（Waterfall data）来进一步分析每一个数据点。

散点图也能够用来展现不一样的数据模式，以便深刻分析根本缘由。例如，考虑到页面性能受文件高响应时间影响的状况。分析数据点揭示了来自不一样服务器的文件中，有一些服务器未经压缩便发送文件，这些未压缩的文件增长了页面加载的延迟。

下面的散点图展现了文件 1 和文件 2 的不一样数据段，每一个数据段都具备从不一样服务器提供的未压缩和压缩版本。压缩文件的响应时间比较大的未压缩文件要好得多，由于从服务器向客户端发送更多字节的数据须要更长的时间。

横轴：时间；纵轴：文件大小。

使用案例之其四

在性能分析中，了解存在于性能指标阈值范围内的数据点的数量是很是重要的。这对于评估有多少用户受到低性能的影响，以及有多少有经验的、可靠的性能来讲，颇有用。

将数据分类到范围桶（Range buckets）中可帮助您了解有多少数据点位于该网站所需的阈值范围内。它有助于进一步分析性能较低的数据集。

直方图能够用来表示范围桶中的数据分布。每一个桶描述了性能指标范围，以及数据集中落入该范围的数据的数量。

横轴：加载时间范围；纵轴：数据数量。

上面的直方图展现了 Y 轴上的数据运行次数以及 X 轴上的网页加载时间范围。第二栏显示有 232 次运行，其网页响应时间在 5.3-6 秒范围内。

直方图为查看受影响的用户数提供了一个范围桶，而累积分布图则给出了超过该性能指标阈值的用户数量的百分比。

累积分布图是一种经常使用的图表类型，它用百分表示性能指标。它绘制出了性能指标大于或小于网站阈值的用户的百分比。

下图显示了网页响应时间的累积分布图。

横轴：用户数量百分比；纵轴：页面响应时间（单位 ms）

从上面的累积分布图中，咱们看到在第 90 百分位，网站的网页响应时间为 10.3 秒。这意味着，在收集到的数据的时间范围内，网页加载时间超过了 10.3 秒的用户占比为 10%。

使用案例之其五

当网站托管在多个地点时，咱们有必要从不一样的地理位置评估其性能。Catchpoint 提供了展现性能的地理统计图，其中绿色到红色的变化对应着性能从好到坏的变化。

上面的地理图展现了单个网站的性能在不一样地域间的差别。从图中，咱们看到美国和欧洲的用户体验到了最佳的网页加载时间，而中国用户则体验到更长的网页加载时间。

使用案例之其六

迄今为止，咱们所讨论的图表类型都关注于可被选择用于评估性能的单个度量标准。若是咱们想评估一个以上的度量标准，或一组不一样网站的性能，这时候该怎么办呢？

在这种状况下，对于在单个视图中评估不一样网站的多个性能指标，气泡图是一个很好的选择。

横轴：文档完成时间（单位 ms）；纵轴：网页响应时间（单位 ms）。

上述气泡图在单个视图下给出了 3 个不一样网站的性能数据（文档完整，网页响应）。

总结

从上述场景中咱们能够看出，可视化是以更有意义的方式表达数据的强力方法。它有助于找出问题的根本缘由并得出结论，从而缩小须要优化的区域。

Catchpoint 中提供的不一样图表类型可帮助您以不一样的方式分割和切分数据，以对数据进行分析。除了分析数据之外，监测不一样网页或竞争对手网站的性能趋势也很重要，以了解系统随时间的变化状况。

问答
可视化数据库模式的工具备哪些？
相关阅读
一些最好用的数据可视化工具
用Python进行数据可视化的10种方法
从1维到6维，一文读懂多维数据可视化策略

此文已由做者受权腾讯云+社区发布，原文连接：https://cloud.tencent.com/developer/article/1131771?fromSource=waitui