D3.js のはじまり

第7章 No.1 ／ データを SVG にバインドする

ここでは D3.js パッケージを使ってプログラミングする例を示す。D3.js は「データ駆動型」の DOM 操作を SVG ベースで行うライブラリで、グラフや可視化に広く使われている。

SVG の単純な円

<svg width="120" height="120">
  <circle cx="60" cy="60" r="52"
          fill="#003f8c" stroke="#f08300" stroke-width="4"/>
</svg>

D3 によるパラグラフ生成

D3 でデータを 5 個の <p> 要素にバインドすると、配列の各要素に対応してパラグラフが自動で作られる。

var dataset = [5, 10, 15, 20, 25];
d3.select("#d3-paragraphs")
  .selectAll("p")
  .data(dataset)
  .enter()
  .append("p")
  .text(function (d) { return "値: " + d; });

横棒グラフ — 数十行で完成