D3.js는 웹 기반 데이터 시각화를 위한 JavaScript 라이브러리입니다. 이번 글에서는 D3.js를 사용하여 산포도를 그리는 방법에 대해 알아보겠습니다.

준비물

1. D3.js 라이브러리 (https://d3js.org/)
2. 데이터 파일 (CSV, JSON 등)

기본 구조

산포도를 그리기 위해서는 D3.js의 SVG 요소를 사용해야 합니다. SVG는 벡터 기반의 그래픽을 표현하기 위한 XML 형식입니다. 다음은 기본적인 SVG 요소의 구조입니다.

<svg width="500" height="500">
  <!-- 그래프 요소 -->
</svg>

데이터 로드

D3.js는 다양한 데이터 형식을 지원합니다. 데이터를 로드하려면 d3.csv() 또는 d3.json()과 같은 메서드를 사용합니다. 예를 들어, CSV 파일을 로드하고 데이터를 처리하는 예제는 다음과 같습니다.

d3.csv("data.csv").then(function(data) {
  // 데이터 처리
});

축 그리기

산포도를 그리기 전에 축을 그려야 합니다. D3.js는 축을 그리기 위해 d3.scaleLinear()와 d3.axisBottom()과 같은 메서드를 제공합니다. X 축과 Y 축을 각각 그리는 예제는 다음과 같습니다.

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return +d.x; })])
  .range([margin.left, width - margin.right]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return +d.y; })])
  .range([height - margin.bottom, margin.top]);

svg.append("g")
  .attr("transform", "translate(0," + (height - margin.bottom) + ")")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .attr("transform", "translate(" + margin.left + ",0)")
  .call(d3.axisLeft(yScale));

데이터 포인트 그리기

실제 데이터 포인트를 그리려면 svg.selectAll()과 data() 메서드를 사용합니다. 각 데이터 포인트는 circle 요소로 표현됩니다. 예를 들어, 데이터를 포인트로 그리는 예제는 다음과 같습니다.

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return xScale(+d.x); })
  .attr("cy", function(d) { return yScale(+d.y); })
  .attr("r", 5)
  .attr("fill", "steelblue");

결과 확인

위의 코드를 작성하고 HTML 파일에 로드하면 산포도가 그려집니다. 해당 파일을 웹 브라우저에서 열어 결과를 확인할 수 있습니다.

결론

D3.js를 사용하여 산포도를 그리는 방법을 알아보았습니다. D3.js는 다양한 데이터 시각화 기능을 제공하므로, 데이터를 시각화해야 할 때 유용한 도구입니다. 추가적인 정보는 D3.js 공식 문서를 참고하세요.

참고자료

• D3.js 공식 사이트
• D3.js GitHub 저장소