yoppa.org


バイオメディア・アート

Processingによるデータの可視化 – 時系列のデータを可視化する

今日の目標

  • 時系列のデータファイル(タブ区切りのテキスト)を読みこみ、Processingで可視化する
  • 「ビジュアライジング・データ」の4章、「時系列」のサンプルプログラムを解析
  • まずは普通にグラフ化する手法を学ぶ
  • より自由な発想でビジュアライズしてみる (バイオDJ!?)

Visualizing Dataのサンプルプログラムをダウンロード

  • 書籍「ビジュアライジング・データ」のサンプルプログラム一式をダウンロードする
  • 今日の内容のベースとなる、時系列のデータをプロットするプログラムもこの中に収録されている
  • ダウンロードURL http://benfry.com/writing/archives/3

シンプルなプロット表示を理解する

時系列のデータを点の連なりで表現

  • 「ch04-milkteacoffee」→「figure_01_just_points」を開く
  • まずは実行してみる
  • 点によるシンプルなプロットが表示される

  • このプロットは、dataフォルダ内にある、tab区切りのデータファイルを読み込んでいる
  • データの内容は下記のとおり

プログラムのおおまかな構造

  • プログラムの構造 – メインのプログラム(figure_01_just_points.pde)と、FloatTableクラス(FloatTable.pde)から構成
  • メインプログラム – FloatTableクラスを利用してデータを読み込み、データをプロットする点を描画
  • FloatTableクラス – 表形式のデータファイルを読み込んで、その値を利用しやすい形に変換する。また、最大値や最小値の算出などデータを扱うための様々な便利な機能を備えている

FloatTableクラス

  • FloatTableクラスは、tsv(タブ区切り)形式の表データをファイルから読み込み、データの最大値と最小値を求めたり、余計なデータを除去したりと、様々な機能を内包している
  • FloatTableクラスのプロパティ(属性)とメソッド(機能)をまとめてみる
  • プロパティ(属性)
    • rowCount – 行の数 (横)
    • columnCount – 列の数 (縦)
    • data[][] – 読み込まれたデータ data[行][列]
    • rowNames[] – 行につけられたラベル
    • columnNames[] – 列につけられたラベル
  • メソッド
    • FloatTable(String filename) – コンストラクタ。指定されたファイルからタブ区切りのデータを読み込み、取得された値をプロパティに読み込む
    • void scrubQuotes(String[] array) – データから、引用符(")を除去する
    • int getRowCount() – 行の数を数える
    • String getRowName(int rowIndex) – 指定した行の名前を返す
    • String[] getRowNames() – 全ての行の名前を返す
    • int getRowIndex(String name) – 行の名前から行番号を返す
    • int getColumnCount() – 列の数を数える
    • String getColumnName(int colndex) – 指定した列の名前を返す
    • String[] getColumnNames() – 全ての列の名前を返す
    • float getFloat(int rowIndex, int col) – 指定した行と列の値をFloat型で返す
    • boolean isValid(int row, int col) – 指定した行と列の値が存在するかどうかを調べる
    • float getColumnMin(int col) – 指定した列の最小値を求める
    • float getColumnMax(int col) – 指定した列の最大値を求める
    • float getRowMin(int col) – 指定した行の最小値を求める
    • float getRowMax(int col) – 指定した行の最大値を求める
    • float getTableMax() – 表全体の最大値を求める
  • コメントを付加したソースコードは下記のとおり

メインプログラムの構造

  • メインプログラム(figure_01_just_points.pde)では、このFloatTableクラスを活用して、時系列のデータを点によってプロットしている
  • void setup()
    • 画面の初期設定
    • タブ区切りのデータファイル、"milk-tea-coffe.tsv"をデータとして、FloatTableクラスをインスタンス化 → data
    • データを読み込んだFloatTableのインスタンスdataを利用して、初期化に必要な値を取得
    • 年 – 行の名前から
    • プロットの開始年 – 行の最小値
    • プロットの終了年 – 行の最大値
    • プロットする画面の領域を計算
  • void draw()
    • プロット画面の背景を生成
    • drawDataPoints() 関数を呼び出し、読み出すコラムは0
  • void drawDataPoints()
    • データの行数を計算
    • 指定したコラムの値を取り出し
    • 画面内に納まるように、値を整える(map関数)
    • 値を整えた座標に点を描画
  • map() 関数
    • map(値, 変換前の値の最小値, 変換前の値の最大値, 変換後の値の最小値, 変換後の値の最大値)
    • 数値の範囲を別の範囲に変換する
  • 例:プロットするデータの最小値が dataMin、最大値が dataMax のときに、y座標 plotY2 から plotY1 の範囲にちょうど納まるように値 value を変換する
    • map(value, dataMin, dataMax, plotY2, plotY1);

情報を表示

  • 現在表示しているデータの内容や数値を文字や図形で記述する
  • 表示しているデータの内容 → Milk
  • 垂直方向の目盛(消費量)
  • 垂直方向の消費量の数値
  • 水平方向の目盛(年)
  • 水平方向の年の値
  • ラベル → Gallons cosumed per caita, Year
  • キーボードで”]”を入力すると次の列のデータに変更
  • キーボードで”[“を入力すると前の列のデータに変更

線分で表示する

  • 点でプロットするのではなく、線でそれぞれのデータを結んでいく
  • void drawDataLine(int col) – 指定した列のデータを線分(vertex)で結んでいる

より自由な発想で視覚化してみる

  • この授業の趣旨は、科学的に厳密な視覚化ではない
  • より自由な発想で、データをもとに形態を生成してみる
  • バイオVJ?

応用1:円の大きさ量でを表現してみる

  • 数値の変化を円の直径にあてはめて、円の大きさの変化によって、情報を表現してみる

応用2:色の透明度で量を表現してみる

  • 描画する図形の透明度によって、データを表現してみる
  • 数値が高くなるほど、透明度が下がるようにする

応用3:色相で量を表現してみる

  • 透明度ではなく、色相で表現するように変更してみる
  • 低い数値 → 青(色相=240)、高い数値 → 赤(色相=360) というようにマッピングしてみる

応用4:放射状に配置してみる

  • 値の変化の様子を放射状に配置してみる

応用5:アニメーションで変化を表現する

  • 値が変化する様子を、円の大きさがアニメーションすることで表現してみる

サンプルファイルのダウンロード

今回の授業の全てのサンプルのソースコードは、下記のリンクよりダウンロードしてください。