數據可視化的藝術

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

跨越不一樣地域的數千個網站的原始數據保存在龐大的數據庫中，這些原始數據便是網站正在測量的網絡組件、頁面性能、可用性，以及頁面內容指標（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