SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

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

Agata's Blog

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

    前回につづいて、hexbin を使った基本的なヒートマップの作り方を紹介します。

    前回は hexbin() メソッドを使って、平面を六角形で分割したうえで、個々の六角形の領域内にデータ点がある場合に六角形を描画していました。今回は、個々の六角形の色を領域内のデータ点数によって変化させることで、ヒートマップを作製します。

    データ点数によって色を変化させるには、2 つの色の間を補完する interpolateLabメソッドを使います (⇒ 関連記事)。ちなみに今回は、白とロイヤルブルー (royalblue) の間で補完してみました。HTTP で使えるカラーコードについては、ここなどを参照してください。

    また、今回は個々の六角形を分かりやすく表示するため、css (あるいは html ファイルの <style>〜</style>) に以下の記述を加えて、六角形の枠線を灰色で描画することにしました。
     
      .hexagon {
        stroke: #c0c0c0;
        stroke-width: 1.5px;
      }

    前回は平面上にランダムにサンプル点を配置していましたが、今回はヒートマップ図の雰囲気を出すために、サンプル点の密度が平面の中心位置をピークとする正規分布となるようにサンプル点を配置することにしました。サンプル点の配置には、D3.js  の d3.random.normal() メソッドを使っています。このメソッドは、d3.random.normal(m, s)() とすると平均が m、分散が s の正規分布に従う乱数を生成します。

    サンプルページ


     
    // 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)
      .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 + "," + d.y + ")";
      })
      .style("fill", function(d){
        if (d.length > 20) return color(20);
        else return color(d.length); // 領域内のデータ点数 (d.length) によってグラデーション
      });
    
     
    このエントリーをはてなブックマークに追加
    | D3.js | 09:51 | comments(0) | - | - |
    スポンサーリンク