「HTML5+WordBench勉強会 in 神戸」で「d3.js」について発表してきました。

2012年2月18日に開催された「HTML5+WordBench勉強会 in 神戸」で、データビジュアライゼーションのためのJavaScriptライブラリ「d3.js」について発表してきました。

主催は「Web CAT Studio(株式会社リクルートエージェント)」さん、「WordBench神戸」さん、そして僕が所属している「HTML5-West.jp」の3団体です。

プレゼン資料

実際にプレゼンで使ったスライドはこちら。

終盤のライブコーディングで作った「棒グラフ」のコードはこちら。

サマリー

わかりづらいデータを可視化することで、人間のデータ理解を助けることができる「データビジュアライゼーション」。このデータビジュアライゼーションをWebブラウザ上で実現するためのJavaScriptライブラリが「d3.js」です。

今回の発表では、d3.jsを使ったデータビジュアライゼーションの過程・感覚を皆さんに伝えるために、d3.jsの特徴を説明したあと、ライブコーディング形式でd3.jsを使ってシンプルな棒グラフを作る様子をお見せしました。

質疑応答の時間に頂いたコメントにもありましたが、d3.jsとは端的に言うと「データに基づいたドキュメント操作に特化したjQuery」です。もちろん、リッチでインタラクティブなデータビジュアライゼーションを実現するための機能も用意されていますが、あくまで主眼は「データ/ドキュメント操作」に置かれています。

そんな理由もあり、プレゼン全体が地味なものになりそうだったので、ライブコーディングをお見せして、d3.jsを使うとデータ/ドキュメント操作がどれくらい楽になるか、という感覚を楽しみながらつかんでもらうような構成にしてみました。

反省点

プログラマー向けの内容でプレゼンを組んだのですが、プログラマーの参加者が全体と比べてかなり少なかったので、もう少し事前にどのような方が来られる勉強会なのか調査しておくべきでした。基本ですよね。

あと「データを可視化することで得られるメリット・実益がよくわからなかった」というご意見をいただきました。「d3.js」のことを伝えることに集中しようと思い、データビジュアライゼーションについてはあまり深く説明しなかったのですが、もうすこしちゃんと説明したほうがよかったですね。

データビジュアライゼーションについては以下の動画・資料が非常に参考になります。興味がある方は一度見てみてください。

おわりに

ライブコーディング中はかなりテンパっていましたが、プレゼンしていて非常に楽しかったです。わりとマイペースでお話することが出来ました。

今回のプレゼンは「どうすればうまく伝わるのか」を比較的しっかり考えて作りました。でも実際にやってみるとまだまだですね。もっともっと考えないとダメだなと思いました。難しい。

またどこかの勉強会で発表したいですね。そのためにたくさん勉強しておかないと!

最後に、このような素晴らしい勉強会で発表させていただける素晴らしい機会を与えてくださった運営のみなさまに、この場を借りて御礼申し上げます。とても貴重な経験になりました。本当にありがとうございました。