D3.js 折れ線グラフ・散布図の種類

D3で折れ線チャートの種類を紹介する。
Tags:

基本的な折れ線チャートの作成方法は、折れ線チャート(line chart)の作成で説明している。基本的な折れ線チャートを表示するプログラムは次のとおりである。

基本折れ線チャート

コードを確認

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 Line Plot</title>
  <script src="https://d3js.org/d3.v7.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. ライン、Plot表示
    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]); })
);

d3.line関数の一部をcurve関数で変更することで、ラインの形状を変更できる。

.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

データ点の間を線形補間する。既定値と同じである。サンプルプログラムの重要部分を次のように変更して設定する。

線形補間とは、地形や値が直線的に変化するとみなし、隣接する2つの観測値を直線で結んで任意点の座標を求める方法である。

使い方は次の関数と同じである。

.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(alpha)で線の曲がり具合を設定できる。alphaは0から1の間の値を設定する。0なら既定のd3.curveCatmullRomと一致し、1ならd3.curveLinearと一致する。alphaの既定値は0である。

Catmull-Romスプライン d3.curveCatmullRom

d3.curveCatmullRom

この関数はd3.curveCatmullRom.alpha(alpha)で線の曲がり具合を設定できる。alphaは0から1の間の値を設定する。

naturalカーブスプライン d3.curveNatural

d3.curveNatural

3次スプライン(x方向) d3.curveMonotoneX

d3.curveMonotoneX

3次スプライン(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(alpha)で線の曲がり具合を設定できる。alphaは0から1の間の値を設定する。alphaの既定値は0である。

Catmull-Romスプライン d3.curveCatmullRomOpen

d3.curveCatmullRomOpen

この関数はd3.curveCatmullRomClosed.alpha(alpha)で線の曲がり具合を設定できる。alphaは0から1の間の値を設定する。既定値は0.5である。

閉ループ(Closed Loop)

線形 d3.curveLinearClosed

d3.curveLinearClosed

スプライン d3.curveBasisClosed

d3.curveBasisClosed

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

d3.curveCardinalClosed

この関数はd3.curveCardinalClosed.tension(alpha)で線の曲がり具合を設定できる。alphaは0から1の間の値を設定する。既定値は0である。

Catmull-Romスプライン d3.curveCatmullRomClosed

d3.curveCatmullRomClosed

この関数はd3.curveCatmullRomClosed.alpha(alpha)で線の曲がり具合を設定できる。alphaは0から1の間の値を設定する。既定値は0.5である。

階層

スプライン d3.curveBundle

d3.curveBundle

この関数はd3.curveBundle.beta(b)でバンドル係数を指定できる。bの既定値は0.85である。グラフは1.0、0.5、0の例を表示しており、0にすると開始点と終了点を結ぶ直線になる。

参考