SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

03
--
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】2つの色を補完する (interpolateLabメソッド) | main | D3.js で六角形を描く (hexbin) その2 >>
D3.js で六角形を描く (hexbin)
0
    数値データをヒートマップで表現しようとしたときなどで、六角形を描画したくなることがあります。D3.js を使って六角形を描画する関数を一から自分で作ってみても良いのですが、幸いなことに D3.js には hexbin という六角形を描画するためのプラグインが用意されています。今回はこの hexbin の基本的な使い方を紹介します。

    まずは d3.hexbin.v0.min.js をダウンロードして、html ファイルに下記の 1 行を追加して d3.min.js と同じように読み込ませます。
     
    <script type="text/javascript" src="js/d3.hexbin.v0.min.js"></script>

    また、六角形の色や枠線を指定するために css (あるいは html ファイルの <style>〜</style>) に次の記述を追加しておきます。
     
      .hexagon {
        fill: steelblue;
        stroke: white;
        stroke-width: 1.5px;
      }

    それでは下記のプログラムを使って、hexbin プラグインの動作を見てみましょう。

    サンプルページ



    インターネットで検索しても日本語の説明がなかなか見つからない hexbin プラグインですが、このプログラムを見てもらえれば基本的な使い方は理解できると思います。hexbin プラグインはまず、hexbin() メソッドを使って、指定された半径 (この例では 20 px) の六角形で平面を分割します (18〜19行目) 。次に、分割された個々の六角形について、その領域内にデータ点を含む場合は六角形を描画し、データ点を含まない場合は何も描画しないという処理を行います (22〜31行目) 。

    この例では、データ点としてランダムに配置した 400 個の点を使用しました (12〜15行目) 。ページをリロードするたびにデータ点の位置が変わるため、描画される六角形の位置も変化します。
     
    // SVGのサイズを指定
    var width = 800;
    var height = 500;
    
    // SVGの幅と高さを指定
    var svg = d3.select("#MyGraph")
      .attr("width", width)
      .attr("height", height)
      .append("g");
    
    // ランダムに400個のデータ点を配置
    var points = [];
    for (var i=0; i<=400; i++){
      points.push([width * Math.random(), height * Math.random()]);
    }
    
    // 半径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 + ")";
      });
    
     
    このエントリーをはてなブックマークに追加
    | D3.js | 23:29 | comments(0) | - | - |
    スポンサーリンク