The WebGL Globe

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과 관련한 다양한 프로젝트를 열람 할 수 있다.

http://www.chromeexperiments.com/tag/webgl/