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

項目ごとのデータを図形の大きさで比較

描いた図形の大きさを変えることで、項目ごとのデータを比較してみよう。

大きさで表す

リスト2-1は、水生生物の寿命を円の大きさで表しています。 シンプルな例とするため、データの個数は5個で、生物の名前とその平均寿命の年数(さまざまな調査があり、あくまで目安です）をそれぞれ 配列に入れています。 
const name = ["イカ", "マグロ", "オオサンショウウオ", "ワニ", "シロナガスクジラ"];
const span = [1.0, 20.0, 55.0, 70.0, 100.0];
寿命の数値をそのまま円の直径とすると、イカの円の直径は1ピクセルとなり、見えません。つまり、数値データをそのまま使うのではなく、表示のための大きさに適切に変換してやる必要があります。この時、便利なのが map関数です。
平均寿命が一番短いイカのデータ(1年)を表す円の大きさを10(定数minに入れておく)に、一番長いシロナガスクジラ(100年)の円の大きさを120(定数maxに入れておく)とすることを考えます。 
let d = map(データの数値, 1, 100, min, max); //円の直径を計算
データの数値を円の直径の変換するには、上のように書きます。
円の大きさで表す 
【リストT2-1-1】
const name = ["イカ", "マグロ", "オオサンショウウオ", "ワニ", "シロナガスクジラ"];
const span = [1.0, 20.0, 55.0, 70.0, 100.0];
const cx = 80;  //最初の円の中心のx座標
const cy = 100;  //最初の円の中心のy座標
const max = 120.0;  //円の最大直径
const min = 10.0;   //円の最小直径
const distance = max+10;
function setup() {
  createCanvas(700, 250);
  fill(200, 0, 0);
  noStroke();
  textAlign(CENTER, CENTER); //文字を表示する際、中心の座標を指定
}
function draw() {
  background(240);
  for (let i=0; i<span.length; i++) {
    let d = map(span[i], 1, 100, min, max); //円の大きさ
    let x = cx + i*distance;   //円を描くx座標
    fill(200, 0, 0);
    ellipse(x, cy, d, d);
    fill(0);
    text(name[i], x, cy+max);
  }
}

徐々に大きさを変える

リストT2-1-1を変更し、スケッチが表示されると徐々に円の大きさが増加して、寿命を表す大きさになったら変化を止めるようにしたのがリストT2-1-2です。リストT1-3-1のようにdraw()関数内で描く円の直径を変化させます。この例では、目指す直径になったら増加を止め、円の色を変えています。
5つのデータごとに個別に円の大きさを変えるので、円の最終直径と、現在の直径をそれぞれ覚えておく配列を用意します。 
let diameter = [];  //項目ごとの円の最終直径
let currentD = [];  //項目ごとの途中の直径
そして、setup()関数の中で、値を初期化します。 
for (let i=0; i<span.length; i++) {
   diameter[i] = map(span[i], 1, 100, min, max); //最終直径を計算
   currentD[i] = 0.0;  //最初は0
}
draw()関数では、データごとに円を描くforループの中で、現在の円の直径にhenka分を加えています。その大きさが最終直径になったら、変数henkaに0を代入し、変化を止め、円の描画色を青に変えます。


クリックで再起動 
【リストT2-1-2】
const name = ["イカ", "マグロ", "オオサンショウウオ", "ワニ", "シロナガスクジラ"];
const span = [1.0, 20.0, 55.0, 70.0, 100.0];
let diameter = [];  //項目ごとの円の最終直径
let currentD = [];  //項目ごとの途中の直径
const cx = 80;  //最初の円の中心のx座標
const cy = 100;  //最初の円の中心のy座標
const max = 120.0;  //円の最大直径
const min = 10.0;   //円の最小直径
const distance = max+10;
let henka = 1.0;
function setup() {
  createCanvas(700, 250);
  fill(200, 0, 0);
  noStroke();
  textAlign(CENTER, CENTER); //文字を表示する際、中心の座標を指定
  for (let i=0; i<span.length; i++) {
    diameter[i] = map(span[i], 1, 100, min, max); //最終直径を計算
    currentD[i] = 0.0;  //最初は0
  }
  frameRate(10);
}
function draw() {
  background(240);
  for (let i=0; i<span.length; i++) {
    if(currentD[i] >= diameter[i]){  //最終直径になったら
      henka = 0;          //大きさを変えない
      fill(0, 0, 200);    //青にする
    } else {
      henka = 1;          //そうでないなら1ずつ増やす
      fill(200, 0, 0);    //赤で描く
    }
    currentD[i] = currentD[i] + henka;
    let x = cx + i*distance;   //円を描くx座標
    ellipse(x, cy, currentD[i], currentD[i]);
    fill(0);
    text(name[i], x, cy+max);
    if (henka == 0) { //増加が終わったら寿命年を表示
      text(span[i]+"年", x, cy+max+15);
    }
  }
}

演習問題


寿命の棒グラフ
【問題T2-1-1】リストT2-1-1では、円の大きさで平均寿命を表しましたが、棒グラフや帯グラフは一般的な数値データの表現方法です。リストT2-1-1を変更して、棒(矩形)の長さでデータ寿命を表すようにしてみよう。矩形を描くrect()関数の引数の意味を理解して、描く位置を調整しよう。


【問題T2-1-2】リストT2-1-2の円を徐々に大きくしたように、問題T2-1-1を変更して、矩形の高さを徐々に高くして、アニメーションさせてみよう。
クリックで再起動

copyright © info