[javascript] D3.js를 이용한 박스 플롯 그리기
D3.js는 JavaScript를 기반으로한 데이터 시각화 라이브러리로, 데이터를 시각적으로 표현하는 다양한 차트와 그래프를 생성할 수 있습니다. 이번 포스트에서는 D3.js를 사용하여 박스 플롯을 그리는 방법에 대해 알아보겠습니다.
필요한 라이브러리 설치
먼저 D3.js를 사용하기 위해서는 해당 라이브러리를 설치해야합니다. npm을 사용한다면 다음 명령어를 사용하여 D3.js를 설치할 수 있습니다.
npm install d3
데이터 준비
박스 플롯을 그리기 위해서는 적절한 데이터가 필요합니다. 예를 들어, 다음과 같은 데이터를 가정해봅시다.
const data = [
{ label: "A", values: [1, 2, 3, 4, 5] },
{ label: "B", values: [2, 4, 6, 8, 10] },
{ label: "C", values: [3, 6, 9, 12, 15] }
];
각 객체는 라벨과 값들로 이루어져 있으며, 박스 플롯에서는 각 라벨에 해당하는 값들을 시각적으로 표현합니다.
SVG 요소 생성
D3.js로 박스 플롯을 그리기 위해서는 먼저 SVG 요소를 생성해야 합니다. 다음 코드를 사용하여 SVG 요소를 생성하세요.
const svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
위 코드에서 width와 height는 SVG 요소의 가로와 세로 크기를 나타내는 변수입니다.
박스 플롯 그리기
이제 데이터와 SVG 요소가 준비되었으니, 실제로 박스 플롯을 그려봅시다. 다음 코드는 data 배열을 이용하여 박스 플롯을 그리는 예제입니다.
// X축 스케일 설정
const xScale = d3.scaleBand()
.domain(data.map(d => d.label))
.range([margin.left, width - margin.right])
.padding(0.1);
// Y축 스케일 설정
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d3.max(d.values))])
.range([height - margin.bottom, margin.top]);
// 박스 그리기
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => xScale(d.label))
.attr("y", d => yScale(d3.max(d.values)))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(d3.min(d.values)) - yScale(d3.max(d.values)))
.attr("fill", "steelblue");
// 중앙값 선 그리기
svg.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("x1", d => xScale(d.label) + xScale.bandwidth() / 2)
.attr("y1", d => yScale(d3.median(d.values)))
.attr("x2", d => xScale(d.label) + xScale.bandwidth() / 2)
.attr("y2", d => yScale(d3.median(d.values) - 10))
.attr("stroke", "black")
.attr("stroke-width", 2);
// 축 그리기
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis);
위 코드에서 margin은 그래프와 SVG 요소의 여백을 나타내는 변수입니다.
결과 확인
위 코드를 실행하면 박스 플롯이 생성되고, X축과 Y축이 포함된 그래프를 확인할 수 있습니다.
이상으로 D3.js를 이용한 박스 플롯 그리기에 대해 알아보았습니다. D3.js를 사용하면 다양한 데이터 시각화를 쉽게 구현할 수 있으므로, 차트와 그래프를 그리는 작업에 D3.js를 활용해보세요.