見出し画像

【Flourish】目黒区のふるさと納税の流れを地図で作ってみよう〜東京都オープンデータハッカソン2024〜

げん@データ可視化

「地図を使ったデータ分析してみたいなぁ」「でも難しそうだしなぁ」「なんか簡単に作れるツールないかなぁ」

この記事では、そんな方向けに、『これを見れば地図をいったん作ってみることができる材料と手順を揃えたレシピ』を準備しました。

難しい説明は取っ払って、とにかく動くものを作る！というところにフォーカスしてます。

ぜひ作ってみてください。

1.今回作るもの

「全国から目黒区に集まるふるさと納税寄付金」の可視化地図
寄付した人と目黒区を地図上の線で繋ぎ、寄付金額の大きさを線の太さで表した日本地図です。
寄付金が全国から目黒区に届いている様子が直感的に伝わりますよね。

是非リンク先の地図を見てみてください。
地図をグリグリ動かすと目黒区への寄付がどこからいくら来てるのか見ることができます。

ということで、さっそく作っていきましょう

2.材料

材料となるデータはたった２ファイルです。それぞれダウンロードをお願いします。

2-1.目黒区のふるさと納税データ

※『東京都オープンデータカタログ　目黒区ふるさと納税』より加工したものです。

いつ、どの市区町村の人からいくら寄付されているのかがわかります。
黄色で編みかけした項目が今回用に加工した部分です。

2-2.市区町村一覧（役所の位置座標付き）

地図で表示させるため、市区町村の位置情報が必要になります。
自分で作るのは意外と大変ですので、是非ダウンロードしてご利用ください。

3.作り方

3-1.Flourishのアカウント作成

今回、Flourishというデータ可視化ツールを使います。ソフトウェアのダウンロードは必要なく、アカウントさえ作ってしまえばインターネットで様々なグラフを作ることができます。しかも無料！

まずは、Flourishの登録ページからアカウント登録を行います。


3-2.新しいプロジェクトを作る

ログインすると左上に「+ New visualization」というボタンがあります。
クリックして使いたいグラフを選択します。
今回は、「Arc map」を選択します。

するとサンプルのプロジェクトができあがります。

このプロジェクトのデータを差し替えながらマップを作ってきます。

3-3.ふるさと納税のデータをアップロード

ページ上部のタブから「Preview」を「Data」に切り替えます。
すると最初からサンプルデータがはいってますが、これを目黒区ふるさと納税のデータに差し替えます。

画面右側の「Upload data」を選択して、先ほどダウンロードした「目黒区ふるさと納税_2020.csv」をアップロードしましょう。

上記のようにデータが差し変わります。

次にこのデータから、可視化に使う部分を割り当てます。
画面右側のセクションから次のように設定してください。

●Source location：C（始点にC列「from」を設定）
●Destination location：D（終点にD列「to」を設定）
●Value：J（値にJ列「寄付金額」を設定）
●Info for popups：J-K（ポップアップ情報にJ列「寄付金額」K列「寄付年月」を設定）

これでふるさと納税データのアップロードは終了です！

3-4.市区町村の位置情報データをアップロード

つぎに「Location」タブを選択します。
サンプルデータが入っていますので、これも市区町村のデータに差し替えます。

画面右側の「Upload data」を選択して、先ほどダウンロードしたcsvファイルから「市区町村_緯度経度.csv」をアップロードしましょう。

次にこのデータから、可視化に使う部分を割り当てます。

●Location code：A（ロケーションを表すIDにA列「市区町村コード」を設定）
●Latitude：C（緯度にC列「緯度」を設定）
●Longitude：D（経度にD列「経度」を設定）
●Name：B（ロケーション名にB列「市区町村名」を設定）

ここまで設定できたら、ページ上部のタブから「Data」を「Preview」に切り替えてみてください。

地図にうっすらと赤い線が見えているでしょうか。
ここまで来たらあとはチューニングの世界です！

3-4.見た目をチューニングする

このチューニングこそFlourishの面白いところ。どうすれば受け手にとってわかりやすいビジュアルになるか考えながらぽちぽち調整していきます。

以下は僕が設定した参考例ですので、ぜひ自分好みにカスタマイズしてみてください。
※特に明記していない設定は初期表示のままでOKです

【Arcs】(線の設定)
　●Thickness（線の厚さ）：60
COLORS
　●Source color（スタート側の色） ：青
　●Source opacity（不透明度）：0.8
　●Target color（ゴール側の色） ：赤
　●Target opacity（不透明度）：0.8

【Map】（背景地図）
　●Map style（地図）：positron（白地図）
VIEWPORT（表示領域）
　●Min zoom（最小ズーム）：4
　●Max zoom（最大ズーム）：14
　●pitch（勾配）：45
　 ●Bearing（回転）：-15
その他は変更なし

【Inset Map】（右下の小さい地球儀）
　●Display map：OFF



説明文や注釈、データの出典も入れておきましょう

【Header】（上部に乗せる情報）
　●TITLE：全国から目黒区に集まるふるさと納税
　●SUBTITLE：2020年度におけるふるさと納税の寄付金流入

【Footer】（下部に乗せる情報）
TEXT
　●Source name：東京都オープンデータカタログサイト「目黒区ふるさと納税　令和3年度」
　●Source url：ファイルのURLを入力
　●Source label：データ:

ここまで設定すると、最初にお見せしたようなビジュアルになります。
ゴールはもうすぐそこです！

3-5.プロジェクト公開する

せっかくなので作った地図を公開しましょう。
画面右上の「Export&publish」から「Publish to share and embed」をクリックします。
これであなたの地図が全世界に公開されます。
お疲れ様でした！

4.まとめ

思ったより簡単だったのではないでしょうか？

Flourishはデータを差し替えるだけでいろいろな地図が簡単に作れちゃうので、是非自分オリジナルの地図にもチャレンジしてみてください！

※この記事は東京都オープンデータハッカソン2024の応募作品の一部として作成していますが、どなたでもご利用いただけます。

Xでもオープンデータを使った興味関心事の分析・可視化をしています。


この記事が気に入ったらサポートをしてみませんか？