![見出し画像](https://assets.st-note.com/production/uploads/images/109188299/rectangle_large_type_2_433a812c9c563937113b83cc1bb7a386.png?width=1200)
インバウンドを可視化する #008 フロントエンドの準備
アクセスありがとうございます。
前回の記事はこちらです。
前回はgeocodingをしてデータに登場する国・地域についての位置情報を取得してデータセットに追加しました。
データの整形も進んできたので、そろそろフロントエンドで実装を始める準備をして行きます。最近は "yarn create vite" でプロジェクトを始めています。
Reactを利用するのと、Typescriptを勉強したかったためtsxファイルを書いて開発することにしました。
![](https://assets.st-note.com/img/1687695284596-6etFmB66Vv.png?width=1200)
ビジュアライゼーション描画用にdeck.glとD3.jsを追加しています。あとはスタイリング用にsassを導入しました。
![](https://assets.st-note.com/img/1687695380317-xGEYqHTv7W.png?width=1200)
わざわざ入れる必要あるのか?という疑問がありますが、一応グローバルな状態管理が必要になりそうなので、Redux関係を入れています。useContextで間に合いそうだよなぁ、とかも思いつつ。
手始めに世界地図を表示して、その上に旅客数のバブルをプロットしました。deck.glで描画しています。
![](https://assets.st-note.com/img/1687695537933-YTIDre3sDK.png?width=1200)
ヨーロッパの密度がすごいです。(推測ですが)EU内での大陸間移動の気軽さもデータに表れている気がします。米国や中国の多さはやはりイメージ通り、という感じがしますが、全体で見ると日本も小さくはないように見えます。
次はフロントエンドの実装もすすめつつ、デザインツールでの設計にも少しづつ入っていきます。
最後までお読みいただき、ありがとうございます!
この取り組みはマガジンにまとめていますので、よろしければ今までのものもご覧ください。
この記事が気に入ったらサポートをしてみませんか?