[javascript] D3.js를 이용한 가로 막대 그래프 그리기

07 Dec 2023

javascript

D3.js는 JavaScript를 사용하여 데이터 시각화를 위한 강력한 도구입니다. 이번 블로그 포스트에서는 D3.js를 사용하여 가로 막대 그래프를 그리는 방법에 대해 알아보겠습니다.

먼저, D3.js를 사용하기 위해 D3.js 라이브러리를 다운로드하고 HTML 파일에 추가합니다.:

<script src="https://d3js.org/d3.v7.min.js"></script>

다음으로, 그래프를 그릴 데이터를 정의합니다. 이 예제에서는 다음과 같은 데이터를 사용하겠습니다:

var data = [
  { name: "A", value: 10 },
  { name: "B", value: 20 },
  { name: "C", value: 30 },
  { name: "D", value: 40 },
  { name: "E", value: 50 }
];

이제 D3.js를 사용하여 그래프를 그릴 준비가 되었습니다. 먼저 SVG 요소를 생성하고, 가로 막대 그래프를 그릴 위치와 크기를 지정합니다.

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

다음으로, 가로 막대를 그리는 함수를 작성합니다. 이 함수는 데이터를 기반으로 가로 막대를 그립니다.

function drawBar(data) {
  svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", 0)
    .attr("y", function(d, i) { return i * 40; })
    .attr("width", function(d) { return d.value; })
    .attr("height", 30)
    .attr("fill", "steelblue");
}

마지막으로, 그래프를 그리는 함수를 호출합니다.

drawBar(data);

위의 코드들을 모두 포함한 전체 예제는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <script>
    var data = [
      { name: "A", value: 10 },
      { name: "B", value: 20 },
      { name: "C", value: 30 },
      { name: "D", value: 40 },
      { name: "E", value: 50 }
    ];

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

    function drawBar(data) {
      svg.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("x", 0)
        .attr("y", function(d, i) { return i * 40; })
        .attr("width", function(d) { return d.value; })
        .attr("height", 30)
        .attr("fill", "steelblue");
    }

    drawBar(data);
  </script>
</body>
</html>

위의 코드를 실행시키면, 가로 막대 그래프가 표시될 것입니다. 각 막대의 가로 길이는 데이터 값에 따라 다르게 표시됩니다.

D3.js를 사용하여 가로 막대 그래프를 그리는 방법에 대해 알아봤습니다. 이 예제를 기반으로 본인의 데이터에 맞게 가로 막대 그래프를 그려보세요!