はじめに
過去の台風上陸前後に、どのくらい雨や風が強かったのか気になりました。そこで、特定の都市において、台風通過・上陸前後の風雨の様子を一覧できるようなウェブサイトを作成してみました。
注意：データ等は精査しておりませんので、間違いが含まれるかもしれません。ご利用の際は自己責任でお願いいたします（当方は責任は負いません）。
とりあえず、以下の３つの台風を作成しています。
- 令和元年台風第19号@東京
- 令和２年台風第10号@鹿児島
- 令和４年台風第14号@鹿児島
※令和元年台風第19号@東京の例
レポジトリはこちら
データの収集と加工
台風や当時の気象の状況は気象庁のウェブサイトから取得できます。台風の経路は、GeoJSON へ変換し、地図上に掲載します。地図の表示には、ウェブ地図ライブラリとして Mapbox GL JSを、背景地図として、国土地理院 最適化ベクトルタイルを利用しています。
各気象状況はグラフにして、時系列が揃うように縦に並べたいと思います。グラフの表示には、Chart.js を利用することにしましたので、各気象データは、Chart.js が読み込めるようなデータ形式に変換しています。
また、各台風の情報やフォーカスするべき期間については、別途メタデータを作成しています。
最後に各データを統合して一つの JSON ファイルにまとめて、Web サイト用のデータとします。
台風の経路
気象庁の「台風位置表」で得られるデータから作成する。
- 上記ページで、目的の台風の位置表 PDF ファイルを開く。
- ファイル全体をコピーして、テキストファイルにペースト。
- テキストファイルを GeoJSON へ変換。
参考：変換には以前の記事の成果を利用しています。
降水量・風速
気象庁の「過去の気象データ検索」で得られるデータから作成する。
- 上記ページで、表示地点、年、月、日を指定。
- 「YYYY年MM月DD日の１時間ごとの値を表示」をクリック。
- 表示された表をヘッダを除いてコピーして、テキストファイルにペースト（タブ区切りでペーストできる）。
- 年、月、日、場所の4カラムを手動で列の先頭に追加。
- 必要な日付分繰り返して一つのファイルにまとめる。
- Chart.js に渡せるようなデータ構造の JSON へ変換。
潮位
気象庁の「潮汐観測資料」で得られるデータから作成する。
- 上記ページで、表示地点、表示年月を指定。
- 毎時潮位にチェックを入れて、「各項目を入力してクリック」を押す。
- 表示された表をヘッダを除いてコピペして、テキストファイルにペースト（タブ区切りでペーストできる）。
- 場所、年、月の3カラムを手動で列の先頭に追加。
- Chart.js に渡せるようなデータ構造の JSON へ変換。
ハマったところ
グラフを並べる関係上、各グラフの描画範囲（軸の目盛りの数値や軸の名称を除いた領域）の大きさを揃えたかったのですが、Chart.js では、y 軸領域の大きさ（目盛りの桁数等で変化）によって、グラフ描画範囲が変わってしまうという問題に当たりました。解決のためのスマートな方法が見つからず、適当な文字（"=" 等）で埋めて、目盛りの桁数をそろえることでお茶を濁しています。
また、Chart.js の v3 以降の場合、時系列データを扱うには別途 adaptor が必要となっております。今回は chartjs-adapter-moment を利用しました。