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