散布図は２つの項目の関係性を調べるのに利用します。。D3.jsでは散布図を表示すための専用のレイアウト機能は用意されていないので、SVG図形を作成して、自分で表示するための座標データを作成する必要があります。
折れ線グラフで読み込んデータは表示範囲に収まるようにしてました。ですが、実際のデータは様々な値があり、データ範囲が決まっていることがまずありません。今回はデータの範囲を定めずにデータに応じて調整する方法を書きます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>散布図を作成する</title> <script src="../js/d3.js"></script> <style> svg{ width:400px; height:300px; border:2px solid red;} .mark{ fill:red; stroke:none;} </style> </head> <body> <h2>散布図を表示する</h2> <svg id="graph"></svg> <script src="test.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/* 散布図を表示する */ var svgwidth = 330; //SVG要素の幅 var svgHeight = 300; // SVG要素の高さ var arrData = [ [16,32],[64,48],[128,92],[200,150],[120,260], [45,90],[110,160],[290,20],[240,180],[15,145] ]; var circleElements = d3.select("#graph") .selectAll("circle") // circle要素を追加 .data(arrData) .enter() .append("circle") // CSSクラスを指定 .attr("class","mark") .attr("cx",function(d,i){ return d[0]; // １番目の要素をＸ表に指定 }) .attr("cy",function(d,i){ return svgHeight - d[1]; // ２番目の要素をＹ座標に指定 }) .attr("r",4); // 点の半径 |
円の場合、cx属性にＸ座標、cy属性にＹ座標を指定します。この座標は円を描画するときの中心座標です。cy属性に設定するＹ座標はsvg要素の高さから減算します。
散布図ををアニメーションさせながら表示してみる
散布図に必要な点を時間経過に伴い動かすアニメーションを作ります。ボタンのクリックの操作によりデータを更新するプログラムはこれまでに作成しました。定期的に更新するにはJavaScriptのタイマーを利用します。一定時間ごとに繰り返し処理をするにはsetInterval()メソッドを利用します。
setInterval()メソッドは１番目のパラメーターに艇規定に呼び出す処理や関数を指定、２番目のパラメーターに繰り返す時間を指定します。時間はミリ秒で指定するので、1000と書けば１秒です。
|
1 |
timerID = setInterval(定期的に呼び出す処理,呼び出す間隔) |
新たに散布図に設定するデータセットは乱数を利用します。
乱数を生成する処理はgenerateData関数、アニメーションはanimateGraph関数を作成します。
サンプルコードの実行結果はこちら
●HTMLファイルは１つの前のHTMLと同一です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/* 散布図を表示する */ var svgWidth = 330; //SVG要素の幅 var svgHeight = 300; // SVG要素の高さ var arrData = [ [16,32],[64,48],[128,92],[200,150],[120,260], [45,90],[110,160],[290,20],[240,180],[15,145] ]; var circleElements = d3.select("#graph") .selectAll("circle") // circle要素を追加 .data(arrData); circleElements .enter() .append("circle") // CSSクラスを指定 .attr("class","mark") .attr("cx",function(d,i){ return d[0]; // １番目の要素をＸ表に指定 }) .attr("cy",function(d,i){ return svgHeight - d[1]; // ２番目の要素をＹ座標に指定 }) .attr("r",4); // 点の半径 // アニメーション後の散布図に使用するデータを再設定 function generateData(data){ var result = data .map(function(d,i){ // 配列の要素数だけ繰り返す /* Mathrandom()メソッドは0以上1未満の小数値を返します。 戻り値をそのまま利用すると、散布図に設定される座標値が １未満になります。なので、横幅、高さを掛けるとSVG要素の 範囲内に設定されます。 */ var x = Math.random() * svgWidth; // Ｘ座標を設定 var y = Math.random() * svgHeight; // Ｙ座標を設定 return [x, y]; }); return result; } // 散布図を更新する関数 function generateGraph(){ circleElements .data(arrData) .transition() .attr("cx",function(d,i){ return d[0]; }) .attr("cy",function(d,i){ return svgHeight - d[1]; }); } /* setInterval()の１番目のパラメーターをfunction(){...}と書いて、 無名関数指定します。この関数内に処理したい内容を書きます。 */ setInterval(function(){ arrData = generateData( arrData ); // データを更新 generateGraph(); // グラフの更新(アニメーション) },2000); |