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

Datamate.jsを使ったサンプル

Datamate.jsライブラリを使ったサンプルを示します。自分の発掘したデータを視覚化するプログラムを作る際の参考にしてください。

サンプル1:人を死に至らしめる動物

世界で、1年間に何人が、どんな動物に殺されているか?その情報が、The Blog of Bill Gatesのサイトで公開されています。 そのトップが「蚊」で、蚊を退治することが人々、特に開発途上国の人たちに重要であることを伝える目的の情報です。
World’s Deadliest Animalsのデータを使い、動物に殺された人数を視覚化してみます。



2015年のデータをCSVファイルDeadlyAnimal.csvとして用意しました。
このファイルの中身は次のような内容です。

DeadlyAnimalImg

【サンプルその1】
const title = "動物に殺された人間の数(2015年)";
const d = 5;   //円の直径
function setup() {
  createCanvas(700, 700);
  Datamate.make("DeadlyAnimal.csv");  //csvファイルを読み込む
  Datamate.makeArea(0, 0, width, height, 5, 3);
  Datamate.bindAreas([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
}
function draw() {
  background(240);
  for (let i=1; i<=15; i++) {
    drawData(i);
  }
  textAlign(LEFT, CENTER);
  text(title, 30, 15);  //データタイトルの表示
}
function drawData(index) {
  const area = Datamate.area(index);
  const value = Datamate.current(area.name);
  const count = map(value, 1, 830000, 1, 1500); //データに応じた円の個数を計算
  stroke(200);
  noFill();
  rect(area.left, area.top, area.width, area.height);  // エリアの矩形を描画
  noStroke();
  fill(200, 0, 0);
  let n = 0;  //描いた円の個数を覚えておく
  out:  //二重ループの先頭にoutというラベルをつけた
  for (let j=0; j<area.height/d; j++) {  
    for (let i=0; i<area.width/d-1; i++) { //area.width/dはareaの幅に並べられる直径dの円の個数を計算している
      n++;
      if (n>count) {
        break out;  //円をcountの個数まで描いたら、ラベルoutがついている二重ループを終了
      }
      circle(area.left+(i+1)*d, area.bottom-(j+1)*d-30, d);  //円を描く
    }
  }
  fill(0);
  textAlign(CENTER, CENTER);
  text(area.name, area.centerX, area.bottom-25);
  text(value+"人", area.centerX, area.bottom-10);
}

サンプル2:世界人助け指数

Charities Aid Foundationは、THE WORLD GIVING INDEX2021をその Webサイトで公開しています。
これは世界の国・地域の人を対象に、 を尋ね、その割合(%)を集計したデータです。その一部を抜粋し、CSVファイルGivingColumn.csvとして用意しました。
次のようなデータです。
GivingIndex
このcsvファイルを次のように読み込んでも、
  Datamate.make("GivingColumn.csv");
あるいは、次のように、列ごとのデータを配列で指定しても同じです。
  Datamate.make("国名", ["全体", "手助け", "寄付", "ボランティア"]);
  Datamate.make("インドネシア", [69, 65, 83, 60]);
  Datamate.make("ケニア", [58, 76, 49, 49]);
  Datamate.make("オーストラリア", [49, 57, 61, 30]);
  Datamate.make("アメリカ", [43, 58, 45, 26]);
  Datamate.make("ウクライナ", [41, 65, 28, 31]);
  Datamate.make("フィリピン", [33, 62, 16, 23]);
  Datamate.make("ロシア", [33, 57, 28, 14]);
  Datamate.make("韓国", [22, 29, 28, 10]);
  Datamate.make("イタリア", [22, 33, 23, 9]);
  Datamate.make("日本", [12, 12, 12, 12]);



【サンプルその2】
const title = "世界人助け指数";
const keisu = 0.05;
let currentA = [];  //円弧を徐々に長くするための途中の角度
function setup() {
  createCanvas(600, 300);
  //Datamate.make("GivingColumn.csv");
  Datamate.make("国名", ["全体", "手助け", "寄付", "ボランティア"]);
  Datamate.make("インドネシア", [69, 65, 83, 60]);
  Datamate.make("ケニア", [58, 76, 49, 49]);
  Datamate.make("オーストラリア", [49, 57, 61, 30]);
  Datamate.make("アメリカ", [43, 58, 45, 26]);
  Datamate.make("ウクライナ", [41, 65, 28, 31]);
  Datamate.make("フィリピン", [33, 62, 16, 23]);
  Datamate.make("ロシア", [33, 57, 28, 14]);
  Datamate.make("韓国", [22, 29, 28, 10]);
  Datamate.make("イタリア", [22, 33, 23, 9]);
  Datamate.make("日本", [12, 12, 12, 12]);
  //Datamate.plot();// データを表示
  Datamate.makeArea(0, 30, width, height, 5, 2);
  Datamate.bindAreas([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
  Datamate.play(0.3);
  angleMode(DEGREES);
  for (let i=0; i<10; i++) {
    currentA[i] = 0; //最初、角度はゼロ
  }
}
function draw() {
  background(240);
  for (let i=1; i<=10; i++) {
    drawData(i);    // データiを描画
  }
}
function drawData(index) {
  const area = Datamate.area(index);   // 割り当てられたエリアをとりだす
  const shurui = Datamate.current('国名');  //寄付などのデータ種名
  const value = Datamate.current(area.name);
  strokeWeight(8);  //線を太く
  noFill();
  stroke(200, 0, 0);
  let targetA = map(value, 0, 100, 0, 360); //データを円の角度に換算
  currentA[index-1] = currentA[index-1] + (targetA - currentA[index-1]) * keisu; //角度少しずつ変化
  //↓顔の輪郭、円弧の長さでデータを表す。-90度は時計の12の位置
  arc(area.centerX, area.centerY, area.width-15, area.width-15, -90, currentA[index-1]-90);
  strokeWeight(5);
  if (dist(mouseX, mouseY, area.centerX, area.centerY) < (area.width-15)/2) { //マウスが円内に入ったら、
    ellipse(area.centerX, area.centerY+20, 20, 10);  //口は楕円
  }else{
    arc(area.centerX, area.centerY+20, 20, 10, 0, 180);  //口は円弧
  }
  noStroke();
  fill(200, 0, 0);
  circle(area.centerX-12, area.centerY-20, 8); //目
  circle(area.centerX+12, area.centerY-20, 8);

  fill(0);
  textAlign(LEFT, CENTER);
  text(title+"("+shurui+")", 30, 30);  //データ名の表示
  textAlign(CENTER, CENTER);
  text(area.name + "\n" + value+ "%", area.centerX, area.centerY);
}

サンプル3:女性への学部学位授与課程への入学許可年

大学において、女性が男性と同じ基準で学部の学位授与課程への入学を認められた年を10の大学で比較します。 (女性の世界地図, 明石書店, p.152より引用)


開学年を表す黒円上で、マウスを押下すると、赤円が開学年のところまで戻り、右への移動を再開します。
下のソースコードでは、大学ごとに開学年、女性入学許可年を配列を使って指定しています。csvファイルとして読み込むため、UnivWomen.csvを用意しました。
次のようなデータです。
UnivWomen
このcsvファイルを次のように読み込んでも同じです。
  Datamate.make("UnivWomen.csv");
【サンプルその3】
const title = "女性への学部学位授与課程への入学許可年";
const keisu = 0.02;
let d = 30;   //円の直径
let currentX = [];  //大学ごとの赤円の位置
function setup() {
  createCanvas(700, 500);
  Datamate.make("大学", ["開学", "女性の入学許可年"]);
  Datamate.make("オックスフォード", [1167, 1920]);
  Datamate.make("ケンブリッジ", [1209, 1948]);
  Datamate.make("ハイデルべルグ", [1385, 1900]);
  Datamate.make("ハーバード", [1636, 1977]);
  Datamate.make("エール", [1701, 1969]);
  Datamate.make("トロント", [1843, 1884]);
  Datamate.make("メルボルン", [1853, 1881]);
  Datamate.make("東京", [1877, 1946]);
  Datamate.make("カイロ", [1908, 1928]);
  Datamate.make("マケレレ", [1922, 1945]);
  Datamate.makeArea(0, 50, width, height, 1, 10);
  Datamate.bindAreas([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
  // Datamate.plot();// データを表示すると、第一行に大学名が並ぶ
  for (let i=0; i<10; i++) {
    currentX[i] = 140; //最初、線の左端
  }
}
function draw() {
  background(240);
  noStroke();
  textAlign(LEFT, CENTER);
  textSize(15);
  text(title, 30, 30);  //データタイトルの表示
  fill(200, 0, 0);      //凡例を描画
  circle(340, 30, d);  //赤い円
  fill(0);
  circle(370, 30, d);  //黒い円
  textAlign(CENTER, CENTER);
  textSize(8);  //文字サイズを8ピクセルにする
  fill(255);
  text("開学年", 370, 30);  //黒い円の上に文字を描く
  for (let i=1; i<=10; i++) {
    drawData(i);    // データiを描画
  }
}
function drawData(index) {
  const area = Datamate.area(index);   // 割り当てられたエリアをとりだす
  const open = Datamate.value(area.name, 0);
  const women = Datamate.value(area.name, 1);
  strokeWeight(5);  //線を太く
  noFill();
  stroke(0);
  line(area.left+140, area.centerY, area.right-10, area.centerY); //横線を描く
  noStroke();
  textSize(8);
  //開学の年 黒い円
  const openPos = map(open, 1100, 2020, area.left+140, area.right-10);
  fill(0);
  circle(openPos, area.centerY, d);
  textAlign(CENTER, CENTER);
  fill(255);
  text(open, openPos, area.centerY); //円の上に文字を描く
  //女子学生入学年 赤い円
  const womenPos = map(women, 1100, 2020, area.left+140, area.right-10);
  fill(200, 0, 0);
  currentX[index-1] = currentX[index-1] + (womenPos - currentX[index-1]) * keisu; //右へ動く
  circle(currentX[index-1], area.centerY, d);
  textAlign(CENTER, CENTER);
  fill(255);
  text(women, currentX[index-1], area.centerY); //円の上に文字を描く
  //黒円上で、マウス押下すると、赤円が開学のところまで戻り、移動を再開
  if (mouseIsPressed && dist(mouseX, mouseY, openPos, area.centerY)<15) {
    currentX[index-1] = openPos;  //赤円の位置を開学のところへ
    fill(0); //黒円を書く準備
    circle(openPos, area.centerY, d);
    textAlign(CENTER, CENTER);
    fill(255);
    text(open, openPos, area.centerY); //円の上に文字を描く
  }
  fill(0);
  textAlign(LEFT, CENTER);
  textSize(12);
  text(area.name+"大学", area.left+10, area.centerY);
}
copyright © info