HAMA 블로그

https://bl.ocks.org 싸이트를 보면 굉장히 다양한 d3.js 예제들이 있으니 참고 하십시요. 이 글은 글 마지막의 레퍼런스를 요약한 것이니, 구체적인 설명은 링크를 따라가서 읽어보십시요. 아래 내용은 윈도우8에서 테스팅하고 확인 하였습니다. (패키지 버전을 확인하세요. 버전이 다르면 본 문서의 명령어가 안먹힐 수도 있습니다.)+ 개발환경 세팅 자바스크립트 개발 환경 세팅 Node 설치 (npm 이용 및 브라우저 없이 실행하기 위함) VS CODE 편집기 설치 (편집기는 아무거나~) 1. 프로젝트 폴더 생성 mkdir d3v4-with-ts cd d3v4-with-ts 2. 폴더 내에서 package.json 생성 (패키지 및 프로젝트 관리를 위함) npm init -y3. 패키지 받아오기 ..

사물인터넷을 위한 관제 웹 어플리케이션에서 현재 전기/수도의 사용량을 그래프로 보여주고 싶어서 알아보던중d3 라이브러리를 알게되어 간단히 적용해보고 (10분 완성) 주석 형식으로 설명을 달아본다. 0. 적용 모습 1. d3 라이브러리 include 2. 웹 페이지에서 그래프가 위치 할만한곳에 div 설정 3. 웹 페이지 로딩이 끝나면 그래프 시작 4. 그래프 드로잉 부분 var current_watt_for_graph = 0; function graphStart(){ var n = 60, // x 축 범위를 위한 변수 random = d3.random.normal(0, 0), data = d3.range(n).map(random); // 0~0 으로 x축(60) 범위를 초기화 한다. var margin ..