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

データを位置で表す

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

上に伸びる値

Global Entrepreneurship Monitor(GEM)に基づいたTotal early-stage Entrepreneurial Activity (TEA, 新しいビジネスを起業した18から64歳の人口割合)を The World Bankが公開 しています。 これを基に、10ヵ国のデータを比較したスケッチを作成してみます(2019年のデータ)。

クリックで再起動

Datamateのテーブルを作るmake()関数は次のようになります。 
Datamate.make("国", ["Italy", "Japan", "Germany", "Norway", "China", "Australia", "Korea",
                                                                "India", "USA", "Brazil"]);
Datamate.make("企業活動指数", [2.8, 5.4, 7.6, 8.4, 8.7, 10.5, 14.9, 15.0, 17.4, 23.3]);
キャンバスを10のエリアに分割し、それぞれに国名、円、データ値を表示します。 円が一番下にある時の下辺からの距離を40とし、ここから上の範囲で円が動くようにします。
データ値を元に円を止める最終y座標を計算しておきます。 10ヵ国のデータは、2.8から23.3の間の値です。円が一番下の位置に対応するデータ値を0、円が一番上の位置に対応する値を28と決め、 この間の垂直方向の位置(y座標)をmap関数を使って換算します(エリアの下辺から40ピクセルの地点がy座標のゼロです)。
const circleY = 40;    //円が一番下にある時の下辺からの距離
最終y座標 = map(データ, 0, 28, 0, height-circleY); //下辺から40ピクセルの地点をゼロとしたy座標
10ヵ国のデータに対して、円の最終y座標を計算して配列lastY[]に入れておきます。 さらに、それぞれの円の途中のy座標を記憶しておく配列currentY[]を用意します。

エリアごとに円を動かし、国名、データ値を書く関数moveUpCircle()を定義します。 この関数内に、演習問題T3-1-2のように y座標の値をスピード分だけ徐々に動かし、最終y座標(止めたい位置)より大きくなったら、スピードをゼロにし、色を変える処理を書きます。 
【リストT3-2-1】
const countryNameY = 15;    //国名下辺からの距離
const circleY = 40;         //円が一番下にある時の下辺からの距離
const d = 30;               //円の直径
let speed = 1;
let lastY = [];     //国ごとの最終y座標
let currentY = [];  //国ごとの途中のy座標

function setup() {
  createCanvas(510, 300);
  Datamate.make("国", ["Italy", "Japan", "Germany", "Norway", "China", "Australia", "Korea", 
                                                                  "India", "USA", "Brazil"]);
  Datamate.make("企業活動指数", [2.8, 5.4, 7.6, 8.4, 8.7, 10.5, 14.9, 15.0, 17.4, 23.3]);
  Datamate.makeAreas(0, 0, width, height, 10, 1);
  Datamate.bindAreas([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
  noStroke();
  textAlign(CENTER, CENTER); //文字を表示する際、中心の座標を指定
  for (let i=0; i<Datamate.columnCount(); i++) { //Datamate.columnCount()はデータテーブルの列数
    currentY[i] = 0;  //最初は0
    lastY[i] = map(Datamate.value(0, i), 0, 28, 0, height-circleY); //円の最終y座標を計算しておく
  }
}
function draw() {
  background(240);
  for(let i=0; i<Datamate.columnCount(); i++){
    moveUpCircle(i);
  }
}
function moveUpCircle(number){
    const area = Datamate.area(number);  // エリアをとりだす
    const country = Datamate.columnName(number);//列のヘッダ
    const value = Datamate.value(0, number);
    if (currentY[number] >= lastY[number]) {  //最終y座標になったら
      speed = 0;          //y座標を変えない
      fill(0, 0, 200);    //青にする
    } else {
      speed = 1;          //そうでないなら1ずつ増やす
      fill(200, 0, 0);    //赤で描く
    }
    currentY[number] = currentY[number] + speed;
    ellipse(area.centerX, area.bottom-currentY[number]-circleY, d, d);  //円を描く
    fill(0);
    text(country, area.centerX, area.bottom-countryNameY); //国名表示
    if (speed == 0) {  //数値表示
      text(value+"%", area.centerX, area.bottom-currentY[number]-circleY-20);
    }
}

演習問題

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

クリックで再始動

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