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

:::spoiler Table of Content
[TOC]
:::

## 簡介

[Streamlit](https://streamlit.io/)是一個開源的Python函式庫。提供Python使用者可以在沒有前後端經驗的基礎之上快速建構一個網頁應用程式的途徑。在此之上，[Streamlit](https://streamlit.io/)還提供免費的社群雲端[:link:](https://streamlit.io/cloud)，讓使用者可以快速的將一個GitHub專案佈署到社群雲端之上，並展示給其他人。

## 安裝

[Streamlit](https://streamlit.io/)需要在Python 3.7以上的環境才可以運行。使用者可以透過`pip`進行安裝。

pip install streamlit

## 第一個Streamlit視覺化面板

我們可以透過[Seaborn](https://seaborn.pydata.org/)所提供的資料集以及視覺化功能，結合[Streamlit](https://streamlit.io/)來將資料表以及各種圖表來呈現在網頁上。

### 取得數據

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

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`以及其他函式來顯示描述的文字。

接下來我們將透過建立`setTitle`、`setSubHeader`、`showDataSummary`以及`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`指令來啟動應用程式。

:::spoiler 完整程式碼
{%gist e434180890ca68f84695de15e7d8fbe7%}
:::

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

streamlit run main.py

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

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

## 結語

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

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