日時指定ダッシュボードへの trips_map 画面・trips.csv 追加
1. 作業目的
既存の日時指定ダッシュボード(sample2 / rides / bus_map)に対して、
-
停留所間トリップ(OD)を可視化する4つ目の画面
trips_map.htmlを追加 -
その描画に必要な
trips.csvを、他CSVと同様に「指定期間内」でDBから動的生成 -
既存UI(index.html)を壊さず、iframe + CSVダウンロードボタンを追加
-
表示崩れ(左寄り)を修正し、視認性を改善
することを目的とした。
2. 最終的な画面構成
index.html(トップ)
-
日時指定フォーム
-
CSVダウンロードボタン(4種)
-
sample2.csv
-
ride_summary.csv
-
bus_stops.csv
-
trips.csv(追加)
-
-
iframe 表示(上から順に)
-
sample2(利用回数分布)
-
rides(日別・時間帯別ライド数)
-
bus_map(停留所マップ)
-
trips_map(停留所間トリップ可視化)
-
3. 実装の要点
3.1 trips.csv の仕様
-
期間指定:index.html の start/end → cookie → SQL WHERE に反映
-
定義
-
from:同一トリップ内の最初の乗車停留所
-
to:同一トリップ内の最後の降車停留所
-
trips:その OD の件数
-
-
トリップ定義
-
psg_id単位 -
on_off = 1(乗車)が出現するたびに新しいトリップ
-
3.2 表示ずれ(左寄り)の原因と対処
-
原因:
max-widthのみ指定され、中央寄せ指定がなかった -
対処:
をラッパー要素に追加
4. 最終成果物(コード全文)
4.1 server.py(全文)
4.2 index.html(全文・4画面対応)
4.3 sample2.html(中央寄せ修正含む・該当部分)
5. 最終確認結果
-
✅ trips_map.html が iframe に表示される
-
✅ trips.csv ボタンが表示・ダウンロード可能
-
✅ trips.csv は 指定期間内データのみ
-
✅ 上段グラフの左寄り問題を解消
-
✅ 既存画面・既存CSVへの影響なし
6. 総括
本日の作業により、
-
停留所間トリップ(OD)という新しい分析軸
-
既存ダッシュボードと同一UX・同一期間指定
-
CSV ⇄ 可視化 ⇄ 再利用 が可能な構成
が完成した。
構造的に拡張しやすく、今後は
-
trips に応じた線の太さ・色分け
-
特定停留所の強調表示
-
OD の時間帯別分解
なども容易に追加できる状態である。
以上が、本日の最終レポートである。