- テーマが決まりきっていないのでテーマ決めから 前回出した案
- YouTubeの好きなチャンネルの情報を可視化 再生数+タグ
- 去年の鉄道マップの全国版(ヤフー乗り換えとかぶらないようにしないといけない)
- 飛行機事故の可視化
- 鉄道人身事故のデータベースの視覚化
今日出した案
- 統計局の世界のデータベース的なのを紹介してそれをあさってみている
一旦鉄道人身事故データベースの可視化でやる
- 日本地図と路線図
- 去年の路線図のデータみたくどこかにデータが落ちているはず
- 日時情報
- https://jinshinjiko.com/
- ↑をひたすらスクレイピング
- 人身事故による影響の大きさ(Tweet数から算出)
- 事故発生時 - 2時間後までの関連する路線名で検索したときのTweet数で出す
- Twitter API申請済み
- ホームドアの設置状況(WebArchiveから出す)
- https://www.mlit.go.jp/tetudo/tetudo_tk6_000022.html
- web archiveに過去7年くらいのデータがある
-
基本CSVでよさそう(RDB使いたいなら後から使えばいい)
-
人身事故のデータは基本URL/IDになっているので簡単にスクレイピング出来る
- curlで取得出来たのでseleniumもいらなさそう
- https://jinshinjiko.com/accidents/14847
-
一覧についてはhttps://jinshinjiko.com/accidents?limit=10&offset=0のlimitを14898にすることで全件が一気に取得できた
-
サクッとcsv作成
- 作成元はこのプログラム
- 各事故の詳細は追ってスクレイピングするで良さそう
- 駅間をどうするか、会社の表記ゆれをどう対応するか
csvに
- 事故の文面(サイトに掲載のもの)
- ニュースサイトの魚拓URL(サイトからリンクであれば) を追加するために追加でスクレイピングした。
路線図データを入手するべくgeojsonの入手先を発見
https://uedayou.net/jrslod-geojson-downloader/
ダウンロード自動化をしようと思ったが、複雑そうなので一旦断念してJR東日本までダウンロードしたところで加賀谷くんに頼む。
d3.jsで路線図のデータを描画するようにした。基本はjapan.htmlを参考にした。
全路線図のデータを描画することに成功した。駅のポイントの点も任意の形に変えられるようになった。
geojsonの構造を見ると、以下のようになっている。
propertiesには好きな情報を入れて良い。geometryのtypeで点なのか線なのか判別可能。
ホームドア設置状況はpoitn側のpropertiesの中に"door": "2016-04-01"
のようにして追加できれば追加でcsvを読み込まなくても良いのでこれを行う。
{
"properties": {
"name": "盛岡",
"uri": "https://uedayou.net/jrslod/IGRいわて銀河鉄道/いわて銀河鉄道線/盛岡",
"color": "0000CD"
},
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[
141.13802,
39.69969
],
[
141.13473,
39.7027
]
]
}
},
{
"properties": {
"name": "盛岡",
"uri": "https://uedayou.net/jrslod/IGRいわて銀河鉄道/いわて銀河鉄道線/盛岡"
},
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
141.13473,
39.7027
]
}
},
次に人身事故のデータと、駅データの結びつけ方を考える必要がある。
-
QAR
- 時系列シークバー
- 加賀谷くん
- ズームインアウト、移動
- ちょざい
- 時計
- 自分
- 時系列グラフ
- 簡単なのでパス
- 時系列シークバー
-
作業
- geojsonのpropertiesに路線とホームドア設置日時を追加
- 路線はちょざい?
- ホームドアは一旦既存データの日時の変換を加賀谷くんがやる
- 駅間で起きた人身事故の対処法を考える
- 自分で考える
- geojsonのpropertiesに路線とホームドア設置日時を追加
時計の進捗はここ
- まず時計を描画した(webからsampleを引っ張ってきて、バージョンの差異を修正した)
- 次に時計の針とかをぐるぐる回せるようにした
- 任意のデータ(時刻と値のペア)を、時計上に表示できるようにした
- 実際の人身事故データのうち、時刻のみを取り出して、時刻別に件数を計算してjsonに保存するスクリプトをPythonで書いてjsonを保存
- jsonはここ
- d3.jsでjsonを読み込んで、実際のデータで描画出来るようにした。
18:36注: なんかバグってたので、2点を割り出すアルゴリズムと、元のデータを変更(事故の起こっていない時刻を0埋め)して、修正した。
見づらいので、15分か30分おきに4文意数を取って描画するほうがよさそう。 0, 25, 25, 75, 100%点をjsonに保存して(例によってnotebookでpythonで行った)、描画するようにした。
TODO:曜日ごとに変更出来るようにする。
- 曜日ごとのjsonを用意するところから必要
※前回の進捗で忘れてた分
- 加賀谷くんが前回のQARで実装してくれたグラフのシークバーを利用して、時間経過を実装した
- 2010/01/01のUNIX TIMEを始点として、2022/11/10までをシークバーで移動することが出来る。
- 現在の時刻がわかるように表示を追加した。
- 時間経過から、起こった人身事故を抽出するプログラムを実装した。
- 移動開始時の時刻と、移動終了後の時刻の間の領域に該当する人身事故を抽出する。
- どちらかの時刻にもっとも近い(超えない範囲で)人身事故を二分探査で求めて範囲で返すようにした。
- 全探査でやるとサイト全体が重くなり使い物にならなかった
- ↑のプログラムから、人身事故の路線と場所がわかるようになったので、特定の駅で起きた人身事故について可視化するプログラムを仮で書いた。
- 仮である理由は以下。
- おもすぎて使い物にならない
- 同名の駅が省くことが出来ていない
- ちょざいが作成した辞書を利用することでずっと簡単に探索出来るようになるはず。
- 仮である理由は以下。
- 足りないgeojsonの追加
- 辞書データの中身を検査して、足りない部分をピックアップした。
- 辞書データを使用して、ページの軽量化を行った。
- 人身事故発生時に出る円の大きさを、事故発生時の関連ツイートの多さに応じて大きくするようにした
- 駅データのみのgeojsonを新たに生成し、これを使うことで駅の表示を残しながら大幅な軽量化をした
- 時間を飛ばすと重くなる問題に対して、飛ばした後の時間から近いものから20個を表示する最大にすることで、軽量化した。
- zoomに対応して各種表示の調整を行った。
- ホームドア設置件数のグラフがバグっているのを修正した。commit
- 路線ごとにフィルターをかけられるようにした。commit
- 任意の時刻に入力から飛べるようにした。commit
- geojsonを改良して、Pointのみのデータを生成し、サイトを軽量化した。commit
- tooltipの消えるタイミングをmouseremoveから、ユーザーが地図を動かしたときに変更した。commit
- flexboxに対応して表示を修正した。commit
- speedを任意の値に変えられるように変更した。commit
- より拡大できるようにした。commit
- 操作しやすいようにUIの変更。commit
- これまでの成果物として別にあった時計の表示をindex.htmlに統合。commit
- homedoor表示の軽量化(CSVのソートとバイナリサーチの実装)。commit
- ホームドア設置駅の表示の改良と、人身事故発生駅の発生件数に応じた円の表示
- 全体的なデザインの調整を行った
- zoom時の表示の改良
- ページ全体デザインの調整
- スライドを作った
- light-modeの追加
- 選択肢に人身事故を表示しないを追加