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に割り当てました。
次に、マージンポイントを指定しました。
次に、性別のディメンションとグループを割り当てました。
Key and Valueアクセサーは、バブルからKey andValueを返します。
式–を使用して半径値アクセサ関数を計算します。 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ページを作成するbubble.html それに次の変更を追加します。
<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>
ここで、ブラウザをリクエストすると、次の応答が表示されます。