d3.js 실시간 스트리밍 그래프 예제&설명

사물인터넷을 위한 관제 웹 어플리케이션에서 현재 전기/수도의 사용량을 그래프로 보여주고 싶어서 알아보던중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 ..
데이터 가시화 (d3.js , Plotly, Grafana, Kibana 등) 2015. 7. 20. 17:25
1