データ可視化サイトテンプレートを作りました。

　大学業界ではIRがじわじわと浸透してきているところだろうと思います。例えば大阪大学では、「学びの実態調査」として、様々なデータを可視化して公表しています。当該ウェブサイトのソースを見ると、charts.jsというjavascriptライブラリを利用しているようですね。html5以降のhtmlにはcanvas要素が適応されるため、InternetExplore9.0以降のブラウザでのグラフ描写はjavascriptが随分使いやすくなったようです。D3.jsなどのグラフ描写ライブラリもたくさん公表されています。

　弊BLOGでもIRについてはたびたび言及してきましたが、特定の部署が一手にデータ収集・分析するよりも、機関内で情報分析の風土を作ることが大切だと感じているところです。ということで、大学の情報を可視化して示せるようなウェブサイトのテンプレートを作成しましたので、ソースコードを公開します。担当部署が保有するデータを学内向けに公開することを想定して作成しました。

samidaretaro/university_datapage · GitHub

　デモページは、こちらです。

http://universitydatapage.web.fc2.com/index.html（サーバから削除したため、実際の挙動は学校基本調査DataViewで体験してください。）

　サイトのデザインはcssで指定し、html内にjavascriptライブラリを用いてグラフ描写しています。利用したcssはBijou CSS Frameworkであり、MIT Licenseに従い著作権表示および許諾表示をファイル内にしてあります。また、グラフ描写に利用したjavascriptライブラリはhighchartsであり、NON-COMMERCIALの場合はFreeで利用可能です(商用利用の場合はライセンス購入が必要)。ただし、Freeの場合でもCreativeCommonsのBY-NC 3.0に従いますので、著作権表示をファイル内にしてあります。

　ざっくりと構成を上図に示します。csvにデータを格納し、javascriptでグラフ描写を行っています。グラフ表示を変えずにデータのみ更新する場合はcsvファイルの数値を更新することになりますが、その場合はエクセルのShift-JISではなく、テキストエディタでUTF-8での更新が必要です。グラフ表示を変える場合はjavascriptファイルを変更することになりますが、highchartsには様々なプロットオプションが準備されていますので、Highcharts demosやHighcharts API Referenceを見ながら書き換えていくことになるでしょう。demoやAPIはJSFIDDLEに対応しており、入力値を変えながら表示を確認できますので、対応関係はよくわかると思います。

　レイアウトは、cssにより、横幅12等分のグリッド・レイアウトを採用しています。と言いつつも、単純に格子状に配置させるためであり、スマホ等レスポンシブル対応には配慮していません。

　デモページで操作できるとおり、凡例内の要素をクリックすることで要素の表示非表示をグラフに反映させたり、右上のボックスから画像・pdf出力や印刷ができるようになっています。これは、単なる画像を並べるのではなく、なるべくユーザーが操作できるような環境を考慮したためです。

　大学情報の公表としてウェブサイトにpdfファイルを置いてあるケースも多いと思います。学外向けならばまだわかるのですが、学内向けではデータの二次利用ができず、分析をすることができません。その様子はまるで田舎の郷土資料館に展示された埃まみれの縄文式土器のようであり、情報分析の風土を広めるためには、お台場の日本未来館や上野公園の国立科学博物館のようなユーザーが触って体験出来るデータ可視化が大切だなと感じています。その一環として、このようなテンプレートを作ったということです。

　私自身は職業プログラマーではなく、むしろこのようなサイトを作るためにここ半年くらい勉強した程度であり、コード最適化等を考慮せずにとりあえず既存のライブラリ等を組み合わせてなんとか動くようにしたというのが正しいところです。とりあえず、理想をイメージしてなんらか手を動かしていれば、経験がなくともなんとかなるというのが実感できました。GitHubにアップした都合上MIT Licenseにしてありますが、もし利用される場合は私の分のライセンス表示は特に不要であり、セキュリティ等自己責任でお使いください。