トレイルトップに戻る    印刷する

データを位置で表す

演習問題T3-1-2では、円を任意に決めた垂直位置で止めましたが、データの値を反映した位置を計算する必要があります。

上に伸びる値

Global Entrepreneurship Monitor(GEM)に基づいたTotal early-stage Entrepreneurial Activity (TEA, 新しいビジネスを起業した18から64歳の人口割合)を The World Bankが公開 しています。 これを基に、10ヵ国のデータを比較したスケッチを作成してみます。次は2019年のデータです。
Brazil	  23.30%
USA       17.40%
India	  15%
Korea     14.90%
Australia 10.50%
China	  8.70%
Norway	  8.40%
Germany   7.60%
Japan	  5.40%
Italy	  2.80%
まずは、一つのデータを表示してみます。
キャンバスの高さを300とし、そのうち下30ピクセルを国名の表示に使うことにし、円が一番下にある時の上辺からの距離を270と決めます。つまり、ここが円の動く範囲のy座標ゼロ(y座標の最小値)の地点となります。ここから上250ピクセル(y座標の最大値)の範囲で円が動くようにします。
10ヵ国のデータは、2.8から23.3の間の値です。円が一番下の位置に対応するデータを0、円が一番上の位置に対応するデータを25と決め、この間の垂直方向の位置(y座標)をmap関数を使って換算します(キャンバスの上辺からの270ピクセル下の地点がy座標のゼロです)。
const max = 250;  //y座標の最大値
const min = 0;    //y座標の最小値
y座標 = map(データ, 0, 25, min, max); //上辺から270ピクセルの地点をゼロとしたy座標

クリックで再起動
【リストT3-2-1】
const rx = 50;    //最初の円のx座標
const ry = 270;   //円が一番下にある時の上辺からの距離
const max = 250;  //y座標の最大値
const min = 0;    //y座標の最小値
const d = 30;      //円の直径
let speed = 1;
const name = "USA";
const data = 17.4;
let lastY = 0;  //最終y座標
let currentY = 0;  //途中のy座標
function setup() {
  createCanvas(200, 300);
  fill(200, 0, 0);
  noStroke();
  textAlign(CENTER, CENTER); //文字を表示する際、中心の座標を指定
  lastY = map(data, 0, 25, min, max); //円のy座標
  currentY = 0;  //最初は0
}
function draw() {
  background(240);
  if (currentY >= lastY) {  //最終y座標になったら
      speed = 0;          //y座標を変えない
      fill(0, 0, 200);    //青にする
    } else {
      speed = 1;          //そうでないなら1ずつ増やす
      fill(200, 0, 0);    //赤で描く
    }
    currentY = currentY + speed;
    let x = rx;  //円のx座標
    ellipse(x, ry-currentY, d, d);
    fill(0);
    text(name, x, ry+15);
    if (speed == 0) {  //止まったらデータ値を表示
      text(data+"%", x, ry-currentY-20);
    }
}

演習問題

【問題T3-2-1】10ヵ国のデータをそれぞれ円で表し、比較するスケッチを作ってみよう。

クリックで再始動

国名、データ、最終y座標、途中のy座標、x座標を保存する配列を用意します。
const name = ["Italy", "Japan", "Germany", "Norway", "China", "Australia", "Korea", "India", "USA", "Brazil"];
const data = [2.8, 5.4, 7.6, 8.4, 8.7, 10.5, 14.9, 15.0, 17.4, 23.0];
let lastY = [];  //項目ごとの最終y座標
let currentY = [];  //項目ごとの途中のy座標
let x = [];
lastY[], currentY[], x[]の値は、setup()関数内で設定しておきます。
for (let i=0; i<data.length; i++) {
   lastY[i] = map(data[i], 0, 25, min, max); //円のy座標
   currentY[i] = 0;                          //最初は0
   x[i] = rx + i*distance;                   //円のx座標
}

【問題T3-2-2】10ヵ国のデータを円の代わりに、カエルの画像で表して、動かしてみよう。

クリックで再始動

カエルの画像のサンプルは、画像ページからコピーできます。
copyright © info