LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

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

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.jsを使った動きのある散布図の作成 | main | クリックした位置から広がる波紋 >>
D3.jsによるパックレイアウトの作成
0
    JUGEMテーマ:JavaScript

    今回はD3.jsのレイアウト機能の一つであるパックレイアウト (pack layout) の使い方について見てゆきます。パックレイアウトは、データの数値を円のサイズによって表示します。データは階層構造 (ツリー構造) を持っていても良く、その場合には階層構造に従って描画される円も階層的に示されます。今回は簡単のために、階層数1のデータを使ってパックレイアウトの基本的な作成方法を説明します。

    ここでは例として、日本の都道府県ごとの人口をパックレイアウトで作図してみましょう。まず、政府統計の総合窓口などから都道府県ごとの人口データを入手したうえで、カンマ区切りにCSV形式で保存します。2015年10月時点での人口データでは、以下のようなデータファイルになります。

    prefecture,value
    東京都,13490558 
    神奈川県,9118006 
    大阪府,8845413 
    愛知県,7460529 
    埼玉県,7254531 
    ・・・
    島根県,691931 
    鳥取県,570188 

    あとで便利なように、CSVファイルの1行目にはインデックス (prefecture, value) をつけています。インデックスは日本語でも大丈夫ですが、JavaScriptでは半角英数字のほうが扱いやすいのでこのようにしました。

    D3.jsのパックレイアウトでは、d3.layout.pack() メソッドを使います。サンプルプログラムは下記のとおりです。
    var dataSet = [];
    
    d3.csv("./js/population2.csv", function(error, dataSet){
      var data = { //csvデータを一つのchidrenとしてデータセットを作成
        children:dataSet
      };
      
      // 標準20色を準備
      var color = d3.scale.category20c();
      
      // パックレイアウトの表示サイズ
      var bubble = d3.layout.pack()
        .size([800,800])
        .padding(2); // 円どうしの余白を指定
      
      // x,yと、半径rを算出
      var nodes = bubble.nodes(data);
      
      // パックレイアウトを描画
      var pack = d3.select("#MyGraph")
        .selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
        .attr("class","node")
        .attr("transform", function(d){
          return "translate("+ d.y + "," + d.x + ")";
        }); // gをそれぞれのx,yに移動
    
      pack.append("circle")
        .attr("r", 0)
        .attr("fill",function(d,i){
          return d.depth==0 ? "white" : color(i); // rootノードは表示しない
        })
        .attr("stroke", "white")
        .attr("stroke-width",2)
        .transition()
        .duration(1000)
        .delay(function(d,i){
          return i*10;
        })
        .attr("r", function(d){
          return d.r;
        });
        
      // 各円に都道府県名を表示
      pack.append("text")
        .attr("text-anchor","middle")
        .text(function(d){
          return d.prefecture;
        });
    });
    
    サンプルページ

    それでは順番に見てゆきましょう。3行目は、前回出てきたCSVファイルを読み込む d3.csv() メソッドですね。ここで先ほど準備したCSVファイルを読み込んで、dataSet という配列に保存しています。

    次の4行目から6行目では、dataSetという配列を、階層数1のデータ型に成形しています。12行目が今回のポイント、d3.layout.pack() メソッドです。ここでは全体サイズが 800×800px、隣接する円の間の余白が2pxとなるように指定しています。続く17行目の node() メソッドは、具体的には入力データの数値や階層構造をもとに、描画する円の中心位置と半径とを自動的に計算するメソッドです。このことは、18行目あたりに console.log() などで変数をコンソール上に表示してみるとよく分かります。

    いよいよ20行目以降で、作成した多数の円を描画してゆきます。ただ、単純に描画しても面白くないので、アニメーションを使って円が次々と現れるようにしてみました (30行目以降) 。最後に47行目以降で、それぞれの円の中心に都道府県名を表示しています。




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