[javascript] D3.js를 이용한 선 그래프 그리기

07 Dec 2023

javascript

D3.js(D3는 Data-Driven Documents의 약자)는 HTML, CSS, SVG 등 웹 표준 기술을 이용하여 데이터 시각화를 위한 JavaScript 라이브러리입니다. 이번에는 D3.js를 이용하여 선 그래프를 그려보겠습니다.

준비물

D3.js를 사용하기 위해서는 아래의 두 가지를 준비해야 합니다.

D3.js 라이브러리
데이터

D3.js 라이브러리는 공식 웹사이트에서 다운로드하거나, CDN을 이용해서 가져올 수 있습니다.

데이터는 JSON 형식으로 작성되어 있어야 하며, 각 데이터 포인트마다 x와 y 좌표를 가지고 있어야 합니다. 예를 들어, 아래와 같은 형식으로 데이터를 작성할 수 있습니다.

[
    {"x": 0, "y": 5},
    {"x": 1, "y": 9},
    {"x": 2, "y": 7},
    {"x": 3, "y": 3},
    {"x": 4, "y": 8},
    {"x": 5, "y": 6}
]

HTML 파일 작성

D3.js를 사용하기 위해 HTML 파일을 작성해야 합니다. 아래와 같이 기본적인 구조를 갖춘 HTML 파일을 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>D3.js Line Chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        /* 스타일 작성 */
    </style>
</head>
<body>
    <svg id="chart"></svg>
    
    <script>
        // D3.js 코드 작성
    </script>
</body>
</html>

D3.js 코드 작성

D3.js 코드는 <script> 태그 안에 작성해야 합니다. 아래와 같이 코드를 작성합니다.

const data = [
    {"x": 0, "y": 5},
    {"x": 1, "y": 9},
    {"x": 2, "y": 7},
    {"x": 3, "y": 3},
    {"x": 4, "y": 8},
    {"x": 5, "y": 6}
];

const svg = d3.select("#chart")
    .attr("width", 400)
    .attr("height", 300);

const margin = {top: 20, right: 20, bottom: 30, left: 50};
const width = +svg.attr("width") - margin.left - margin.right;
const height = +svg.attr("height") - margin.top - margin.bottom;

const xScale = d3.scaleLinear()
    .domain(d3.extent(data, d => d.x))
    .range([margin.left, width + margin.left]);
    
const yScale = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.y)])
    .range([height + margin.top, margin.top]);

const line = d3.line()
    .x(d => xScale(d.x))
    .y(d => yScale(d.y));

svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`)
    .call(d3.axisLeft(yScale));

svg.append("g")
    .attr("transform", `translate(0, ${height + margin.top})`)
    .call(d3.axisBottom(xScale));

svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("d", line);

위의 코드에서는 데이터를 x 좌표와 y 좌표로 나누어 점들을 그릴 수 있게 하였습니다. 그 후, xScale과 yScale을 이용해 각각 x축과 y축의 스케일을 설정하고, line 함수를 생성하여 데이터를 선으로 연결합니다. 마지막으로, SVG 요소에 축과 선을 그려 선 그래프를 완성합니다.

실행 결과

위의 코드를 실행하면 아래와 같은 선 그래프가 생성됩니다.

Line Chart

마무리

이번 포스트에서는 D3.js를 이용하여 선 그래프를 그리는 방법에 대해 알아보았습니다. D3.js는 다양한 종류의 그래프를 그릴 수 있는 강력한 도구이므로, 데이터 시각화에 활용해보시기 바랍니다.

더 자세한 정보는 D3.js 공식 문서를 참고하시기 바랍니다.