利用 d3-js 製作 responsive 的長條圖
利用 d3-js 我們可以很輕易地產生我們想要的圖表，以最常見的長條圖為例，只要透過 scale (比例尺) 與 axis (軸線)，再加上一點 SVG 的基礎知識，像這樣的長條圖一下子就可以生成。 [Code] 但是，像這樣尺寸的圖表，往往都會因為太大而不適合在手機螢幕上呈現。還好 SVG 有著向...
標籤：D3-js
語言：
Taipei D3-js Meetup 小聚分享心得
這次我在 Taipei D3-js Meetup (現在似乎改叫 Visual Thursday) 分享的 Talk 是有關於地理視覺化的簡介，雖然題目聽起來很學術，但其實內容是我這陣子對於 Web GIS 以及地圖視覺化的一些摸索心得分享。 感謝台灣微軟提供場地 XD 下面是我的投影片
在 Google Map 加入 D3 圖像 - 2
2015/05/20D3-jsgoogle mapd3-js
上一篇提到了如何在 Google Map 裡面加入 D3 的圖像，這次我們實際將資料套進去吧。 資料來源是上篇提到的臺北捷運各站進出量統計的統計資料，因為台北市政府開放平台並沒有提供 CORS (跨來源資源共享)的服務，沒關係，我們直接將資料下載存成 json 檔案即可。 (範例為 2015/4 進...
在 Google Map 加入 D3 圖像
2015/05/19D3-jsd3-jsgoogle map
因為昨天 台北市政府開放平台 開始提供 臺北捷運各站進出量統計 的統計資料，所以就在思考可以利用這份資料做什麼應用，第一個想到的就是能否透過 D3 與地圖的共同呈現，當然就從我最熟悉的 Google Map 開始。 不過這篇文章只會介紹到如何在 Google Map 加入 D3 (SVG) 圖像。 ...
snippet D3-js 甜甜圈圖 (donut chart) 的放大漸變效果
2015/05/04D3-jsdonut chart
做法很簡單，就是做兩個 d3.svg.arc() 然後在 mouseover mouseout 的時候改變 d 屬性即可。 這裏就拿 http://bl.ocks.org/mbostock/3887193 作為範例。 DEMO: (original charts) http://output.jsb...
note jQuery 與 d3-js 的一些不同之處
以前跟人家介紹 d3-js 的時候，我都會笑稱 d3-js 其實就是 SVG 界的 jQuery。 但是最近發現不少人對兩者的 select 以及 append 有些疑問，特別把它寫下來紀錄。 先說大家比較熟悉的 jQuery： javascript $("body") .append("<...