D3.jsの勉強会を行いました。

D3.js勉強会＠群馬、無事開催いたしました。

何しろ初めて勉強会というものを主催するので、「あれが動かなかったらどうしよう！　こんなことが起きたらどうしよう！」といろいろ気を回し、何かハプニングが起きたときに対応できるようにとかなり時間的な余裕が持てるように構成してみたわけですが、実際に蓋をあけてみたら特に大きなハプニング等は起きず、結果時間に対して内容のボリュームが全然足らないという…… orz

もうすこしネタを用意しておくべきでした、とても反省しております。

それでも一応は、D3.jsというライブラリの特性というか、非常に基本的な部分は多少伝わったのではないかと思ってはおります。
そして、D3でグラフを作るのって結構大変だというところも（汗）

D3を使ってグラフを作るのは、描画するプログラムを一つ一つ自分の手で積み上げていくような作業が必要になるわけで、そこが楽しいと同時に大変なところなのですが、いくつかプロパティを設定してデータセットを食わせてあげれば、綺麗なグラフがバン！と表示されるようなチャートライブラリでは味わえない、ハンドメイドな手触り感といった面白さが少しでも伝わったら幸いです。

今回、個人的なテーマとして「CodePenのプロフェッサーモードを使ってみる」というのがあったのですが、こちらは問題なく動作し「かなり使える！」という確信が得られました。

リモートでチャットしながらのライブコーティングやペアプログラミングなども行えそうなので、今後活用していきたいなと思っています。

勉強会にご参加いただいた皆様、ありがとございました。

補足資料

今回の勉強会でD3の説明のために作成した棒グラフのコードです。
CodePenのアカウント(Githubアカウント)があればForkして自由に編集できます。
勉強会内では説明しきれなかったAxis(目盛り)をcssで装飾するコードを書き足しています。

See the Pen D3 Basick Barchart by shimizu masayuki (@shimizu) on CodePen

以下は、今回の勉強会内で説明したD3のセレクション機能やスケール機能について、過去に書いたブログ記事です。

データビジュアライゼーション「d3.js」
ウチのブログで始めて書いたD3の紹介記事です。

超基本！ コンソールでselect,data,enterメソッドを理解する。
D3の独特なセレクション機能についての説明です。今回の勉強会では説明しきれなかった部分の補足になります。

値の正規化(d3.scale)
こちらも今回の勉強会ではほんのさわり程度にしか説明できなかったD3のスケール機能についての説明記事です。

【node.js+D3.js】サーバーサイドD3
勉強会の中で話題に上がったサーバーサイドでのD3.jsの使用方法です。

http://jsdo.it/_shimizu
http://codepen.io/shimizu
codepenを使い始めたのは最近で、以前はjsdo.itの方にD3.jsのサンプル含めいろいろ書き散らかしていました。
jsdo.itの「Portfloio」や「Codes」の中に、ブログの方には載せていないD3を使ったサンプルなどもあるので、よかったら見てみてください。

CodePen関連

モダンなWeb開発環境としてのCodePen
今回、勉強会で使用したサービスCodePenについての記事です。

プログラミング学習の新しいかたち？！チャットをしながらライブコーディングや共同プログラミングができるCodePen Pro
CodePenのリモート環境でライブコーディングやコラボレーションなどが行える機能につての紹介記事です。

その他、関連記事

D3.jsはなぜ人気があるのか？　そして、なぜ難しいのか？
D3の特徴について、もうすこし詳しく書いた記事です。

データビジュアライゼーションとインフォグラフィックの違い
勉強会内でデータビジュアライゼーションについてプレゼン的なこと行いましたが、その内容に関連した記事です。