Screenshots
Overview
概要
世界中で日々発生する地震を、毎分更新のフィードで地図にプロットして眺める実験ダッシュボードです。世界はUSGS、日本はP2P地震情報(気象庁由来)の2ソースを切り替えられ、マグニチュードを円の半径、深さを色で同時表現。時系列アニメーションで発生を追体験し、統計パネルで概況を把握できます。タイルサーバーに依存せず、Natural Earth由来のTopoJSONを同梱してdeck.glのベクタ描画のみで地図を構成しているのも特徴です。
How to use
遊び方・使い方
ヘッダーでソース(世界/日本)と期間を切り替えると、震央が地図に描かれます。地物にホバーでツールチップ、クリックで詳細カードが開きます。下部のタイムラインバーで再生・停止・シークし、速度(x1/x6/x24)を変えて時間を早送りすると、発生の瞬間にリングが広がります。右の統計パネルでマグニチュード分布などを確認。日本モードでは震度も表示します(防災速報ではない旨をフッターに明記)。
Tech stack
技術スタック
TypeScriptNext.js 16React 19deck.gl 9world-atlas / topojson-clientTailwind CSS v4
@deck.gl/coreと@deck.gl/layersのみを利用し、MapLibreは不採用。陸地はworld-atlasのTopoJSONをtopojson-clientで展開しています。データはUSGSのGeoJSONフィード(パブリックドメイン)とP2P地震情報のAPIを用い、OG画像は静的、JSON-LDはWebApplicationを付与。
Highlights
工夫した点
- 全ソースをRoute Handlerのプロキシ経由でQuakeEvent型に正規化し、fetchのrevalidate:60で上流への問い合わせを毎分1回に集約。凡例は半径clamp(2, 2*1.7^(mag-2), 40)、深さ4段階色を自前算出
- 地図はGeoJsonLayer(陸地)＋ScatterplotLayer(震央)＋リング演出のScatterplotLayerで構成し、タイルを使わずTopoJSONを展開して描画
- 時系列は発生時刻昇順で保持し、仮想時刻カーソルと二分探索でフィルタ。prefers-reduced-motionでは自動再生を無効化し、統計チャートも軽量な自前SVGで描画
To improve
改善したい点
- 深さ・マグニチュードの色/半径マッピングは、体感に合わせた調整の余地がある
- 大量イベント時のScatterplot描画負荷の最適化に伸びしろ
- P2P地震情報側のレート制限があり、取得頻度・件数に制約がある
What's next
今後の展望
- 気象庁bosaiフィードなどデータソースの追加
- 地域・マグニチュード帯でのフィルタや統計の深掘り
- 揺れの到達円(P波/S波)アニメーションなど教育的表現