資料視覺化的藝術

騰訊雲加社群發表於2018-05-22

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

跨越不同地域的數千個網站的原始資料儲存在龐大的資料庫中,這些原始資料即是網站正在測量的網路元件、頁面效能、可用性,以及頁面內容指標(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


相關文章