黒田 晋一 とある案件の版下の中に棒グラフを入れる機会に遭遇。
試しにProcessingを使ってグラフを作ってみたので、そのコードについて。
資料はビジュアライジング・データの4章「時系列」を参照。
ちょっとした改変しかしておらず、すべてのコードを公開するとオライリーさんに怒られそうなので、改変部分だけを公開。
内容は「商品毎に含まれる何かの量(%)を比較する棒グラフ」という、ごく普通のもの。
用意するファイル
- データを入力したtsvファイル
- テーブルを読み込むためのクラスファイル
tsvファイルの内容はとりあえず、下記のようなカンジで。
一番上の行は項目名。
item data item1 68.0 item2 61.0 item3 72.0 item4 80.0 item5 45.0 item6 58.0 item7 92.0 item8 78.0 item9 42.0 item10 51.0
クラスファイルは参照資料のとおり、「FloatTable.pde」を利用。
コード内容
商品毎に棒グラフを描いて、
値が高いとグラフの彩度が高くなるコード。
import processing.pdf.*; //PDFライブラリをインポート
float dataMin, dataMax; //量の最小値、最大値
float plotX1, plotY1; //描画領域の最小値
float plotX2, plotY2; //描画領域の最大値
int rowCount; //行数カウント用
String[] items; //すべての商品名を格納ための配列
・
・
・
(その他、変数宣言)
void setup(){
size(600,600);
noLoop(); //最終的にPDFに出力するので、実行を1回に。
beginRecord(PDF, "draw.pdf");
colorMode(HSB, 360,100,100);
data = new FloatTable("読み込むデータ.tsv");
rowCount = data.getRowCount(); //行数カウント
items = data.getRowNames(); //商品名を格納
・
・
・
smooth();
}
void draw(){
background(360);
fill(360);
drawPerLabels(); //垂直ラベルを描くメソッド
drawDataGraph(0); //グラフを描くメソッド
}
void drawDataGraph(int col){
textAlign(CENTER, CENTER);
noStroke();
rectMode(CORNERS);
for(int row = 0; row < rowCount; row++){
if(data.isValid(row, col)){
float getValue = data.getFloat(row, col); //商品の値を取得。
int value = int(getValue); //値を整数値に。
float x = map(row, 0, items.length-1, plotX1+barWidth, plotX2-barWidth);
float y = map(value, dataMin, dataMax, plotY2, plotY1);
float barColor = map(value, dataMin, dataMax, 0, 100); //値を元にグラフの色の彩度を設定。
fill(150, barColor, 100);
rect(x-barWidth/2, y, x+barWidth/2, plotY2); //グラフを描画
fill(0);
textSize(12);
text(items[row], x, plotY2 + 20); //商品名を表示
textSize(12);
fill(350);
ellipse(x+barWidth/2, y, 30, 30);
fill(0);
text(value + "%", x+barWidth/2, y-1); //値を表示
}
}
}
void drawPerLabels(){
・
・
(省略)
・
・
・
strokeWeight(1);
line(plotX1, y, plotX2, y); //10%毎に横線を描画。
}
}
void keyPressed(){
endRecord(); //なにかキーを打つとPDF出力。
}
商品名に日本語を使うとPDF出力時に文字が抜けてしまう。
でも、PDFで書き出した後はIllustratorで開いてさらに編集可能なので、気にしない。