D3.jsを始める前に ~SVGの基礎

D3.jsとデータビジュアライゼーション

「ビッグデータ」や「データサイエンティスト」といった言葉に続き、「データビジュアライゼーション」もキーワードとして注目されてきていますね。

データを視覚化するツールは本当にたくさんありますが、個人的に使いたいなーと思っているのが、D3.jsです。 D3.js

ブラウザで動くのでプラットフォームを選ばないし、ただの画像にはできないインタラクティブな表現がアツいです。思わず「すげー！」というようなサンプルコードがたくさんあるのですが、D3.jsを使うには、SVGの知識が必要です。D3.jsの日本語書籍が最近発売されましたが、HTMLやCSSの基本的な部分から解説してあるので、非エンジニアでも、最初から読み進めていけばD3.jsを使えるようになるのではと思います。↓↓↓

---

インタラクティブ・データビジュアライゼーション ―D3.jsによるデータの可視化

---

SVGとcanvas

SVGはScalable Vector Graphicsの略。HTML要素のひとつであり、ベクターグラフィックで図形を表現します。よくcanvasと比較されますが、違いを議論すると長くなるので以下のURLなどを参考に。 http://msdn.microsoft.com/ja-jp/library/ie/gg193983(v=vs.85).aspx

さて、ふたつの円を描いてみました。上の円がSVG、下の円がcanvasです。 画像を拡大してみるとベクター、ラスターの違いがよくわかるかと思います。

<svg width="50" height="50">
    <circle cx="25" cy="25" r="22" fill="green" stroke="gray" stroke-width="2"/>
</svg>

<canvas id="canvasCircle" width="50" height="50"></canvas>
<script type="text/javascript">
(function() {
   var canvas = document.getElementById("canvasCircle");
   var c = canvas.getContext("2d");
        c.beginPath();
        c.arc(25, 25, 22, 0, 2 * 3.14, false);
   c.fillStyle = "green";
        c.fill();
        c.lineWidth = 2;
        c.strokeStyle = "gray";
        c.stroke();
})()
</script>

SVGの基礎

さて、「D3.jsによるデータの可視化」のSVGチュートリアルを試してみます。

rect

<svg width="500" height="50">
<rect x="0" y="0" width="300" height="50" fill="green"/>
</svg>

---

circle

<svg width="500" height="50">
<circle cx="100" cy="25" r="25" fill="yellow"/>
</svg>

---

ellipse

<svg width="500" height="50">
    <ellipse cx="100" cy="25" rx="100" ry="25" fill="red"/>
</svg>

---

line

<svg width="500" height="50">
    <line x1="0" y1="0" x2="500" y2="50" stroke="gray"/>
</svg>

---

text

<svg width="500" height="50">
    <text x="150" y="25">はろーわーるど！！</text>
</svg>

---

複雑なビジュアライゼーションにはまだまだ遠いですが、長方形や円を描くことができます。 以下のようにjavascriptで図形の生成、変形を行うこともできます。↓↓↓

とはいえ、棒グラフを描くだけならExcelで十分ですね。 D3.jsの使いどころとしては、凝ったデザインにしたいとか、インタラクティブなグラフを作りたいとき。 また、APIたたいてjsonデータとか、DBから取得したデータなど、Webとの親和性が高い状況での相性が良さそうですね。

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<svg id="d3js"></svg>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];

var width = 50;
var height = 150;

var svg = d3.select("#d3js");

    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", width)
    .attr("height", function(d) { return d*5 })
    .attr("x", function(d, i) { return i*(width+5)+5 })
    .attr("y", function(d) { return height-d*5 })
    .attr("fill", "yellow")
    .attr("stroke", "orange")
    .attr("stroke-width", "3");

</script>