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

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)。次のような表で表されるデータです。
FacebookTwitterPinterestYouTube TumblrInstagram
2010年1月56.1113.77013.5800
2011年1月43.4423.62022.4600
2012年1月78.4314.003.0900
2013年1月31.6356.422.944.4200
2014年1月50.8222.323.612.4517.560
2015年1月60.0131.422.270.184.460
2016年1月69.9817.924.110.355.580
2017年1月72.567.693.340.332.612.29
2018年1月52.2720.589.797.271.956.8
2019年1月20.2553.6313.257.321.23.3
2020年1月20.1342.2622.37.070.866.53
2021年1月14.2858.3416.166.70.82.69
2022年1月14.8248.4719.935.80.948.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()関数の引数を容易に指定できます。 上の例で、 となります。

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

クリックで開始⇔停止

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