Arakawa 101 Or How To Build a Data App by Python
Agenda
Arakawa 101
How To build a data app by Python (or how Arakawa, Steamlit, Dash, etc. work)
What Is Data App?
ChatGPT says:
「データアプリ」とは、データを対話的に表示、分析、視覚化するために特別に設計されたアプリケーションを指します。これらのアプリケーショ
ンは、データサイエンティスト、アナリスト、開発者がダッシュボード、レポート、およびインサイトを伝えるのに役立つインタラクティブツール
を作成するためによく使用されます。Streamlit
は、そのようなデータアプリを構築するための人気のあるフレームワークの一つです。
Key Features of Data Apps
Interactivity
データアプリは、ユーザーがデータの視覚化や分析をリアルタイムで操作できるように、スライダー、ドロップダウン、ボタンなどのインタラクティ
ブな要素をしばしば含んでいます。
Data Visualization
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 1/24
Slide 2
Slide 2 text
シンプルなチャートやグラフから複雑でダイナミックな多次元ビジュアライゼーションまで、様々なビジュアライゼーションを作成するためのツー
ルを提供します。
Ease of Use
Streamlit
のようなフレームワークは、最小限のコードでアプリを迅速に構築して展開できるようにユーザーフレンドリーに設計されています。
Example Use Cases
Dashboarding
ビジネスメトリクス、財務データ、運用パフォーマンスを監視するためのダッシュボード作成。
Data Exploration
データセットをインタラクティブに探索するツールを構築し、ユーザーがデータをさまざまな方法でフィルタリングして視覚化できるようにする。
Arakawa 101
Arakawa
は、純粋な Python
でスタンドアロンのデータアプリを作成するためのライブラリです。
スタンドアロンとは、バックエンド（例: Flask, FastAPI
など）なしでアプリが機能することを意味します。
Acknowledgements
Note
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 2/24
Slide 3
Slide 3 text
Arakawa
は datapane/datapane
のフォークで、Datapane
の作成者から正式にフォーキングおよび名前変更の許可を得ています。
Why Forking?
シンプルな回答は、Datapane
の開発が停止された一方で私はそのユーザーであるためです。
Datapane launched
Datapana v0.2.76 has been published on PyPI.
2020/05
Started using Datapane
My team has started using Datapane in an in-house
project.
2022/12
Datapane declared EOL
2023/09
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 3/24
Slide 4
Slide 4 text
Why Renaming?
The project name is too similar to an existing project and may be confusable. PyPI
エラーを避けるため.
プロジェクト名が既存のプロジェクトに似ている場合、PyPI
はリリースを拒否します。
例えば、miniset
という名前でプロジェクトを公開しようとしましたが、mindset
という奇妙なプロジェクトがあるため拒否されました。
商標問題を避けるため。 (
地名が商標として認められることはない?)
Why Arakawa/Datapane?
Arakawa
は静的な HTML
レポートを作成します。これは、plotly/dash
や streamlit/streamlit
などの動的データアプリに比べて以下の利点がありま
す：
Datapane announced the discontinue of the project.
Reborn as Arakawa
Arakawa has been published on PyPI.
2024/10
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 4/24
Slide 5
Slide 5 text
Arakawa creates a static HTML report. Which has benefits over dynamic data apps such as plotly/dash and streamlit/streamlit:
コスト削減（Streamlit & Dash
のように Web
アプリを実行する必要はありません）
共有が簡単（HTML
を送るだけ）
What's New in Arakawa
Pandas v1 to v2.
NumPy v2 (support both v1 and v2).
RELAX NG ( lxml ) to Pydantic.
Misc.:
Bokeh v2 to v3.
Apache Arrow v9 to v18.
CodeMirror v5 to v6.
Vite v3 to v6.
Demo
Demo
詳細は公式ドキュメントをご覧ください。
Standard, In-House CDN and Standalone Modes
Standard mode
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 5/24
Slide 6
Slide 6 text
このモードは https://cdn.jsdelivr.net/npm/arakawa@{VERSION}/dist
か らアセットをロードします。
In-House CDN mode
import arakawa as ar
report = ar.Report(ar.Text("Hello, world!"))
report.save("report.html", cdn_base="http://...")
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 6/24
Slide 7
Slide 7 text
Standalone mode
スタンドアロンモードではアセットが HTML
ファイルにインライン展開されるため、レポートのサイズが大幅に増加します。
How To Create a Data App by Python
それでは、次のライブラリを見て、これがどのように設計されているかを理解しましょう:
Arakawa/Datapane
Streamlit
Dash
pydantic/FastUI (
厳密にはこれはデータアプリではありませんが)
report.save("report.html", standalone=True)
Note
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 7/24
Slide 8
Slide 8 text
Data App Internals
Python:
Python
オブジェクトを使用してデータをレイアウトします。
Python
オブジェクトをシリアライズします。
Bridging:
シリアライズされたオブジェクトを転送します。
Frontend:
シリアライズされたオブジェクトを JavaScript
オブジェクトにで Siri
アライズします（optional
）
。
JavaScript
オブジェクトをレンダリングします（オブジェクトをコンポーネントに変換します）
。
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 8/24
Slide 9
Slide 9 text
Data Layout
Name How
Arakawa Pydantic
Datapane POPO
Streamlit POPO
Dash POPO
FastUI Pydantic
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 9/24
Slide 10
Slide 10 text
POPO
は Plain Old Python Object
の略です。
Serialization
Name How
Arakawa JSON (Pydantic)
Datapane XML (lxml / RELAX NG)
Streamlit Protobuf
Dash JSON
FastUI JSON (Pydantic)
Arakawa
は JSON
としてシリアライズされます:
Note
import arakawa as ar
ar.Report(ar.Text("Hello, world!"))
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 10/24
Slide 11
Slide 11 text
Datapane
は XML
としてシリアライズされます:
Streamlit
{
"blocks": [
{
"content": "Hello, world!",
"_type": "Text"
}
],
"_type": "View",
"fragment": false,
"version": 1
}
import datapane as dp
dp.Report(dp.Text("Hello, world!"))
# test2.py
import streamlit as st
st.text("Hello, world!")
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 11/24
Slide 12
Slide 12 text
は Protobuf
でシリアライズされます:
0a206336323266336238653032306362313661616462396233303666323438303535122612020000222037383363363064346534623164306165633430623539
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 12/24
Slide 13
Slide 13 text
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 13/24
Slide 14
Slide 14 text
デコードされた Protobuf
データにHello, world!
が含まれていることがわかります。
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 14/24
Slide 15
Slide 15 text
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 15/24
Slide 16
Slide 16 text
Dash
は JSON
としてシリアライズされます:
from dash import Dash, html
app = Dash()
app.layout = [
html.P("Hello, world!"),
]
if __name__ == "__main__":
app.run(debug=True)
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 16/24
Slide 17
Slide 17 text
FastUI
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastui import FastUI, prebuilt_html
from fastui import components as c
c.ModelForm.model_rebuild()
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 17/24
Slide 18
Slide 18 text
は JSON
としてシリアライズされます:
app = FastAPI()
@app.get("/api/", response_model=FastUI, response_model_exclude_none=True)
def api_index():
return c.Page(components=[c.Markdown(text="Hello, world!")])
@app.get("/{path:path}")
async def html_landing() -> HTMLResponse:
return HTMLResponse(prebuilt_html(title="FastUI Demo"))
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 18/24
Slide 19
Slide 19 text
Data Transfer
Name How
Arakawa JSON in HTML
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 19/24
Slide 20
Slide 20 text
Name How
Datapane XML/JSON in HTML
Streamlit WebSocket & REST API (Tornado)
Dash HTTP/REST API (Flask)
FastUI HTTP/REST API (FastAPI)
Arakawa
...
...
window.reportProps = {
id: "933e323547624153a21d16d1f1c275bf",
htmlHeader,
isLightProse: false,
mode: "VIEW",
reportWidthClass: "max-w-screen-xl",
};
window.reportProps["appData"] = {
data: {
result: {
viewJson: {
blocks: [
{
1/20/25, 1:19 PM Arakawa 101 Or How To Build a Data App by Python
127.0.0.1:8000 20/24