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

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)。次のような表で表されるデータです。
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-5-2】
問題T2-5-1と同じデータを棒グラフで表してみよう。

クリックで開始⇔停止

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

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

クリックで開始⇔停止

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