サイエンスメディアな日々   インフォグラフィクスな日々

サイエンスのこと・テクノロジーのこと・ビジュアリゼーションのこと

衆院選挙を可視化する:d3.js

f:id:yasuda0404:20141220132600p:plain

javascriptによる可視化フレームワーク"d3.js"をつかって、衆院選挙結果を可視化してみた。

ベースにしたレイアウトは2年前の衆院選で作成したもの。この時はExcelで作った静止画だったが、今回はd3.jsの機能をつかってインタラクティブ性を加えた。選挙年(前回2012年と今回2014年)と、選挙結果/選挙区割を選択でき、都道府県名の表示・非表示も指定できる。

 

f:id:yasuda0404:20141220132633p:plain

 

また、政党名のスケールにマウスオーバーすると、各政党の取得議席分布と小選挙区比例区それぞれの総数を表示する。

f:id:yasuda0404:20141220132748p:plain

 

可視化にHTML/CSS+javascriptを使うメリットは、なんといっても幅広いリーチだ。ウェブブラウザさえ使えれば、PCでもモバイル機器でも基本的に同じように表示できる。将来ブラウザやHTML・CSSがアップデートされても、最新の環境で表示できる。

幅広い人々に届ける可視化コンテンツのメイン・ツールとして、HTML/CSS+javascriptをもう少し探求してみたい。

 

ソースコードとデータ一式は、BitBucketに公開した。

copyright(c) 2008-, Atsuhiko Yasuda All Rights Reserved.