上一篇提到了如何在 Google Map 裡面加入 D3 的圖像，這次我們實際將資料套進去吧。

因為昨天 台北市政府開放平台 開始提供 臺北捷運各站進出量統計 的統計資料，所以就在思考可以利用這份資料做什麼應用，第一個想到的就是能否透過 D3 與地圖的共同呈現，當然就從我最熟悉的 Google Map 開始。

下面投影片是這次小弟在 Modern WebConf 2015 分享的主題，內容是有關 D3 開發的一些心得。

其實早先在準備的時候有些忐忑，像這種大拜拜的演講場合，很難預想聽眾的程度，講題太深擔心會眾無法吸收，太淺又怕對不起會眾的期待。 所以這次的內容安排了三分之一是從最基礎的 D3 data-driven 講起，再來才是開發心得與特性的介紹，期望不管是剛入門的朋友或是已經投入開發的老手都能從中獲得些什麼。因為我認為 Data-Driven 是 D3.js 的核心觀念之一，在瞭解如何將資料轉為 DOM / SVG 元件以後，剩下再去讀 D3 的 API 相信也能輕易上手。

早上開會時，同事提到了 Android 升級後，Chrome for Android 會出現網頁畫面在瀏覽器頂端時，往下拉會重整頁面的問題(其實應該說是 Feature XD)，因為這個新功能會造成網頁使用上的一些困擾，於是試了幾種方式，發現可以阻擋網頁重整的動作，趁還有印象就把它記錄下來。

因為每次轉檔都要查，索性把步驟記錄下來。

首先要安裝 GDAL (Geospatial Data Abstraction Library) 這個程式， 因為我是用 Mac ，所以在 terminal 輸入 brew install gdal 就可以了。

做法很簡單，就是做兩個 d3.svg.arc() 然後在 mouseover & mouseout 的時候改變 d 屬性即可。

這裏就拿 http://bl.ocks.org/mbostock/3887193 作為範例。

前陣子因為工作的需要，稍微研究了一下 Google Map 提供的 HeatMap (熱點圖/熱圖) API，實作方面也滿容易的，在這裡就簡單做個紀錄。

HeatMap (以下稱熱圖) 是用來表示資料數值強度與位置的可視化，Google 熱圖 API 在預設情況下，高強度的數值會以紅色表示，低強度的數值則是以綠色來表示。

在說明 Google Map 如何存取 GeoJSON 前，先來簡單介紹 GeoJSON。

GeoJSON 是一種專門處理地理資訊 (GIS) 結構的 JSON 標準格式。 一個 GeoJSON 物件可以用來代表點 (Point)，線 (LineString)，多邊形 (Polygon) 等等的幾何結構，以及特徵 (Feature) 的集合，或是一系列的特徵 (FeatureCollection)。

前陣子因為需求的關係，需要以經緯度來轉換地址，幸好 Google map API 有提供 Geocoder 可以轉換大略地址的服務。使用方式非常簡單，我們這裡以立法院的經緯度 (25.0439892, 121.5212213) 為例：

var geocoder = new google.maps.Geocoder();