読者です 読者をやめる 読者になる 読者になる

とある三流プログラマーの覚書

機械学習、自然言語処理を中心にIT系の話題を書いていく予定です

D3.jsで拡大縮小できる散布図を描く

はじめに

前回の投稿で画像が圧縮されて、非常に見難い状態だったので、同じ内容をD3.jsで可視化してみました。

結果はこちら

D3.jsとは

D3.jsはデータに基づいて、ドキュメント(グラフや図)を描画するための、JavaScriptライブラリです。

グラフ専用ライブラリに比べると非常に自由度が高く、思ったとおりのグラフが作れます。

散布図を描く

データセットを定義する

var dataset = [
    [ -0.619576 , 0.0462473 ,"やはり俺の青春ラブコメはまちがっている。"],
    [ -0.147399 , -0.354047 ,"ソードアート・オンライン 1 アインクラッド"],
    [ 0.265631 , -0.310217 ,"ねじ巻き精霊戦記 天鏡のアルデラミン"],
    〜
    [ 0.136137 , -0.279732 ,"折原臨也と、夕焼けを"],
    [ 0.12208 , 0.591368 ,"宇宙人の村へようこそ 四之村農業高校探偵部は見た!"],
    [ 0.405827 , -0.257009 ,"ゼロから始める魔法の書"]
];

図を描くためのSVG要素を追加する

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

データセットの最大値と最小値をSVG要素に合わせる

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

データセットの1番目の要素をX軸に、2番目の要素をY軸にして、丸を描画する

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", 3);

同じ位置にデータセットの3番目の要素をテキストで表示する

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d[2];
    })
    .attr("x", function(d) {
        return xScale(d[0]);
    })
    .attr("y", function(d) {
        return yScale(d[1]);
    });

拡大縮小する

ズーム関数の定義

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

SVG要素のイベントにズーム関数を追加

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
    .append("g");

参考

D3.js - 日本語ドキュメント

D3 入門 : 散布図の作成 - スコット・マレイ - alignedleft

SVG Geometric Zooming - bl.ocks.org