為了這個GIF，我專門建了一個網(wǎng)站

這個叫條形競賽圖，非常適合制作隨時間變動的數(shù)據(jù)可視化動圖。

我已經(jīng)用streamlit+bar_chart_race實現(xiàn)了，然后白嫖了heroku的服務器，大家通過下面的網(wǎng)址上傳csv格式的表格就可以輕松制作條形競賽圖，生成的視頻可以保存本地。

https://bar-chart-race-app.herokuapp.com/

本文我將實現(xiàn)過程介紹一下，白嫖服務器+部署留在下期再講。

純matplotlib實現(xiàn)

注：以下所有實現(xiàn)方式都需要提前安裝ffmpeg,安裝方式我之前在決策樹可視化一文中有介紹

matplotlib實現(xiàn)bar-chart-race很簡單，直接上代碼

import?pandas?as?pd
import?matplotlib.pyplot?as?plt
import?matplotlib.ticker?as?ticker
import?matplotlib.animation?as?animation
from?IPython.display?import?HTML
url?=?'https://gist.githubusercontent.com/johnburnmurdoch/4199dbe55095c3e13de8d5b2e5e5307a/raw/fa018b25c24b7b5f47fd0568937ff6c04e384786/city_populations'
df?=?pd.read_csv(url,?usecols=['name',?'group',?'year',?'value'])
colors?=?dict(zip(
????["India",?"Europe",?"Asia",?"Latin?America",?"Middle?East",?"North?America",?"Africa"],
????["#adb0ff",?"#ffb3ff",?"#90d595",?"#e48381",?"#aafbff",?"#f7bb5f",?"#eafb50"]
))
group_lk?=?df.set_index('name')['group'].to_dict()
fig,?ax?=?plt.subplots(figsize=(15,?8))

def?draw_barchart(current_year):
????dff?=?df[df['year'].eq(current_year)].sort_values(by='value',?ascending=True).tail(10)
????ax.clear()
????ax.barh(dff['name'],?dff['value'],?color=[colors[group_lk[x]]?for?x?in?dff['name']])
????dx?=?dff['value'].max()?/?200
????for?i,?(value,?name)?in?enumerate(zip(dff['value'],?dff['name'])):
????????ax.text(value-dx,?i,?????name,???????????size=14,?weight=600,?ha='right',?va='bottom')
????????ax.text(value-dx,?i-.25,?group_lk[name],?size=10,?color='#444444',?ha='right',?va='baseline')
????????ax.text(value+dx,?i,?????f'{value:,.0f}',??size=14,?ha='left',??va='center')
????ax.text(1,?0.4,?current_year,?transform=ax.transAxes,?color='#777777',?size=46,?ha='right',?weight=800)
????ax.text(0,?1.06,?'Population?(thousands)',?transform=ax.transAxes,?size=12,?color='#777777')
????ax.xaxis.set_major_formatter(ticker.StrMethodFormatter('{x:,.0f}'))
????ax.xaxis.set_ticks_position('top')
????ax.tick_params(axis='x',?colors='#777777',?labelsize=12)
????ax.set_yticks([])
????ax.margins(0,?0.01)
????ax.grid(which='major',?axis='x',?linestyle='-')
????ax.set_axisbelow(True)
????ax.text(0,?1.15,?'The?most?populous?cities?in?the?world?from?1500?to?2018',
????????????transform=ax.transAxes,?size=24,?weight=600,?ha='left',?va='top')
????ax.text(1,?0,?'by?@pratapvardhan;?credit?@jburnmurdoch',?transform=ax.transAxes,?color='#777777',?ha='right',
????????????bbox=dict(facecolor='white',?alpha=0.8,?edgecolor='white'))
????plt.box(False)
????
fig,?ax?=?plt.subplots(figsize=(15,?8))
animator?=?animation.FuncAnimation(fig,?draw_barchart,?frames=range(1900,?2019))
HTML(animator.to_jshtml())

核心是定義draw_barchart函數(shù)繪制當前圖表的樣式，然后用animation.FuncAnimation重復調(diào)用draw_barchart來制作動畫,最后用animator.to_html5_video() 或 animator.save()保存GIF/視頻。

xkcd手繪風格

我們也可以用matplotlib.pyplot.xkcd函數(shù)繪制XKCD風格的圖表，方法也很簡單，只需把上面的代碼最后一段加上一行

with?plt.xkcd():
????fig,?ax?=?plt.subplots(figsize=(15,?8))
????animator?=?animation.FuncAnimation(fig,?draw_barchart,?frames=range(1900,?2019))
????HTML(animator.to_jshtml())

bar_chart_race庫極簡實現(xiàn)

如果嫌麻煩，還可以使用一個庫「Bar Chart Race」，堪稱Python界最強的動態(tài)可視化包。

GitHub地址：https://github.com/dexplo/bar_chart_race

目前主要有0.1和0.2兩個版本，0.2版本添加動態(tài)曲線圖以及Plotly實現(xiàn)的動態(tài)條形圖。

通過pip install bar_chart_race也只能到0.1版本，因此需要從GitHub上下載下來，再進行安裝。

git?clone?https://github.com/dexplo/bar_chart_race

使用起來就是極簡了，三行代碼即可實現(xiàn)

import?bar_chart_race?as?bcr
#?獲取數(shù)據(jù)
df?=?bcr.load_dataset('covid19_tutorial')
#?生成GIF圖像
bcr.bar_chart_race(df,?'covid19_horiz.gif')

實際上bar_chart_race還有很多參數(shù)可以輸出不同形態(tài)的gif

bcr.bar_chart_race(
????df=df,
????filename='covid19_horiz.mp4',
????orientation='h',
????sort='desc',
????n_bars=6,
????fixed_order=False,
????fixed_max=True,
????steps_per_period=10,
????interpolate_period=False,
????label_bars=True,
????bar_size=.95,
????period_label={'x':?.99,?'y':?.25,?'ha':?'right',?'va':?'center'},
????period_fmt='%B?%d,?%Y',
????period_summary_func=lambda?v,?r:?{'x':?.99,?'y':?.18,
??????????????????????????????????????'s':?f'Total?deaths:?{v.nlargest(6).sum():,.0f}',
??????????????????????????????????????'ha':?'right',?'size':?8,?'family':?'Courier?New'},
????perpendicular_bar_func='median',
????period_length=500,
????figsize=(5,?3),
????dpi=144,
????cmap='dark12',
????title='COVID-19?Deaths?by?Country',
????title_size='',
????bar_label_size=7,
????tick_label_size=7,
????shared_fontdict={'family'?:?'Helvetica',?'color'?:?'.1'},
????scale='linear',
????writer=None,
????fig=None,
????bar_kwargs={'alpha':?.7},
????filter_column_colors=False)??

比如以下幾種

更詳細的用法大家可以查閱官方文檔

地址：https://www.dexplo.org/bar_chart_race/

streamlit+bar_chart_race

streamlit是我最近特別喜歡玩的一個機器學習應用開發(fā)框架，它能幫你不用懂得復雜的HTML,CSS等前端技術就能快速做出來一個炫酷的Web APP。

我之前開發(fā)的決策樹挑西瓜就是使用了streamlit

下面是streamlit+bar_chart_race整體結構

核心是app.py，代碼如下：

from?bar_chart_race?import?bar_chart_race?as?bcr
import?pandas?as?pd
import?streamlit?as?st
import?streamlit.components.v1?as?components

st.title('Bar?Chart?Race',?anchor=None)
uploaded_file?=?st.file_uploader("",?type="csv")

if?uploaded_file?is?not?None:
????df?=?pd.read_csv(uploaded_file,sep=',',?encoding='gbk')
????df?=?df.set_index("date")
????st.write(df.head(6))
????bcr_html?=?bcr.bar_chart_race(df=df,?n_bars=10)
????components.html(bcr_html.data,?width=800,?height=600)

最終效果大家親自體驗吧：

https://bar-chart-race-app.herokuapp.com/

三連在看，年入百萬。下期開講白嫖服務器+部署，敬請期待。