CSVファイルを読む

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

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

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

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

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

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

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

Datamate.make("inuneko.csv");

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

【リストT2-6-1】
const title = "猫と犬の飼育推計数";
const titleX = 120;  //この↑表題を表示するx座標
function setup() {
  createCanvas(450, 250);
  Datamate.make("inuneko.csv");  //csvファイルを読んで、内部テーブルを作る
  Datamate.makeAreas(0, 0, width, height, 2, 1);
  Datamate.bindAreas([0, 1]);
  Datamate.play(0.3, 0);  //横方向に動かす
  Datamate.loop(true);    //ループする
  noStroke();
  textAlign(CENTER, CENTER);
}
function draw() {
  background(210);
  drawData('猫', 0);    // エリア0に'猫'データを表示、drawData(Datamate.rowName(0), 0);と同じ
  drawData('犬', 1);    // エリア1に'犬'データを表示、drawData(Datamate.rowName(1), 1);と同じ
}
function drawData(syurui, block) {
  const area = Datamate.area(block);  //エリアをとりだす
  const index = Datamate.focusX(1);   //今フォーカスしているデータの次のインデックス
  const indexForHokan = Datamate.focusX(0, true);   //今フォーカスしているデータと次のデータの間
  const year = Datamate.columnName(index);          //列のヘッダ
  const value = Datamate.value(syurui, indexForHokan);
  const w = map(value, 7000, 9000, 30, 200);   //データを円の直径に換算
  fill(200, 0, 0);
  circle(area.centerX, area.centerY, w, w);
  fill(0);
  text(title+"("+year+")", titleX, 30);  //列のヘッダの表示
  fill(255);
  text(syurui + "\n" + Datamate.value(syurui, index) + "千頭", area.centerX, area.centerY);
}

演習問題

【問題T2-6-1】
リストT2-6-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-6-2】
問題T2-6-1と同じデータを棒グラフで表してみよう。

クリックで開始⇔停止

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

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

となります。

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

クリックで開始⇔停止

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