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

CSVファイルを読む

ラーニングトレイル2の(2)時系列変化DM版で、Datamate.jsライブラリを使って、円の大きさでデータの時系列変化を表しました。データは配列を使って指定していましたが、CSVファイルを読み込めると便利です。

CSVファイルからデータセットを作る

ファイルを読み込んで、Datamateのデータセットを作るには次のように指定します。
Datamate.make("csvファイル名");
2013年から2021年の犬猫の飼育数を保存した次のようなCSVファイルinuneko.csvを用意しました。
年,猫,犬
2013年,8409,8714
2014年,8425,8200
2015年,8297,7994
2016年,8333,8008
2017年,8672,7682
2018年,8849,7616
2019年,8764,7579
2020年,8628,7341
2021年,8946,7106
Datamate.make()の引数にデータの配列を指定するのではなく、このファイルからデータを読みます。
Datamate.make("inuneko.csv");
リストT2-6-1は、リストT2-5-1のDatamate.make()部分だけを変更したものです。

【リストT2-6-1】
const title = "猫と犬の飼育推計数";
const titleX = 120;  //この↑表題を表示するx座標
const keisu = 0.05;
let d = 0;
function setup() {
  createCanvas(450, 250);
  Datamate.make("inuneko.csv");  //csvファイルを読んで、データセットを作る
  Datamate.makeArea(0, 0, width, height, 2, 1);
  Datamate.bindAreas([1, 2]);
  Datamate.play(0.3);
  noStroke();
  textAlign(CENTER, CENTER);
}
function draw() {
  background(220);
  drawData(1);    // データ1を描画
  drawData(2);    // データ2を描画
}
function drawData(index) {
  const area = Datamate.area(index);    //割り当てられたエリアを取り出す
  const year = Datamate.current('年');  //データ名'年'からデータを取り出す
  const value = Datamate.current(area.name);  //結びついたデータセットからデータを取り出す
  const w = map(value, 7000, 9000, 30, 200);  //データを円の直径に換算
  fill(200, 0, 0);
  ellipse(area.centerX, area.centerY, w, w);
  fill(0);
  text(title+"("+year+")", titleX, 30);  //表題と年の表示
  fill(255);
  text(area.name + "\n" + value+ "千頭", area.centerX, area.centerY);
}

演習問題

【問題T2-6-1】
リストT2-6-1を参考に、次のように、SNSのユーザ数の年ごとの変化を表してみよう。

クリックで開始⇔停止

日本でのSNS利用者のサービスごとの割合をCSVファイルSNS-JP.csvを用意しました(StatCounter)。

【問題T2-6-2】
問題T2-6-1と同じデータを棒グラフで表してみよう。

クリックで開始⇔停止

Datamate.area()関数が返すareaオブジェクトがもつ変数を使うと、矩形を描くrect()関数の引数を容易に指定できます。 上の例で、 となります。

【問題T2-6-3】
Datamate.jsライブラリのサイトの「描画を工夫する」を参考に、円や矩形とは別の方法で、データを表してみよう。下の例では、ユーザの割合を点の密度で表してみました。

クリックで開始⇔停止

【問題T2-6-4】
自分が関心のある分野のデータをCSVファイルにまとめ、それを元にユニークなインフォグラフィックスを描いてみよう。
copyright © info