數據可視化的藝術

歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~

跨越不同地域的數千個網站的原始數據保存在龐大的資料庫中，這些原始數據即是網站正在測量的網路組件、頁面性能、可用性，以及頁面內容指標（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 的數字體驗智能平台提供了以不同級別的分解來生成條形圖的選項，這是按排名順序展示定性數據的一個有效方法。

上面的條形圖展示了美國不同城市的網頁載入時間排名。通過看這張圖，我們很容易找出哪個城市比其他城市表現更好。

使用案例之其二

考慮另一種情況：我們需要研究一段時間內的性能數據，以查看性能是否有任何變化。

折線圖可以用來表示特定時期內，網站的定性性能數據的持續分布。這可以確定性能受到影響的時間範圍。Catchpoint 可以靈活地提供折線圖（可一次繪製 10 種不同指標的折線圖），以提供詳細信息以找出問題的根源。

從上面的折線圖中，我們看到 10 月份的性能表現發生了變化，原因是頁面上的內容總數有所增加。

因此，折線圖可幫助您了解性能變化，並且分析出一段時間內性能變化背後的根本原因。

使用案例之其三

錯誤過濾（Error filtering）是數據分析的重要組成部分。它能幫助識別不同的錯誤以及發生錯誤的時間，從而評估網站的可用性。這也有助於評估網站的可用性，因此，此圖表類型經常用於性能分析中，以監控網站的可用性。

一些解決方案提供了一種輕鬆的方式來過濾特定時間範圍內不同的錯誤類型。散點圖是能直觀地展示所有這些錯誤的方法，它繪製出了每次失敗的測試運行。

上圖展示了指定時間間隔內，網路測試所出現的所有錯誤，人們可以通過單擊數據點並查看瀑布式數據（Waterfall data）來進一步分析每個數據點。

散點圖也可以用來展示不同的數據模式，以便深入分析根本原因。例如，考慮到頁面性能受文件高響應時間影響的情況。分析數據點揭示了來自不同伺服器的文件中，有一些伺服器未經壓縮便發送文件，這些未壓縮的文件增加了頁面載入的延遲。

下面的散點圖展示了文件 1 和文件 2 的不同數據段，每個數據段都具有從不同伺服器提供的未壓縮和壓縮版本。壓縮文件的響應時間比較大的未壓縮文件要好得多，因為從伺服器向客戶端發送更多位元組的數據需要更長的時間。

使用案例之其四

在性能分析中，了解存在於性能指標閾值範圍內的數據點的數量是非常重要的。這對於評估有多少用戶受到低性能的影響，以及有多少有經驗的、可靠的性能來說，很有用。

將數據分類到範圍桶（Range buckets）中可幫助您了解有多少數據點位於該網站所需的閾值範圍內。它有助於進一步分析性能較低的數據集。

直方圖可以用來表示範圍桶中的數據分布。每個桶描述了性能指標範圍，以及數據集中落入該範圍的數據的數量。

上面的直方圖展示了 Y 軸上的數據運行次數以及 X 軸上的網頁載入時間範圍。第二欄顯示有 232 次運行，其網頁響應時間在 5.3-6 秒範圍內。

直方圖為查看受影響的用戶數提供了一個範圍桶，而累積分布圖則給出了超過該性能指標閾值的用戶數量的百分比。

累積分布圖是一種常用的圖表類型，它用百分表示性能指標。它繪製出了性能指標大於或小於網站閾值的用戶的百分比。

下圖顯示了網頁響應時間的累積分布圖。

從上面的累積分布圖中，我們看到在第 90 百分位，網站的網頁響應時間為 10.3 秒。這意味著，在收集到的數據的時間範圍內，網頁載入時間超過了 10.3 秒的用戶佔比為 10%。

使用案例之其五

當網站託管在多個地點時，我們有必要從不同的地理位置評估其性能。Catchpoint 提供了展示性能的地理統計圖，其中綠色到紅色的變化對應著性能從好到壞的變化。

上面的地理圖展示了單個網站的性能在不同地域間的差異。從圖中，我們看到美國和歐洲的用戶體驗到了最佳的網頁載入時間，而中國用戶則體驗到更長的網頁載入時間。

使用案例之其六

迄今為止，我們所討論的圖表類型都關注於可被選擇用於評估性能的單個度量標準。如果我們想評估一個以上的度量標準，或一組不同網站的性能，這時候該怎麼辦呢？

在這種情況下，對於在單個視圖中評估不同網站的多個性能指標，氣泡圖是一個很好的選擇。

上述氣泡圖在單個視圖下給出了 3 個不同網站的性能數據（文檔完整，網頁響應）。

總結

從上述場景中我們可以看出，可視化是以更有意義的方式表達數據的強力方法。它有助於找出問題的根本原因並得出結論，從而縮小需要優化的區域。

Catchpoint 中提供的不同圖表類型可幫助您以不同的方式分割和切分數據，以對數據進行分析。除了分析數據以外，監測不同網頁或競爭對手網站的性能趨勢也很重要，以了解系統隨時間的變化情況。

問答

可視化資料庫模式的工具有哪些？

相關閱讀

一些最好用的數據可視化工具

用Python進行數據可視化的10種方法

從1維到6維，一文讀懂多維數據可視化策略

此文已由作者授權騰訊雲+社區發布，原文鏈接：https://cloud.tencent.com/developer/article/1131771?fromSource=waitui

http://weixin.qq.com/r/6TlxaU-EaRIWrQsK92z7 (二維碼自動識別)