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

데이터 점 사이를 선형 보간(補間, interpolation)이다. 기본값과 동일하다. 예제 프로그램의 중요 부분을 다음과 같이 변경하여 설정한다.

선형 보간(Linear interpolation, 線型 補間)이란? 지형이 직선적으로 변화하는 것으로 간주하여 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(α)로서 선의 구부러짐 상태를 설정할 수 있다. α는 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

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(α)로서 선의 구부러짐 상태를 설정할 수 있다. α는 0에서 1 사이의 값을 설정한다. α의 기본값은 0이다.

Catmull-Rom 스플라인 d3.curveCatmullRomOpen

d3.curveCatmullRomOpen

이 함수는 d3.curveCatmullRomClosed.alpha(α)로서 선의 구부러짐 상태를 설정할 수 있다. α는 0에서 1 사이의 값을 설정한다. 기본값은 0.5이다.

폐루프(Closed Loop)

선형 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으로 하면 시작점과 끝점을 연결하는 직선이 된다.

참고




최종 수정 : 2024-01-18