데이터 시각화는 대규모 데이터 세트의 패턴과 추세를 이해하는 데 중요한 도구이며, 범주형 데이터를 나타내는 데 가장 일반적으로 사용되는 차트 중 하나는 막대 차트이다. 이번에는 D3를 사용하여 막대 차트를 만드는 방법에 대해 자세히 살펴보도록 한다. D3.js 라이브러리는 강력하고 유연하며 웹에서 동적 대화형 막대 차트를 생성할 수 있어 데이터 통찰력과 패턴을 효과적으로 전달할 수 있다. 데이터 분석가, 웹 개발자 또는 단순히 데이터 시각화에 대한 관심이 있는 사람들이 더 나은 이해를 얻기 위해 D3.js로 막대 차트를 만드는 과정을 알아보자.
차트를 그리는데 필요한 데이터를 로드한다. 외부 파일에서 로드하거나 JavaScript 코드에서 직접 정의할 수 있다.
// Load the data
const data = [
{name: "A", value: 25},
{name: "B", value: 30},
{name: "C", value: 35},
{name: "D", value: 40},
{name: "E", value: 45}
];
차트 영역의 크기와 여백을 설정한다.
// Set the dimensions and margins of the chart
const margin = {top: 20, right: 20, bottom: 30, left: 40};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
데이터를 차트에 매핑하는 데 사용할 스케일을 만든다. 이 경우 범주를 x축에 매핑하려면 x축척이 필요하고 숫자 값을 y축에 매핑하려면 y축척이 필요하다.
// Create the x-scale
const x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(data.map(d => d.name));
// Create the y-scale
const y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(data, d => d.value)]);
// Create the x-axis
const xAxis = d3.axisBottom(x);
// Create the y-axis
const yAxis = d3.axisLeft(y)
.ticks(10, "%");
데이터를 나타내는 막대를 만든다. 데이터, 눈금 및 차트 영역을 사용하여 막대 너비, 높이 및 위치를 계산한다.
// Create the chart area
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create the bars
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.value));
제목, 범례 또는 도구 설명과 같은 원하는 추가 요소를 추가한다. 이 경우 x축과 y축을 추가한다.
// Add the y-axis
svg.append("g")
.attr("class", "axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Value");
원하는 모양과 느낌으로 차트의 스타일을 지정한다. 막대, 축 및 기타 요소의 스타일을 지정하기 위해 CSS를 추가할 수 있다.
// Add some CSS to style the chart
.bar {
fill: steelblue;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
/* Add some CSS to style the chart */
.bar {
fill: steelblue;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script>
// Load the data
const data = [
{name: "A", value: 25},
{name: "B", value: 30},
{name: "C", value: 35},
{name: "D", value: 40},
{name: "E", value: 45}
];
// Set the dimensions and margins of the chart
const margin = {top: 20, right: 20, bottom: 30, left: 40};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
// Create the x-scale
const x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(data.map(d => d.name));
// Create the y-scale
const y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, d3.max(data, d => d.value)]);
// Create the x-axis
const xAxis = d3.axisBottom(x);
// Create the y-axis
const yAxis = d3.axisLeft(y)
.ticks(10, "%");
// Create the chart area
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create the bars
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.value));
// Add the x-axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the y-axis
svg.append("g")
.attr("class", "axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Value");
</script>
</body>
</html>
#javascript #D3 #Chart #data #Bar chart #Web Development
CloneCoding
한 줄의 코드에서 시작되는 혁신!