Yahoo!でインターン

2014年8月25日〜9月5日の2週間、Yahoo!の名古屋オフィスでインターンしてた。

「マルチビックデータを学ぶ」の中の「地図・位置情報サービス」というコース

地図・位置情報サービス

【概要】

スマートフォンの普及により地図・位置情報サービスはユーザーに一層身近なものになりました。それに伴い、より迅速で「ユーザーファースト」なサービス改善や、これまでにない新しい地図・位置情報サービスが求められています。本プログラムでは、Yahoo! JAPANが保有するビッグデータを活用することで、地図・位置情報サービスのユーザーをより良く知ることから始まり、サービス改善、そしてより便利な新しいサービスの企画などを体験できます。

【特徴】

Yahoo! JAPANの地図サービスの企画・開発に触れられる

名古屋オフィス勤務の地図サービス担当エンジニアと触れ合い、実際の企画や開発についてコミュニケーションを図れます。

大規模なデータに触れられる

Yahoo! JAPANが持つ大規模アクセスデータを存分に利用できます。これらの実データを分析することで、サービスの使われ方、サービスの課題を発見するなど、リアリティーのある業務経験を積むことができます。また、膨大な地図データ、位置情報データがどのように処理されているのかも理解できます。

具体的なプログラム例を一部紹介

  • 地図サービスの各プロジェクト紹介
  • これまでに得られた具体的なデータ分析結果の説明
  • 地図画像の3D化
  • 航空写真の画像処理
  • Wi-Fi屋内測位技術の精度向上

http://hr.yahoo.co.jp/internship/bigdata/mbd07/

f:id:tattii:20140905005829j:plain:w300

具体的な内容は書けないけど、Yahoo地図のことをたくさん教えてもらい、いろいろな人に出会えて、楽しい2週間でした!

カルトグラムをつくる

1. カルトグラム Cartogram とは

『統計データに基づき地図を変形し,地域の特徴を視覚的に表現する地図』


f:id:tattii:20140909163755p:plain

  • 面積カルトグラム
  • 距離カルトグラム

2種類のカルトグラムがある。

今回は、面積カルトグラムを作成する。
面積カルトグラムとは、面積によってデータを可視化する地図。

2. 使用するもの

shawnbot/d3-cartogram · GitHub


データ
農林水産省/作況調査(果樹) 平成25年度みかん収穫量

3. Sample


d3.json("/map/geodata/japan_prefecture_noisland.topojson", function (data) {
	var topology = data;
	var geometries = topology.objects.ken.geometries;

        // データを設定
	carto.value(function (d) {
		return pref_data[ d.properties["JIS-CODE"]-1 ];
	});

        // カルトグラム計算
	var features = carto(topology, geometries).features;

        // 描画
	map = map.data(features)
		.enter()
		.append("path")
		.attr("fill", function(d) {
			return color( pref_data[ d.properties["JIS-CODE"]-1 ] );
		})
		.attr({
			stroke: "#fff",
			"stroke-width": 1
		})
		.attr("d", carto.path);
});


// 2013 みかん収穫量 (農林水産省)
// http://www.e-stat.go.jp/SG1/estat/Xlsdl.do?sinfid=000024947688
    var pref_data = [
	1000,1000,1000,1000,1000,1000,1000,1000,1000,1000,
	1000,1440,1000,24600,1000,1000,1000,1000,1000,1000,
	1000,121800,28200,22000,10000,1000,14200,2460,1000,168900,
	1000,1000,1000,42300,12700,13900,15900,137800,7340,26500,
	53000,60900,91600,16200,13000,15700,1000
];


example
exmaple(アニメーションつき)

4. 注意点

データに極端に小さい値を使うと、カルトグラムを作成できなかった。
みかんの収穫量が0の都道府県も多いが、値は1000とした。

島など独立した部分を持つ都道府県はうまく拡大されなかった。
例えば、東京はあまり拡大されなかったが、東京都の島の部分を削除した地理データで作成するとうまく描画された。

f:id:tattii:20140909164418p:plainf:id:tattii:20140909164423p:plain

Heatmapをつくる

heatmap.js | Create HTML5 Heatmaps with Canvas and JavaScript
を使ってヒートマップを作る方法。

今回は、Leafletを使って表示した地図上にヒートマップをオーバーレイする。

f:id:tattii:20140801172512p:plain

実はこのExampleのままでは動かない。
heatmap.js | Examples: Leaflet Heatmap Layer

1. 必要なファイルの読み込み

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script>
<script src="/lib/heatmap/QuadTree.js"></script>
<script src="/lib/heatmap/heatmap.js"></script>
<script src="/lib/heatmap/heatmap-leaflet.js"></script>

2. 地図の読み込み

Leafletで地図を読み込む。

var mapboxTiles = L.tileLayer(
    'https://{s}.tiles.mapbox.com/v3/' + map_id + '/{z}/{x}/{y}.png',
    { attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Mapbox</a>' }
);

3. データの準備

ヒートマップにする点の座標と値を用意する。

var data = [
    {lat: 35.006, lon: 135.769, value: 2},
    {lat: 34.550, lon: 130.233, value: 1}
]

4. Heatmapの作成

var heatmapLayer = L.TileLayer.heatMap({
    radius: { value: 10, absolute: false },
    opacity: 0.8,
});

heatmapLayer.setData(data);

Option

ドキュメント、Exampleとは違うので注意。

1つの点の大きさを指定する。

    radius: { value: 10, absolute: false }
    radius: { value: 15000, absolute: true }

absolute: falseにするとピクセル単位での指定になり、zoomが変化しても一定の大きさ(px)で表示される。

absolute: trueにするとメートル単位での指定になり、zoomが変化しても一定の大きさ(m)で表示される。

  • opacity

透明度。

  • gradient

グラデーション。defaultは青→赤の一般的なヒートマップのグラデーション。

5. 表示

地図にヒートマップをオーバレイさせて完成。

var map = new L.Map('map', {
	center: [38.23, 138.933],
	zoom: 6,
	layers: [mapboxTiles, heatmapLayer],
});


Example -> Foursquare - Heatmap


6. Retinaディスプレイへの対応

このままではiPhoneなどのRetinaディスプレイで表示すると少しぼやけてしまう。
Retinaの解像度に合わせるには2倍の大きさで描画して、cssで半分にする操作が必要。
Heatmap.jsで対応するには直接ライブラリを編集しないといけない。一応対応できたが、まだ理解できているか分からないので。。。

参考:
[HTML5] CanvasでRetina対応を行う - YoheiM .NET

Foursquare Heatmap

Foursquare Heatmapを公開しました。

http://azuresky.fam.cx/foursquare/heatmap/


f:id:tattii:20140801172512p:plain


Foursquareのチェックイン履歴をヒートマップにして可視化します。

自分が今までにどんな場所に行ったのかが分かって楽しいです。

Foursquareのアカウントを持っている人は是非一度試してみて下さい。


f:id:tattii:20140801174244p:plain
Retinaディスプレイにも対応しています。


heatmap.js | Create HTML5 Heatmaps with Canvas and JavaScriptを使用して作成しました。

Foursquare APIで履歴を取得する

Foursquareで履歴を取得する方法をまとめる。

1. Venue History

users/USER_ID/venuehistory | API Endpoints

https://api.foursquare.com/v2/users/self/venuehistory

取得できるデータは、チェックインしたことのあるVenueのリスト(チェックイン回数、Venueの詳細)のみ。

簡単にすべてのチェックインしたVenueが取得でき、Venueごとに整理されている。

example


2. Checkins

users/USER_ID/checkins | API Endpoints

https://api.foursquare.com/v2/users/self/checkins

取得できるデータは、チェックインのリスト(チェックイン日時、Venueの詳細)。

上限は250件で、すべての履歴を取得するためには数回のリクエストを送信しないといけない。

example

Perl Numeric Literal

perlの数値リテラルについて調べたのでまとめておく。

プログラミングPerl

$x = 12345;               # 整数
$x = 12345.67;            # 浮動小数点数
$x = 6.0e23;              # 科学的記法
$x = 4_294_967_296;       # 下線をつかって読みやすくする
$x = 0377;                # 8進数
$x = 0xfff;               # 16進数
$x = 0b1100_0000;         # 2進数

プログラミングPerl - 2.6.1 数値リテラル より

Inf, NaN

$x = 'inf';        # 無限大
$x = '-inf';       # 負の無限大
$x = 'nan';        #

Infinityも認識される。大文字と小文字の区別なし。

Perlで文字列が数値かどうか判定するには

1. 最良の方法?

!( $n == 0 && $n ne "0" )

warningが出る...Argument "String" isn't numeric in numeric eq (==)

2. looks_like_number()

Scalar::Util::looks_like_number()

正規表現にしてみた

my $rx_integer = qr/(?:[0-9_]+)/;
my $rx_decimal = qr/(?:[0-9_]+\.[0-9_]+)/;

my $rx_number = qr{ 
    (?: (?:-)* inf (?:inity)* )
    |
    nan 
    |
    0(?:
        (?:x[0-9a-f_]+)
        |
        (?:b[0-9_]+)
        |
        (?:[0-7_]+)
    )
    |
    (?: $rx_decimal|$rx_integer) e[+|-]? $rx_integer )
    |
    $rx_decimal
    |
    $rx_integer
}xi;


参考:
perldata - Perl のデータ型 - perldoc.jp
looks_like_number() - Perl日記

Perl Infinity&NaN

perl-5.6.1以上なら、InfinityとNaNが扱えるらしい。

> 1e1000
inf

> 'inf' + 1
inf

> 'inf' * -1
-inf

>'inf'-'inf'
nan


数値リテラルとして認識されるのは

inf  <- /inf(inity)*/i
-inf <- /-inf(inity)*/i
nan  <- /nan/i


数値としては、inf, -inf, nanとして保存される。

> my $inf = "Infinity";
Infinity

> $inf += 0;
inf


ただし、0除算はerrorになる。

> 1 / 0
Illegal division by zero.

> 1 % 0
Illegal modulus zero.

参考:
looks_like_number() - Perl日記
perl561delta - perldoc.perl.org