Graphvizで表そして気になる都知事選2014のゆくえ

(追記：2014-3-3) Gvizについてのまとめ頁を作りました。

Gvizの目次 - Rubyの世界からGraphvizの世界にこんにちは！

GraphvizのRubyラッパーであるgvizに対して、@otahiさんからPull Requestを頂きました。

Enable HTML like label in attributes by otahi · Pull Request #1 · melborne/Gviz

GraphvizのラベルにHTML風の記法が使えるなんて、知らなかったよ！

@otahiさんに感謝しつつ早々本体に取り込ませて頂き、その対応版v0.3.3をリリースしました。

gviz | RubyGems.org | your community gem host

表型ノード

HTML風ラベル（HTML-like Labels）は、<TABLE>タグを使って表のようなノードを作ることが主たる用途になります。

Node Shapes | Graphviz - Graph Visualization Software

実はごく簡単な表型ノードは、Record形(またはMrecord)で{}と|を使った特殊な記法でラベルを書くことで実現できます。

#graph.ru
node :table, shape:"Mrecord", label:"{Ruby | {String|Array|Hash}}"

save :record

% gviz build

Alt title noshadow

しかしこの記法ではリッチな表を作ることはできません。

サンプル

そこでHTML風記法の出番です。

ヒアドキュメントを使ってこんな風に書けば…

	#graph.ru
	node :a, shape:'box', label:<<-HTML
	<table border="0">
	<tr>
	<td rowspan="3"><img src="ruby.png"/></td>
	<td bgcolor="#9B0A00" colspan='3'>
	<font color="white" point-size="24.0" face="herculanum">Ruby</font>
	</td>
	</tr>
	<tr>
	<td bgcolor="magenta">String</td>
	<td bgcolor="yellow">Array</td>
	<td bgcolor="green">Hash</td>
	</tr>
	<tr>
	<td bgcolor="cyan" colspan="3">
	<table border="0" cellpadding="0">
	<tr>
	<td><font color="skyblue">Hello</font></td>
	<td><font color="purple">Ruby</font></td>
	<td><font color="red">World!</font></td>
	</tr>
	</table>
	</td>
	</tr>
	</table>
	HTML

	save :table

view raw graph.ru hosted with ❤ by GitHub

こんなノードが作れます。

Alt title noshadow

こんな風に書けば…

	global rankdir:'LR'

	node :a, shape:'plaintext', label:<<-HTML
	<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
	<TR><TD ROWSPAN="3" BGCOLOR="yellow">class</TD></TR>
	<TR><TD PORT="here" BGCOLOR="lightblue">qualifier</TD></TR>
	</TABLE>
	HTML

	node :b, shape:'ellipse', style:'filled', label:<<-HTML
	<TABLE BGCOLOR="bisque">
	<TR>
	<TD COLSPAN="3">elephant</TD>
	<TD ROWSPAN="2" BGCOLOR="chartreuse"
	VALIGN="bottom" ALIGN="right">two</TD>
	</TR>
	<TR>
	<TD COLSPAN="2" ROWSPAN="2">
	<TABLE BGCOLOR="grey">
	<TR><TD>corn</TD></TR>
	<TR><TD BGCOLOR="yellow">c</TD></TR>
	<TR><TD>f</TD></TR>
	</TABLE>
	</TD>
	<TD BGCOLOR="white">penguin</TD>
	</TR>
	<TR>
	<TD COLSPAN="2" BORDER="4" ALIGN="right" PORT="there">4</TD>
	</TR>
	</TABLE>
	HTML

	node :c, shape:'plaintext', label:<<-HTML
	<TABLE BORDER="0">
	<TR>
	<TD>long line 1<BR/>line 2<BR ALIGN="LEFT"/>line 3<BR ALIGN="RIGHT"/></TD>
	</TR>
	</TABLE>
	HTML

	subgraph do
	rank :same, :b, :c
	edge 'a:here_b:there', dir:'both', arrowtail:'diamond'
	route :c => :b
	node :d, shape:'triangle'
	route :d => :c
	edge :'d_c', label:<<-HTML
	<TABLE>
	<TR><TD BGCOLOR="red" WIDTH="10"> </TD>
	<TD>Edge labels<BR/>also</TD>
	<TD BGCOLOR="blue" WIDTH="10"> </TD>
	</TR>
	</TABLE>
	HTML
	end

	save :sample

view raw graph2.ru hosted with ❤ by GitHub

こんなグラフが作れます（出典）。

Alt title noshadow

こんな風に書けば…

	#election.rb
	require "gviz"

	header, *candidates = DATA.readlines.map(&:split)

	Graph do
	global layout:'fdp'
	nodes shape:"plaintext", style:"filled", fillcolor:"white"
	node :election, shape:'doublecircle', label:"2014年\n東京都知事選挙", fillcolor:'orange'

	candidates.each do \|name, hira, age, party, exp, job\|
	route :election => name.to_id
	node name.to_id, label:<<-"HTML"
	<table>
	<tr><td bgcolor="navy" colspan='2'><font color="white" point-size="18.0" face="hiragino maru gothic pro">#{name}</font></td></tr>
	<tr>
	<td bgcolor="deepskyblue">#{header[1]}</td>
	<td bgcolor="azure">#{age}</td>
	</tr>
	<tr>
	<td bgcolor="deepskyblue">#{header[2]}</td>
	<td bgcolor="azure">#{party.gsub(/(.{10})/, '\1<br/>')}</td>
	</tr>
	<tr>
	<td bgcolor="deepskyblue">#{header[3]}</td>
	<td bgcolor="azure">#{exp}</td>
	</tr>
	<tr>
	<td bgcolor="deepskyblue">#{header[4]}</td>
	<td bgcolor="azure">#{job}</td>
	</tr>
	</table>
	HTML
	end

	save :election
	end

	__END__
	候補者名年齢党派現元新肩書き
	ひめじけんじ（ひめじ・けんじ） 61 無所属新建物管理業
	宇都宮健児（うつのみや・けんじ） 67 無所属（日本共産党、社会民主党、緑の党、新社会党推薦）新弁護士
	ドクター・中松（どくたあ・なかまつ） 85 無所属新発明家
	田母神俊雄（たもがみ・としお） 65 無所属（維新政党・新風支援[7]）新元航空幕僚長
	鈴木達夫（すずき・たつお） 73 無所属新弁護士
	中川智晴（なかがわ・ともはる） 55 無所属新一級建築士
	舛添要一（ますぞえ・よういち） 65 無所属（公明党、自民党東京都連支援）新元厚生労働大臣
	細川護熙（ほそかわ・もりひろ） 76 無所属（民主党、生活の党、結いの党支援）新元内閣総理大臣
	マック赤坂（まっく・あかさか） 65 スマイル党新セラピスト
	家入一真（いえいり・かずま） 35 無所属新 IT関連会社役員
	内藤久遠（ないとう・ひさお） 56 無所属新元建設機械販売会社社員
	金子博（かねこ・ひろし） 84 無所属新ホテル運営業
	五十嵐政一（いがらし・まさいち） 82 無所属新一般社団法人理事長
	酒向英一（さこう・えいいち） 64 無所属新元市役所農務課職員
	松山親憲（まつやま・ちかのり） 72 無所属新警備会社アルバイト
	根上隆（ねがみ・たかし） 64 無所属新元中野区職員

view raw election.rb hosted with ❤ by GitHub

% ruby election.rb

2014年東京都知事選挙 - Wikipedia

こんなグラフが作れます。

（クリックで拡大）

誰が勝つんですかねぇ。

gviz | RubyGems.org | your community gem host

melborne/Gviz

100円〜で好評発売中！
M'ELBORNE BOOKS