D3.jsのチュートリアルを少し

D3.jsとは

Data Driven Documentの頭文字をとって、D3のようです。

D3.js はデータに基づいてドキュメントを操作するための JavaScript ライブラリです。
D3 はHTML や SVG、 CSSを使ってデータに命を吹き込みます。D3は WEB 標準に重点を置いており、
強力な視覚化コンポーネントとデータドリブン （データ駆動型）DOM 操作手法の組み合わせにより、
特定のフレームワークに縛られることなく、モダンブラウザの性能をフルに 引き出すことができます。

データの視覚化を考える際、使いこなせると幸せになれそうなライブラリです。
公式のギャラリーを見るだけでも楽しいですので、一度見てみてください。 D3.js Gallery

チュートリアルの途中まで

以前、少しだけチュートリアルを進めていたのですが、記事にはしていなかったので、
今回記事としています。

チュートリアルを少し進めるだけで、比較的に簡単に、このようなグラフらしきものと円なんかが出力できたりします。

var dataset = [];
var h = 50;
var w = 500;
for(var i = 0; i < 25; i++){
  var newNumber = Math.random() * 25;
  dataset.push(newNumber);
}

d3.select("body").selectAll("div")
  .data(dataset).enter().append("div").attr("class", "bar")
  .style("height", function(d){
    var barHeight = d * 5;
    return barHeight + "px";
  });

var svg = d3.select("body").append("svg");
svg.attr("width", w).attr("height", h);

var circles = svg.selectAll("circle").data(dataset).enter().append("circle");
circles.attr("cx", function(d, i){
  return (i * 50) + 25;
}).attr("cy", h/2)
  .attr("r", function(d){
    return d;
  });

書いているjsのコードはこれだけです。 D3.jsのコードを綺麗に書けるようにもならないといけないです。これは汚すぎて読み辛い。
ちょっと各部分が何をしているのかは、記憶が曖昧なので、今回は省略しますが、
これから少しずつ覚えていきたいと思います。

データの視覚化

データを視覚化することは楽しいです。
単純にDBにデータ登録、編集、削除だけよりも、目に見えるというのはモチベーションも上がりますたぶん。

Vim

最近はVImでjazzが聴けるようになったので、作業が捗りそうです！
この話はまたそのうち。