D3.js를 이용하여 막대차트 만들기

데이터 시각화는 대규모 데이터 세트의 패턴과 추세를 이해하는 데 중요한 도구이며, 범주형 데이터를 나타내는 데 가장 일반적으로 사용되는 차트 중 하나는 막대 차트이다. 이번에는 D3를 사용하여 막대 차트를 만드는 방법에 대해 자세히 살펴보도록 한다. D3.js 라이브러리는 강력하고 유연하며 웹에서 동적 대화형 막대 차트를 생성할 수 있어 데이터 통찰력과 패턴을 효과적으로 전달할 수 있다. 데이터 분석가, 웹 개발자 또는 단순히 데이터 시각화에 대한 관심이 있는 사람들이 더 나은 이해를 얻기 위해 D3.js로 막대 차트를 만드는 과정을 알아보자.

1. 데이터 로드

차트를 그리는데 필요한 데이터를 로드한다. 외부 파일에서 로드하거나 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}
];

2. 차트 크기설정

차트 영역의 크기와 여백을 설정한다.

// 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;

3. 스케일 설정

데이터를 차트에 매핑하는 데 사용할 스케일을 만든다. 이 경우 범주를 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)]);

4. 축 및 레이블 만들기

// Create the x-axis
const xAxis = d3.axisBottom(x);

// Create the y-axis
const yAxis = d3.axisLeft(y)
  .ticks(10, "%");

5. 막대 그리기

데이터를 나타내는 막대를 만든다. 데이터, 눈금 및 차트 영역을 사용하여 막대 너비, 높이 및 위치를 계산한다.

// 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));

6. 축 그리기

제목, 범례 또는 도구 설명과 같은 원하는 추가 요소를 추가한다. 이 경우 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");

7. 스타일 지정

원하는 모양과 느낌으로 차트의 스타일을 지정한다. 막대, 축 및 기타 요소의 스타일을 지정하기 위해 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

© Copyright 2023 CLONE CODING