03 October 2012
東京の地下鉄の路線サインをGviz(Ruby Graphviz Wrapper)で描く
(追記:2014-3-3) Gvizについてのまとめ頁を作りました。
前回の投稿で東京の地下鉄路線図を描きました。
こうなると路線サインもほしいです。作りましょう、Gvizで。
データの準備
前回使ったcolorsをそのまま使います。これに各路線のマークを統合します。
# encoding: UTF-8
require "gviz"
colors = [["銀座線", "#f39700"], ["丸ノ内線", "#e60012"], ["日比谷線", "#9caeb7"], ["東西線", "#00a7db"], ["千代田線", "#009944"], ["有楽町線", "#d7c447"], ["半蔵門線", "#9b7cb6"], ["南北線", "#00ada9"], ["副都心線", "#bb641d"], ["浅草線", "#e85298"], ["三田線", "#0079c2"], ["新宿線", "#6cbb5a"], ["大江戸線", "#b6007a"], ["荒川線", "#7aaa16"], ["舎人ライナー", "#999999"]]
marks = %w(G M H T C Y Z N F A I S E).map(&:intern)
logodata = marks.zip(colors).map(&:flatten) # => [[:G, "銀座線", "#f39700"], [:M, "丸ノ内線", "#e60012"], [:H, "日比谷線", "#9caeb7"], [:T, "東西線", "#00a7db"], [:C, "千代田線", "#009944"], [:Y, "有楽町線", "#d7c447"], [:Z, "半蔵門線", "#9b7cb6"], [:N, "南北線", "#00ada9"], [:F, "副都心線", "#bb641d"], [:A, "浅草線", "#e85298"], [:I, "三田線", "#0079c2"], [:S, "新宿線", "#6cbb5a"], [:E, "大江戸線", "#b6007a"]]
路線サインの描画
さて下準備ができたので路線サインを描きます。各ノードの輪郭線を太くして色を付けます。フォントは「新ゴ」「Frutiger Condensed」というのが使われてるそうですが1、ここでは似たもので代用します。
Graph do
nodes shape:'circle', penwidth:16, fontname:'Futura', fontsize:24
logodata.each do |id, line, color|
subgraph do
global label:line, fontname:'Hiragino Maru Gothic Pro', labelloc:'b', color:'white'
node id, color:color
end
end
save(:logo, :png)
end
完成品はこちら!
キレイキレイ!
以上ですm(__)m
Gviz sample: Tokyo Metro with m_station data of 駅.jp — Gist
関連記事:
Yet Another Ruby Graphviz Interfaceを作ったからみんなで大量のグラフを作って遊ぼうよ!
Ruby Graphvizラッパー「Gviz」でアメリカ合衆国をデータビジュアライズしよう!
東京の地下鉄をGviz(Ruby Graphviz Wrapper)で描く
- http://kiccho.ausp.net/archives/2008/03/tokyo_metro_sign_font.html ↩
カラーユニバーサルデザイン by カラーユニバーサルデザイン機構
blog comments powered by Disqus