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>