LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

11
--
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
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.js で六角形を描く (hexbin) その2 | main | D3.js で六角形を描く (hexbin) その4 >>
D3.js で六角形を描く (hexbin) その3
0
    JUGEMテーマ:JavaScript

    前回に引き続き、hexbin プラグインを使ってもう少し遊んでみます。

    これまで 2 回にわたって、hexbin() メソッドを使った六角形の描画方法についてみてきました。でも、D3.js の醍醐味といえば、やっぱり動的なビジュアル表現ですよね。そこで今回は、マウスの位置によってリアルタイムに変化するヒートマップを作ってみます。

    下のサンプルプログラムでは、まず、ユーザ画面上でマウスが動くとマウスの位置座標を取得します (18〜19行目) 。マウスの位置座標の取得方法については、以前の記事を参照してください。次に、取得したマウス位置を中心とする正規分布に従って、平面上に800個のデータ点を生成ます (22〜27行目) 。そして最後に、データ点の密度をヒートマップとしてリアルタイムに表示しています。

    サンプルページ



    // SVGのサイズを指定
    var width = 800;
    var height = 500;
    
    // 白からロイヤルブルー(royalblue)へのグラデーション
    var color = d3.scale
      .linear()
      .domain([0, 20])
      .range(["white", "royalblue"])
      .interpolate(d3.interpolateLab);
      
    // SVGの幅と高さを指定
    var svg = d3.select("#MyGraph")
      .attr("width", width)
      .attr("height", height);
    
    // マウスの位置座標を取得
    svg.on("mousemove", function(){
      var position = d3.mouse(this);
      
      // ランダムに800個のデータ点を配置
      var points = [];
      for (var i=0; i<=800; i++){
        points.push(
          [d3.random.normal(position[0], 80)(), d3.random.normal(position[1], 80)()]
        );
      };
    
      // 半径20pxの六角形を定義    
      var hexbin = d3.hexbin()
        .radius(20);
         
      d3.selectAll(".hexagon").remove();
        
      // 領域内にデータ点を含む箇所に六角形を描画
      var heatmap = svg.append("g")
        .attr("class", "hexagon")
        .selectAll("path")
        .data(hexbin(points))
        .enter()
        .append("path")
        .attr("d", hexbin.hexagon())
        .attr("transform", function(d,i) {
          return "translate(" + d.x + "," + d.y + ")";
        })
        .style("fill", function(d){
          if (d.length > 20) return color(20);
          else return color(d.length); // 領域内のデータ点数 (d.length) によってグラデーション
        });
    });
    
     
    このエントリーをはてなブックマークに追加
    | D3.js | 23:57 | comments(0) | - | - |
    スポンサーリンク