소개

만나서 반갑습니다 ValueCreation.
최근에는 무언가와 데이터 시각화의 중요성을 느끼고 있습니다. 원래는 Java나 PHP등의 서버측의 엔지니어였습니다만, JavaScript의 대단함에 최근 감동하고 있습니다. 요 전날 IBM의 Watson Hackason의 결승에서 한 응용 프로그램에서 Watson API의 결과를 그래프로 표현했지만 역시 인상이 좋았습니다. 시각화는 충격이 있다고 생각했습니다. 그 때는, 그래프로서, amcharts (을)를 사용했으므로, 다음번은 이것에 대해서도 소개해 보고 싶습니다.

그 때의 기사가 오늘 소개되었습니다! ! !
h tp // 그럼. c네 t. 코 m/네 ws/부시네 s/35075190/2/

그런데, 본제입니다만, 이번은, JavaScript로 지도 표시용의 라이브러리인 Leaflet과 지리 공간 데이터 분석 라이브러리인 Turf.js를 사용해, 헥스(육각형)로 지도에 표시했으므로, 그 기법에 대해 공유하고 싶습니다.

Leaflet로지도보기

Leaflet 에서의 지도 표시에 대해서, Data Visualization Advent Calendar 2015 의 기사에서도 몇개 소개되고 있으므로, 자세한 것은, 생략해 합니다만, leaflet.js 를 사용해 배경 지도를 표시하려면 , 다음과 같이 해 합니다.

var map = L.map('map').setView([36, 139], 5);
L.tileLayer('//cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png', {
  attributions: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

Turf.js란?

Turf.js은 지리 공간 데이터 분석을 위한 라이브러리입니다. Turf.js 을 사용하면 공간 측정을 쉽게 할 수 있습니다. . 프런트 엔드와 서버 측에서도 작동합니다. ( 문서 사이트 )

헥스(육각형)로 지도에 표시

이번에는 Turf.js의 turf.hex-grid을 사용하여 지도에 표시해 보았습니다. 다만, 헥스(육각형)를 표시할 뿐만 아니라, 헥스(육각형)내의 포인트의 밀도에 따라, 헥스(육각형)내에서 색으로 나누어 표시해 보았습니다.

헥스 (육각형)를 표시하는 범위를 정의하고 헥스 (육각형) 내의 점 집계를 처리하기 위해 turf.aggregate을 사용합니다.

// Generates a hexgrid within the specified bbox.
  var b = geojson.getBounds();
  extend = [b.getSouthWest().lng , b.getSouthWest().lat , b.getNorthEast().lng, b.getNorthEast().lat]
  var hexgrid = turf.hexGrid(extend, 1, "kilometers");
  var hexgrid = turf.aggregate(hexgrid, data, aggregations);
  hexgrid.features.forEach(setStyle);

  var geojson = L.geoJson(hexgrid, {
    onEachFeature: function (feature, layer) {
      layer.setStyle(layer.feature.properties.withCount);
    }
  });

헥스(육각형)내의 색 분할의 설정을 하고 있습니다.
헥스(육각형) 내의 포인트 수에 따라 투명하게 표시하도록 했습니다.

  // hexgrid setStyle
  function setStyle(cell){
      cell.properties.withCount = {};
      var pt_count = cell.properties.pt_count;
      var _withCount = {
        color: '#4DFFFF',
        weight: 0.1,
        fill: '#4DFFFF',
        fillOpacity: pt_count/8.5　⇒　透過表示しています。
      };
      cell.properties.withCount = _withCount;
  }

실제데모에 대해서는, 확인해 보세요. 자세한 내용 소스 코드에 대해서는 여기를 참조하십시오.

요약

데이터 시각화로서 지도를 사용한 표현이 최근 여러 가지 기사에서 소개되고 있는 것을 많이 볼 수 있게 되었습니다. 나 자신도 지금까지 지도 엔지니어로서 기능만을 추구해 왔습니다만, 향후는, 데이터 비주얼라이제이션도 의식해야 한다고 날마다 느끼고 있습니다. 서버 측 API의 개발과 그것을 클라이언트에서 어떻게 표현할지 향후 테마로 추구해 가고 싶습니다.

이번에 소개한 Leaflet과 Turf.js을 사용한 헥스(육각형)로 지도에 시각화는 Map Effects 100의 하나에 소개되어 있습니다만, UI/UX를 테마로 하여 많은 지도를 사용했다. 표현도 있으므로, 맞추어 들여다 봐 주세요.