본문 바로가기

d3.js

Google Maps + D3.js Google Map위에 D3.js를 이용하여 마커 혹은 차트를 랜더링 하는 방법을 알아보자. 우선 Google Map 객체를 생성해보자.Google Map 객체는 MapOption 줌레벨, 지도유형 등을 세팅 가능하다.자세한 사항은 여기를 참고하기 바란다. var map = new google.maps.Map(d3.select("#map").node(), { zoom: 12, center: new google.maps.LatLng(37.556059, 126.91009), mapTypeId: google.maps.MapTypeId.ROADMAP }); 여기서는 줌레벨과 초기 지도 센터 위도/경도 정보, 그리고 지도유형을 설정하였다. 이제 지도위에 마커정보(위도/경도)와 오버레이 객체를 생성한다.지도위에 마.. 더보기
bar chart d3.js를 이용하여 기본적인 Bar Chart를 생성해보자.Bar Chart 형태는 유명한 dc.js의 Sample 내의 Bar Chart를 생성 해보려고 한다. 필요한 데이터로는 x축은 날짜가 필요하며 y축은 수치 즉 numeric이 필요하다.그래서 아래와 같은 샘플 데이터를 생성하였다. { "date":"2013-02-18", "count":33, "price":3421000 },{ "date":"2013-02-19", "count":4, "price":223000 },{ "date":"2013-02-19", "count":6, "price":464000 },{ "date":"2013-02-20", "count":2, "price":218000 },{ "date":"2013-02-20", "coun.. 더보기
Using D3.js to draw a grid‎ D3.js는 SVG뿐만 아니라 HTML DOM 핸들링이 가능하다.이번에는 D3.js를 이용하여 아래와 같은 Grid(Table)을 그려본다. 실행화면 미리보기 샘플 데이터 var matrix = [{"Girth":8.3,"Volume":10.3,"Height":70},{"Girth":8.6,"Volume":10.3,"Height":65} ...]; 우선 아래 그림에 표시된 테이블 헤더를 추가해보자.테이블 HEAD d3.select("body") .append("table") .style("border-collapse", "collapse") .style("border", "2px black solid") .append("tr") .attr("class", "tr_head") .selectAll("td").. 더보기
visualization using d3.js 현재 소속된 회사에서 빅데이터를 시각화 하는 방법을 찾던 중 D3.js를 학습하게 되었다.처음에는 쉽게 접근 가능한 highcharts 와 같은 라이브러리를 사용하려고 했으나D3.js의 확장성과 유연성으로 D3.js를 선택하게 되었다. 역시나 D3.js는 쉽지 않다.... 몇가지의 메서드는 그냥 이런 기능이다 정도만 알겠더라... 설명도 이해하기도 쉽지 않다. 개인학습용도로 정리하고자 한다. 1. D3.js란 D3.js는 데이터 시각화 프레임워크로 잘 알려져 있고, 자바스크립트로 개발을 한다.HTML5의 SVG을 통하여 다양한 화면 해상도에서 깨짐없는 Visualizing이 가능하다. 이와 같은 막강한 시각화를 쉽게(?) 작성할 수 있다.(D3 Example 더보기) 2. 기본설정 D3.js 라이브러리는.. 더보기

티스토리툴바