d3.jsで簡単なバブルチャート（bubble chart）の作成

バブルチャート（bubble chart）にルート付きの構造化されたデータが必要

• d3.jsではルート（大きなバブル）についてノード（小さいバブル）をまとめています
• 簡単なルートのある構造化データが以下のようです

  var data_set = { 
  	 children: [
                    {name:"aaa", val:58},
                    {name:"bbb", val:88},
                    {name:"ccc", val:48},
                    {name:"ddd", val:73},
                    {name:"eee", val:81},
                    {name:"fff", val:31}  
          ] 
  } ;

   

  • ルート：children
  • ノード：６つのオブジェクトデータ（{name:"aaa", val:58} …）

d3.packで一定範囲（width/height）内で円を描画（r,cx,cy）できるデータの作成

• 描画範囲、バブル間の間隔を設定する構造体を定義します

  var width=600, height=300;   //描画範囲
  var bubble = d3.pack()       // d3.pack()の関数を利用
      .size([width, height])
      .padding(1.5) ;          //バブル間の間隔

   

• 描画するデータにバブルの大きさ（半径）要素を指定し、最大値、合計値などを抽出します

  var nodes = d3.hierarchy( data_set )         //d3.hierarchy関数の使用
                .sum(function(d){ return d.val }) ; // バブルの半径： val要素使用

   

  • ここでは、d3.jsバージョン4を使用するので、d3.hierarchy関数を使用します（バージョン３の定義方法は違うので、ご注意）
  • バブルの半径： val
• バブル描画できるデータをd3.pack関数で変換します

  // d3.packのdescendantsメソッドですべてのバブル描画データを変換
  var bubble_data = bubble(nodes).descendants() ;

   

  • 用意されたデータをバブル描画できる（円のr、cx、cyがある）データに変換されます
  • このデータをコンソールに出力（console.log(bubble_data)）して確認ができます
    
  • ルートデータ（children）が最初の配列にあります。ノードデータはそのあとの配列となります

ルート付き/ルートなしでのバブルチャートを描画します

• 作成されたバブルチャートデータにルートデータがついていますので、そのままd3で描画すると、ルート（大きな円）付きのバブルチャートが作成されます
  
• 作成されたバブルデータ配列からルート要素を取り除ければノードだけのバブルチャートとなります

  var no_root_bubble = bubble_data.filter( 
          function(d){ 
               return d.parent != null ;    // parentがないデータを返す
          } 
  ) ;
  

  

バブルに色を付けて描画します

• d3.packで作成したバブルチャートデータに半径と中心座標が含まれていますが、バブルの色に関するデータはありません
• 変換されたバブルデータの半径最大値/最小値を割り出して、色のスケールに作成します

  // 変換されたバブルデータにある半径の最大値/最小値の割り出し
  var max_val = d3.max(no_root_bubble, function(d){ return d.r ;});     
  var min_val = d3.min(no_root_bubble, function(d){return d.r ; });
  
  // 色のスケール作成
  var color_scale = d3.scaleLinear()
  	.domain( [min_val, max_val] )
  	.range(d3.schemeCategory10 ); // d3で10色を生成

   

• 通常のd3で変換されたバブルデータを描画します（詳細は省略）

  var data_set = { 
  		    children: [
                    {name:"aaa", val:58},
                    {name:"bbb", val:88},
                    {name:"ccc", val:48},
                    {name:"ddd", val:73},
                    {name:"eee", val:81},
                    {name:"fff", val:31}  ] } ;
                     
  var width=600, height=300;
  var bubble = d3.pack()
      .size([width, height])
      .padding(1.5) ;
  
  var nodes = d3.hierarchy( data_set )
                .sum(function(d){ return d.val })
            ;
  
  var bubble_data = bubble(nodes).descendants() ;
  
  var no_root_bubble = bubble_data.filter( function(d){ return d.parent != null ;} ) ;
  
  var max_val = d3.max(no_root_bubble, function(d){ return d.r ;});     
  var min_val = d3.min(no_root_bubble, function(d){return d.r ; });
  
  var color_scale = d3.scaleLinear()
  		.domain( [min_val, max_val] )
      .range(d3.schemeCategory10 );
  var font_scale = d3.scaleLinear()
  		.domain([min_val, max_val])
      .range([9, 28]);
      
  var bubbles = d3.select("#content")
      .selectAll(".bubble")
      .data(no_root_bubble)
      .enter()
      .append("g")
      .attr("class", "bubble")
      .attr("transform", function(d){ return "translate("+d.x+","+d.y+")" ;})
      ;
  
  bubbles.append("circle")
      .attr("r", function(d){ return d.r })
      .style("fill", function(d,i){ 
      			return color_scale(d.r); 
        });                  
        ; 
  bubbles.append("text")
  		.attr("text-anchor", "middle")
      .attr("dominant-baseline", "central")
      .text(function(d){ return d.data.name ; })
      .style("font-size", function(d){ return font_scale(d.r) ; })
      ;