1. ChatGPT 를 이용한 Vue3 + D3.js Line Chart 예제 코드 만들기

차트 라이브러리를 활용하여 데이터 시각화 (Chart)를 해보려고 한다. 

필자의 레벨은 HTML+CSS+JavaScript 등 전부 초급이다. 초급 중에 왕 초급... 

 

데이터 시각화 사이트를 만들기 위해 여러 개발 도구를 검색한 결과 Vue3 + D3.js를 사용하기로 결정했다. 

 

D3.js는 대표적인 데이터 시각화 프레임워크로 알려져 있지만, 여러 단점이 존재하고  있다.

인터넷 검색을 해보면 단점에 대해 많이 나오니 생략을 한다. 

 

https://d3js.org/

D3.js - Data-Driven Documents

 

위 공식페이지에  설치 방법 및 각종 예제를 제공하고 있다. 

다만 예제는 observable에서 실행할 수 있는 코드라 데이터 시각화 초짜인 필자는 이해하기 어려웠다. 

 

필자에게 D3.js와 친해지기 어려운 이유는 자바스크립트를 못해서 이다. 

그래서 선택한 대안이 요즘 핫한 ChatGPT를 활용하였다. 

 

ChatGPT에 가입을 하고 다음과 같이 질문하였다.

위와 같은 답변을 받고 이해는 할 수 없어서 다음과 같은 질문을 다시 하였다.

 

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

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

export default {
  name: 'LineChart',
  data() {
    return {
      data: [
        { date: new Date('2020-01-01'), value: 50 },
        { date: new Date('2020-02-01'), value: 60 },
        { date: new Date('2020-03-01'), value: 55 },
        { date: new Date('2020-04-01'), value: 75 },
        { date: new Date('2020-05-01'), value: 68 },
      ],
    };
  },
  mounted() {
    const svgContainer = d3.select(this.$refs.svgContainer);

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

    const margin = { top: 20, right: 20, bottom: 30, left: 50 };
    const width = svgWidth - margin.left - margin.right;
    const height = svgHeight - margin.top - margin.bottom;

    const g = svgContainer
      .append('g')
      .attr('transform', `translate(${margin.left},${margin.top})`);

    const x = d3.scaleTime().rangeRound([0, width]);
    const y = d3.scaleLinear().rangeRound([height, 0]);

    const line = d3
      .line()
      .x(d => x(d.date))
      .y(d => y(d.value));

    x.domain(d3.extent(this.data, d => d.date));
    y.domain(d3.extent(this.data, d => d.value));

    g.append('g')
      .attr('transform', `translate(0,${height})`)
      .call(d3.axisBottom(x))
      .select('.domain')
      .remove();

    g.append('g')
      .call(d3.axisLeft(y))
      .append('text')
      .attr('fill', '#000')
      .attr('transform', 'rotate(-90)')
      .attr('y', 6)
      .attr('dy', '0.71em')
      .attr('text-anchor', 'end')
      .text('Value');

    g.append('path')
      .datum(this.data)
      .attr('fill', 'none')
      .attr('stroke', 'steelblue')
      .attr('stroke-linejoin', 'round')
      .attr('stroke-linecap', 'round')
      .attr('stroke-width', 1.5)
      .attr('d', line);
  },
};

위와 같은 코드로 응답을 하였다. 

마지막에 </script>를 빼놓는 오류를 범했지만, 이 정도면 훌륭하다 싶다.

 

제공한 예제 코드를 실행한 결과...

 

 손안대고 코는 풀었지만 콧물이 콧등에 남아 있는 찝찝함 이라고나 할까?

 

 약간의 수정을 하여 결과를 완성했다. 

 

마지막으로  '독학하는 개발자에게 ChatGPT는 도움이 많이 될 수 있겠다.' 라는 느낌을 받았다.