君たちは永遠にそいつらより若い

技術と音楽と日々のこと。

オンブラウザで3分で始める d3.js

D3.js

Day 11 は、Keiichiro Onoさんでした。

スクリプトを書かずに各種グラフデータをD3.jsで扱える形式に書き出す https://github.com/keiono/d3-layout-sample

Day 12: d3.js Advent Calendar 2013

こんにちは。くてけんです。

皆様のご利益のある霊験あらたかな記事を拝んでいる日々ですが、d3.js 人口が少な過ぎる昨今のために、私は表題のようなライトな入門記事を書いてみました。「d3.jsっておもしろそうだねー（でもやったこと無い）」とほざく足の重い友人に本記事を押し付けて、d3.js人口の増加をお祈りしたいと思います。

さて、時間も限られているので、気持ちを切り替えてさくさく行きます！

  • 〜1:00 ヒトのコードを動かしてみる
  • 〜2:00 ちょろっと変えて動かしてみる
  • 〜3:00 ドキュントとすごい人の作品を見る

〜1:00 ヒトのコードを動かしてみる

案ずるより産むがなんちゃらです！とりあえずJS Fiddleで動かしてみましょう！ボタンをポチッと押して、テキストを描くHello worldです。

以下コードの上部中央あたりのresultタブを押して、まずは動作を見てみましょう。ボタンを押す度にHello worldが追記されていきます。

なるほどー！たった3行強でボタンを作ったり、clickイベントを検知して、任意のテキストが入ったpタグを追加できるんですねー！jQueryと似ていますねー。なるほどなるほどー！←

〜2:00 ちょろっと変えて動かしてみる

今度は、先ほどのコードの右上 隅のEdit JS Fiddleボタンを押して、JS Fiddleで先ほどのコードを動かしてみましょう。

実行できたら、先ほどのコードの下に続いて、以下コードを追記してみてください。

var color_button = d3.select('body').append('button').text('color');
color_button.on('click', function () {
    d3.selectAll("p").style("color", "red");
});

追記後、ヘッダメニューのRunボタンでコードを実行すると、既に追加されているpタグの色を変えるcolorボタンが追加されます。こちらも動作させてみてください。

f:id:kuteken:20131212024202p:plain

〜3:00 ドキュントとすごい人の作品を見る

そろそろちゃんとドキュメントを見ましょう。今動作させたコードは、Selection と 動的プロパティの章のコードです。

英語: http://d3js.org/#selections 日本語: http://ja.d3js.node.ws/#selections

さらに、実際この先にどんなことが出来るようになるのかは、ページの最上部に行くと事例集リンクがあるので、3分と言わず何十分でも、こちらを色々と触ってみてください。

そして、なんとなく動かせた気になっていますが、d3.jsの特徴であるenter領域やTransitionについては3分では全然足を伸ばせません！うおっと！3分だ！

是非3分間終了後も、チュートリアルに沿って色々な機能や表現を試してみてください！

以上。d3.js 3分間クッキングでした。みなさん、良いd3.jsホリディを！