[javascript] D3.js 라이브러리 소개
D3.js는 Data-Driven Documents의 약어로, 데이터 시각화를 위한 JavaScript 라이브러리입니다. D3.js는 웹 브라우저 상에서 동적이고 인터랙티브한 데이터 시각화를 구현할 수 있도록 도와줍니다.
주요 기능
D3.js는 다양한 주요 기능을 제공합니다.
데이터 조작
D3.js는 데이터를 로딩하고, 필요한 형태로 변환하고, 필터링하는 등 다양한 데이터 조작 기능을 제공합니다. 이를 통해, 데이터를 시각화에 적합한 형태로 준비할 수 있습니다.
시각화
D3.js는 다양한 시각화 요소를 생성하고 조작하는 기능을 제공합니다. 막대 그래프, 선 그래프, 원 그래프, 지도 등 다양한 차트 및 그래프를 생성할 수 있으며, 그래프의 속성을 변경하여 꾸밀 수도 있습니다.
애니메이션
D3.js는 애니메이션 효과를 지원하므로, 데이터가 변경될 때 애니메이션으로 부드럽게 전환되는 시각화를 만들 수 있습니다. 이를 통해, 사용자에게 더욱 생생하고 흥미로운 시각적 경험을 제공할 수 있습니다.
상호 작용
D3.js를 사용하면 사용자와 상호작용할 수 있는 시각화를 만들 수 있습니다. 사용자 입력이나 마우스 이벤트 등에 반응하여 시각화를 업데이트하거나 다른 기능을 수행할 수 있습니다.
예제 코드
아래는 D3.js를 사용하여 간단한 막대 그래프를 생성하는 예제 코드입니다.
// 데이터셋
var dataset = [50, 100, 150, 200, 250];
// SVG 요소의 너비와 높이
var width = 500;
var height = 300;
// x축 스케일 생성
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, width])
.paddingInner(0.05);
// y축 스케일 생성
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, height]);
// SVG 요소 생성
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 막대 그래프 생성
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return height - yScale(d);
})
.attr("width", xScale.bandwidth())
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", "steelblue");