🗾

Processingのテキストをそのままやるだけ①(地図上に人口密度の表示)

2024/12/05に公開

こちらはジャンルなしオンラインもくもく会 Advent Calendar 2024 5日目の記事になります。

最近大学の授業でProcessingというグラフィックプログラミング言語?を使っています。なんと4日後までに自由課題を出さないといけないのですが、まだProcessingが全然わからなくてまずいので、4日後までに完全に理解したいと思います。

とりあえず今回は以下のテキストを参考にしつつ、地図上にデータを表示するところをゴールに作業してみようと思います。

https://design-and-programming-inc.gitbook.io/data-visualization-for-beginner/5-nidtawosuru

10分経過

とりあえず3行だけ写経しました(おせぇ)

PImage japanMap = loadImage("map-japan.png");

size(822, 850);

image(japanMap, 0, 0);

この状態で実行するとPNG画像だけでてきます。

20分経過

なんか県ごとに円は表示できた(円の大きさに人口密度を反映させるのはまだ出来てない)けど、明らかに円の位置がおかしいぞ!ってなって大汗をかいたのですが、

Processingでは右に行くほどx座標が大きくなり、下に行くほどy座標が大きくなります。
なので、経度が大きくなるとx座標は大きくなるけど、緯度が大きくなると(北半球では)y座標が小さくなる、という所で混乱して、x座標の値をまちがえてしまっていました

コードを直して実行しなおすと、以下のようになりました。

PImage 日本地図の画像 = loadImage("map-japan.png");

size(822, 850);

image(日本地図の画像, 0, 0);

Table= loadTable("population.csv", "header");

int 行数 =.getRowCount();

println(行数);

for (int i=0; i< 行数; i++){
  float 緯度 =.getRow(i).getFloat("lat");
  float 経度 =.getRow(i).getFloat("lon");
  float 円の大きさ = 10;
  
  float x = map(経度, 122, 148, 0, 850);
  float y = map(緯度, 24, 46, 822, 0);
  
  ellipse(x, y, 円の大きさ, 円の大きさ);
}

30分経過

円の直径を人口密度に比例させると、以下の画像のように、人口密度の小さい県と大きい県で、円の大きさにちがいが出すぎてしまいます。

float 円の大きさ = map(人口密度, 0, 10000, 0, 50);

平方根を計算することで、円の面積を人口密度に比例させられて、少しいい感じな気もします。

float 円の大きさ = sqrt(map(人口密度, 0, 10000, 0, 1000));

円のぬりつぶしの色に透明度を加えることで、重なり合った部分がつぶれた感じにならないようにしたい...のですが、難しいです...

fill(150, 150, 250, 150);

40分経過

最終的にコードは以下のようになりました。
(※このコードは以下のテキストの、山辺真幸さんのコードをほぼ写経したものです。途中少し配列の作成などを省略し、変数名を個人的趣味により変更している以外は、ほとんど同じです)
https://design-and-programming-inc.gitbook.io/data-visualization-for-beginner/5-nidtawosuru/51-na

PImage 日本地図の画像 = loadImage("map-japan.png");

size(822, 850);

image(日本地図の画像, 0, 0);

Table= loadTable("population.csv", "header");

int 行数 =.getRowCount();

println(行数);

noStroke();
fill(250, 150, 150, 120);

for (int i=0; i< 行数; i++){
  float 緯度 =.getRow(i).getFloat("lat");
  float 経度 =.getRow(i).getFloat("lon");
  float 人口密度 =.getRow(i).getFloat("population");
  
  float x = map(経度, 122, 148, 0, 850);
  float y = map(緯度, 24, 46, 822, 0);
  
  float 円の大きさ = sqrt(map(人口密度, 0, 10000, 0, 1000));
  
  ellipse(x, y, 円の大きさ, 円の大きさ);
}

最終的な地図はこんな感じになりました。このようにみると、関東・関西は本当にデカすぎだな~(月並みな感想)と思います。

(今気づいたのですが、このデータは「県の人口」ではなく「県の人口密度」だから、東京・大阪・京都などの「ちっちゃくて人が多い県」が、人口以上にデカい円になっているんですね)

とりあえず「地図上にデータを表示する」テキストは軽く触れられたので、次の記事では以下のテキストを用いて、より少し複雑な地理データの可視化についてもチャレンジしてみたいと思います

https://design-and-programming-inc.gitbook.io/data-visualization-for-beginner/creative-visualization-with-processing/5-dtano

最後まで読んでくださり、ありがとうございました!

Discussion