invisible hand

d3.js로 라인 및 막대그래프를 사용할 때 x의 값이 날짜인 경우 scaleTime()을 사용한다. 예를 들어 데이터가 '2023-01-01' , '20230101' 등 날짜 표현은 다양하게 생성된다. 개발 시 하이픈을 제거한 '20230101'의 포맷을 많이 사용하는데, 이 경우 scaleTime()을 사용할 때 d3.timeParse()을 사용하여 포맷을 설정해줘야 한다. 다음 예시와 같이 사용하면 된다. const parseTime = d3.timeParse('%Y%m%d'); const x = d3.scaleTime() .range([0, width]) .domain( d3.extent(data, function (d) { return parseTime(d.saleDate);// 예시 }));..

Vue 페이지를 호출할 경우 하나의 params 또는 여러개의 params를 전달해야 할 경우가 있다. 여러가지 방법이 있지만 개인적으로 사용한 방법을 공유한다. 예를 들어 분류 코드가 대/중/소 3가지로 분류되었을 경우 params 를 대/중/소 3개를 넘겨줘야 한다. Vue Router를 사용하여 대/중/소를 large/mid/small 로 넘겨준다고 가정할때 Code 로 호출하고 Vue Router 에는 { path: '/code/large/:lg/mid/:md/small/:sm', name: 'CodeVue', component: CodeVue }, 위와 같이 작성하면 된다. 물론 Router에는 CodeVue.vue 페이지를 import로 선언해야 한다. CodeVue.vue 페이지에서는 La..

Vue를 사용하여 개발할 경우 Request URL GET Query parameter를 전달해야 할 경우가 있다. 검색 조건이 2개 이상인 경우 예를 들어 http://localhost:8000/price?large=09&mid=01 위와 같은 URL를 만들어 서버를 호출해야 할 경우 아래 예제는 vuex와 axios를 사용하였다. axios 사용 관련 예제코드는 아래 글을 참고하면 좋을 것 같다. [dev] - 12. Vue3 + Nodejs 연동 12. Vue3 + Nodejs 연동 이번은 Vue3와 Nodejs와 연동하는 것에 대해 소개한다. Nodejs는 다른 블로그에서도 많이 소개를 하니 비슷하게 구축을 하면 될것이다. Nodejs 구축 및 Vue3 axios 설치 Vue3에서 Nodejs 와..

이번에는 three.js optimization 예제 코드를 Vue3에 적용하여 실행해 보는 예제 코드를 공유한다. 물론 Vue와 Three.js의 입문 또는 초급자를 위한 예제이다. 개발을 잘하기 위해서는 기존에 있는 예제 코드를 열심히 작성하고 실행해 보아야 한다는게 개인 생각이다. 따라서 Vue와 Three.js를 잘하기 위해서는 많은 예제 코드를 가지고 놀아야 한다고 생각한다. 그럼 three.js optimization 예제를 Vue에 적용시켜보기로 한다. 기존 예제는 지구본에 인구 통계 데이터를 표현하는 것이다. https://threejs.org/manual/#ko/optimize-lots-of-objects 사이트에 해당 코드를 잘 설명하고 있으니 참고하길 바란다. 지난번 shadow 예제..

Vue 전문가라면 three.js의 예제 코드를 사용함에 그렇게 문제는 되지 않을 것이다. 하지만 초급 Vue 개발자라면 three.js를 사용할 때 당황할 수도 있다. 이번에는 초급 Vue개발자가 three.js 예제 코드를 사용할 때 팁이 될 만한 정보를 공유하고자 한다. 초급 Vue 개발자가 three.js로 개발시 기존 예제 코드 활용 방법 https://threejs.org/ 에 방문하면 다양한 정보를 얻을 것이다. Three.js – JavaScript 3D Library threejs.org 위 사이트에서 예제도 함께 얻을 수 있는 방법이 있다. Vue파일로 전환할 예제는 아래 캡처, 탱탱볼 예제이다. 위 출처 사이트에 들어가면 소스와 설명을 다 얻을 수 있으니 참고하면 된다. Vue파일로 ..

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

공공데이터에서 코로나 감염 데이터를 가져와 로컬 데이터베이스에 저장하였다. 그럼 다음은 우리가 해야할 일은 Vue3 + Node.js 연동이다. Vue3 + Nodejs 데이터 요청 Vue3에서 요청하는 데이터 셋은 하나가 아니고, 두 가지 데이터를 가져와야 한다. 1. 최근(어제) 코로나 감염 전국 시도별 데이터 2. 어제부터 10일전 트랜드를 보여줄 수 있는 데이터 따라서 Vue3 페이지가 시작될때 두번의 요청이 Nodejs로 전달되어야 한다. 두개의 데이터 셋은 아래의 그림과 같이 사용된다. Vue3 에서 요청 후 응답 받은 데이터는 아래와 같다. 이제 요청한 데이터가 제대로 전달되었다는 것을 확인하였다. Nodejs에 작성한 코드는 다음과 같다. router.get('/covidarea/:id',..

앞서 기상청의 공공데이터를 가져온 것을 활용하여 보건복지부 코로나 감염 데이터를 가져와 보기로 한다. 공공데이터 활용 전 유의 사항 공공데이터를 활용하기 전에는 항상 목록에서 제공하는 가이드라인 문서를 숙지해야 한다. 데이터를 가져오는 소스코드는 재활용할 수 있으나, 공공데이터 제공처의 옵션이 따로 있기 때문에 서비스 url 이나 파라미터만 변경해서 사용하면 안된다. 보건복지부의 코로나 감염 정보는 전날 정보로 00시 기준으로 데이터가 변경되지 않는다. 오전이 되어야 새로운 정보를 가져올 수 있다. 이 예제에서는 오전 10시 30분에 가져올 수 있게 하였다. 데이터를 가져오는 경우에도 crontab에 등록하여 사용할 수 있지만, 이번에는 schedule 패키지를 사용하여 지정한 시간에 데이터를 가져왔다...

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

Vue3 + D3.js 지도에 날씨 정보를 표현하기 위해서는 기상청 공공데이터를 가져와야 한다. 앞서 내용에서 파이썬으로 공공데이터를 가져오는 예제는 소개하지 않아 초보자를 위해 예제 코드를 소개한다. 아래 코드에서 없어질 내용들이 존재하지만, 게을러 코드 최적화는 하지 않았다. 제일 중요한 것은 '죽지 않고 돌아가면 된다' 사용한다면 사용자가 알아서 최적화하여 사용하면 될 것 같다. import mysql.connector import time def getWeather(x,y): from urllib.request import Request, urlopen from urllib.parse import urlencode, quote_plus import xml.dom.minidom from xml.et..