<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Churadesign &#187; processing</title>
	<atom:link href="http://www.churadesign.com/tag/processing/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.churadesign.com</link>
	<description>system &#38; web design</description>
	<lastBuildDate>Sun, 24 May 2009 13:38:58 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>「ビジュアライジング・データ」 日本の郵便番号をマッピング</title>
		<link>http://www.churadesign.com/2009/01/10/%e3%80%8c%e3%83%93%e3%82%b8%e3%83%a5%e3%82%a2%e3%83%a9%e3%82%a4%e3%82%b8%e3%83%b3%e3%82%b0%e3%83%bb%e3%83%87%e3%83%bc%e3%82%bf%e3%80%8d-%e6%97%a5%e6%9c%ac%e3%81%ae%e9%83%b5%e4%be%bf%e7%95%aa%e5%8f%b7/</link>
		<comments>http://www.churadesign.com/2009/01/10/%e3%80%8c%e3%83%93%e3%82%b8%e3%83%a5%e3%82%a2%e3%83%a9%e3%82%a4%e3%82%b8%e3%83%b3%e3%82%b0%e3%83%bb%e3%83%87%e3%83%bc%e3%82%bf%e3%80%8d-%e6%97%a5%e6%9c%ac%e3%81%ae%e9%83%b5%e4%be%bf%e7%95%aa%e5%8f%b7/#comments</comments>
		<pubDate>Sat, 10 Jan 2009 08:53:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Article (記事)]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[visualizing]]></category>

		<guid isPermaLink="false">http://www.churadesign.com/?p=97</guid>
		<description><![CDATA[&#8220;ビジュアライジング・データ ―Processingによる情報視覚化手法&#8221; にアメリカの郵便番号の緯度経度を平面上にマッピングし、キーボードからの郵便番号入力にしたがって、入力した郵便番号に部分一致するポイントをインタラクティブに表示するサンプルが載っています。 例えば、「2」と入力すると、郵便番号が「2」から始まるエリアがハイライトされ、それ以外が暗くなります。続けて「1」と入力すると「21」と続くエリアが絞り込まれてハイライトされます。 ズーム機能をオンにすると、一致したエリアになめらかにズームし、郵便番号の緯度経度といった無機質なデータをとても美しく表示してくれます。 本書はProcessingによるデータ表示の手法だけでなく、オンライン上にあるデータを取得し、解析し、不要なデータを削除するフィルタリングの手法についても書かれており、自分で応用してさまざまなデータを視覚化していくことができるようになるでしょう。 このサンプルを参考に日本の郵便番号で試してみることにしました。アメリカの郵便番号は5桁ですが、日本は7桁なのでより精緻なマップを得ることができることを期待しています。 郵便番号から緯度経度データ取得 郵便番号は郵政局のwebサイトからダウンロードできますが、残念なことに緯度経度情報が含まれていません。GoogleMapsAPIのGeocordingを使って地名から緯度経度情報を取得する簡単なスクリプトをRubyでつくりました。 データ量が多いので、同じIPからリクエスト続けていると5000件程度でGoogleMapsから拒否されるようになるので、自動的にプロキシを変更するように、データ取得をどこからでもレジュームできるように作っておくとよいでしょう。 郵便番号リストは住所に（その他）と入っていたり（１丁目〜１０丁目）、（ビル名何階）と書いてあったり表記がばらばらなので、Geocordingに投げて緯度経度が戻ってこないものは今回は無視することにしました。マッピングに必要なデータは十分な得られました。 Processingプログラム修正 本書のサンプルが外部データを取得して表示するようにつくられているため、ほとんどそのままで利用できます。アメリカの郵便番号が5桁なので、日本の郵便番号7桁に合うようにいくつか修正します。 実行 日本が浮かび上がりました。人口の密な地域はポイントもたくさんありますし、郵便番号の緯度経度だけから山脈がなんとなくわかったりとおもしろいです。9からはじまる郵便番号は沖縄と北陸、南東北まとめて割り振られたりします。 いくつかGeocordingが突飛な緯度経度を返しているようで、7からはじまる郵便番号がぽつっと関東にあったりするので、はずれ値をフィルタリングする処理を追加する必要がありそうです。 もうひとつの問題はデバイスフォントをつかって日本語が表示できない。。vlwというフォントファイルを日本語含めて作成することはできるようなのですが、フォントも配布となるとサイズが大きくなってしまうので。 データビジュアライジング この本とても勉強になります。いろいろと刺激されてなにか作りたくなります。おすすめです！ &#8220;ビジュアライジング・データ ―Processingによる情報視覚化手法&#8221; 追記: ・いくつか外れ値がある ・日本語表示できない。 と問題がありますが、アプレットをアップしましたのでぜひお試しください。フォーカスがあたっている状態で郵便番号を入力すると、一致したエリアがハイライトされます。ズームモードに入るには右下の「ZOOM」をクリックします。]]></description>
			<content:encoded><![CDATA[<div id="attachment_99" class="wp-caption alignright" style="width: 330px"><a href="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data1.png"><img class="size-thumbnail wp-image-99" title="ビジュアライジング・データ サンプルアメリカ" src="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data1-320x201.png" alt="ビジュアライジング・データ サンプルアメリカ" width="320" height="201" /></a><p class="wp-caption-text">ビジュアライジング・データ サンプルアメリカ</p></div>
<p><a href="http://www.amazon.co.jp/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%A9%E3%82%A4%E3%82%B8%E3%83%B3%E3%82%B0%E3%83%BB%E3%83%87%E3%83%BC%E3%82%BF-%E2%80%95Processing%E3%81%AB%E3%82%88%E3%82%8B%E6%83%85%E5%A0%B1%E8%A6%96%E8%A6%9A%E5%8C%96%E6%89%8B%E6%B3%95-Ben-Fry/dp/4873113784%3FSubscriptionId%3D0PZ7TM66EXQCXFVTMTR2%26tag%3Dc9radyn-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4873113784">&#8220;ビジュアライジング・データ ―Processingによる情報視覚化手法&#8221; </a>にアメリカの郵便番号の緯度経度を平面上にマッピングし、キーボードからの郵便番号入力にしたがって、入力した郵便番号に部分一致するポイントをインタラクティブに表示するサンプルが載っています。</p>
<p>例えば、「2」と入力すると、郵便番号が「2」から始まるエリアがハイライトされ、それ以外が暗くなります。続けて「1」と入力すると「21」と続くエリアが絞り込まれてハイライトされます。</p>
<p>ズーム機能をオンにすると、一致したエリアになめらかにズームし、郵便番号の緯度経度といった無機質なデータをとても美しく表示してくれます。</p>
<p>本書はProcessingによるデータ表示の手法だけでなく、オンライン上にあるデータを取得し、解析し、不要なデータを削除するフィルタリングの手法についても書かれており、自分で応用してさまざまなデータを視覚化していくことができるようになるでしょう。</p>
<p>このサンプルを参考に日本の郵便番号で試してみることにしました。アメリカの郵便番号は5桁ですが、日本は7桁なのでより精緻なマップを得ることができることを期待しています。</p>
<h3>郵便番号から緯度経度データ取得</h3>
<p>郵便番号は郵政局のwebサイトからダウンロードできますが、残念なことに緯度経度情報が含まれていません。GoogleMapsAPIのGeocordingを使って地名から緯度経度情報を取得する簡単なスクリプトをRubyでつくりました。</p>
<p>データ量が多いので、同じIPからリクエスト続けていると5000件程度でGoogleMapsから拒否されるようになるので、自動的にプロキシを変更するように、データ取得をどこからでもレジュームできるように作っておくとよいでしょう。</p>
<p>郵便番号リストは住所に（その他）と入っていたり（１丁目〜１０丁目）、（ビル名何階）と書いてあったり表記がばらばらなので、Geocordingに投げて緯度経度が戻ってこないものは今回は無視することにしました。マッピングに必要なデータは十分な得られました。</p>
<h3>Processingプログラム修正</h3>
<p>本書のサンプルが外部データを取得して表示するようにつくられているため、ほとんどそのままで利用できます。アメリカの郵便番号が5桁なので、日本の郵便番号7桁に合うようにいくつか修正します。</p>
<h3>実行</h3>
<p>日本が浮かび上がりました。人口の密な地域はポイントもたくさんありますし、郵便番号の緯度経度だけから山脈がなんとなくわかったりとおもしろいです。9からはじまる郵便番号は沖縄と北陸、南東北まとめて割り振られたりします。</p>
<p>いくつかGeocordingが突飛な緯度経度を返しているようで、7からはじまる郵便番号がぽつっと関東にあったりするので、はずれ値をフィルタリングする処理を追加する必要がありそうです。<br />
もうひとつの問題はデバイスフォントをつかって日本語が表示できない。。vlwというフォントファイルを日本語含めて作成することはできるようなのですが、フォントも配布となるとサイズが大きくなってしまうので。</p>
<div id="attachment_104" class="wp-caption alignleft" style="width: 321px"><a href="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data2.png"><img class="size-thumbnail wp-image-104" title="ビジュアライジング・データ 日本1" src="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data2-311x320.png" alt="ビジュアライジング・データ 日本1" width="311" height="320" /></a><p class="wp-caption-text">ビジュアライジング・データ 日本1</p></div>
<div id="attachment_105" class="wp-caption alignleft" style="width: 330px"><a href="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data3.png"><img class="size-thumbnail wp-image-105" title="ビジュアライジング・データ 日本2" src="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data3-320x307.png" alt="ビジュアライジング・データ 日本2" width="320" height="307" /></a><p class="wp-caption-text">ビジュアライジング・データ 日本2</p></div>
<div id="attachment_106" class="wp-caption alignnone" style="width: 319px"><a href="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data4.png"><img class="size-thumbnail wp-image-106" title="ビジュアライジング・データ 日本3" src="http://www.churadesign.com/wp-content/uploads/2009/01/visualizing-data4-309x320.png" alt="ビジュアライジング・データ 日本3" width="309" height="320" /></a><p class="wp-caption-text">ビジュアライジング・データ 日本3</p></div>
<h3>データビジュアライジング</h3>
<p>この本とても勉強になります。いろいろと刺激されてなにか作りたくなります。おすすめです！<br />
<a href="http://www.amazon.co.jp/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%A9%E3%82%A4%E3%82%B8%E3%83%B3%E3%82%B0%E3%83%BB%E3%83%87%E3%83%BC%E3%82%BF-%E2%80%95Processing%E3%81%AB%E3%82%88%E3%82%8B%E6%83%85%E5%A0%B1%E8%A6%96%E8%A6%9A%E5%8C%96%E6%89%8B%E6%B3%95-Ben-Fry/dp/4873113784%3FSubscriptionId%3D0PZ7TM66EXQCXFVTMTR2%26tag%3Dc9radyn-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4873113784"><img src="http://ecx.images-amazon.com/images/I/41DdCRhKTAL._SL160_.jpg" alt="" width="124" height="160" /></a><br />
<a href="http://www.amazon.co.jp/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%A9%E3%82%A4%E3%82%B8%E3%83%B3%E3%82%B0%E3%83%BB%E3%83%87%E3%83%BC%E3%82%BF-%E2%80%95Processing%E3%81%AB%E3%82%88%E3%82%8B%E6%83%85%E5%A0%B1%E8%A6%96%E8%A6%9A%E5%8C%96%E6%89%8B%E6%B3%95-Ben-Fry/dp/4873113784%3FSubscriptionId%3D0PZ7TM66EXQCXFVTMTR2%26tag%3Dc9radyn-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D4873113784">&#8220;ビジュアライジング・データ ―Processingによる情報視覚化手法&#8221; </a></p>
<p>追記:</p>
<p>・いくつか外れ値がある</p>
<p>・日本語表示できない。</p>
<p>と問題がありますが、<a href="http://churadesign.com/applets/visualizing_data_zips/">アプレットをアップ</a>しましたのでぜひお試しください。フォーカスがあたっている状態で郵便番号を入力すると、一致したエリアがハイライトされます。ズームモードに入るには右下の「ZOOM」をクリックします。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.churadesign.com/2009/01/10/%e3%80%8c%e3%83%93%e3%82%b8%e3%83%a5%e3%82%a2%e3%83%a9%e3%82%a4%e3%82%b8%e3%83%b3%e3%82%b0%e3%83%bb%e3%83%87%e3%83%bc%e3%82%bf%e3%80%8d-%e6%97%a5%e6%9c%ac%e3%81%ae%e9%83%b5%e4%be%bf%e7%95%aa%e5%8f%b7/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

