TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

( D3.js入門 ) D3.jsの使い方とグラフの作成サンプル


こんにちは、インディバルに入社して2年目のエンジニアです。今回はD3.jsについて紹介したいと思います。

D3.jsとは?

D3.js(Data-Driven Documents)はデータを基盤として、文書を操作するためのJavaScriptライブラリーです。これを利用すると、あるデータをDOMにバインディングした後、チャートやグラフとしてビジュアライズすることが可能です。こちらからダウンロードできます。

特徴

1)強力なデータ視覚化ライブラリー
2)WEB標準に準拠
3)HTML、SVG、CSSを操作できる
4) メソッドチェーンを利用
5)Firefox・Chrome・Safari・IE9以上・Android・iOSに対応

導入方法

まずCSV/JSON形式のデータを用意して、描画したいエレメントに対してデータを紐づけます。それらのデータに対して表現したいビジュアルになるように処理やスタイルを加えていきます。
実際のサンプルを見てみましょう。下記はD3.jsのバージョン3で書かれたものになります。

img_d3js_figure01

https://jsfiddle.net/xpvt214o/229363/

var data = [10, 20 , 30];
var canvas = d3.select("body")
               .append("svg")
               .attr("width", 500)
               .attr("height", 500);
var g = canvas.append("g")
              .attr("transform", "translate(300, 300)");
var arc = d3.svg.arc()
            .innerRadius(130)
            .outerRadius(200);
var pie = d3.layout.pie()
            .value(function(d) { return d; });
var arcs = g.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append("g")
            .attr("class", "arc");
var color = d3.scale.ordinal()
              .range(["yellow", "brown", "orange"]);
arcs.append("path")
    .attr("d", arc)
    .attr("fill", function (d) { return color(d.data); });
arcs.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("text-anchor", "middle")
    .attr("text-size", "10px")
    .text(function(d) { return d.data});

コードの解説

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


data配列を宣言します。
pieグラフを入れるcanvas領域を作ります。

var g = canvas.append("g")
              .attr("transform", "translate(300, 300)");
canvasで使うタグを追加します。そして、attrを利用して、canvasの左・上から300px移動します。
var arc = d3.svg.arc()
            .innerRadius(130)
            .outerRadius(200);
pieの半径を設定します。innerRadiusは内側、outerRadiusは外側です。
var pie = d3.layout.pie()
            .value(function(d) { return d; });
D3.jsはレイアウトを提供しています。該当するレイアウトを使うとしやすいです。
今回はd3.layout.pie()を利用しました。
var arcs = g.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append("g")
            .attr("class", "arc");
pieを作成します。
var color = d3.scale.ordinal()
              .range(["yellow", "brown", "orange"]);
arcs.append("path")
    .attr("d", arc)
    .attr("fill", function (d) { return color(d.data); });
作ったpieグラフにcolorを指定して入れます。
arcs.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("text-anchor", "middle")
    .attr("text-size", "10px")
    .text(function(d) { return d.data});
img_d3js_figure02

pieに文字を入れます。以上でグラフが完成しました。

上の図はD3.jsを活用して作られたものです。D3.jsを利用すると簡単なグラフから複雑なチャートまで自分が思うことはほとんど実装できます。

インディバルでは、ページビューや滞在時間など求職者の行動データを多く持っております。アクセス解析ツール(Google Analyticsなど)からインポートしたデータを連携させてD3.jsでの可視化を検討しています。

D3.jsはSVGやCanvasなどの扱いに長けており比較的簡単にデータをビジュアライズできるライブラリです。データを可視化するニーズがある時には導入を検討するべきではないでしょうか。

執筆者プロフィール

ディべロップメント室のエンジニアです。求人の応募者管理システムをメインで仕事していて、最近はAWSやkintone連携も担当しています。好きな食べ物は肉です。趣味はゲームでLeagueOfLegendを楽しんでいます。