【Python】読み込んだデータファイルの内容をグラフで可視化できるWebアプリ作成【データ解析】

Google ChromeやSafariといったブラウザ上で、手持ちのデータからグラフを表示したり、データの解析を行ってみたいと思いませんか？

streamlitというpythonのライブラリを用いると、ブラウザ上でデータ解析ができるWebアプリを簡単に作れるようになるんです。

今回は、データファイル（csv）を読み込み、その内容をブラウザにグラフとして表示するところまでを扱います。Webアプリでデータ解析ができるようになりますよ！

動作検証済み環境

macOS Monterey(12.4), python3.7.10

Streamlitで作るデータ解析Webアプリの技術書を販売中

¥2,000 → ¥1,000 今なら50%OFF!!

データ解析をアプリで行う！
データ解析とグラフ描画を自動でしてくれるアプリが作れます！

技術書ページへ

データファイル（csv）を読み込んで、その内容をブラウザにグラフとして表示するアプリとは？

完成物

上のように、ドラッグ＆ドロップでCSVファイルをアップロードでき、かつその内容をグラフで可視化してくれるようなアプリを作ります。
こちらで用意したtemp_Kyoto_2018.csv というCSVファイルをアップロードした結果、上のような2018年の京都の気温のグラフが表示されています。

ちなみにですが、グラフ右上にある「・・・」のボタンをクリックすると、グラフをpngもしくはsvgの画像データとして保存することが可能となっています。

上記のようなことができるアプリが簡単に実装できちゃうんです！
※ローカル環境なので、データが漏洩することはないです。

アプリの作成方法

ソースコード

以下のように、streamlitとpandasとaltairのライブラリを使って実装するだけです。

以下のコードをweb_plot.py というファイル名で Desktop/labcode/python/web-data-analysis/Input_and_plot ディレクトリに保存します。

import streamlit as st
import pandas as pd
import altair as alt

# グラフの描画用関数を定義
def get_chart(data):
    hover = alt.selection_single(
        fields=["month"],
        nearest=True,
        on="mouseover",
        empty="none",
    )

    lines = (
        alt.Chart(data, title="temperature")
        .mark_line()
        .encode(
            x="month",
            y="temperature",
            color="symbol",
            strokeDash="symbol",
        )
    )

    # Draw points on the line, and highlight based on selection
    points = lines.transform_filter(hover).mark_circle(size=65)

    # Draw a rule at the location of the selection
    tooltips = (
        alt.Chart(data)
        .mark_rule()
        .encode(
            x="month",
            y="temperature",
            opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
            tooltip=[
                alt.Tooltip("month", title="Month"),
                alt.Tooltip("temperature", title="Temp (degree)"),
            ],
        )
        .add_selection(hover)
    )

    return (lines + points + tooltips).interactive()


# ページのタイトル（なくてもいい）
st.title('My first Streamlit app')
# ファイルアップローダーの準備
uploaded_file = st.file_uploader("CSVファイルのアップロード", type="csv")


# uploadファイルが存在するときだけ、csvファイルの読み込みがされる。
if uploaded_file is not None:
	　　　　# コメント行をスキップして読み込んでくれる
    dataframe = pd.read_csv(uploaded_file, comment="#")
    chart = get_chart(dataframe)
    st.altair_chart(chart, use_container_width=True)

プログラムを実行する

ターミナルを開き、

$ cd Desktop/labcode/python/web-data-analysis/Input_and_plot

と入力し、ディレクトリを移動します。あとは以下のコマンドでstreamlitを起動させるだけです。（ $マークは無視してください）

$ streamlit run web_plot.py

少しすると自動的にブラウザで http://localhost:8501/ のページが開かれて、上でお見せしたページが表示されると思います。これだけです！

アップロードするCSVファイル

以下のCSVファイルを使ってみると同じ結果が得られるかと思います。

temp_kyoto_2018.csv という名前でファイルをご自身のPCの Desktop/labcode/python/web-data-analysis/Input_and_plot フォルダに保存してから、アップロードを試みてください。

# averaged temperature in 2018 @ Kyoto city
symbol,month,temperature
AGRG,1,3.9
AGRG,2,4.4
AGRG,3,10.9
AGRG,4,16.4
AGRG,5,20.0
AGRG,6,23.4
AGRG,7,29.8
AGRG,8,29.5
AGRG,9,23.6
AGRG,10,18.7
AGRG,11,13.5
AGRG,12,8.2
MAX,1,8.0
MAX,2,9.3
MAX,3,17.0
MAX,4,22.5
MAX,5,25.3
MAX,6,28.3
MAX,7,35.0
MAX,8,35.0
MAX,9,27.4
MAX,10,23.6
MAX,11,18.3
MAX,12,12.1
MIN,1,0.7
MIN,2,0.4
MIN,3,5.6
MIN,4,11.1
MIN,5,15.5
MIN,6,19.4
MIN,7,25.8
MIN,8,25.5
MIN,9,20.6
MIN,10,14.7
MIN,11,9.5
MIN,12,4.9

streamlit, altairのインストール方法

ライブラリをインターネット上から自身のPCにダウンロードしていないと、たとえ import streamlit as st と記述しても使えません。
ライブラリがないよ！という旨のエラーが出た場合は、pip installを使ってダウンロードしましょう。実行するディレクトリはどこでもOKです。

複数のライブラリを一度にまとめてインストールするには、以下のようにスペースを間にもうけて並べるとよいです。

$ pip install streamlit altair

しばらくして、Successfullyという文言が出て来れば完了です。

コードの解説

上に書いたソースコードの解説をしていきます。

# uploadファイルが存在するときだけ、csvファイルの読み込みがされる。
if uploaded_file is not None:
	　　　　# コメント行をスキップして読み込んでくれる
    dataframe = pd.read_csv(uploaded_file, comment="#")
    chart = get_chart(dataframe)
    st.altair_chart(chart, use_container_width=True)

ソースコードで最も重要な部分になります。ファイルがアップロードされたときだけ、if文以下の処理を実行します。
csvを読み込み、Dataframe型に変換し、dataframe変数に格納します。
定義した関数 get_chart() に dataframeを渡して、 st.altair_chart() でグラフを描画します。
get_chart() に関しては以下で説明します。

# グラフの描画用関数を定義
def get_chart(data):
    hover = alt.selection_single(
        fields=["month"],
        nearest=True,
        on="mouseover",
        empty="none",
    )
		
		# グラフの描画のメインの記述
    lines = (
        alt.Chart(data, title="temperature")
        .mark_line()
        .encode(
            x="month",
            y="temperature",
            color="symbol",
            strokeDash="symbol",
        )
    )

    # 線上に点を描画し、選択範囲に応じてハイライト表示
    points = lines.transform_filter(hover).mark_circle(size=65)

    # 選択部分の位置に罫線を引く+ツールチップを表示
    tooltips = (
        alt.Chart(data)
        .mark_rule()
        .encode(
            x="month",
            y="temperature",
            opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
            tooltip=[
                alt.Tooltip("month", title="Month"),
                alt.Tooltip("temperature", title="Temp (degree)"),
            ],
        )
        .add_selection(hover)
    )

    return (lines + points + tooltips).interactive()

get_chart()はどんなグラフを描画するかを設定する関数です。
いろいろ書かれていますが、 linesの部分がグラフ描画のメインになり、それ以外は見た目をかっこよくする部分だと解釈していただければと思います。

points も tooltips もグラフの上にカーソルをもってきたとき（ホバー時）にどう表現するかを記述しています。 points ではホバー時にグラフの線上に点を表示させるようにしています。
点のサイズはここでは 65 に設定しています。
tooltipsではホバー時に、ホバー箇所の罫線を薄くしたり、白枠（ツールチップ）を表示させるようにしています。↓このように。

最後に、関数の返り値として (lines + points + tooltips).interactive() をリターンします。

最後に

streamlitというpythonのライブラリを用いてWebアプリを簡単に作る方法をご紹介しました。

今回は、データファイル（csv）を読み込んで、そのデータの内容をグラフとして描画するところまでを扱いましたが、streamlitに習熟するともっとリッチな機能のアプリを作ることができるようになります。
今回ご紹介した折線グラフ以外のグラフ描画に挑戦したい場合は、Altairの公式ページのGallaryを参考にするといいと思います。ソースコードも載せてくれていますよ。

どんどんできることを増やして、自分専用のデータ解析アプリを作れるようにしていきましょう！

Streamlitで作るデータ解析Webアプリの技術書を販売中

¥2,000 → ¥1,000 今なら50%OFF!!

データ解析をアプリで行う！
データ解析とグラフ描画を自動でしてくれるアプリが作れます！

技術書ページへ