LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

09
--
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) その3 | main | 【D3.js】 フォースレイアウトの作成例 >>
D3.js で六角形を描く (hexbin) その4
0
    JUGEMテーマ:JavaScript

    これまで 3 回にわたって、hexbin プラグインを使った六角形の描画方法について見てきました。今回は応用編として、hexbin() メソッドによるヒートマップがゆっくりと作成されるアニメーションを作ってみます。また、せっかくなのでヒートマップの色もランダムに変わるようにします。

    下のサンプルプログラムでは、まず基本となる色の選択肢を作成しています (5行目)。そのうえで、この選択肢のなかから 1 色をランダムに取り出して、白からその色へと変化するグラデーションを定義します (8〜12行目)。ちなみにここでは、Floor関数の Math.floor() と 0〜1 の範囲の乱数を生成する Math.random() を組み合わせて、Math.floor(Math.random() * m) とすることで、0 から m-1 までの整数をランダムに生成しています。

    そのうえで、ヒートマップを構成するひとつひとつの六角形を、初期位置 (39行目) からそれぞれのあるべき位置 (52行目) まで時間差をつけて移動させています。移動の動き方として .ease("bounce") で bounce を指定することで、上から落ちてきた六角形がコツンと何かに反射してバウンドしながら止まるような効果を与えています。

    サンプルページ



    // SVGのサイズを指定
    var width = 800;
    var height = 500;
    
    var baseColor = ["royalblue", "orange", "lawngreen", "fuchsia", "goldenrod", "yellow"];
    
    // 白から、選択された色へと変化するグラデーション
    var color = d3.scale
      .linear()
      .domain([0, 20])
      .range(["white", baseColor[Math.floor(Math.random()*6)]])
      .interpolate(d3.interpolateLab);
      
    // SVGの幅と高さを指定
    var svg = d3.select("#MyGraph")
      .attr("width", width)
      .attr("height", height)
      .append("g");
    
    // ランダムに400個のデータ点を配置
    var points = [];
    for (var i=0; i<=800; i++){
      points.push([d3.random.normal(width/2, 80)(), d3.random.normal(height/2, 80)()]);
    }
    
    // 半径20pxの六角形を定義    
    var hexbin = d3.hexbin()
      .radius(20);
    
    // 領域内にデータ点を含む箇所に六角形を描画
    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 + "," + -50 + ")"; // 初期位置
      })
      .style("fill", function(d){
        if (d.length > 20) return color(20);
        else return color(d.length); // 領域内のデータ点数 (d.length) によってグラデーション
      })
      .transition() // 六角形がぱらぱらと落ちてくるアニメーション
      .delay(function(d,i){
        return i*50;
      })
      .duration(1500)
      .ease("bounce")
      .attr("transform", function(d,i) {
        return "translate(" + d.x + "," + d.y + ")";
      });
    

    このエントリーをはてなブックマークに追加
    | D3.js | 22:04 | comments(0) | - | - |
    スポンサーリンク