D3js-drawing-charts
D3.js-チャートの描画
D3.jsは、静的なSVGチャートを作成するために使用されます。 以下のチャートを描くのに役立ちます-
- 棒グラフ
- 円グラフ
- 円グラフ
- ドーナツチャート
- 折れ線グラフ
- バブルチャートなど
この章では、D3でのチャートの描画について説明します。 これらのそれぞれを詳細に理解しましょう。
棒グラフ
棒グラフは、最も一般的に使用されるグラフのタイプの1つであり、数、頻度、またはその他の尺度を表示および比較するために使用されます 平均）異なる個別のカテゴリまたはグループに対して。 このグラフは、さまざまなバーの高さまたは長さが、それらが表すカテゴリのサイズに比例するように構築されます。
x軸（水平軸）は、スケールのないさまざまなカテゴリを表します。 y軸（垂直軸）にはスケールがあり、これは測定単位を示します。 バーは、カテゴリの数とカテゴリの長さまたは複雑さに応じて、垂直または水平に描画できます。
棒グラフを描く
D3を使用してSVGで棒グラフを作成しましょう。 この例では、バーの* rect要素*と* text要素*を使用して、バーに対応するデータ値を表示できます。
D3を使用してSVGで棒グラフを作成するには、以下の手順に従います。
ステップ1 *- rect要素にスタイルを追加*-rect要素に次のスタイルを追加しましょう。
svg rect {
fill: gray;
}ステップ2 *-*テキスト要素にスタイルを追加-次のCSSクラスを追加して、テキスト値にスタイルを適用します。 このスタイルをSVGテキスト要素に追加します。 以下に定義されています-
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}ここでは、塗りを使用して色を適用します。 テキストアンカーは、テキストをバーの右端に向けて配置するために使用されます。
ステップ3 *-*変数の定義-スクリプトに変数を追加しましょう。 以下で説明します。
<script>
var data = [10, 5, 12, 15];
var width = 300,
scaleFactor = 20,
barHeight = 30;
</script>ここに、
- 幅-SVGの幅。
- Scalefactor -画面に表示されるピクセル値にスケーリングされます。
- Barheight -これは水平バーの静的な高さです。
ステップ4 *- SVG要素の追加*-次のコードを使用して、D3にSVG要素を追加します。
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);ここでは、最初にドキュメント本文を選択し、新しいSVG要素を作成してから追加します。 このSVG要素内に棒グラフを作成します。 次に、SVGの幅と高さを設定します。 高さは、バーの高さ*データ値の数として計算されます。
バーの高さを30とし、データ配列の長さは4です。 次に、SVGの高さはbarheight * datalength（120ピクセル）として計算されます。
ステップ5 *-*変換の適用-次のコードを使用してbarに変換を適用します。
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});ここでは、内側の各バーが要素に対応しています。 したがって、グループ要素を作成します。 横棒グラフを作成するには、各グループ要素を上下に配置する必要があります。 変換式のインデックス*バーの高さを考えてみましょう。
ステップ6 *-*長方形要素をバーに追加-前のステップでは、グループ要素を追加しました。 次のコードを使用して、長方形要素をバーに追加します。
bar.append("rect")
.attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);ここで、幅は（データ値*スケール係数）、高さは（バーの高さ-マージン）です。
ステップ7 *-*データの表示-これは最後のステップです。 次のコードを使用して、各バーにデータを表示します。
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight/2)
.attr("dy", ".35em")
.text(function(d) { return d; });ここでは、幅は（データ値*スケールファクター）として定義されます。 テキスト要素はパディングまたはマージンをサポートしていません。 このため、「dy」オフセットを与える必要があります。 これは、テキストを垂直に配置するために使用されます。
ステップ8 *-*作業例-完全なコードリストを次のコードブロックに示します。 Webページ barchartsl を作成し、以下の変更を追加します。
*barchartsl*<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg rect {
fill: gray;
}
svg text {
fill: yellow;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var data = [10, 5, 12, 15];
var width = 300
scaleFactor = 20,
barHeight = 30;
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight *data.length);
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i* barHeight + ")";
});
bar.append("rect").attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return (d*scaleFactor); })
.attr("y", barHeight/2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
</body>
</html>ブラウザをリクエストすると、次のレスポンスが表示されます。
円グラフ
円グラフは、数値の割合を示すためにスライスに分割された円形の統計グラフィックです。
円グラフを描く
D3を使用してSVGで円グラフを作成しましょう。 これを行うには、次の手順に従う必要があります-
ステップ1 *-*変数の定義-スクリプトに変数を追加しましょう。 以下のコードブロックに示されています。
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
</script>ここに、
- 幅-SVGの幅。
- 高さ-SVGの高さ。
- Data -データ要素の配列。
- 色-円要素に色を適用します。
ステップ2 *- SVG要素の追加*-次のコードを使用して、D3にSVG要素を追加します。
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);ステップ3 *-*変換の適用-次のコードを使用して、SVGで変換を適用します。
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})ここに、
- var g = svg.selectAll（“ g”）*-円を保持するグループ要素を作成します。
- .data（data）*-データ配列をグループ要素にバインドします。
- .enter（）*-グループ要素のプレースホルダーを作成します。
- .append（“ g”）*-グループ要素をページに追加します。
.attr("transform", function(d, i) {
return "translate(0,0)";
})ここで、translateは、原点に対して要素を配置するために使用されます。
ステップ4 *-*円要素を追加-次に、次のコードを使用してグループに円要素を追加します。
g.append("circle")次のコードを使用して、グループに属性を追加します。
.attr("cx", function(d, i) {
return i*75 + 50;
})ここでは、各円の中心のx座標を使用します。 円のインデックスに75を掛け、円の間に50のパディングを追加しています。
次に、各円の中心のy座標を設定します。 これは、すべての円を均一にするために使用され、以下で定義されます。
.attr("cy", function(d, i) {
return 75;
})次に、各円の半径を設定します。 以下で定義されています。
.attr("r", function(d) {
return d*1.5;
})ここでは、半径にデータ値と定数「1.5」を掛けて、円のサイズを大きくしています。 最後に、次のコードを使用して各円の色を塗りつぶします。
.attr("fill", function(d, i){
return colors[i];
})ステップ5 *-*データの表示-これは最後のステップです。 次のコードを使用して、各円にデータを表示しましょう。
g.append("text")
.attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif")
.text(function(d) {
return d;
});ステップ6 *-*作業例-完全なコードリストを次のコードブロックに示します。 Webページ circlechartsl を作成し、次の変更を加えます。
*circlechartsl*<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 400;
var height = 400;
var data = [10, 20, 30];
var colors = ['green', 'purple', 'yellow'];
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
g.append("circle").attr("cx", function(d, i) {
return i*75 + 50;
})
.attr("cy", function(d, i) {
return 75;
})
.attr("r", function(d) {
return d*1.5;
})
.attr("fill", function(d, i){
return colors[i];
})
g.append("text").attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif").text(function(d) {
return d;
});
</script>
</body>
</html>ここで、ブラウザをリクエストすると、以下がレスポンスになります。
円グラフ
円グラフは、円形の統計グラフです。 数値の割合を示すためにスライスに分割されます。 D3で円グラフを作成する方法を理解しましょう。
円グラフを描く
円グラフの描画を開始する前に、次の2つの方法を理解する必要があります-
- d3.arc（）メソッドと
- d3.pie（）メソッド。
これらの方法の両方を詳細に理解しましょう。
d3.arc（）メソッド*-d3.arc（）メソッドはアークを生成します。 円弧の内側半径と外側半径を設定する必要があります。 内側の半径が0の場合、結果は円グラフになります。それ以外の場合、結果はドーナツグラフになります。これについては次のセクションで説明します。
*The d3.pie（）Method* -d3.pie（）メソッドは、円グラフを生成するために使用されます。 データセットからデータを取得し、円グラフの各区分の開始角度と終了角度を計算します。
次の手順を使用して、円グラフを描きましょう。
ステップ1 *-*スタイルの適用-アーク要素に次のスタイルを適用します。
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}ここでは、塗りを使用して色を適用します。 テキストアンカーは、テキストを円弧の中心に向けて配置するために使用されます。
ステップ2 *-*変数の定義-以下に示すように、スクリプトで変数を定義します。
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height)/2;
</script>ここに、
- 幅-SVGの幅。
- 高さ-SVGの高さ。
- 半径-Math.min（width、height）/2;の関数を使用して計算できます。
ステップ3 *-*変換の適用-次のコードを使用して、SVGで次の変換を適用します。
var g = svg.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");次に、以下に示す d3.scaleOrdinal 関数を使用して色を追加します。
var color = d3.scaleOrdinal(['gray', 'green', 'brown', 'orange']);ステップ4 *-*円グラフの生成-次に、以下の関数を使用して円グラフを生成します。
var pie = d3.pie()
.value(function(d) { return d.percent; });ここで、パーセンテージ値をプロットできます。 d.percent を返し、それを円の値として設定するには、匿名関数が必要です。
ステップ5 *-*パイウェッジの弧を定義-パイチャートを生成した後、以下に示す関数を使用して各パイウェッジの弧を定義します。
var arc = d3.arc()
.outerRadius(radius)
.innerRadius(0);ここでは、この弧はパス要素に設定されます。 計算された半径はouterradiusに設定され、innerradiusは0に設定されます。
ステップ6 *-*ウェッジにラベルを追加-半径を指定して、パイウェッジにラベルを追加します。 次のように定義されています。
var label = d3
.arc()
.outerRadius(radius)
.innerRadius(radius - 80);ステップ7 *-*データの読み取り-これは重要なステップです。 以下の関数を使用してデータを読み取ることができます。
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
});ここでは、 populations.csv にデータファイルが含まれています。 d3.csv 関数は、データセットからデータを読み取ります。 データが存在しない場合、エラーがスローされます。 このファイルをD3パスに含めることができます。
ステップ8 *-*データのロード-次のステップは、次のコードを使用してデータをロードすることです。
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");ここで、データセットの各データ値のグループ要素にデータを割り当てることができます。
ステップ9 *-*パスの追加-次に、パスを追加し、以下に示すようにグループ「arc」をグループに割り当てます。
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d) { return color(d.data.states); });ここでは、塗りつぶしを使用してデータの色を適用します。 d3.scaleOrdinal 関数から取得されます。
ステップ10 *-*テキストの追加-次のコードを使用してラベルにテキストを表示します。
arc.append("text")
.attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });ここでは、ラベルにテキストを表示するためにSVGテキスト要素が使用されます。 以前に* d3.arc（）を使用して作成したラベル円弧は、ラベルの位置である重心点を返します。 最後に、 *d.data.browser を使用してデータを提供します。
ステップ11 *-*グループ要素の追加-グループ要素の属性を追加し、クラスタイトルを追加してテキストを色付けし、イタリックにします。これはステップ1で指定し、以下で定義します。
svg.append("g")
.attr("transform", "translate(" + (width/2 - 120) + "," + 20 + ")")
.append("text")
.text("Top population states in india")
.attr("class", "title")ステップ12 *-*作業例-円グラフを描くために、インドの人口のデータセットを取得できます。 このデータセットは、次のように定義されているダミーWebサイトの人口を示しています。
*population.csv*states,percent
UP,80.00
Maharastra,70.00
Bihar,65.0
MP,60.00
Gujarat,50.0
WB,49.0
TN,35.0上記のデータセットの円グラフの視覚化を作成しましょう。 ウェブページ「piechartl」を作成し、それに次のコードを追加します。
<!DOCTYPE html>
<html>
<head>
<style>
.arc text {
font: 12px arial;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
.title {
fill: green;
font-weight: italic;
}
</style>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width = "400" height = "400"></svg>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
radius = Math.min(width, height)/2;
var g = svg.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var color = d3.scaleOrdinal([
'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
]);
var pie = d3.pie().value(function(d) {
return d.percent;
});
var path = d3.arc()
.outerRadius(radius - 10).innerRadius(0);
var label = d3.arc()
.outerRadius(radius).innerRadius(radius - 80);
d3.csv("populations.csv", function(error, data) {
if (error) {
throw error;
}
var arc = g.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) { return color(d.data.states); });
console.log(arc)
arc.append("text").attr("transform", function(d) {
return "translate(" + label.centroid(d) + ")";
})
.text(function(d) { return d.data.states; });
});
svg.append("g")
.attr("transform", "translate(" + (width/2 - 120) + "," + 20 + ")")
.append("text").text("Top population states in india")
.attr("class", "title")
</script>
</body>
</html>