The WebGL Globe란?
지역을 기준으로 데이터를 시각화해서 보여주는 솔루션으로 구글의 Data Arts 팀에서 제작한 무료, 공개 소프트웨어다.
미리보기
http://workshop.chromeexperiments.com/globe/
특징
- 위도(latitude), 경도(logngitude)를 기준으로 수치를 시각화해서 보여준다.
- data와 type에 따라서 컬러를 시각적으로 보여준다.
- 마우스와 휠을 통해서 제어 할 수 있다.
- WebGL을 지원하는 브라우저에서만 사용 가능하다.
웹
사용기술
- html
- css
- javascript
필요기술
- 웹서버 - 웹페이지를 서비스 할 수 있는 웹서버가 필요하다.
- 생활코딩 웹서비스 만들기 편을 완주하면 이 기술을 사용 할 수 있다. (바로가기)
다운로드
아래 링크에서 최신 버전을 다운로드 받는다.
http://code.google.com/p/webgl-globe/downloads/list/
사용법
구동
ajax를 이용해서 데이터를 가져온 후에 이것을 globe 객체에 입력한다.
// Where to put the globe?
var container = document.getElementById( 'container' );
// Make the globe
var globe = new DAT.Globe( container );
// We're going to ask a file for the JSON data.
xhr = new XMLHttpRequest();
// Where do we get the data?
xhr.open( 'GET', 'myjson.json', true );
// What do we do when we have it?
xhr.onreadystatechange = function() {
// If we've received the data
if ( xhr.readyState === 4 && xhr.status === 200 ) {
// Parse the JSON
var data = JSON.parse( xhr.responseText );
// Tell the globe about your JSON data
for ( i = 0; i < data.length; i++ ) {
globe.addData( data[i][1], 'magnitude', data[i][0] );
}
// Create the geometry
globe.createPoints();
// Begin animation
globe.animate();
}
}
};
// Begin request
xhr.send( null );
데이터 포맷
데이터 포멧은 json으로 아래와 같다.
- series : 지리에 대한 데이터가 여러개의 셋트로 되어 있을 경우 사용한다.
- latitude : 위도
- longitude : 경도
- magnitude : 데이터로 최대 1.2를 넘으면 검은색으로 표시된다.
var data = [
[
'seriesA', [ latitude, longitude, magnitude, latitude, longitude, magnitude, ... ]
],
[
'seriesB', [ latitude, longitude, magnitude, latitude, longitude, magnitude, ... ]
]
];
참고
구글은 WebGL이라는 새로운 기술에 대한 관심을 환기하기 위해서 이 프로젝트를 시작했다. 아래 URL을 방문하면 WebGL과 관련한 다양한 프로젝트를 열람 할 수 있다.
