グラフを一切書かないD3.js勉強会を開催しました。

最終更新日

Data-Driven Documents ?

先週、土曜日に「グラフを一切書かないD3.js勉強会」を行いました。
第一部の内容は、FOSS4G 2014 Hokkaidoの内容と同じものを行ったのでそれはいいとして、第二部の方は……正直準備不足だったかなと。
一番の問題は、使おうとしていたCodepenのプロフェッサーモードが現場では重くて使えなかったことですかね。
そのため、直前になってワタワタしてしまい軽くパニック! 急遽、別の方法で説明を行ったわけですが、遠くの席にいた方にはプロジェクターではコードが見えづらかったと思います。
やはり事前に現場での確認が必要だなーと思いました。
(できればリハーサルなんかもやった方が良いのかも)

とりあえず第二部で使った資料を掲載しておきます。

資料

D3.jsは「束縛したデータセットエレメントの差分を操作するってイメージすると理解しやすいですよー」ということが言いたかったのですが、ちゃんと伝えられた感じがしません orz
とりあえず、サンプルコードとか弄ってもらえると多少分かりやすいかも。

文字が読み辛いのでフルスクリーンでご覧ください。

サンプルコード

example

備考

勉強会にていただいた質問に関する記事を書きました。
[SVG]ドーナツ状のcircleを描画する。