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

データによって図形の色を変える

描いた図形の色を変えることで、図形に意味を与えてみよう。

色を変える

練習問題で、10行10列の100個の円を描きました。その円の色を1行ごと交互に変えてみます。 つまり、行を表す番号(0から9)によって、場合分けして、色を指定します。ある条件(番号が偶数 )の時には、特定の処理(色を黄色にする)を実行するように書くには、条件分岐のためのif文を使います。ここはその条件になった時(偶数)とそうでない時(奇数)の処理を指定するので、書き方2を使っています。 
if(j%2 == 0) {  //jは行を表す番号、先頭行は0
  fill(255, 204, 0);  //黄色
}else{
  fill(154, 205, 50); //黄緑
}
%は余りを計算する算術演算子で、j%2==0は、jを2で割った余りが0と等しいか、つまりjが偶数かどうかを判定していることになります。
1行ごとに色が変化 
【リストT1-2-1】
const x = 35;  //最初の円のx座標
const y = 35;  //最初の円のy座標
function setup() {
  createCanvas(250, 250);
  noStroke();
  fill(0);
}
function draw() {
  background(220);
  for (let j=0; j<10; j++) {
    if(j%2 == 0) {
      fill(255, 204, 0);  //黄色
    }else{
      fill(154, 205, 50);   //黄緑
    }
    for (let i=0; i<10; i++) {
      ellipse(x+i*20, y+j*20, 20);
    }
  }
}

データを表す…世界が100個の円だったら

環境科学者Donella Meadowsが、世界を人口が1000人の村に例えて、人種や宗教などどんな人が住んでいるかをシンプルな人数で表現したのが、State of the Village reportです。その後、全体の人口を100人に単純化し、「世界が100人の村だったら」として日本でも出版されました。これは、さまざまな属性が集まって全体100を構成していることを示すデータ表現方法です。

この表現手法をさらに単純化して、描いた100個の円の色分けで、2項目のデータの割合を表してみましょう。
例えば、下は大学生の男女比を表したものです。文部科学省の発表しているデータによると、大学の在学者数のうち女子は1,294,320、男子は1,621,285人(2020年)です。大学生全体を「100人の世界」として、色分けしました。 データのタイトル、女子学生数、男子学生数を覚えておく変数を用意しています。 
  const dataTitle = "大学生男女比";  //データのタイトル
  const femaleS = 1294320; //女子学生数
  const maleS = 1621285;   //男子学生数
データのタイトルは、text関数を使って、画面上に表示します。

色分けする円の個数は、男女の比率で決まります。比率をあらかじめ、setup()の中で計算し、その結果をグローバル変数ratioに入れておきます。roundは数値を整数に四捨五入する関数です。 
  ratio = round(femaleS / (femaleS + maleS) * 100);  //女子学生の比率を計算
大学生男女比 
【リストT1-2-2】
const x = 35;  //最初の円のx座標
const y = 50;  //最初の円のy座標
const dataTitle = "大学生男女比";  //データのタイトル
const femaleS = 1294320; //女子学生数
const maleS = 1621285;   //男子学生数
let ratio = 0;  //女子学生の比率
function setup() {
  createCanvas(250, 250);
  noStroke();
  ratio = round(femaleS / (femaleS + maleS) * 100);  //女子学生の比率
}
function draw() {
  background(230);
  fill(0);
  text(dataTitle, 10, 20);  //データタイトルの表示
  let n = 0;   //何個目の円を描いているか
  for (let j=0; j<10; j++) {
    for (let i=0; i<10; i++) {
      n++;
      if(n <= ratio){  //描いた円の数がratioになるまでは赤色
        fill(200, 0, 0);
      }else {  //残りは黒
        fill(0);
      }
      ellipse(x+i*20, y+j*20, 20);
    }
  }
}

ひとつのデータを扱うのであれば、リストT1-2-2のように、データを個別に変数に格納しておくので問題ありませんが、複数の種類のデータを処理する場合、個別に変数を定義するのは複雑になり面倒で、適切ではありません。
リストT1-2-2の例でいうと、データのタイトル、女子数、男子数の3つの値をまとめて扱えるようにするのが便利です。 それには、配列 を使います。データ名、女子数、男子数の順に、配列dataに値を格納するには次のように書きます。 
  const data =  ["大学生男女比", 1294320, 1621285];
こうすると、データのタイトルはdata[0]に、女子学生数はdata[1]に、男子学生数はdata[2]に格納されます。 配列dataを使う書き方をリストT1-2-3に示します。
大学生男女比 
【リストT1-2-3】
const x = 35;  //最初の円のx座標
const y = 50;  //最初の円のy座標
const data = ["大学生男女比", 1294320, 1621285];
let ratio = 0;
function setup() {
  createCanvas(250, 250);
  noStroke();
  ratio = round(data[1] / (data[1] + data[2]) * 100);  //女子学生の比率
}
function draw() {
  background(230);
  fill(0);
  text(data[0], 10, 20);  //データタイトルの表示
  let n = 0;   //何個目の円を描いているか
  for (let j=0; j<10; j++) {
    for (let i=0; i<10; i++) {
      n++;
      if(n <= ratio){  //描いた円の数がratioになるまでは赤色
        fill(200, 0, 0);
      }else {  //残りは黒
        fill(0);
      }
      ellipse(x+i*20, y+j*20, 20);
    }
  }
}

演習問題


市松模様
【問題T1-2-1】リストT1-2-1を修正して、交互に市松模様のように円の色を変えてみよう。


【問題T1-2-2】リストT1-2-3はいわば色面で、2項目のデータの割合を表しています。複数のデータのセットを見比べることで、データに新しい意味が加わります。下図は、3種のデータをリストT1-2-3と同様に円の色分けで表し、並べて描いたものです。
3つのデータ
３種類のデータ列を個別の１次元配列に入れてもいいですが、次のように2次元配列を使うと繰り返し処理が書きやすくなります。
let data = [
  ["小学生男女比", 3078570, 3222123], 
  ["大学生男女比", 1294320, 1621285], 
  ["上場企業役員男女比", 1530, 25273] 
];
これと同じように、自分で調べたデータの割合を複数描いて、その変化、違いを見比べられるようにしてみよう。複数のデータセットとしては、時代・時間の違い、場所の違い、対象の違いなどがあげられます。


【問題T1-2-3】上の例では、2項目のデータを色分けして、割合を表しましたが、複数の項目の割合を色分けで表したのが下の例です。政府が公開している学校基本調査から関連学科別の学生数のデータを、全学生、女子学生、男子学生で比較しています。
複数項目データ
100個の円の塗り分けの表現では、項目数が多くなりすぎると見にくくなるので、この例の8項目ぐらいが限界でしょう。
自分に関心のあるデータを使って、同じような視覚化をしてみよう。

copyright © info