leaflet.js + Turf.jsでヘックス（六角形）で地図に可視化


# はじめに

はじめまして、[ValueCreation](http://qiita.com/ValueCreation) と申します。
最近は、何かとデータ ビジュアライゼーションの大切さを痛感しています。もともとは、JavaやPHPなどのサーバーサイドのエンジニアだったんですが、JavaScriptのすごさに最近感動しています。先日、IBMのWatsonハッカソンの決勝で、とあるアプリでのWatson APIの結果をグラフで表現しましたが、やはり印象が良かったです。ビジュアライゼーションって、インパクトがあるなと思いました。その時は、グラフとして、[amcharts](http://www.amcharts.com/) を使用したので、次回はこれについても紹介してみたいと思います。

その時の記事が本日紹介されていました！！！
http://japan.cnet.com/news/business/35075190/2/

さて、本題ですが、今回は、JavaScriptで地図表示用のライブラリである [Leaflet](http://leafletjs.com/) と 地理空間データ分析ライブラリである [Turf.js](http://turfjs.org/) を使用して、ヘックス（六角形）で地図に表示したので、その手法について共有したいと思います。

![2015-12-19_1923.png](https://qiita-image-store.s3.amazonaws.com/0/102251/f10f0ac5-7029-0afb-d7ff-3492a2dec493.png)
# Leaflet で地図表示
[Leaflet](http://leafletjs.com/) での地図表示について、[Data Visualization Advent Calendar 2015](http://qiita.com/advent-calendar/2015/dataviz) の記事でも幾つか紹介されているので、詳細については、割愛しますが、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](http://turfjs.org/)は、地理空間データ分析用のライブラリです。[Turf.js](http://turfjs.org/)を使用することで、空間計測を簡単に行うことができ、例えば、重心・中心点の算出や距離計算、バッファ分析、クラスタリングなどを JavaScript だけで行うことができる非常に便利なライブラリです。フロントエンドやサーバーサイドでも動作します。（[ドキュメントサイト](http://turfjs.org/static/docs/)） 

# ヘックス（六角形）で地図に表示
今回は、[Turf.js](http://turfjs.org/) の [turf.hex-grid](http://turfjs.org/static/docs/module-turf_hex-grid.html) を使用して、地図に表示してみました。ただ、ヘックス（六角形）を表示するだけでなく、ヘックス（六角形）内のポイントの密度に応じて、ヘックス（六角形）内で色分けして表示してみました。

ヘックス（六角形）を表示する範囲を定義し、ヘックス（六角形）内の点の集計を処理するために [turf.aggregate](http://turfjs.org/static/docs/module-turf_aggregate.html) を使用しています。

```
// 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;
  }
```

実際の[デモ](http://muxlab.github.io/map-effects-100/Leaflet/10_hex-grid-with-turf.html)に関しては、確認してみてください。また、詳細な[ソースコード](https://github.com/muxlab/map-effects-100/blob/gh-pages/Leaflet/10_hex-grid-with-turf.html)に関してはこちらを参照して下さい。

# まとめ
データ ビジュアライゼーション として、地図を使った表現がここ最近色々な記事で紹介されているのを多く見かけるようになってきました。私自身もこれまで地図エンジニアとして、機能ばかりを追求してきましたが、今後は、データ ビジュアライゼーションも意識しなけばならないなと日々感じています。サーバーサイドのAPIの開発と、それをクライアントでどう表現するのか、今後のテーマとして追求してきたいと思います。

今回紹介した[Leaflet](http://leafletjs.com/) と [Turf.js](http://turfjs.org/) を使用した、ヘックス（六角形）で地図に可視化は、[Map Effects 100](https://github.com/muxlab/map-effects-100) のひとつに紹介されていますが、UI/UX をテーマとし、沢山の地図を使用した表現もありますので、合わせて覗いてみてください。