Try   HackMD

利用Streamlit建構數據視覺化面版 — 基礎

Table of Content

簡介

Streamlit是一個開源的Python函式庫。提供Python使用者可以在沒有前後端經驗的基礎之上快速建構一個網頁應用程式的途徑。在此之上,Streamlit還提供免費的社群雲端

,讓使用者可以快速的將一個GitHub專案佈署到社群雲端之上,並展示給其他人。

安裝

Streamlit需要在Python 3.7以上的環境才可以運行。使用者可以透過pip進行安裝。

pip install streamlit

第一個Streamlit視覺化面板

我們可以透過Seaborn所提供的資料集以及視覺化功能,結合Streamlit來將資料表以及各種圖表來呈現在網頁上。

取得數據

為了取得用於展示的數據,我們可以建構一個函式來根據指定的資料集來回傳指定的資料表:

import seaborn as sns def getData(DATASET_NAME): return sns.load_dataset(DATASET_NAME)

另外,為了獲取可以使用的資料集清單,我們需要建構一個函式來擷取可用的資料集名稱:

def getDatasetList(): return sns.get_dataset_names()

建構網頁面板

為了展示數據,我們需要有一個簡潔的面板來讓使用者可以從清單中選擇可用的資料集,並將使用者所選擇的資料集以表格的方式展現在網頁上。為此,網頁需要具有以下幾個元素:

  1. 標題及描述
  2. 輸入面板
  3. 顯示面板

接下來我們將透過建構對應的函式來設計相對應的面板。

標題及描述

在設定標題上,我們可以透過streamlit.title來設定網頁的標題,並利用streamlit.subheader來設定副標題。而描述的部份,Streamlit提供幾種方式,包括streamlit.text以及streamlit.markdown以及其他函式來顯示描述的文字。

接下來我們將透過建立setTitlesetSubHeadershowDataSummary以及showDatasetChoicesSection來為網頁添加標題、副標題以及描述。

import streamlit as st def setTitle(): st.title("Demo Streamlit Project.") def setSubHeader(): st.subheader("Using Streamlit to demonstrate Seaborn dataset.") def showDataSummary(selected_dataset): datset_summary = ''' The shape of dataset: Number of columns: {0}. Number of rows: {1}. '''.format(selected_dataset.shape[0], selected_dataset.shape[1]) st.markdown(datset_summary) def showDatasetChoicesSection(): st.markdown( "The dataset you selected:" )

輸入面板

為了能夠讓使用者選擇顯示的資料集,我們可以結合先前的getDatasetList以及streamlit.selectbox來建立一個下拉式選單物件。

def showSelectBox(): option = st.selectbox( 'Which dataset you want to display?', getDatasetList() ) return option

顯示面板

在使用者選擇了希望顯示的資料集之後,我們需要建立個物件用以顯示資料報表。我們可以透過建立一個showTable函式搭配streamlit.table函式來將表格顯示在網頁中。

def showTable(selected_dataset): st.table(selected_dataset)

整合並啟動程式

我們可以將上方的所有函式組合起來,並使用streamlit run指令來啟動應用程式。

完整程式碼

將上方的程式碼儲存成main.py之後,我們可以用以下指令來啟動應用程式。

streamlit run main.py

執行後,瀏覽器將會跳出一個視窗,並展示以下內容:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

一個基於Streamlit的簡單的資料視覺化小程式就完成了!

結語

在本文中,我們展示了最基本的Streamlit操作,未來我們將會繼續介紹如何利用Streamlit的各種功能來打造一個漂亮的資料面板。

tags: 技術隨筆 Python Streamlit Data Visualization Data Analysis