Dcjs-bubble-chart

提供：Dev Guides
移動先:案内、検索

DC.js-バブルチャート

バブルチャートを使用して、データの3つのディメンションを表示します。 これは散布図のバリエーションで、データポイントがバブルに置き換えられます。 バブルサイズは、データディメンションに関して表されます。 水平軸と垂直軸を値軸として使用します。 この章では、バブルチャートについて詳しく説明します。

バブルチャートメソッド

バブルチャートの描画に進む前に、 dc.bubbleChart クラスとそのメソッドを理解する必要があります。 dc.bubbleChartはミックスインを使用して、以下にリストされているチャートを描画する基本的な機能を取得します-

  • dc.bubbleMixin
  • dc.coordinateGridMixin

dc.bubbleChartの完全なクラス図は次のとおりです-

バブルチャートメソッド

dc.bubbleChartは、上記で指定されたミックスインのすべてのメソッドを取得します。 また、バブルチャートを描画する独自のメソッドがあります。これについては、以下で説明します-

elasticRadius（[半径]）

このメソッドは、バブルの半径を有効にするために使用されます。 これを無効にすると、バブルの半径は自動的に再スケーリングされます。

sortBubbleSize（[sortBubbleSize]）

このメソッドは、バブルのソート機能を有効にするために使用されます。 小さな気泡が最初に現れ、その後徐々に増加します。

バブルチャートを描く

DCでバブルチャートを描画します。 これを行うには、以下の手順に従う必要があります-

ステップ1：変数を定義する

以下に示すように変数を定義しましょう- 

var chart = dc.bubbleChart('#bubble');

ここでは、bubbleChart関数はidバブルにマッピングされています。

ステップ2：データを読む

*howell1.csv* ファイルからデータを読み取ります。
d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

データが存在しない場合、エラーを返します。 次に、データをクロスフィルターに割り当てます。 ここでは、howell1.csvファイルを既にダウンロードしています。 ここでは同じファイルが使用され、次のコードブロックのようになります。 

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

....................
.....................

ステップ3：レコードを取得する

以下に示すコーディングを使用してレコードをフェッチしましょう- 

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
   x.heightRange = (((Math.floor(x.height/10)) + 1) *10);
   x.weightRange = (((Math.floor(x.weight/10)) + 1)* 10);
});

ここでは、性別を確認し、上記の式を使用してx軸の高さと幅の範囲を設定しました。

ステップ4：寸法を設定する

以下に示すコーディングを使用して次元を設定できます- 

var genderDimension = mycrossfilter.dimension(function(data) {
   return [ data.gender, data.heightRange, data.weightRange ];
});

ディメンションが割り当てられた後、以下に示すコーディングを使用して性別をグループ化します- 

var genderGroup = genderDimension.group().reduceCount();

ステップ5：チャートを生成する

今、以下に示すコーディングを使用してバブルチャートを生成します- 

chart.width(1200)
   .height(400)
   .margins({top: 10, right: 50, bottom: 30, left: 60})
   .dimension(genderDimension)
   .group(genderGroup)
   .keyAccessor(function (p) {
      return p.key[1];
   })

   .valueAccessor(function (p) {
      return p.key[2];
   })

   .radiusValueAccessor(function (p) {
      return (Math.floor((p.value/10)) + 1);
   })

ここに、

  • チャートの幅を1200に、高さを400に割り当てました。
  • 次に、マージンポイントを指定しました。
  • 次に、性別のディメンションとグループを割り当てました。
  • キーと値のアクセサーは、バブルからキーと値を返します。
  • 式- Math.floor（（p.value/10））+ 1 を使用して、半径値のアクセサー関数を計算します。

ステップ6：泡を描く

今、以下に示すコーディングを使用してバブルを描きます- 

.x(d3.scale.linear().domain([0, 240]))
.y(d3.scale.linear().domain([-40, 120]))
.r(d3.scale.linear().domain([0, 20]))
.minRadiusWithLabel(1000)
.yAxisPadding(100)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
   return p.key[0]
   + "\n"
   + "Height: " + p.key[1] + " cm\n"
   + "Weight: " + p.key[2] + " kg\n"
   + "Count: " + p.value;
});

ここに、

  • d3.scale.linear関数は、x軸に指定されたドメイン範囲[0,240]で新しい線形スケールを作成するために使用されます。
  • 同様に、yと半径の線形スケール値を割り当てました。
  • 最小半径ラベル値を1000、x軸とy軸のパディング値をそれぞれ200と100に指定しました。
  • 次に、最大バブル相対サイズ値として0.7を指定しました。
  • 水平および垂直のグリッド線をレンダリングし、バブルキーと値のタイトルをマップします。

ステップ7：TickFormatを設定する

以下に示すコーディングを使用して、x軸とy軸のチケット形式を設定します- 

chart.yAxis().tickFormat(function (s) {
   return s + " cm";
});

chart.xAxis().tickFormat(function (s) {
   return s + " kg";
});

最後に、* chart.render（）*メソッドを使用してチャートをレンダリングします。

ステップ8：作業例

完全なコードリストは、次のコードブロックに示すとおりです。 Webページ bubblel を作成し、以下の変更を加えます。 

<html>
   <head>
      <title>Bubble chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>

   <body>
      <div>
         <div id = "bubble"></div>
      </div>

      <script language = "javascript">
         var chart = dc.bubbleChart('#bubble');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
               x.heightRange = (((Math.floor(x.height/10)) + 1) *10);
               x.weightRange = (((Math.floor(x.weight/10)) + 1)* 10);
            });

            var genderDimension = mycrossfilter.dimension(function(data) {
               return [ data.gender, data.heightRange, data.weightRange ];
            });
            var genderGroup = genderDimension.group().reduceCount();

            chart.width(1200)
               .height(400)
               .margins({top: 10, right: 50, bottom: 30, left: 60})
               .dimension(genderDimension)
               .group(genderGroup)
               .keyAccessor(function (p) {
                  return p.key[1];
               })

               .valueAccessor(function (p) {
                  return p.key[2];
               })

               .radiusValueAccessor(function (p) {
                  return (Math.floor((p.value/10)) + 1);
               })

               .x(d3.scale.linear().domain([0, 240]))
               .y(d3.scale.linear().domain([-40, 120]))
               .r(d3.scale.linear().domain([0, 20]))
               .minRadiusWithLabel(1000)
               .yAxisPadding(100)
               .xAxisPadding(200)
               .maxBubbleRelativeSize(0.07)
               .renderHorizontalGridLines(true)
               .renderVerticalGridLines(true)
               .renderLabel(true)
               .renderTitle(true)
               .title(function (p) {
                  return p.key[0]
                  + "\n"
                  + "Height: " + p.key[1] + " cm\n"
                  + "Weight: " + p.key[2] + " kg\n"
                  + "Count: " + p.value;
               });

            chart.yAxis().tickFormat(function (s) {
               return s + " cm";
            });

            chart.xAxis().tickFormat(function (s) {
               return s + " kg";
            });

            chart.render();
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次のレスポンスが表示されます。

「https://www.finddevguides.com/index.php?title=Dcjs-bubble-chart&oldid=35689」から取得
Powered by MediaWiki