d3

이제 본격적으로 d3를 이용하여 어떻게 라인 차트를 그릴 수 있는지 알아보도록 하겠습니다. 물론, HTML, CSS, JS만으로도 충분히 그리는게 가능하지만, 저는 Next.js를 사용하여 라인차트를 그려 보겠습니다. 만약, svg에 대해 전혀 모르신다면 이전에 작성한 글을 참고하고 오시는 걸 추천드립니다. 포스트의 구성은 다음과 같습니다. 사전준비(설치, import) d3 사용 2-1. D3 기본 Flow 3-1. 라인차트 그리기 React에서 d3 사용하기 라인차트 그리기 최종 코드 1. 사전 준비 - prerequisite [ installation ] 가장 먼저 npm을 이용하여, 설치 해줍니다. (참고링크1 - d3: npm) npm install d3 물론, 아래처럼 바로 script에서 링..

여기에서는 d3에 대해 아주 기초부터 제대로된 data visualization까지 차근차근 다뤄볼 예정입니다. What is D3? 너무나 뻔하지만, 항상 어떠한 주제를 시작할 때 다루고자 하는 주제가 무엇인지 명확히 하는 것이 중요한 것 같습니다. D3는 Data-Driven Documents를 의미하며 Data를 Visualization해주는 매우 강력한 툴입니다. 특히, D3는 우리가 HTML, SVG, CSS를 사용함에 있어 많은 도움을 줍니다. 만약, SVG가 무엇인지 알고 있고, 바로 라인차트를 그리는 방법에 대해 알고 싶다면 다음 포스트로 바로 이동하셔도 무관합니다. What is SVG? D3에서는 SVG를 많이 다룹니다. 따라서, 본격적으로 들어가기 이전에 여기에서는 SVG에 대해 간단..