用 Python 創建交互式可視化大屏竟如此簡單

本文雲朵君將和大家一起學習一個專門爲數據科學家（機器學習工程師）設計的基於 Python 的三方庫 ---- Streamlit，它只需幾行代碼即可創建外觀精美的應用程序，非常方便實用。本文從安裝、常用方法介紹，到最後實現一個簡單的 demo，完整介紹該庫的使用方法。如果你對該方法感興趣，可在文末點贊留言，雲朵君將在後續將使用 Streamlit 演示一個完整機器學習實戰項目。

寫在前面

在數據可視化中，儀表板是出色的圖形用戶界面，以高度交互和信息豐富的方式幫助我們顯示信息，它有助於可視化數據的關鍵指標和趨勢。

各種圖表，例如條形圖、餅圖、折線圖等，有助於探索數據集並提供一些非常有價值的信息。儀表板對於有效顯示關鍵績效指標非常有用。然而，對於開發人員來說，創建一個複雜的儀表板可謂是一項乏味的任務。尤其對於對前端技術不熟悉的數據工作者來說，更是一件棘手的事情。

有一些庫，如 Python 中的 Plotly、Bokeh，可以用來創建儀表板。但是我發現這些工具難以創建一個完美的儀表板。最後，我找到了一些方法，不僅可以創建一個非常有效且信息豐富的儀表板，而且非常簡單方便。

初識 Streamlit

Streamlit 是一個免費的開源框架，用於快速構建和共享漂亮的機器學習和數據科學 Web 應用程序。它是一個專門爲機器學習工程師設計的基於 Python 的庫。數據科學家或機器學習工程師不是 Web 開發人員，對於他們中的大部分人並不太願意花費數週時間學習使用這些框架來構建 Web 應用程序。相反，他們想要一個更易於學習和使用的工具，只要它可以顯示數據並收集建模所需的參數。Streamlit 只需幾行代碼即可創建外觀精美的應用程序。

Streamlit 最好的一點是，甚至不需要了解 Web 開發的基礎知識即可開始或創建一個 Web 應用程序。 因此，如果你是數據科學領域的專家，並且想要輕鬆、快速地部署模型，並且只需要幾行代碼，那麼 Streamlit 非常適合。

使應用程序成功的重要方面之一是他爲我們提供了有效且直觀的用戶界面，無需採取複雜的步驟，特別是對於沒有前端知識的人將他們的代碼放入 Web 應用程序，構建驚豔的交互式可視化大屏：

• 無需前端（html、js、css）經驗或知識。

• 不需要花費數天或數月的時間來創建一個 Web 應用程序，可以在幾個小時甚至幾分鐘內創建一個非常漂亮的機器學習或數據科學應用程序。

• 它與大多數 Python 庫（例如 pandas、matplotlib、seaborn、plotly、Keras、PyTorch、SymPy(latex)）兼容。

• 只需要幾行代碼即能創建驚豔的 Web 應用程序

• 簡化數據緩存並加快了計算管道。

如果你對此非常感興趣，推薦你閱讀官方文檔，非常細緻詳細！

https://docs.streamlit.io/

設置 Streamlit

Win 用戶安裝和使用

首先將 Streamlit 安裝到系統並運行 hello 命令並驗證其工作狀態。可以使用 Ctrl+c 退出正在運行的應用程序。對於 windows 用戶，直至在 anaconda prompt 中運行：

$ pip install streamlit
$ streamlit hello

下面是命令提示符，可以看到應用程序正常運行。

當運行該應用程序時，本地主機服務器將自動在默認瀏覽器中打開。這是 Streamlit 應用程序開源框架的主頁。

在 macOS 和 linux 上安裝

在 macOS 上

#安裝pip：
sudo easy_install pip
#安裝pipenv：
pip3 install pipenv
#創建環境，打開項目文件夾：
cd project_folder_name
#創建一個 pipenv 環境：
pipenv shell
#鍵入此命令以安裝 Streamlit：
pip install streamlit
#測試安裝是否有效：
streamlit hello

在 Linux 上

#安裝pip：
sudo apt-get install python3-pip
#安裝pipenv：
pip3 install pipenv
#創建環境，打開項目文件夾：
cd project_folder_name
#創建一個 pipenv 環境：
pipenv shell
#鍵入此命令以安裝 Streamlit：
pip install streamlit
#測試安裝是否有效：
streamlit hello

使用 streamlit

導入庫

導入用於繪圖和顯示信息的必要庫。

import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px
from plotly.subplots import make_subplots
import plotly.graph_objects as go
import matplotlib.pyplot as plt

我們可以用不同的方式顯示文本。Streamlit 可以編寫標題、標題，並且還支持各種功能。接下來雲朵君將和大家一起一一學習如何使用。

使用 Streamlit 顯示文本

瞭解如何將文本添加到 Streamlit 應用程序，以及添加文本的不同命令。

st.write()：此函數用於向 Web 應用程序添加任何內容，從格式化字符串到 matplotlib 圖表、Altair 圖表、繪圖圖表、數據框、Keras 模型等中的圖表。

import streamlit as st
st.write("Hello ,let's learn how to build a streamlit app together")

• st.title()：用於添加應用程序的標題

• st.header()：用於設置節的標題

• st.subheader()：用於設置節的子標題

• st.text()：用於編寫特定圖形的描述

• st.markdown()：用於將文本顯示爲 Markdown

• st.latex()：用於在儀表板中顯示數學表達式

• st.write()：用於顯示所有內容，例如繪圖、數據框、函數、模型等

• st.sidebar()：用於在側邊欄上顯示數據

• st.dataframe()：用於顯示數據框

• st.map()：用於以單行代碼等顯示地圖

• st.caption()：用於寫字幕

• st.code()：用於設置密碼

st.title ("this is the app title")
st.header("this is the markdown")
st.markdown("this is the header")
st.subheader("this is the subheader")
st.caption("this is the caption")
st.code("x=2021")
st.latex(r''' a+a r^1+a r^2+a r^3 ''')

使用 Streamlit 顯示圖像、視頻或音頻文件

Streamlit 顯示圖像、視頻和音頻文件功能簡單實用。那它是如何使用 Streamlit 顯示媒體的呢？使用 Streamlit 顯示圖像、視頻或音頻文件

• st.image()：用於顯示圖像

• st.audio()：用於顯示音頻

• st.video()：用於顯示視頻

st.image("kid.jpg")
st.audio("Audio.mp3")
st.video("video.mp4")

輸入小部件

小部件是最重要的用戶界面組件。Streamlit 有各種各樣的小部件，允許通過按鈕、滑動條、文本輸入等直接將交互性嵌入到應用程序中。

• st.checkbox()：此函數返回一個布爾值。選中該框時，它返回 True 值，否則返回 False 值。

• st.button()：用於顯示按鈕小部件。

• st.radio()：用於顯示單選按鈕小部件。

• st.selectbox()：用於顯示選擇小部件。

• st.multiselect()：用於顯示多選小部件。

• st.select_slider()：用於顯示選擇滑塊小部件。

• st.slider()：用於顯示滑塊小部件。

st.checkbox('yes')
st.button('Click')
st.radio('Pick your gender',['Male','Female'])
st.selectbox('Pick your gender',['Male','Female'])
st.multiselect('choose a planet',['Jupiter', 'Mars', 'neptune'])
st.select_slider('Pick a mark', ['Bad', 'Good', 'Excellent'])
st.slider('Pick a number', 0,50)

• st.number_input()：用於顯示數字輸入小部件

• st.text_input()：用於顯示文本輸入小部件

• st.date_input()：用於顯示日期輸入小部件以選擇日期

• st.time_input()：用於顯示時間輸入小部件以選擇時間

• st.text_area()：用於顯示具有多行文本的文本輸入小部件

• st.file_uploader()：用於顯示文件上傳器小部件

• st.color_picker()：用於顯示顏色選擇器小部件以選擇顏色

st.number_input('Pick a number', 0,10)
st.text_input('Email address')
st.date_input('Travelling date')
st.time_input('School time')
st.text_area('Description')
st.file_uploader('Upload a photo')
st.color_picker('Choose your favorite color')

使用 Streamlit 顯示進度和狀態

看到如何嚮應用程序添加進度條和狀態消息，例如錯誤和成功。

• st.balloons()：用於顯示氣球慶祝

• st.progress()：用於顯示進度條

• st.spinner()：用於在執行期間顯示臨時等待消息

st.balloons()
st.progress(10)
with st.spinner('Wait for it...'):
    time.sleep(10)

• st.success()：用於顯示成功消息

• st.error()：用於顯示錯誤消息

• st.warnig()：用於顯示警告信息

• st.info()：用於顯示信息性消息

• st.exception()：用於顯示異常消息。

st.success("You did it !")
st.error("Error")
st.warnig("Warning")
st.info("It's easy to build a streamlit app")
st.exception(RuntimeError("RuntimeError exception"))

側邊欄和容器

還可以在頁面上創建側邊欄或容器來組織應用程序。應用上頁面的層次結構和排列可能會對用戶體驗產生很大影響。通過組織內容，可以讓訪問者瞭解和瀏覽網站，這有助於他們找到他們正在尋找的內容並增加他們將來返回的可能性。

側邊欄

傳遞一個元素st.sidebar()會使這個元素固定在左邊，讓用戶專注於你應用中的內容。

但是st.spinner() 和st.echo() 不支持 st.sidebar。

可以在應用程序界面中創建一個側邊欄並在其中放置元素，這將的應用程序更有條理且更易於理解。

容器

st.container()用於創建一個不可見的容器，可以在其中放置元素以創建有用的排列和層次結構。

顯示圖表 Streamlit

• st.pyplot()：用於顯示 matplotlib.pyplot 圖。

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

rand=np.random.normal(1, 2, size=20)
fig, ax = plt.subplots()
ax.hist(rand, bins=15)
st.pyplot(fig)

• st.line_chart()：用於顯示折線圖

df= pd.DataFrame(
    np.random.randn(10, 2),
    columns=['x', 'y'])
st.line_chart(df)

• st.bar_chart()：用於顯示條形圖

• st.area_chart()：用於顯示面積圖

• st.altair_chart()：用於顯示海拔高度圖

df = pd.DataFrame(
   np.random.randn(500, 3),
   columns=['x','y','z'])

c = alt.Chart(df).mark_circle().encode(
   x='x' , 'y'=y , size='z', color='z', tooltip=['x', 'y', 'z'])
st.altair_chart(c, use_container_width=True)

• st.graphviz_chart()：用於顯示圖形對象，可以使用不同的節點和邊來完成。

import streamlit as st
import graphviz as graphviz
st.graphviz_chart('''
    digraph {
        Big_shark -> Tuna
        Tuna -> Mackerel
        Mackerel -> Small_fishes
        Small_fishes -> Shrimp
    }
''')

使用 Streamlit 顯示地圖

• st.map()：用於在應用程序中顯示地圖。但是，它需要緯度和經度的值，並且這些值不能爲空值。

import pandas as pd
import numpy as np
import streamlit as st
df = pd.DataFrame(np.random.randn(500, 2) / [50, 50] + [37.76, -122.4],
columns=['lat', 'lon'])
st.map(df)

應用案例

加載數據集

在這裏，我們將使用 COVID-19 數據集進行儀表板可視化。

@st.cache(suppress_st_warning=True)
def load_data():
    data = pd.read_csv('COVID-19-global-data.csv')
    return data
covid_data = load_data()

案例數據可視化

st.sidebar.checkbox("世衛組織冠狀病毒 (COVID-19) 儀表板", True, key=1)
df = covid_data.groupby(by=['Country']).sum().reset_index()
select = st.sidebar.selectbox('選擇一個國家', df['Country'])

# 獲取選擇框選中的狀態
state_data = df[df['Country'] == select]
select_status = st.sidebar.radio("世衛組織冠狀病毒 (COVID-19)病例",
                                 ('新增病例', '累計病例', '新增死亡病例', '累計死亡病例'))

使用複選框來選擇按狀態進行的分析。選擇框將顯示受 COVID-19 影響的狀態列表。用於選擇活動、已確認、死亡或已恢復案例的單選按鈕。

繪製圖形

def get_total_dataframe(dataset):
    total_dataframe = pd.DataFrame({
        '病例分類': ['新增病例', '累計病例', '新增死亡病例', '累計死亡病例'],
        '病例數': (dataset.iloc[0]['New_cases'],
                dataset.iloc[0]['Cumulative_cases'],
                dataset.iloc[0]['New_deaths'], dataset.iloc[0]['Cumulative_deaths'])})
    return total_dataframe

state_total = get_total_dataframe(state_data)

if st.sidebar.checkbox("世衛組織冠狀病毒 (COVID-19) 儀表板", True, key=2):
    st.markdown("## **世衛組織冠狀病毒 (COVID-19) 儀表板**")
    st.markdown("### %s 國家總新增病例、累計病例、新增死亡病例和累計死亡病例" % (select))
    if not st.checkbox('Hide Graph', False, key=1):
        state_total_graph = px.bar(
            state_total,
            x='病例分類',
            y='病例數',
            labels={'病例數': '%s 國家的總病例數' % (select)},
            color='病例分類')
        st.plotly_chart(state_total_graph)

執行此代碼後，可以根據需要的狀態選擇案例。get_total_dataframe 方法用於獲取數據集以繪製所選狀態的圖形。

爲了繪製圖形，使用了 plotly.express 庫方法。最後，使用 st.plotly_chart() 顯示圖形。

顯示數據框或表格

我們還可以使用 st.dataframe() 和 st.table() 在表格視圖中查看數據框。

def get_table():
    datatable = df.sort_values(by=['Cumulative_cases'], ascending=False)
    return datatable

datatable = get_table()
st.markdown("### 世界各國家的Covid-19病例分析")
st.markdown("下表爲您提供了 %s 國家Covid-19總新增病例、累計病例、新增死亡病例和累計死亡病例的實時分析。"% (select))
st.dataframe(datatable) # will display the dataframe
st.table(state_total)# will display the table

寫在最後

Streamlit 是近年來增長最快的機器學習和數據科學儀表板構建平臺，它也是最好的儀表板庫之一。我們可以嘗試使用不同的數據集來創建交互式儀表板。如果你對該方法感興趣，可在文末點贊留言，雲朵君將在後續將使用 Streamlit 演示一個完整機器學習實戰項目。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/9hkN2zvfM3QTjJkY4BuYMQ