DC.js-散布図
散布図は、数学の図式の一種です。これは、デカルト座標を使用して表され、データセットの通常2つの変数の値を表示します。データはポイントのコレクションとして表示され、ポイントは色付きで表示される場合があります。この章では、散布図について詳しく説明します。
散布図法
散布図の描画に進む前に、 dc.scatterPlotクラスとそのメソッド。dc.scatterPlotは、ミックスインを使用して、グラフを描画する基本的な機能を取得します。dc.scatterPlotで使用されるミックスインを以下に示します-
- dc.coordinateGridMixin
dc.scatterPlotの完全なクラス図は次のとおりです-
dc.scatterPlotは、上記で指定されたミックスインのすべてのメソッドを取得します。散布図を描画する独自の方法があり、次のように説明されます。
customSymbol（[シンボル]）
このメソッドは、シンボルジェネレータを取得または設定するために使用されます。
emptySize（[サイズ]）
このメソッドは、グループが空のときにシンボルの半径を設定または取得するために使用されます。
excludeColor（[色]）
このメソッドは、チャートのフィルターから除外されたシンボルの色を取得または設定するために使用されます。
excludeOpacity（[不透明度]）
このメソッドは、チャートのフィルターから除外されたシンボルの不透明度を取得または設定するために使用されます。
excludeSize（[サイズ]）
チャートのフィルターから除外されたシンボルのサイズを設定または取得するために使用されます。
ハイライトされたサイズ（[サイズ]）
ハイライトされたシンボルの半径を設定または取得するために使用されます。
シンボル（[タイプ]）
各ポイントに使用されるシンボルタイプを取得または設定するために使用されます。
散布図を描く
DCで散布図を描きましょう。この例では、次の名前のデータセットを使用します。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
...............
...............上記のサンプルファイルには多くのレコードが含まれています。次のリンクをクリックしてファイルをダウンロードし、DCの場所に保存します。
howell1.csv
次に、次の手順に従って、DCで散布図を描画します。
ステップ1：変数を定義する
以下に示すように変数を定義しましょう-
var chart = dc.scatterPlot('#scatter');ここで、scatterplot（）関数はidscatterでマップされています。
ステップ2：データを読み取る
以下に示すように、howell1.csvファイルからデータを読み取ります-
d3.csv("data/howell1.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}データが存在しない場合は、エラーを返します。後で、データをクロスフィルターに割り当てます。
ステップ3：レコードを取得する
以下のコーディングを使用してレコードをフェッチしましょう-
people.forEach(function(x) {
if(x.male == 1) {
x.gender = "Male";
} else {
x.gender = "Female";
}
});ここでは、性別を確認しました。
ステップ4：寸法を設定する
以下のコーディングを使用して寸法を設定できます-
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});ディメンションが割り当てられたら、以下のコーディングを使用して性別をグループ化します-
var hwGroup = hwDimension.group().reduceCount();ステップ5：チャートを生成する
次に、以下のコーディングを使用してヒートマップを生成します-
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);ここに、
- チャートの幅を800、高さを600に割り当てました。
- x軸とy軸の両方にd3.scale.linear（）関数を適用しました。
- BrushOn値をfalseとして有効にしました。
- 次に、x軸ラベルを身長として割り当て、y軸ラベルを体重として割り当てます。
- シンボルサイズを8に設定し、パディング値を10に設定します。
- 最後に、データをグループ化し、グラフをレンダリングします。
ステップ6：実例
完全なコードリストは次のとおりです。Webページを作成するscatter.html それに次の変更を追加します。
<html>
<head>
<title>Scatter plot 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 = "scatter"></div>
</div>
<script language = "javascript">
var chart = dc.scatterPlot('#scatter');
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";
}
});
var hwDimension = mycrossfilter.dimension(function(data) {
return [Math.floor(data.height), Math.floor(data.weight)];
});
var hwGroup = hwDimension.group().reduceCount();
chart
.width(800)
.height(600)
.x(d3.scale.linear().domain([0,180]))
.y(d3.scale.linear().domain([0,100]))
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Weight")
.symbolSize(8)
.clipPadding(10)
.dimension(hwDimension)
.group(hwGroup);
chart.render();
});
</script>
</body>
</html>ここで、ブラウザをリクエストすると、次の応答が表示されます。