[javascript] D3.js에서 데이터 시각화를 위한 기본 요소

07 Dec 2023

javascript

D3.js는 데이터 시각화를 위한 강력한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 데이터를 시각적으로 표현하고, 그래프나 차트를 생성할 수 있습니다. 이번 글에서는 D3.js에서 데이터 시각화를 위해 사용되는 몇 가지 기본 요소에 대해 알아보겠습니다.

1. SVG (Scalable Vector Graphics)

SVG는 D3.js에서 가장 기본적인 요소 중 하나입니다. SVG는 XML 기반의 벡터 그래픽을 생성하는 데 사용되며, 그래픽 요소들을 정의하고 조작하는 데에 적합합니다. D3.js는 SVG 요소를 생성하고 조작하는 기능을 제공하여 데이터 시각화에 사용됩니다.

// SVG 요소 생성
var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 300);

// SVG 요소에 원 그리기
svg.append("circle")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "blue");

2. 스케일 (Scale)

데이터 시각화에서는 종종 데이터의 값 범위를 그래픽 요소의 크기나 위치로 매핑해야 할 때가 있습니다. 이때 사용되는 것이 스케일입니다. D3.js는 다양한 스케일을 제공하여 데이터를 그래픽 요소에 매핑할 수 있습니다.

// x축 스케일 생성
var xScale = d3.scaleLinear()
               .domain([0, 100])
               .range([0, 500]);

// y축 스케일 생성
var yScale = d3.scaleLinear()
               .domain([0, 100])
               .range([0, 300]);

// 데이터를 스케일에 매핑
var data = [20, 30, 40, 50];
var scaledData = data.map(function(d) {
    return {
        x: xScale(d),
        y: yScale(d)
    };
});

3. 축 (Axis)

축은 그래프나 차트에서 데이터의 범위를 표현하는 데 사용됩니다. D3.js에서는 축을 생성하고 스케일과 연결하여 데이터의 범위를 표시할 수 있습니다.

// x축 생성
var xAxis = d3.axisBottom(xScale);

// y축 생성
var yAxis = d3.axisLeft(yScale);

// SVG 요소에 x축 추가
svg.append("g")
   .attr("transform", "translate(0, 250)")
   .call(xAxis);

// SVG 요소에 y축 추가
svg.append("g")
   .attr("transform", "translate(50, 0)")
   .call(yAxis);

D3.js에는 이 외에도 다양한 데이터 시각화를 위한 기본 요소와 기능들이 있습니다. 이번 글에서는 몇 가지 기본 요소에 대해 알아보았지만, D3.js를 활용하여 더욱 다양하고 복잡한 시각화를 생성할 수 있습니다.

참고 자료: