[snippet] D3.js 甜甜圈圖 (donut chart) 的放大漸變效果
做法很簡單,就是做兩個 d3.svg.arc()
然後在 mouseover
& mouseout
的時候改變 d
屬性即可。
這裏就拿 http://bl.ocks.org/mbostock/3887193 作為範例。
做法很簡單,就是做兩個 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) 為例:
以前跟人家介紹 d3.js 的時候,我都會笑稱 d3.js 其實就是 SVG 界的 jQuery。 但是最近發現不少人對兩者的 select 以及 append 有些疑問,特別把它寫下來紀錄。
先說大家比較熟悉的 jQuery:
因為 Google Map 的 InfoWindow 是被新增出來的物件,所以我們可以透過修改 prototype 的方式,替 InfoWindow 增加新的 method。
自 ECMAScript 5 開始,增加了一個 嚴格模式 (Strict Mode) 的新特性。
ECMAScript 5 雖然可以跟前一版的 ECMAScript 3 相容 (ECMAScript 4 已廢棄),但是,當我們宣告為 "Strict Mode" 後,那些 ECMAScript 5 不再建議使用的 ECMAScript 3 的舊語法會被全面禁止。