#146スコア 4/5運輸：タクシー

AI にタクシー需要予測を作らせてみた — 誤誘導先だった HeatmapChart が、遂に「本来のホーム」で輝いた（やってみた #146）

ルート: /taxi-demand
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

AI にタクシー需要予測を作らせてみた — 誤誘導先だった HeatmapChart が、遂に「本来のホーム」で輝いた（やってみた #146）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。タクシー toB をもう1枚（配車・乗務員・営収・車両・苦情に続く6枚目）——需要予測・配車最適化（エリア×時間帯需要ヒートマップ・需給バランス地図・需要予測・最適化提案）。

結果 — 4/5、予測/最適化のアナリティクス系統も床に乗った

tsc 緑・デスクトップ密度。cold AI（群青を一度も触っていない設定）：

このキットのアナリティクス側が、明らかにこの画面のために作られている。 二枚看板の HeatmapChart・ChoroplethMap がほぼ無加工で乗った——消費者/取引画面ならお荷物だった2部品が、ここで本領。

観測の核 — HeatmapChart が「誤誘導先」から「本来のホーム」へ

HeatmapChart は連載で索引の誤誘導先だった：#138（バス混雑）・#141（配車盤）で cold AI が「混雑/状態盤→HeatmapChart」と誘導され、私は索引を是正した（#389/#393：混雑ピルは Badge・状態盤は StatusBoard・HeatmapChart はそれじゃない）。

そして #146 で——cold AI が HeatmapChart を正しい用途で使った：

「HeatmapChart＝遂に完璧なホーム。data {x,y,value}＋xLabels/yLabels が エリア(行)×時間帯(列)に1:1。色強度は自動・onCellSelect でセル詳細・セルが <button> で aria-label/aria-pressed・docstring の『曜日×時間帯の強度』そのもの（曜日→エリアに替えただけ）。」

索引是正の答え合わせ：HeatmapChart を「混雑ピル/状態盤」から遠ざけたのは正しく、かつ HeatmapChart は「値の色塗りマトリクス（エリア×時間帯強度）」という本来の用途で完璧に効く。誤誘導を直すことは、正しい用途を否定しない。 部品の定義域を「ここではない」と「ここだ」の両側から確定して、初めて索引は正確になる。ChoroplethMap（需給地図＋ランキング）も「surprise win」で適合。

拾った点 — 信頼区間バンドだけ住所が無い

cold AI「唯一ホームが無いのは信頼区間バンド。LineChart は2系列の『間』を塗る概念が無い（複数系列＋水平 referenceValue 線はあるが band は無い）。上限/下限を muted の系列2本で fake したが本物の band でない（間が塗られず4系列は busy）。area variant は各系列をベースラインまで塗るだけで系列間でない。」

→ #400 起票：LineChart の band モード or AreaRangeChart（{label,value,lower,upper}→線＋下限上限の帯）。予測±信頼区間/実績レンジ/min-max envelope という予測系の頻出形で唯一住所が無い。ヒートマップ/地図の色スケール凡例（薄い→濃いキーを毎回手組み）も併記。

今回 src build なし（4/5・HeatmapChart 本来ホーム実証・ChoroplethMap 適合・信頼区間バンド起票）。

学び — 「定義域は『ここでない』と『ここだ』の両側から確定する」

HeatmapChart の旅は、部品の定義域確定の完全な事例：

  • #138/#141：誤誘導（混雑/状態盤に当てられる）→ 索引で「ここでない」と否定。
  • #146：正用途（エリア×時間帯強度）→ ここで「ここだ」と肯定。

穴を直す（StatusLevel/StatusBoard を build）ことと、既存部品の正しい用途を見つけることは、同じ定義域確定の両面。 HeatmapChart は1つも変えていないが、その「居場所」は #138→#146 の3画面で完全に地図化された——どこでないか（混雑/盤）、どこか（強度マトリクス）。部品を build しなくても、定義域を両側から確定させることは結晶化の一種。

📊 結晶化スコアボード（build 済 14個）

…Itinerary / TicketStub / Stringline / StatusBoard / ExpiryBadge 進行中：AreaRange/信頼区間バンド・DesktopPageHeader 4回目・CaseTable/Leaderboard(DataTable preset)・BottomActionBar 3/3

📋 タクシー進捗

  • 🚕 タクシー：toB 6枚（配車/乗務員/営収/車両/苦情/需要予測） ／ toC 0枚

次回予告（やってみた #147）

  • タクシーを締めるなら残りは toC（配車アプリ）。or toB はこれで十分なら次へ。※勝手に進めず KeEem に確認。

試す

誤誘導先だった HeatmapChart が、エリア×時間帯強度という本来のホームで輝いた——定義域は「ここでない」と「ここだ」の両側から確定して初めて正確になる。

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

AlertAlertDescriptionAlertTitleBadgeButtonCardCardContentCardDescriptionCardHeaderCardTitleChartColorChartLegendChoroplethMapChoroplethMapRegionDeltaFilterChipsHeatmapChartHeatmapChartCellLineChartListCardMeterSelectSeparatorStatGroup

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。