支付寶發布資料視覺化規範,視覺化分析有套路!

2022-06-17 19:48:11 字數 2549 閱讀 4274

早先,阿里發布了支付寶資料視覺化規範,這是一套資料視覺化的設計語言,對資料圖形進行了拆解、提煉,從色彩搭配、元件規範、基礎元素、功能上進行了歸納總結。

圖表用色

圖表用色上,提出了一些圖表用色上的建議,給出了乙個標準的配色方案。

1.單色的使用

在使用單色就能表達資料意義的情況下,建議不使用多色。

在圖表只展示單一屬性的情況下,建議不要使用多種色相。

如果資料的數值已經通過形狀、位置、角度等其他視覺通道進行了編碼,那就沒有必要再設定不同的亮度和飽和度。

2.多色的使用

人們在不連續區域的情況下通常可以分辨6~12種不同色相,以及有限個可辨亮度層次。過多的顏色使用將對人類的視覺感知產生困擾。建議謹慎選擇顏色的數量。

在考慮圖表中的顏色數量時,需要將背景色和圖例顏色考慮進去,即顯示區域所有顏色的總和。

如果著色區域比較小,由於視覺通道的相互影響,可分辨的數量將相應有所下降。

多色相的使用:

當圖表展示了多種不同的屬性時,建議用不同色相來區分不同屬性。

多亮度與多飽和度的使用:

亮度和飽和度可以編碼資料的順序或數量特徵。通常我們只會在特定圖表內使用到多亮度或多飽和度,例如在乙個「熱力圖」中,用不同亮度的紅色來表示不同的氣溫測量值。

3.背景色的使用

圖表設計中的顏色使用必須統一,建議背景顏色不要選取與圖表主體內容相同或相近的顏色。

在乙個精心設計的圖表中,背景顏色既要能良好地襯托圖表主體,又不產生喧賓奪主的效果。

通常我們較多地使用白色、淺灰色作為背景顏色,有些情況下也會使用黑色。

4.透明度的使用

透明度是與色相、亮度、飽和度緊密相關的另乙個視覺通道。

由於透明度編碼本身受亮度和飽和度編碼的強烈影響,建議不要同時使用這三個視覺通道。但是它可以和色相編碼一起使用。

通常使用透明度時,圖表會有很多堆疊層次,我們需要做到使每乙個前景層都能夠在背景層之上良好地顯示,並且不產生相互干擾。

5.輔助元素配色

輔助元素的配色需要避免與圖表主體配色產生衝突。

在此基礎上,盡量與圖表主體配色統一。

圖表型別

選擇什麼圖表應該根據「有什麼資料,需要用什麼圖表」。從資料出發,從功能角度對圖表進行以下分類。

1.比較類

視覺化的方法顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積、角度和顏色來比較數值的大小,通常用於展示不同分類間的數值對比,不同時間點的資料對比。

2.關係類

視覺化的方法顯示資料之間相互關係。 使用圖形的巢狀和位置表示資料之間的關係,通常用於表示資料之間的前後順序、父子關係以及相關性。

3.趨勢類

視覺化的方法分析資料的變化趨勢。 使用圖形的位置表現出資料在連續區域上的分布,通常展示資料在連續區域上的大小變化的規律。

4.分布類

視覺化的方法顯示頻率,資料分散在乙個區間或分組。 使用圖形的位置、大小、顏色的漸變程度來表現資料的分布, 通常用於展示連續資料上數值的分布情況。

5.地圖類

視覺化的方法顯示地理區域上的資料。 使用地圖作為背景,通過圖形的位置來表現資料的地理位置, 通常來展示資料在不同地理區域上的分布情況。

6.區間類

視覺化的方法顯示同一維度上值的上限和下限之間的差異。 使用圖形的大小和位置表示數值的上限和下限,通常用於表示資料在某乙個分類(時間點)上的最大值和最小值。

7.時間類

視覺化的方法顯示以時間為特定維度的資料。 使用圖形的位置表現出資料在時間上的分布,通常用於表現資料在時間維度上的趨勢和變化。

最後,總結一句,資料視覺化首先要保證資料的準確展示,其次選對圖表和配色,可大大增加視覺感。如果覺得配色有困難,審美難以決斷,不妨嘗試一些視覺化不錯的工具,諸如上文提的finebi。

資料視覺化 什麼是資料視覺化

資料對應的英文單詞是data,從資訊獲取的角度看,資料是對目標觀察和記錄的結果,是現實世界中的時間 地點 事件 其他物件或概念的描述。不同學者對資料的作用也給出不同的定義,大致分為以下3類 視覺化對應的兩個英文單詞 visualize和visualization。visualize是動詞,描述 生成...

資料視覺化

資料視覺化主要旨在借助於圖形化手段,清晰有效地傳達與溝通資訊。但是,這並不就意味著資料視覺化就一定因為要實現其功能用途而令人感到枯燥乏味,或者是為了看上去絢麗多彩而顯得極端複雜。為了有效地傳達思想概念,美學形式與功能需要齊頭並進,通過直觀地傳達關鍵的方面與特徵,從而實現對於相當稀疏而又複雜的 資料集...

資料視覺化

畫餅圖 def print pie input data res for each in input data res each res.get each,0 1 label x for j in res fig plt.figure plt.pie x,labels label,autopct 1...