D3 - BarChart 만들기

📌 목록

• Introduction
• Bar Chart 만들기
• Conclusion

📌 Introduction

안녕하세요. 오늘은 지난번 소개 했던 d3 의 기본을 통해 bar chart를 한번 간단하게 만들어 보겠습니다.

📌 Bar Chart 만들기

먼저 data를 소개 할게요. data는 csv파일에 저장이 되어있습니다.

"month","revenue","profit"
"January","13432","8342"
"February","19342","10342"
"March","17443","15423"
"April","26342","18432"
"May","34213","29434"
"June","50321","45343"
"July","54273","47452

이제 정식적으로 코드를 한번 볼까요?

const MARGIN = { LEFT: 100, RIGHT: 10, TOP: 10, BOTTOM: 130 };
const WIDTH = 600 - MARGIN.LEFT - MARGIN.RIGHT;
const HEIGHT = 400 - MARGIN.TOP - MARGIN.BOTTOM;

// csv 파일을 불러옵니다.
d3.csv("data/revenues.csv").then((data) => {
  // CONVERT DATA REVENUE TO NUMBER
  // data의 revenue가 string으로 되어있어서 number로 parsing을 해줘요
  data.forEach((d) => {
    d.revenue = Number(d.revenue);
  });

  // CREATE SVG
  const svg = d3
    .select("#chart-area")
    .append("svg")
    .attr("width", WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
    .attr("height", HEIGHT + MARGIN.TOP + MARGIN.BOTTOM);

  // APPEND G FOR MARGIN
  const g = svg
    .append("g")
    .attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`);

  // CREATE X SCALE
  const x = d3
    .scaleBand()
    .domain(data.map((d) => d.month))
    .range([0, WIDTH])
    .paddingInner(0.3)
    .paddingOuter(0.2);

  // CREATE Y SCALE
  const y = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => d.revenue)])
    .range([HEIGHT, 0]); 

  // CREATE X-AXIS CALL
  const xAxisCall = d3.axisBottom(x);

  // APPEND X-AXIS
  g.append("g").call(xAxisCall).attr("transform", `translate(0, ${HEIGHT})`);

  // CREATE Y-AXIS CALL
  const yAxisCall = d3.axisLeft(y).tickFormat((d) => `$${d}`);

  // APPEND Y-AXIS
  g.append("g").call(yAxisCall);

  // CREATE X LABEL
  g.append("text")
    .attr("x", WIDTH / 2)
    .attr("y", HEIGHT + 50)
    .attr("text-anchor", "middle")
    .attr("font-size", "20px")
    .text("Month");

  // CREATE Y LABEL
  g.append("text")
    .attr("x", -(HEIGHT / 2))
    .attr("y", -60)
    .attr("transform", "rotate(-90)")
    .attr("text-anchor", "middle")
    .attr("font-size", "20px")
    .text("Revenue");

  // CREATE BAR
  const revenues = g.selectAll("rect").data(data);
  revenues
    .enter()
    .append("rect")
    .attr("x", (d) => x(d.month))
    .attr("y", (d) => y(d.revenue))
    .attr("width", 40)
    .attr("height", (d) => HEIGHT - y(d.revenue))
    .attr("fill", "gray");
});

📌 Conclusion

이렇게 간단하게 bar chart를 만들어 봤습니다. 이제 이걸 토대로 한번 오픈소스로 만들어 봐야겠어요. 그건 또 다른 포스팅에서 다뤄보도록 하겠습니다. 그럼 안녕 ~~ 🎉