還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

ShowMeAI 發表於 2022-11-26
視覺化
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💡 作者:韓信子@ShowMeAI
📘 資料分析實戰系列https://www.showmeai.tech/tutorials/40
📘 本文地址https://www.showmeai.tech/article-detail/339
📢 宣告:版權所有,轉載請聯絡平臺與作者並註明出處
📢 收藏ShowMeAI檢視更多精彩內容

還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

餅圖是用於顯示分類資料比例的典型圖表,我們用圓形圖形代表整個樣本集,把它分為多個切片並顯示對應資料與總數相比的比例貢獻。餅圖在資料視覺化中經常使用,因為它直觀且結果容易理解。

不過餅圖並不是我們可以使用的唯一選擇,還有一些炫酷高階的圖表可以表示比例或百分比,在本篇內容中 ShowMeAI 將給大家講到另外9個備選視覺化圖形方案,具備相同的功能但實現效果不一樣。

還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

本篇內容涉及的工具庫,大家可以參考ShowMeAI製作的工具庫速查表和教程進行學習和快速使用。

📘圖解資料分析:從入門到精通系列教程

📘資料科學工具庫速查表 | Pandas 速查表

📘資料科學工具庫速查表 | Seaborn 速查表

💡 獲取資料

我們先匯入所需工具庫:

# 資料分析處理工具庫
import numpy as np
import pandas as pd

# 資料視覺化工具庫
import matplotlib.pyplot as plt
import seaborn as sns

%matplotlib inline

我們將以案例的形式給大家講解視覺化技巧,本篇的資料我們將使用爬蟲技術爬取獲取,我們對維基百科上顯示截至 2020 年煤炭產量超過 500 萬噸的國家和地區進行資料爬取和整理。

# 爬蟲與網頁解析工具庫
import requests 
from bs4 import BeautifulSoup
wikiurl='https://en.wikipedia.org/wiki/List_of_countries_by_coal_production'
table_class='wikitable sortable jquery-tablesorter'

response=requests.get(wikiurl)

#status/狀態碼為200,表示爬取成功
print(response.status_code)

我們使用 📘BeautifulSoup 工具對爬取到的網頁進行解析

# 解析對應的網頁元素
soup = BeautifulSoup(response.text, 'html.parser')
table = soup.find('table',{'class':"wikitable"})

# 整理為dataframe形態
df_coalall = pd.read_html(str(table))[0]
df_coalall
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

這裡我們不使用全部國家,我們選擇歐洲 2020 年煤炭產量的國家。例如俄羅斯、德國、波蘭、捷克共和國、烏克蘭、羅馬尼亞、希臘和保加利亞。

大家也可以修改下面的程式碼,對國家或年份進行更改。

# 選取國家
list_country = ['Russia', 'Germany', 'Poland', 'Czech Republic',
'Ukraine', 'Romania', 'Greece', 'Bulgaria']
# 整理不同國家的數量
df_coalpre = df_coalall[df_coalall['Country'].isin(list_country)]
df_coalpre = df_coalpre.iloc[:,0:2]
df_coalpre.rename(columns={'2020[1]':'2020'}, inplace=True)
df_coalpre.reset_index(drop=True, inplace=True)
df_coalpre
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

我們對 DataFrame 進行melt操作建立一個百分比列以供後面使用

df_coal = pd.melt(df_coalpre, id_vars=['Country'],
                  value_vars='2020',
                  var_name='Year', value_name='Value')

# 計算百分佔比
df_coal['Percent'] = [round(i*100/sum(df_coal.Value),1) for i in df_coal.Value]
df_coal
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💡 基礎餅圖

餅狀圖當然基於 Matplotlib 是很好繪製的啦,我們用 Seaborn 調一下調色盤,讓呈現更好看一點,程式碼如下:

# seaborn調色盤
pal_ = list(sns.color_palette(palette='plasma_r',
                              n_colors=len(list_country)).as_hex())
# 繪製餅圖
plt.figure(figsize=(14, 14))
plt.rcParams.update({'font.size': 16})
plt.pie(df_coal.Value,
        labels= df_coal.Country,
        colors=pal_, autopct='%1.1f%%',
        pctdistance=0.9)
plt.legend(bbox_to_anchor=(1, 1), loc=2, frameon=False)
plt.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

上面的餅圖顯示了 2020 年煤炭產量超過 500 萬噸的歐洲國家的各自佔比。

💡 其他資料視覺化圖

下面ShowMeAI將介紹 9 種餅圖之外的佔比視覺化圖,它們可以分為兩組:

圓形圖形

  • 啞鈴圖(又名槓鈴圖)
  • 羅列氣泡圖
  • 環繞氣泡圖
  • 互動式餅圖
  • 互動式甜甜圈圖

其他形式

  • 樹狀圖
  • 華夫餅圖
  • 條形圖
  • 堆積條形圖

💦 啞鈴圖(槓鈴圖)

啞鈴圖是一種視覺化技巧,用於比較兩個資料。顧名思義,啞鈴圖由兩個用直線統一的圓形圖形組成。 在下面的示例中我們將 X 軸範圍設定為 0 到 100% 以顯示煤炭產量的百分比。

我們直接看程式碼和效果:

df_select = df_coal[['Country', 'Percent']]
df_select['Label_color'] = [i for i in df_coal['Country']]


df_coalmod = df_coal[['Country']]
df_coalmod['Percent'] = [100-i for i in df_coal['Percent']]
df_coalmod['Label_color'] = ['Other countries']*len(list_country)


df_db = pd.concat([df_select, df_coalmod],axis=0)
df_db
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

下面繪製 2020 年煤炭產量最高的兩個國家

# 構建資料字典
color_country = dict(zip(list_country,pal_))
# 新增顏色設定
color_country['Other countries'] = '#b9b9b9'

# 選擇國家,設定Y軸
df_ = df_select.iloc[0:2,:]
df_['Y'] = [1]*len(df_)

import plotly.express as px
fig = px.scatter(df_, x='Percent', y='Y', color='Label_color',
                 text = [str(i)+' %' for i in df_.Percent][0:len(df_)],
                 opacity=1,
                 color_discrete_map=color_country)

fig.update_layout(width = 950, height = 300, plot_bgcolor = 'white',
                  margin = dict(t=40, l=20, r=20, b=20),
                  yaxis={'categoryorder':'total descending'},
                  legend=dict(title='Countries'),
                  showlegend=True)

for c in list_country:
    df = df_[df_['Country']==c]
    fig.add_shape(type="line", layer="below",
                  line=dict(color='black', width=6),
                  y0=1, x0=list(df_.Percent)[0],
                  y1=1, x1=list(df_.Percent)[1])


fig.update_traces(textposition='top center', marker={'size':65},
                  textfont=dict(color='black'))
fig.update_yaxes(visible=False)
fig.update_xaxes(visible=True, showgrid =False, range=[-1, 101]) 
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

繪製每個國家與剩餘其他國家總和相比的百分比

color_country = dict(zip(list_country,pal_))
color_country['Other countries'] = '#b9b9b9'


import plotly.express as px
fig = px.scatter(df_db, x='Percent', y='Country', color='Label_color',
                 text = [str(i)+' %' for i in df_db.Percent],
                 opacity=1,
                 color_discrete_map=color_country)


fig.update_layout(width = 950, height = 900, plot_bgcolor = 'white',
                  margin = dict(t=40, l=20, r=20, b=20),
                  yaxis={'categoryorder':'total descending'},
                  legend=dict(title='Countries'),
                  showlegend=True)


for c in list_country:
    df = df_db[df_db['Country']==c]
    fig.add_shape(type="line", layer="below",
                  line=dict(color=color_country.get(c), width=6),
                  y0=c, x0=list(df.Percent)[0],
                  y1=c, x1=list(df.Percent)[1])


fig.update_traces(textposition='top center', marker={'size':58},
                  textfont=dict(color='black'))
fig.update_yaxes(title='', visible=True, showgrid =False)
fig.update_xaxes(visible=False) 
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

結果看起來不錯,不過我們這裡的圈圈大小都是一樣的,這可能不方便在國家之間進行比較。我們可以透過根據百分比值改變圓形大小,程式碼模板如下:

import plotly.express as px
fig = px.scatter(df_db, x='Percent', y='Country', color='Label_color',
                 text = [str(i)+' %' for i in df_db.Percent],
                 size = 'Percent', size_max=45,
                 opacity=1,
                 color_discrete_map=color_country)


fig.update_layout(width = 950, height = 900, plot_bgcolor = 'white',
                  margin = dict(t=40, l=20, r=20, b=20),
                  yaxis={'categoryorder':'total descending'},
                  legend=dict(title='Countries'),
                  showlegend=True)


for c in list_country:
    df = df_db[df_db['Country']==c]
    fig.add_shape(type="line", layer="below",
                  line=dict(color=color_country.get(c), width=6),
                  y0=c, x0=list(df.Percent)[0],
                  y1=c, x1=list(df.Percent)[1])


fig.update_traces(textposition='top center',
                  textfont=dict(color='black'))


fig.update_yaxes(title='', visible=True, showgrid =False)
fig.update_xaxes(visible=False) 
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💦 羅列氣泡圖

我們可以使用多個大小不一樣的圓圈來表示資料大小與佔比,這也就是氣泡圖,我們把氣泡水平羅列排布就可以起到對比和展示的作用,也就是羅列氣泡圖,下面是它的實現程式碼:

df_coal['Y'] = [1]*len(df_coal)
list_x = list(range(0,len(df_coal)))
df_coal['X'] = list_x
df_coal
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

繪製羅列氣泡圖

# 構建氣泡列表
label = [i+'<br>'+str(j)+'<br>'+str(k)+'%' for i,j,k in zip(df_coal.Country,
                                                            df_coal.Value,
                                                            df_coal.Percent)]
import plotly.express as px
fig = px.scatter(df_coal, x='X', y='Y',
                 color='Country', color_discrete_sequence=pal_,
                 size='Value', text=label, size_max=90
                )
fig.update_layout(width=900, height=320,
                  margin = dict(t=50, l=0, r=0, b=0),
                  showlegend=False
                 )
fig.update_traces(textposition='top center')
fig.update_xaxes(showgrid=False, zeroline=False, visible=False)
fig.update_yaxes(showgrid=False, zeroline=False, visible=False)
fig.update_layout({'plot_bgcolor': 'white',
                   'paper_bgcolor': 'white'})
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

氣泡圖顯示了 2020 年煤炭產量超過 500 萬噸的歐洲國家百分比的情況。不過羅列氣泡圖有一個問題:繪圖空間。繪製的圓圈越多,需要的面積就越大。

💦 環繞氣泡圖

上面的羅列氣泡圖非常佔空間,我們可以把氣泡圈圈以不同的方式排布,以節省空間,比如環繞氣泡圖

import circlify
# 氣泡的位置分佈
circles = circlify.circlify(df_coal['Value'].tolist(), 
                            show_enclosure=False, 
                            target_enclosure=circlify.Circle(x=0, y=0)
                           )
circles.reverse()

繪製圓形包裝

# 構建氣泡列表
label = [i+'<br>'+str(j)+'<br>'+str(k)+'%' for i,j,k in zip(df_coal.Country,
                                                            df_coal.Value,
                                                            df_coal.Percent)]
fig, ax = plt.subplots(figsize=(14,14), facecolor='white')
ax.axis('off')
lim = max(max(abs(circle.x)+circle.r, abs(circle.y)+circle.r,) for circle in circles)
plt.xlim(-lim, lim)
plt.ylim(-lim, lim)


# 以環繞方式繪圖
for circle, note, color in zip(circles, label, pal_):
    x, y, r = circle
    ax.add_patch(plt.Circle((x, y), r, alpha=1, color = color))
    plt.annotate(note.replace('<br>','\n'), (x,y), size=16, va='center', ha='center')
plt.xticks([])
plt.yticks([])
plt.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💦 互動式餅圖

餅圖其實依舊是很好的視覺化展示工具,但是我們經常會有更靈活的要求,比如俄烏2022年衝突的大背景下,我們需要刨去 Russia 之後看各國家佔比,那又是另外一個分佈情況,而這種靈活的互動式應用,可以藉助於 Python 中的 📘Plotly 工具庫完成,下面是互動式餅狀圖繪製程式碼:

import plotly.express as px
fig = px.pie(df_coal, values='Value', names='Country',
             color_discrete_sequence=pal_)
fig.update_layout(width = 800, height = 600,
                  margin = dict(t=0, l=0, r=0, b=0))
fig.update_traces(textfont_size=16)
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💦 甜甜圈圖

顧名思義,甜甜圈圖,就是中心有空白的餅圖。它其實和餅圖很像,但是因為中心位置空出來了,大家可以在其中新增一些額外的資訊。下面是我們藉助 Plotly 工具庫繪製甜甜圈圖的示例:

import plotly.express as px
fig = px.pie(df_coal, values='Value', names='Country',
             color_discrete_sequence=pal_)
fig.update_traces(textposition='outside', textinfo='percent+label', 
                  hole=.6, hoverinfo="label+percent+name")
fig.update_layout(width = 800, height = 600,
                  margin = dict(t=0, l=0, r=0, b=0))
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💦 樹狀圖

並不只有圓圈狀的視覺化圖適合顯示佔比,我們也可以使用其他的形狀,比如最常見的視覺化圖之一就是樹狀圖,我們會用方塊狀的圖來展示資料大小和佔比情況,參考示例如下:

# 新增顏色
color_country['(?)'] = '#e9e9e9'


# 構建佔比列表
Label_per = [str(round(i*100/sum(df_coal.Value),1))+' %' for i in df_coal.Value]


import plotly.express as px
fig = px.treemap(df_coal, path=[px.Constant('2022'), 'Country'],
                 values=df_coal.Percent,
                 color=df_coal.Country,
                 color_discrete_map=color_country,
                 hover_name=Label_per,
                )
fig.update_layout(margin = dict(t=50, l=25, r=25, b=25), showlegend=True)
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💦 華夫餅圖

大家一定見過 GitHub 中的活躍天數圖,大家有沒有覺得,這也是一個非常酷的視覺化方法,在視覺化領域,這樣的圖叫做華夫餅圖。是不是很形象,就像吃的華夫餅一樣分成很多小塊塊。

還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

繪製華夫餅圖的簡單程式碼示例如下:

# 注意需要透過 pip install pywaffle來安裝對應的工具庫

from pywaffle import Waffle
fig = plt.figure(FigureClass=Waffle, 
                 rows=20, columns=50,
                 values=df_coal.Percent, 
                 colors=pal_,
                 labels=[i+' '+j for i,j in zip(df_coal.Country, Label_per)],
                 figsize = (15,6),
                 legend={'loc':'upper right',
                         'bbox_to_anchor': (1.32, 1),
                        })
plt.tight_layout()
plt.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💦 條形圖

另一種典型的佔比圖示是條形圖,大家對進度條有沒有印象,它對於顯示佔比情況也是非常有效的。

還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

下面我們使用類似的呈現手法,使用 Plotly 工具庫構建條形圖來顯示佔比,而且我們構建的圖示是互動式的,大家的滑鼠懸停在條形上時會顯示相應的資訊。

# 新增顏色設定
color_country['Other countries'] = '#dcdcdc'


import plotly.express as px
fig = px.bar(df_db, y='Country', x='Percent', color='Label_color',
             text=[i+' '+str(j)+' %' if i != 'Other countries' else '' for i,j in zip(df_db.Label_color,
                                                                                      df_db.Percent)],
             orientation='h',
             color_discrete_map=color_country
            )
fig.update_layout(width = 950, height = 500, plot_bgcolor = 'white',
                  margin = dict(t=10, l=10, r=0, b=10),
                  yaxis={'categoryorder':'total descending'},
                  legend=dict(title='Countries'),
                  showlegend=True
                 )
fig.update_traces(textposition='auto')
fig.update_xaxes(visible=False)
fig.update_yaxes(visible=False)
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💦 堆積條形圖

對應到上述條形圖,我們當然也可以構建堆積條形圖,它能更清晰顯示單個資料點與總數的比例。不過大家稍微注意一下,這種堆疊的結構的一個可能問題是,很小佔比的國家,可能就顯示不太清楚了,堆疊條形圖的程式碼示例如下:

import plotly.express as px
fig = px.bar(df_coal, y='Year', x='Percent', color='Country',
             text = [i + str(j)+' %' for i,j in zip(df_coal.Country, df_coal.Percent)],
             orientation='h',color_discrete_sequence=pal_)
fig.update_layout(width = 1400, height = 360, plot_bgcolor = 'white',
                  margin = dict(t=40, l=20, r=20, b=20),
                  #title_text = '2020',
                  showlegend=False)
fig.update_traces(textposition='inside')
fig.update_xaxes(visible=False)   
fig.update_yaxes(visible=False)
fig.show()
還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵

💡 總結

餅圖是資料視覺化中的典型圖表,對於佔比呈現非常有效。但是一直使用餅圖也是非常單一的,容易視覺疲勞,本文中 ShowMeAI 講解了9種替代餅圖的視覺化方法,大家可以結合它們的優缺點進行選擇,和豐富自己的視覺化工具箱。

參考資料

還在用餅狀圖?來瞧瞧這些炫酷的百分比視覺化新圖形(附程式碼實現)⛵