4. ChatGPT로 Vue 3 + D3.js 애니메이션 파이 차트 만들기

 ChatGPT를 활용하여 파이차트 예제 코드까지 완성하였으니, 이제는 애니메이션 파이 차트를 만들어 보기로 한다. 

 

 가장 먼저 다음과 같은 질문을 ChatGPT에 던진다.

 

그(그녀)가 제시한 코드는 아래와 같다.

 

<template>
  <div>
    <svg ref="svgContainer"></svg>
  </div>
</template>

<script>
import * as d3 from 'd3';

export default {
  name: 'AnimatedPieChart',
  data() {
    return {
      data: [
        { label: 'A', value: 25 },
        { label: 'B', value: 30 },
        { label: 'C', value: 45 },
      ],
    };
  },
  mounted() {
    const svgContainer = d3.select(this.$refs.svgContainer);

    const svgWidth = +svgContainer.attr('width');
    const svgHeight = +svgContainer.attr('height');

    const radius = Math.min(svgWidth, svgHeight) / 2;

    const g = svgContainer
      .append('g')
      .attr('transform', `translate(${svgWidth / 2},${svgHeight / 2})`);

    const color = d3.scaleOrdinal(d3.schemeCategory10);

    const pie = d3
      .pie()
      .sort(null)
      .value(d => d.value);

    const path = d3
      .arc()
      .outerRadius(radius - 10)
      .innerRadius(0);

    const label = d3
      .arc()
      .outerRadius(radius - 40)
      .innerRadius(radius - 40);

    const arc = g
      .selectAll('.arc')
      .data(pie(this.data))
      .enter()
      .append('g')
      .attr('class', 'arc');

    arc.append('path')
      .attr('d', path)
      .attr('fill', d => color(d.data.label))
      .transition()
      .duration(1000)
      .attrTween('d', function(d) {
        const i = d3.interpolate(d.startAngle + 0.1, d.endAngle);
        return function(t) {
          d.endAngle = i(t);
          return path(d);
        };
      });

    arc.append('text')
      .attr('transform', d => `translate(${label.centroid(d)})`)
      .attr('dy', '0.35em')
      .text(d => d.data.label);
  },
};
</script>

이번에도 완성된 코드를 제시하였다. 

 

지난 파이 차트 코드와 비교하니

    arc.append('path')
      .attr('d', path)
      .attr('fill', d => color(d.data.label))
      .transition()
      .duration(1000)
      .attrTween('d', function(d) {
        const i = d3.interpolate(d.startAngle + 0.1, d.endAngle);
        return function(t) {
          d.endAngle = i(t);
          return path(d);
        };
      });

이 부분이 변경되어 기존에 만들어 논 파이 차트 코드에 적용을 해 본다.

 

 

실행 결과 위와 같은 애니메이션 파이 차트를 완성하였다. 

 

ChatGPT를 활용하여 코딩 예제를 만들다 보니, 완성되는 시간이 단축이 되고 있는 것을 느낄 수 있었다.

 

물론 아직까지 복붙을 해서 사용할 수는 없지만, 계속 사용하다 보니 어떤 부분이 에러 코드인 줄 알기 때문에 

필요한 부분만 사용할 수 있었다.

 

결론적으로 초짜입장에서 구글 검색을 통해 예제 코드를 만드는 것은 '운'이 작용한다. 

검색 결과가 양질의 예제 코드를 찾아 주면 빠르게 만들 수 있지만, 반대일 경우 삽질을 해야 하기 때문이다.

 

특히, D3.js는 오래된 라이브러리고, 업그레이드 과정에서 기존 함수가 변경이 되었기 때문에

과거 라이브러리를 사용한 예제 코드가 작동안하는 경우가 있다.

 

 ChatGPT는 이런 삽질의 시간을 단축 시키는 것 같다. 

조금 더 학습된 ChatGPT 기대된다.