利用 Google Map 檢視台北市降雨淹水模擬圖

看到前兩天的新聞: 柯文哲想公開易淹水地區 北市府已上網,又剛好有前輩寫了一篇 利用QGIS檢視台北市降雨淹水模擬圖雖然身處房仲業,但身為有良心的開發者不能只想著房價,心想應也可透過 Google Map 來呈現,於是試了一下,順便寫篇記錄。

閱讀全文

[筆記] JavaScript 變數宣告與作用域

大家都知道,JavaScript 的變數有其作用域的範圍,若使用前未經 var 宣告,就會自動變成全域變數 (global variable),而在其 code block 內宣告的變數也只有該 code block 內可以使用。

這次的問題,其實很久以前在 tonyQ 的聚會上就聽他說過了,只是沒想到還真的會遇到 XDDDD

閱讀全文

Taipei D3.js Meetup 小聚分享心得

這次我在 Taipei D3.js Meetup (現在似乎改叫 Visual Thursday) 分享的 Talk 是有關於地理視覺化的簡介,雖然題目聽起來很學術,但其實內容是我這陣子對於 Web GIS 以及地圖視覺化的一些摸索心得分享。

閱讀全文

[JS] [Note] TWD97 標轉換爲 經緯度

因為從臺北市政府資料開放平台 API 拿到的資料是 TWD97 座標格式,所以我們必須要將它轉成經緯度後才能套用至 Google Map 使用。網路上查了很多資料,最後找到最親民的是米蟲大的 PHP 版本,於是就改成寫我最熟悉的 JS。

reference: Vexed's Blog - TWD97 座標轉經緯度

閱讀全文

在 Google Map 加入 D3 圖像 - 2

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

閱讀全文

在 Google Map 加入 D3 圖像

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

閱讀全文

Modern WebConf 2015 與我的講題:D3 圖表優化二三事

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

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

閱讀全文

[筆記] 阻擋 android chrome 網頁下拉自動重整頁面

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

閱讀全文

[筆記] Shapefile to GeoJSON

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

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

閱讀全文

[snippet] D3.js 甜甜圈圖 (donut chart) 的放大漸變效果

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

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

閱讀全文