invisible hand

ChatGPT를 활용하여 파이차트 예제 코드까지 완성하였으니, 이제는 애니메이션 파이 차트를 만들어 보기로 한다. 가장 먼저 다음과 같은 질문을 ChatGPT에 던진다. 그(그녀)가 제시한 코드는 아래와 같다. 이번에도 완성된 코드를 제시하였다. 지난 파이 차트 코드와 비교하니 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 p..

이번은 ChatGPT를 활용하여 Vue3 + D3.js 파이 차트 예제 코드를 만들어 보기로 한다. ChatGPT에게 다음과 같은 질문을 한다. ChatGPT가 제시한 코드는 다음과 같다. 이번 응답은 고맙게도 까지 완성했다. 과연 실행 결과는?... width, height 가 0이라 파이 차트를 그리지 못한다. ㅠㅠ 저 C는 왜 나온 걸까? 일단 그것을 알려고 하고 싶지 않다. 그럼 파이 차트를 그려보자 // const svgWidth = +svgContainer.attr('width'); // const svgHeight = +svgContainer.attr('height'); const svgWidth = 400 const svgHeight = 400 그리긴 그렸지만, 오 C 그래서 chatGPT..

ChatGPT에서 제시한 예제 코드로 Vue 3에서 D3 라인 차트를 만들어 보았다. 2023.02.03 - [D3] - 1. ChatGPT 를 이용한 Vue3 + D3.js Line Chart 예제 코드 만들기 1. ChatGPT 를 이용한 Vue3 + D3.js Line Chart 예제 코드 만들기 차트 라이브러리를 활용하여 데이터 시각화 (Chart)를 해보려고 한다. 필자의 레벨은 HTML+CSS+JavaScript 등 전부 초급이다. 초급 중에 왕 초급... 데이터 시각화 사이트를 만들기 위해 여러 개발 도구 datapuzzler.tistory.com 개인적으로 생각하는 D3의 강점은 애니메이션 효과를 넣어 동적으로 시각화 할 수 있다는 것이다. ChatGPT 제시한 예제 코드를 바탕으로 라인 ..

차트 라이브러리를 활용하여 데이터 시각화 (Chart)를 해보려고 한다. 필자의 레벨은 HTML+CSS+JavaScript 등 전부 초급이다. 초급 중에 왕 초급... 데이터 시각화 사이트를 만들기 위해 여러 개발 도구를 검색한 결과 Vue3 + D3.js를 사용하기로 결정했다. D3.js는 대표적인 데이터 시각화 프레임워크로 알려져 있지만, 여러 단점이 존재하고 있다. 인터넷 검색을 해보면 단점에 대해 많이 나오니 생략을 한다. https://d3js.org/ D3.js - Data-Driven Documents D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS. d3js.org 위 공식페이지에 설치 방법 및 각종 예제를 제..