Zenn
📊

Morphのチュートリアルを横目に簡単なデータ可視化を試してみる

2025/02/19に公開
Docker
BigQuery
morph
tech

Morph

Build AI Apps in a Scalable Python Framework and Deploy Securely

  • Morphについてはこちらを参照
  • "モルフ"と読むそうです（ずっと"モーフ"だと思っていた）
  • まずは環境のセットアップと、簡単なデータの可視化のみをやって見ようと思います。

環境構築

Dockerを使って環境構築していきます。

ディレクトリ構成
mkdir morph
cd $_

tree
.
├── Dockerfile
├── compose.yaml
└── apps

各ファイルの内容

Dockerfile
FROM python:3.11-slim

RUN apt-get update && \
    apt-get install -y \
        fonts-ipafont \
        g++ \
        nodejs \
        npm \
    && apt-get autoremove -y \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

RUN pip install --no-cache-dir \
        "morph-data"
compose.yml
services:
  python3:
    build:
      context: .
    volumes:
      - type: bind
        source: "./apps"
        target: "/apps"
    ports:
      - "8080:8080"
      - "3000:3000"
    tty: true
    working_dir: /apps

イメージビルド & コンテナ起動

docker compsoe build --no-cache
docker compose up -d

Morphプロジェクト作成

コンテナに入る

docker exec -it morph-python3-1 bash

コンテナ内で操作

cd /apps
morph new morph-starter-app

Select the Python version for your project:
1: 3.9
2: 3.10
3: 3.11 (current)
4: 3.12
Enter the number of your choice. (default is [3.11]):
The selected Python [3.11] version will be used for the project.
Creating new Morph project...
Applying template to morph-starter-app2...

Select a package manager for your project:
1: pip
2: poetry
Enter the number of your choice. (default is [1: pip]):
Generating requirements.txt...
Created requirements.txt with 'morph-data'.

Project setup completed successfully! 🎉

サーバー起動

コンテナ内で操作

cd /apps/morph-starter-app
morph serve

起動完了を確認

✅ Done server setup

Morph is running!🚀

 ->  Local: http://localhost:8080

ブラウザで表示

http://localhost:8080へアクセス

データ可視化

BigQueryのデータを取得して可視化する、をやってみます。

接続情報設定

Google CloudよりサービスアカウントJSONを取得し、サーバ内に配置しておく

コンテナ内で操作

morph init

Select your database type:
1. PostgreSQL
2. MySQL
3. Redshift
4. SQLServer
5. Snowflake (User/Password)
6. BigQuery (Service Account)
Enter the number corresponding to your database type: 6

BigQuery (Service Account) selected.

Create a slug for your connection: feasibility_study_connection
Enter your BigQuery project ID: xxxxx
Enter your BigQuery keyfile path: /xxxx/xxxxx.json
Enter your BigQuery dataset name (Optional):
Enter your BigQuery location (Optional):
Successfully initialized! 🎉
You can edit your connection details in `/root/.morph/connections.yml`

新規ページの作成

プロジェクト内のsrcフォルダに格納されている

データ取得定義

sqlフォルダに記述

sql/feasibility_study_data.sql
{{
    config(
        name = "feasibility_study_data",
        connection = "feasibility_study_connection"
    )
}}

select
  event_title,
  event_date,
  event_year,
  count(attendees) as count_attendees
from
  event_attendees
group by
  all

データ加工、チャート生成

pythonフォルダに記述

python/feasibility_study_chart.py
import pandas as pd
import plotly.express as px

import morph
from morph import MorphGlobalContext


@morph.func
@morph.load_data("feasibility_study_data")
def feasibility_study_chart(context: MorphGlobalContext):
    df = context.data["feasibility_study_data"]
    sorted_years = sorted(df["feasibility_study_data"].astype(int))
    fig = px.bar(
        df,
        x="event_year",
        y="count_attendees",
        color="event_title",
        category_orders={"event_year": sorted_years}
    )
    fig.update_layout(showlegend=False)
    return fig

ページ作成

pagesフォルダに記述

pageds.feasibility_study_page
# Event Report

## Total Attendees by Year

<Embed
	loadData="count_attendees_chart"
	height={800}
	variables={{}} />

ブラウザで確認

左上のメニューにページが追加された

作成したページにチャートが表示された

Discussion