<jupyter_start><jupyter_text>データの可視化Streamlitによる、データの様々な可視化方法を学びます。  ●ライブラリのインストールStreamlit、およびアプリの動作の確認に使用する「ngrok」をインストールします。<jupyter_code>!pip install streamlit==1.7.0 --quiet
!pip install pyngrok==4.1.1 --quiet<jupyter_output><empty_output><jupyter_text>Streamlit、およびngrokをインポートしておきます。  エラーが発生する場合は、「ランタイム」→「ランタイムを再起動」によりランタイムを再起動し、再びコードセルを上から順に実行しましょう。<jupyter_code>import streamlit as st
from pyngrok import ngrok<jupyter_output><empty_output><jupyter_text>●データの可視化様々なデータ可視化のコードを、「app.py」に書き込みます。<jupyter_code>%%writefile app.py
# 以下を「app.py」に書き込み
import streamlit as st
import numpy as np
import pandas as pd

# ---------- 変数の記述による表示（magic command） ----------
st.title("Magic command")
df = pd.DataFrame({
    "col1": [11, 12, 13, 14],
    "col2": [111, 112, 113, 114]
})
df

# ---------- st.write()　は万能の働き ----------
st.title("st.write()")
st.write("st.write()を使ってみましょう！")
st.write(pd.DataFrame({
    "col1": [11, 12, 13, 14],
    "col2": [111, 112, 113, 114]
}))

# ---------- st.dataframe()　はインタラクティブな表の描画 ----------
st.title("st.dataframe()")
dataframe = pd.DataFrame(
    np.random.randn(8, 8),
    columns=("col"+str(i) for i in range(8)))
st.dataframe(dataframe.style.highlight_max(axis=0))

# ---------- st.table()　は静的な表の描画 ----------
st.title("st.table()")
dataframe = pd.DataFrame(
    np.random.randn(8, 8),
    columns=("col"+str(i) for i in range(8)))
st.table(dataframe)

# ---------- st.line_chart()は折れ線グラフの描画 ----------
st.title("st.line_chart()")
chart = pd.DataFrame(
    np.random.randn(16, 4),
    columns=("line"+str(i) for i in range(4)))
st.line_chart(chart)

# ---------- st.map()は地図の描画 ----------
st.title("st.map()")
map = pd.DataFrame(
    [35.658584, 139.7454316] + np.random.randn(100, 2)/100,  # 東京タワー周辺の緯度、経度
    columns=["lat", "lon"])
st.map(map)

# ---------- st.latex()は数式の描画 ----------
st.title("st.latex()")
st.latex(r"""
E  = \frac{1}{2}\sum_{j=1}^m \Bigl(\sum_{k=0}^n a_kx_j^k - t_j\Bigr)^2
     """)  # 「r」を付けてraw文字列に<jupyter_output><empty_output><jupyter_text>●Authtokenの設定ngrokで接続するために必要な「Authtoken」を設定します。  以下のコードの、  `!ngrok authtoken YourAuthtoken`  における  `YourAuthtoken`の箇所を、自分のAuthtokenに置き換えます。  Authtokenは、ngrokのサイトに登録すれば取得することができます。  https://ngrok.com/<jupyter_code>!ngrok authtoken YourAuthtoken<jupyter_output><empty_output><jupyter_text>●アプリの起動と動作確認streamlitの`run`コマンドでアプリを起動します。<jupyter_code>!streamlit run app.py &>/dev/null&  # 「&>/dev/null&」により、出力を非表示にしてバックグランドジョブとして実行<jupyter_output><empty_output><jupyter_text>ngrokのプロセスを終了した上で、新たにポートを指定して接続します。  接続の結果、urlを取得できます。  ngrokの無料プランでは同時に1つのプロセスしか動かせないので、エラーが発生した場合は「ランタイム」→「セッションの管理」で不要なGoogle Colabのセッションを修了しましょう。<jupyter_code>ngrok.kill()  # プロセスの修了
url = ngrok.connect(port="8501")  # 接続<jupyter_output><empty_output><jupyter_text>urlを表示し、リンク先でアプリが動作することを確認します。<jupyter_code>print(url)<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.20685997171145687, 'fraction_numerical': 0.033946251768033946, 'mean_word_length': 4.99364406779661, 'pattern_counts': {'":': 4, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '7', 'dir': 'jupyter-structured-clean-dedup', 'id': '617136', 'license': 'MIT', 'n_tokens_mistral': 1581, 'n_tokens_neox': 1506, 'n_words': 143, 'path': 'section_2/02_data_visualization.ipynb', 'repo_name': 'yukinaga/ai_webapp', 'size': '2828'}