3. ChatGPT로 만드는 Vue 3 + D3 파이 차트

 이번은 ChatGPT를 활용하여 Vue3 + D3.js  파이 차트 예제 코드를 만들어 보기로 한다.

 

 ChatGPT에게 다음과 같은 질문을 한다.

 

 

ChatGPT가 제시한 코드는 다음과 같다.

 

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

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

export default {
  name: 'PieChart',
  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));

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

이번 응답은 고맙게도 </script>까지 완성했다. 

 

과연 실행 결과는?...

 

 

width, height 가 0이라 파이 차트를 그리지 못한다. ㅠㅠ

 

저 C는 왜 나온 걸까? 일단 그것을 알려고 하고 싶지 않다. 

 

그럼 파이 차트를 그려보자 

 

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

    const svgWidth = 400
    const svgHeight = 400

 

그리긴 그렸지만, 오 C 그래서 chatGPT는 C를 출력했나? 

 

보물 찾기를 시작해 본다. 

결과 아래와 같이 수정을 하니...

<template>
  <div>
    <svg ref="svgContainer" style="width:400px; height: 400px"></svg>  
  </div>
</template>

 

파이 차트 그래프가 그려졌다. 

 

이번 느낀 점은

ChatGPT 가 소스 코드 완성본을 제공했지만, 정상적으로 실행되지 않았다.

지금도 그는 학습하고 있는 걸까? 혹시 내 블로그를 본 걸까? ㅜㅜ 

 

여하튼 정상적으로 실행될 날이 올 때까지 실험은 계속된다.