invisible hand

d3.js는 훌륭한 시각화 도구인 것은 확실하지만, 사용하기 어려운 단점이 있다. 버전 업그레이드가 되면서 과거의 예제 코드를 그대로 사용할 수 없다. 패키지에 포함된 함수들이 변경이 있었기 때문에 이전 버전 예제로 최신 버전에서 사용할 경우 예상하지 못하는 에러에 많은 시간이 소요된다. 이런 상황에서 시간을 줄였던 경험을 공유하고자 한다. 예전 버전에서 실행한 후 d3.js 최신 버전으로 적용 이전 버전의 예제 코드를 구했다면 자신이 작성하는 코드에 바로 적용하지 말고, 예제 코드를 실행하고 최신 버전으로 수정뒤 정확히 동작하는지 확인을 한다. 이 과정에서 예제 코드를 구했다고 하더라도 대부분 html, js 파일로만 존재한다. 이때 유용하게 확인할 수 있는 도구가 vscode live server 인..

이전 블로그에서 Node.js를 통해 전국 시도 코로나 감염 데이터를 가지고 왔다. 이제 데이터처리를 해야하는데 데이터는 두개의 데이터로 분류된다. 1. D3.js 지도로 표현할 데이터 2. Chart.js에서 막대그래프로 표현할 데이터 메인 페이지에서 배너 팝업창 호출 Chart.js는 배너 팝업창으로 처리해야 하기 때문에 메인 페이지가 시작되면서 호출하면 된다. ... 팝업창에는 지역과 데이터가 표현되어야 하기때문에 지역 정보와 데이터를 전달한다. 그런데 코로나가 감소하는 것이 아니라 증가하는 것이로 보인다. CovidTrand.vue 에서 지역 데이터를 쿼리하고 데이터만 Barchart.vue에 넘겨 막대그래프를 그린다. 아래의 코드는 지역데이터를 선택했을 경우 다시 request를 보내고, 결과 ..

다시 코로나 감염자가 늘어나는 듯한 분위기이다. 이번에는 이전 만들어봤던 코로나감염 지도 및 현황을 표현하는 예제를 소개하고자 한다. 완료된 코드는 실행 결과는 아래 그림과 같다. 위 그림을 자세히 살펴보면 전국 코로나 감염자 수에 따른 시도별 색을 표현하는 것과 시도별 인구수를 표현한 것 최적화를 시키지 않았지만, 범례를 표시한 것 그리고 마지막 창하나를 더 띄워 감염자 수의 현황을 막대 그래프로 표현하였다. 또, 지도에서 시도를 클릭하였을 경우 지도의 색을 변경하는 것과 막대그래프에 표시되는 정보가 해당 지역의 데이터로 변경된다. 개발 전 준비 사항 날씨 지도 만들기를 했을 경우, 다음과 같은 항목을 추가로 준비해야한다. 1. 공공데이터 활용 신청 2. chartjs 추가 3. 공공데이터 저장 테이블..

vue3 + d3.js 에서 날씨 지도를 만들기위해 chatGPT에게 다음과 같이 질문을 하였다. 정말 자세한 코드와 설명을 응답해주었다. 하지만 돌아가지 않는 코드 ㅜㅜ bing에 물어봤더니... 자세한 정보에 필자의 블로그 주소가 나왔다. 어리둥절한 순간! 이런 코드를 작성한 적이 없는데 자세한 정보에 왜 필자의 블로그가 나오는 걸까? 위 코드는 data 가 없어서 제대로 실행되지 않는다. 눈으로 봐도 실행될 것 같이 않아 테스트를 하지 않았다. 어쩔수 없이 검색의 노동을 동원하여 날 코딩으로 지도 만들기를 구현하였다. 위 코드에서 import korea from '../../assets/mapjson/koreaarea.json'; import * as topojson from "https://cdn..

d3.js는 topojson이나 geojson을 활용하여 지도를 만들 수 있다. 이번에는 vue3 + d3.js로 날씨 지도를 만들어 보기로 한다. 위 사진과 같이 대한민국 지도 위에 시도별 날씨 정보를 보여주기로 한다. 시도별 날씨정보와 기상상태에 따라 이미지로 표현한다. 준비물 1. d3.js에서 사용할 지도파일 지도파일은 인터넷에서 공개되는 topojson이나 geojson 파일을 사용하거나, 공공데이터로 만들어진 Shape file(SHP) 파일을 구해 https://mapshaper.org/ 에서 topojson이나 geojson 파일로 변환하여 사용할 수 있다. 직접 변환해서 사용하고자 한다면, 파일의 좌표계를 확인하고 변환해야 한다.(좌표계 변환 및 확인으로 고생을 했음) 이런 것을 사용해서..

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 위 공식페이지에 설치 방법 및 각종 예제를 제..