--- title: marimo ノートブックで機械学習 (3) tags: #marimo #python author: [荒木 雅弘](https://www.docswell.com/user/MasahiroAraki) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/G7893V14JD.jpg?width=480 description: 新しい Python の notebook 環境である marimo の解説スライドを、marimo を使って作成しました。 published: December 14, 25 canonical: https://www.docswell.com/s/MasahiroAraki/5QXDWR-2025-12-14-135619 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/G7893V14JD.jpg) 2025/12/15 9:22 slide3.py marimo ノートブックで機械学習 (3) 127.0.0.1:2718 1/1 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/L7LWV5QVER.jpg) 2025/12/15 9:22 slide3.py はじめに このスライドは、marimo（アプリのスライドモード）で作成したものです 1つのマークダウンセルが1ページのスライドになります 印刷は PDF で1ページずつで出力して貼り合わせています 元になった文章は note で公開しています marimo ノートブックで機械学習 (3) 【注意】 marimo を用いたコードは、荒木雅弘 : 『Pythonではじめる機械学習』 （森北出版, 2025）には含まれ ておりません。本ドキュメントは、同書の補足資料です。 127.0.0.1:2718 1/1 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/4EM9G31N7W.jpg) 2025/12/15 9:26 slide3.py 内容 ページ下部のリンク先のノートブックでは、2章「機械学習の基本的な手順」をベースに、評価法の選択・学習 の内容を用いて、marimo の特徴を説明 本スライドでは、上記内容を marimo の機能ごとに並べ替えて紹介 基本的な UI 部品 DataFrame の扱い データの可視化 🍃 Open in molab 127.0.0.1:2718 1/1 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/PERGZQL479.jpg) 2025/12/15 9:26 slide3.py 基本的な UI 部品 dropdown メニュー dropdown メニューは、マウスによってメニューを下方向に開き、そのうちのひとつを選択するもの options : 選択肢をリストまたは辞書で定義 value : 初期値 label : メニューの左に表示する文字列 以下の例は scikit-learn の toydata set のうち、4つの識別用データセットから1つを選択するもの dropdown_dict = mo.ui.dropdown( options={"iris": load_iris, "digits": load_digits, "wine": load_wine, "breast_cancer": l value="iris", label="Choose dataset", )  Choose dataset 127.0.0.1:2718  iris 1/1 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/P7XX95WZ7X.jpg) 2025/12/15 9:26 slide3.py tab を用いた表示の切り替え tab は、ユーザーの選択によって表示内容を切り替えるもの 引数は辞書形式で、キーがタブのラベル、値が各タブで表示する内容になる 以下の例は、レベルが異なるユーザに向けてデータの説明を LLM で生成するもの 使用する LLM を dropdown メニューで選択（LMStudio, OpenAI API を使う場合は、それぞれ設定が必要） タブで初学者・中級者・上級者を切り替えると、それぞれの対象に向けた説明が出力される prompt = [ "以下の内容を日本語で100字程度にまとめてください。やさしいお姉さんが...", "以下の内容を日本語で200字程度にまとめてください。男子大学生が...", "以下の内容を、専門用語を交えながら、機械学習を実行する観点で..." ] tabs = mo.ui.tabs({ "初学者": explain_data(prompt[0]+"\n"+toydata.DESCR), "中級者": explain_data(prompt[1]+"\n"+toydata.DESCR), "上級者": explain_data(prompt[2]+"\n"+toydata.DESCR) }) 127.0.0.1:2718 1/1 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/37KWP6VV7D.jpg) 2025/12/15 9:26 slide3.py tab を用いた表示の切り替えの動作例 使用するLLM 初学者 OpenAI API 中級者 上級者 アイリスデータは、アヤメ150個（3種類×各50）を萼片と花弁の長さ・幅の4つの数値で記録したものよ。花弁の長さ・幅が特に種類をよく分けるの。欠損なしで、フィッシ ャーさんの有名なデータね。 127.0.0.1:2718 1/1 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/LJ31X8QQE5.jpg) 2025/12/15 9:27 slide3.py slider による値の設定 slider は、マウスでツマミ（ハンドル）を動かして、数値の範囲（最小値〜最大値）を設定するもの start : 左端の値（最小値） stop : 右端の値（最大値） value : 初期値 step : ステップ幅 label : slider の左に表示する文字列 eval_ratio = mo.ui.slider(start=10, stop=90, value=30, step=10, label="評価用データの割合") 127.0.0.1:2718 1/1 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/8JDX2M9W7G.jpg) 2025/12/15 9:27 slide3.py slider による値の設定の動作例 評価用データの割合 127.0.0.1:2718 1/1 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/VEPP1RZXE8.jpg) 2025/12/15 9:27 slide3.py DataFrame の扱い pandas や polars の DataFrame を marimo で出力すると、いくつかの特別な操作が可能になる 例： 列ごとの並べ替えやフィルタリング toydata = dropdown_dict.value() df = pd.DataFrame( data=toydata.data, columns=toydata.feature_names ) df["target"] = toydata.target df 127.0.0.1:2718 1/1 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/27V2YRW37Q.jpg) 2025/12/15 9:27 slide3.py sepal length (cm) sepal width (cm) petal length (cm) petal width (cm) target float64 float64 float64 float64 int64 4.3 5.8 7.3 2 3 3.8 1 4.35 6.1 0.1 1.3 2.3 0 5.1 3.5 1.4 0.2 0 4.9 3 1.4 0.2 0 4.7 3.2 1.3 0.2 0 4.6 3.1 1.5 0.2 0 5 3.6 1.4 0.2 0 5.4 3.9 1.7 0.4 0 4.6 3.4 1.4 0.3 0 5 3.4 1.5 0.2 0 4.4 2.9 1.4 0.2 0 4.9 3.1 1.5 0.1 0 150 rows, 5 columns 10 127.0.0.1:2718 / page Page 1 1 2 of 15 Download 1/2 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/5JGR9MDY7L.jpg) 2025/12/15 9:28 slide3.py データの可視化 データ可視化ライブラリ Altair や、Plotly を用いたインタラクティブなグラフ表示が行える 以下の例は、上記 dropdown メニューで選択した高次元のデータを PCA（本文11.2節で説明）で2次元に削減 して散布図を描画 マウスオーバーで、各点の値が表示される mo.ui.altair_chart() で作成したコンポーネントは、value 属性で選択範囲の DataFrame が取得できる pca = PCA(n_components=2) X_pca = pca.fit_transform(toydata.data) df2 = pd.DataFrame(X_pca, columns=["PC1", "PC2"]) df2["target"] = toydata.target df2["target_name"] = [toydata.target_names[i] for i in toydata.target] chart = mo.ui.altair_chart( alt.Chart(df2) .mark_point() .encode( x="PC1", y="PC2", color="target_name:N", tooltip=["PC1", "PC2", "target_name"] ) .properties( width=400, height=300, title="PCA (2D)" ) ) 127.0.0.1:2718 1/2 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/47QVWR16EP.jpg) 2025/12/15 9:28 slide3.py int64 PC1 PC2 target float64 float64 int64 target_name object unique: 2 −2.71 0.81 −0.2 0.11 0 1 1 -2.7141416872943243 -0.1770012250648012 0 setosa 9 -2.6727557978209533 -0.1137742458741382 0 setosa 11 -2.612755230908723 0.014729939161362005 0 setosa 23 -2.302733182226208 0.0987088548140882 0 setosa 24 -2.3557540491237727 -0.03728185967739339 0 setosa 25 -2.5066689069258206 -0.14601688049529038 0 setosa 29 -2.631989387274345 -0.19696122492432888 0 setosa 34 -2.636926878105798 -0.12132234786588292 0 setosa 49 -2.70335978233516 0.1077060824993934 0 setosa 61 0.5116985574475974 -0.10398123549903371 1 versicolor 14 rows, 4 columns 10 127.0.0.1:2718 / page Page 1 of 2 Download 1/2