CSVファイルを読む

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

CSVファイルから内部テーブルを作る

ファイルを読み込んで、Datamateの内部テーブルを作るには次のように指定します。

Datamate.make("csvファイル名");

2013年から2023年の犬猫の飼育数を保存した次のようなCSVファイルinuneko.csvを用意しました。

年, 2013年, 2014年, 2015年, 2016年, 2017年, 2018年, 2019年, 2020年, 2021年, 2022年, 2023年
猫, 8409, 8425, 8297, 8333, 8672, 8849, 8764, 8628, 8946, 8837, 9069
犬, 8714, 8200, 7994, 8008, 7682, 7616, 7579, 7341, 7106, 7053, 6844

リストT2-2-1では、Datamate.make()の引数に、タイトルとデータの配列を指定していました。代わりに、 make()関数の引数に csvファイル名を指定することで、このファイルからデータを読み込めます。

Datamate.make("inuneko.csv");

リストT2-5-1は、問題T2-2-1のDatamate.make()部分だけを変更したものです。

【リストT2-5-1】
let title = "猫と犬の飼育推計数";
let titleX = 120;  //この↑表題を表示するx座標
let catImg, dogImg;
let move = true;
function preload() {
  catImg = loadImage("./images/catB100.png");
  dogImg = loadImage("./images/dogW100.png");
}

function setup() {
  createCanvas(450, 250);
  Datamate.make("inuneko.csv");
  Datamate.makeAreas(0, 0, width, height, 2, 1);
  Datamate.play(0.3, 0);  //横方向に動かす
  Datamate.loop(true, false);    //ループする
  noStroke();
  textAlign(CENTER, CENTER);
  imageMode(CENTER);  //画像を描く際に中心座標を指定
}
function draw() {
  background(220);
  drawData('猫', 0, catImg);    // 表示域0に'猫'データを表示
  drawData('犬', 1, dogImg);    // 表示域1に'犬'データを表示
}
function drawData(syurui, block, img) {
  let area = Datamate.area(block);  // エリアをとりだす
  let dataIndex = Datamate.focusX(0);  //今フォーカスしているデータのインデックス
  let indexHokan = Datamate.focusX(0, true);   //今フォーカスしているデータと次のデータの間
  let year = Datamate.columnName(dataIndex);    //列のヘッダ
  let value = Datamate.value(syurui, indexHokan);
  let w = map(value, 6000, 10000, 30, 200);   //データを画像の大きさに換算
  image(img, area.centerX, area.centerY, w, w);
  text(title+"("+year+")", titleX, 30);  //データ名の表示
  text(Datamate.value(syurui, dataIndex) + "千頭", area.centerX, area.bottom-20);
}

演習問題

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

クリックで開始⇔停止

日本でのSNSサービスごとの利用者の割合を入れたCSVファイルSNS-JP.csvを用意しました(StatCounter)。次のような表で表されるデータです。

年	Facebook	Twitter	Pinterest	YouTube	Tumblr	Instagram
2010年1月	56.11	13.77	0	13.58	0	0
2011年1月	43.44	23.62	0	22.46	0	0
2012年1月	78.43	14.0	0	3.09	0	0
2013年1月	31.63	56.42	2.94	4.42	0	0
2014年1月	50.82	22.32	3.61	2.45	17.56	0
2015年1月	60.01	31.42	2.27	0.18	4.46	0
2016年1月	69.98	17.92	4.11	0.35	5.58	0
2017年1月	72.56	7.69	3.34	0.33	2.6	12.29
2018年1月	52.27	20.58	9.79	7.27	1.95	6.8
2019年1月	20.25	53.63	13.25	7.32	1.2	3.3
2020年1月	20.13	42.26	22.3	7.07	0.86	6.53
2021年1月	14.28	58.34	16.16	6.7	0.8	2.69
2022年1月	14.82	48.47	19.93	5.8	0.94	8.61

年ごとの変化は、フォーカスするデータを内部テーブルの縦方向(行)に再生することで実現します。

Datamate.play(0, 0.3);         //縦方向に、約3.3秒ごとに動かす
Datamate.loop(false, true);    //ループする

フォーカスしているデータのインデックスはfoucusY()関数を使って、次のように得られます。

const index = Datamate.focusY(1);             //今フォーカスしているデータの次のインデックス
const indexHokan = Datamate.focusY(0, true);  //今フォーカスしているデータと次のデータの間

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

クリックで開始⇔停止

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

・矩形の幅は、area.width/2 (ブロック幅の半分にする)
・矩形の高さは、変換したデータ値 (hとしておこう)
・矩形の左上角のx座標は、area.left+area.width/4 (矩形をブロックの中央に置く)
・矩形の左上角のy座標は、area.bottom-h-50 (50引いているのは、データ値表示の上に置くため）

となります。

【問題T2-5-3】
Datamate.jsライブラリのサイトの「visualization samples」を参考に、円や矩形の大きさとは別の方法で、データを表してみよう。
下は、「visualization samples」のDropsのように、ランダムな位置に表示される円の数で、数値を表した例です。ユーザの割合が点の密度で表現されます。

クリックで開始⇔停止

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