데이터 시각화

시각화 서브 모듈은 NAVER 지도 API v3에서 제공하는 서브 모듈 중 하나로, 지리 정보를 포함한 데이터를 쉽게 이해할 수 있도록 시각적으로 표현하는 클래스를 제공합니다.

클라이언트에서 데이터를 렌더링하므로 데이터가 많으면 성능이 저하될 수 있습니다. 다음은 지원하는 웹 브라우저 및 플랫폼 범위입니다.

PC: Internet Explorer 9 이상, Chrome, Safari 5 이상, Firefox

Mobile: Android 5 이상, iOS 9 이상

현재 제공하는 시각화 클래스는 다음과 같습니다.

열지도
점지도

시각화에 대한 다양한 예제는 시각화 예제를 참고합니다.

서브 모듈 로드하기

지리 정보를 포함한 데이터를 시각적으로 표현하려면 시각화 서브 모듈 JavaScript 파일을 로드해야 합니다. 다음과 같이 파일을 로드합니다. 시각화 서브 모듈을 사용하려면 NAVER 지도 API v3이 이미 로드되어 있어야 합니다. 자세한 사항은 서브 모듈 시스템을 참고합니다.

NAVER 지도 API v3은 http와 https 프로토콜을 모두 지원합니다.

네이버 클라우드 플랫폼

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=visualization"></script>

공공기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=visualization"></script>

금융기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID&submodules=drawing"></script>

열지도 사용하기

열지도는 지리 정보를 포함한 데이터의 강도를 색상으로 표현하는 시각화 방식입니다. 기본적으로는 강도가 높은 영역은 붉은색으로, 강도가 낮은 영역은 파란색으로 표현됩니다.

HeatMap 클래스는 열지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 이때 열지도 속성을 초기화하는 데 열지도 옵션을 사용합니다. 객체 리터럴로 만들며 열지도 옵션에 대한 자세한 설명은 HeatMapOptions 명세를 참고합니다.

var data = [
    new naver.maps.LatLng(37.75,125.4),
    new naver.maps.LatLng(35.42,128.56),
    new naver.maps.LatLng(35.57,128.34),
    
    // (생략)

    new naver.maps.LatLng(36.30,125.9),
    new naver.maps.LatLng(35.80,128.2),
    new naver.maps.LatLng(38.70,127.9)
];

naver.maps.onJSContentLoaded = function() {
    var heatmap = new naver.maps.visualization.HeatMap({
        map: map,
        data: data
    });
};

Examples: 열지도 시각화하기

점지도 사용하기

점지도는 지리 정보를 포함한 데이터의 위치를 하나의 점으로 표현하는 시각화 방식입니다.

DotMap 클래스는 점지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다. 이때 점지도 속성을 초기화하는 데 점지도 옵션을 사용합니다. 객체 리터럴로 만들며 점지도 옵션에 대한 자세한 설명은 DotMapOptions 명세를 참고합니다.

var data = [
    new naver.maps.LatLng(37.75,125.4),
    new naver.maps.LatLng(35.42,128.56),
    new naver.maps.LatLng(35.57,128.34),
    
    // (생략)

    new naver.maps.LatLng(36.30,125.9),
    new naver.maps.LatLng(35.80,128.2),
    new naver.maps.LatLng(38.70,127.9)
];

naver.maps.onJSContentLoaded = function() {
    var dotmap = new naver.maps.visualization.DotMap({
        map: map,
        data: data
    });
};

Examples: 점지도 시각화하기

가중치 사용하기

WeightedLocation 클래스는 지리 정보뿐만 아니라 가중치가 있는 데이터를 시각적으로 표현하는 데 사용하는 클래스입니다. 데이터의 가중치는 최댓값과 최솟값을 기준으로 0~1로 정규화해 사용합니다.

시각화 서브 모듈은 내부적으로 모든 데이터를 WeightedLocation 인스턴스로 관리합니다. 데이터에 가중치가 없으면 기본값인 1을 사용합니다.

정규화된 가중치는 시각화 서브 모듈에서 제공하는 시각화 유형에 따라 아래와 같이 사용됩니다.

HeatMap: 열지도에서 가중치는 점의 영향력 강도(세기)로 사용됩니다. 강도의 범위는 0.1~1입니다. 가중치가 없을 때 강도는 1입니다.
DotMap: 점지도에서 가중치는 점의 반지름으로 사용됩니다. 반지름의 범위는 1~{사용자가 설정한 반지름}입니다. 가중치가 없을 때 반지름은 사용자가 설정한 반지름입니다.

지리 정보에 가중치가 있는 데이터를 생성하는 방법은 여러 가지가 있습니다. 아래와 같이 직접 new 연산자를 이용하여 새 인스턴스를 생성할 수 있습니다.

var data = [
    new naver.maps.visualization.WeightedLocation(36.95, 129.92, 3.1),

    // (생략)

    new naver.maps.visualization.WeightedLocation(33.36, 127.12, 2.1)
];

또는 아래와 같이 리터럴 형태의 데이터를 이용할 수 있습니다. 이때에는 시각화 서브 모듈 내부적으로 WeightedLocation으로 변환합니다.

var data = [
    {"weight":2.0, "location": [126.58,36.90]},

    // (생략)

    {"weight":2.9, "location": [127.12,33.36]}
];

// (또는)

var data = [
    {"weight":2.0, "location": new naver.maps.LatLng(36.90,126.58)},

    // (생략)

    {"weight":2.9, "location": new naver.maps.LatLng(33.36,127.12)}
];

// (또는)

var data = [
    {"weight":2.0, "location": {"lat": 33.36, "lng": 127.12}},

    // (생략)

    {"weight":2.9, "location": {"lat": 33.36, "lng": 127.12}}
];

Examples: 열지도 가중치 사용하기
Examples: 점지도 가중치 사용하기