D3.js v4/v5 折れ線グラフ/散布図補完種類一覧

2018-03-17

1 基本の折れ線グラフ
2 データ区間補間
3 データ区間補間 (端部補間無し)
4 閉ループ
5 階層補間
- 5.1 スプライン補間 d3.curveBundle

D3の折れ線グラフの種類を紹介します。基本的な折れ線グラフの作り方の詳細はこちらに記載しています。
基本の折れ線グラフを表示するプログラムは下記です。

基本の折れ線グラフ

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 Line Plot</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>
  <script>
  // 1. データの準備
  var dataset = [
    [5, 20],
    [25, 67],
    [85, 50],
    [150, 70],
    [220, 88],
    [250, 50],
    [330, 95],
    [410, 12],
    [475, 44],
    [480, 90]
  ];

  var width = 800; // グラフの幅
  var height = 400; // グラフの高さ
  var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };

  // 2. SVG領域の設定
  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

  // 3. 軸スケールの設定
  var xScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([margin.left, width - margin.right]);

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([height - margin.bottom, margin.top]);

  // 4. 軸の表示
  var axisx = d3.axisBottom(xScale).ticks(5);
  var axisy = d3.axisLeft(yScale).ticks(5);

  svg.append("g")
    .attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")
    .call(axisx)
    .append("text")
    .attr("fill", "black")
    .attr("x", (width - margin.left - margin.right) / 2 + margin.left)
    .attr("y", 35)
    .attr("text-anchor", "middle")
    .attr("font-size", "10pt")
    .attr("font-weight", "bold")
    .text("X Label");

  svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + 0 + ")")
    .call(axisy)
    .append("text")
    .attr("fill", "black")
    .attr("text-anchor", "middle")
    .attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
    .attr("y", -35)
    .attr("transform", "rotate(-90)")
    .attr("font-weight", "bold")
    .attr("font-size", "10pt")
    .text("Y Label");

  // 5. ライン、プロットの表示
  svg.append("path")
    .datum(dataset)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("d", d3.line()
      .x(function(d) { return xScale(d[0]); })
      .y(function(d) { return yScale(d[1]); })
    );

  svg.append("g")
    .selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle")
    .attr("cx", function(d) { return xScale(d[0]); })
    .attr("cy", function(d) { return yScale(d[1]); })
    .attr("fill", "steelblue")
    .attr("r", 4);
  </script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// 1. データの準備

var dataset = [

[5, 20],

[25, 67],

[85, 50],

[150, 70],

[220, 88],

[250, 50],

[330, 95],

[410, 12],

[475, 44],

[480, 90]

];

var width = 800; // グラフの幅

var height = 400; // グラフの高さ

var margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };

// 2. SVG領域の設定

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

// 3. 軸スケールの設定

var xScale = d3.scaleLinear()

.domain([0, d3.max(dataset, function(d) { return d[0]; })])

.range([margin.left, width - margin.right]);

var yScale = d3.scaleLinear()

.domain([0, d3.max(dataset, function(d) { return d[1]; })])

.range([height - margin.bottom, margin.top]);

// 4. 軸の表示

var axisx = d3.axisBottom(xScale).ticks(5);

var axisy = d3.axisLeft(yScale).ticks(5);

svg.append("g")

.attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")

.call(axisx)

.append("text")

.attr("fill", "black")

.attr("x", (width - margin.left - margin.right) / 2 + margin.left)

.attr("y", 35)

.attr("text-anchor", "middle")

.attr("font-size", "10pt")

.attr("font-weight", "bold")

.text("X Label");

svg.append("g")

.attr("transform", "translate(" + margin.left + "," + 0 + ")")

.call(axisy)

.append("text")

.attr("fill", "black")

.attr("text-anchor", "middle")

.attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)

.attr("y", -35)

.attr("transform", "rotate(-90)")

.attr("font-weight", "bold")

.attr("font-size", "10pt")

.text("Y Label");

// 5. ライン、プロットの表示

svg.append("path")

.datum(dataset)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("d", d3.line()

.x(function(d) { return xScale(d[0]); })

.y(function(d) { return yScale(d[1]); })

);

svg.append("g")

.selectAll("circle")

.data(dataset)

.enter()

.append("circle")

.attr("cx", function(d) { return xScale(d[0]); })

.attr("cy", function(d) { return yScale(d[1]); })

.attr("fill", "steelblue")

.attr("r", 4);

</script>

</body>

</html>

デフォルトでは、設定したデータ点を直線で結ぶように折れ線グラフが作成されます。黄色でハイライトした”path”要素の”d”属性を設定する

   .attr("d", d3.line()
      .x(function(d) { return xScale(d[0]); })
      .y(function(d) { return yScale(d[1]); })
   );

.attr("d", d3.line()

.x(function(d) { return xScale(d[0]); })

.y(function(d) { return yScale(d[1]); })

);

d3.lineメソッドの部分をcurveメソッドを使って変更することでラインの形を変更することができます。

   .attr("d", d3.line()
      .x(function(d) { return xScale(d[0]); })
      .y(function(d) { return yScale(d[1]); })
      .curve(d3.curveBasis)
   );

.attr("d", d3.line()

.x(function(d) { return xScale(d[0]); })

.y(function(d) { return yScale(d[1]); })

.curve(d3.curveBasis)

);

curveメソッドに設定できる関数は複数用意されており、以下にまとめます。

データ区間補間

線形補間 d3.curveLinear

d3.curveLinear

データ点間を線形補間します。デフォルトと同じです。基本プログラムのハイライト部分を次のように変更して設定します。

   .attr("d", d3.line()
      .x(function(d) { return xScale(d[0]); })
      .y(function(d) { return yScale(d[1]); })
      .curve(d3.curveLinear)
   );

.attr("d", d3.line()

.x(function(d) { return xScale(d[0]); })

.y(function(d) { return yScale(d[1]); })

.curve(d3.curveLinear)

);

使い方は、以下の関数すべて同じです。

スプライン補間 d3.curveBasis

d3.curveBasis

データ点間をスプライン補間します。ラインの開始点と終点はデータ点と一致します。

カーディナルスプライン補間 d3.curveCardinal

d3.curveCardinal

この関数はd3.curveCardinal.tension(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。0の場合、デフォルトのd3.curveCatmullRomと一致し、1の場合、d3.curveLinearと一致します。αのデフォルトは0です。

Catmull-Romスプライン補間 d3.curveCatmullRom

d3.curveCatmullRom

この関数はd3.curveCatmullRom.alpha(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。

nutural カーブスプライン補間 d3.curveNatural

d3.curveNatural

３次スプライン補間(x方向) d3.curveMonotoneX

d3.curveMonotoneX

３次スプライン補間(y方向) d3.curveMonotoneY

d3.curveMonotoneY

ステップ(中央) d3.curveStep

d3.curveStep

ステップ(終点) d3.curveStepAfter

d3.curveStepAfter

ステップ(始点) d3.curveStepBefore

d3.curveStepBefore

データ区間補間 (端部補間無し)

スプライン補間 d3.curveBasisOpen

d3.curveBasisOpen

カーディナルスプライン補間 d3.curveCardinalOpen

d3.curveCardinalOpen

この関数はd3.curveCardinalOpen.tension(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。αのデフォルトは0です。

Catmull-Romスプライン補間 d3.curveCatmullRomOpen

d3.curveCatmullRomOpen

この関数はd3.curveCatmullRomClosed.alpha(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。デフォルトは0.5です。

閉ループ

線形補間 d3.curveLinearClosed

d3.curveLinearClosed

スプライン補間 d3.curveBasisClosed

d3.curveBasisClosed

カーディナルスプライン補間 d3.curveCardinalClosed

d3.curveCardinalClosed

この関数はd3.curveCardinalClosed.tension(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。αのデフォルトは0です。

Catmull-Romスプライン補間 d3.curveCatmullRomClosed

d3.curveCatmullRomClosed

この関数はd3.curveCatmullRomClosed.alpha(α)として、線の曲がり具合を設定できます。αは0から1の値を設定します。デフォルトは0.5です。

階層補間

スプライン補間 d3.curveBundle

d3.curveBundle

この関数は、d3.curveBundle.beta(b)として段階の係数を指定できます。bのデフォルトは0.85です。グラフは、1.0、0.5、0の例を表示しており、0とすると始点と終点を結ぶ直線となります。

D3.js v4/v5 折れ線グラフ/散布図補完種類一覧

基本の折れ線グラフ

データ区間補間

線形補間 d3.curveLinear

スプライン補間 d3.curveBasis

カーディナルスプライン補間 d3.curveCardinal

Catmull-Romスプライン補間 d3.curveCatmullRom

nutural カーブスプライン補間 d3.curveNatural

３次スプライン補間(x方向) d3.curveMonotoneX

３次スプライン補間(y方向) d3.curveMonotoneY

ステップ(中央) d3.curveStep

ステップ(終点) d3.curveStepAfter

ステップ(始点) d3.curveStepBefore

データ区間補間 (端部補間無し)

スプライン補間 d3.curveBasisOpen

カーディナルスプライン補間 d3.curveCardinalOpen

Catmull-Romスプライン補間 d3.curveCatmullRomOpen

閉ループ

線形補間 d3.curveLinearClosed

スプライン補間 d3.curveBasisClosed

カーディナルスプライン補間 d3.curveCardinalClosed

Catmull-Romスプライン補間 d3.curveCatmullRomClosed

階層補間

スプライン補間 d3.curveBundle

いいね:

関連

D3.js v4/v5 折れ線グラフ/散布図補完 種類一覧

基本の折れ線グラフ

データ区間補間

線形補間 d3.curveLinear

スプライン補間 d3.curveBasis

カーディナルスプライン補間 d3.curveCardinal

Catmull-Romスプライン補間 d3.curveCatmullRom

nutural カーブスプライン補間 d3.curveNatural

３次スプライン補間(x方向) d3.curveMonotoneX

３次スプライン補間(y方向) d3.curveMonotoneY

ステップ(中央) d3.curveStep

ステップ(終点) d3.curveStepAfter

ステップ(始点) d3.curveStepBefore

データ区間補間 (端部補間無し)

スプライン補間 d3.curveBasisOpen

カーディナルスプライン補間 d3.curveCardinalOpen

Catmull-Romスプライン補間 d3.curveCatmullRomOpen

閉ループ

線形補間 d3.curveLinearClosed

スプライン補間 d3.curveBasisClosed

カーディナルスプライン補間 d3.curveCardinalClosed

Catmull-Romスプライン補間 d3.curveCatmullRomClosed

階層補間

スプライン補間 d3.curveBundle

いいね:

関連

D3.js v4/v5 折れ線グラフ/散布図補完種類一覧