超訳 D3.js チュートリアル

D3.js のチュートリアルの日本語訳がここにあるわけですが、解説は丁寧なのですけど全体が 16 章もあって冗長なのでまとめます。

メソッドチェーン

D3.js の基本的なスタイルはメソッドチェーンです。

d3.select("body").append("p").text("新しいパラグラフ！");

データバインディング

var dataset = [5, 10, 15, 20, 25];
var get_data = function(d) { return d; };
var get_color = function(d) {
  if (d >= 15) {
    return "red";
  } else {
    return "black";
  };
};
d3.select("body").selectAll("p")
  .data(dataset)
  .enter()
  .append("p")
  .text(get_data)
  .style("color", get_color);

selectAll で空の選択、 data(dataset) で配列の長さだけメソッドを繰り返す、 p タグを追加してテキストを挿入するといったところがポイントです。

ヒストグラム (棒グラフ)

var dataset = [
  25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
  14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
  24, 18, 25, 9, 3
];
var da = function(d) { return d; };
var hi = function(d) {
  var barHeight = d * 5;
  return barHeight + "px";
};
d3.select("body").selectAll("p")
  .data(dataset)
  .enter()
  .append("div")
  .attr("class", "bar")
  .style("height", hi);

.bar に対しあらかじめ CSS を定義しておいて JavaScript でデータに応じて動的に height の値を変更します。

散布図

var w = 500;
var h = 100;

var dataset = [
   [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
   [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];

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

svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
         return d[0];
      })
      .attr("cy", function(d) {
         return d[1];
      })
      .attr("r", function(d) {
         return Math.sqrt(h - d[1]);
      });

svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
         return d[0] + "," + d[1];
      })
      .attr("x", function(d) {
         return d[0];
      })
      .attr("y", function(d) {
         return d[1];
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "red");

cx, cr で円を描いてそれをデータに応じてサイズを設定します。

スケールと軸

var w = 500;
var h = 300;
var padding = 30;

var dataset = [
 [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
 [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
 [600, 150]
];

var xScale = d3.scale.linear()
      .domain([0, d3.max(dataset, function(d) { return d[0]; })])
      .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
      .domain([0, d3.max(dataset, function(d) { return d[1]; })])
      .range([h - padding, padding]);

var rScale = d3.scale.linear()
      .domain([0, d3.max(dataset, function(d) { return d[1]; })])
      .range([2, 5]);

var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .ticks(5);

var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left")
      .ticks(5);

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

svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
         return xScale(d[0]);
      })
      .attr("cy", function(d) {
         return yScale(d[1]);
      })
      .attr("r", function(d) {
         return rScale(d[1]);
      });

svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text(function(d) {
         return d[0] + "," + d[1];
      })
      .attr("x", function(d) {
         return xScale(d[0]);
      })
      .attr("y", function(d) {
         return yScale(d[1]);
      })
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("fill", "red");

svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + (h - padding) + ")")
      .call(xAxis);

svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + padding + ",0)")
      .call(yAxis);

まとめ

ここまでの内容で出来ることは他のグラフ描画ツールと大差ありません。チュートリアルは長いので必要な部分を絞り込んで参照し理解すると良いでしょう。