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)。次のような表で表されるデータです。
年 | YouTube | Tumblr | ||||
---|---|---|---|---|---|---|
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ファイルにまとめ、それを元にユニークなインフォグラフィックスを描いてみよう。