因為想要視覺化資料，所以開始學D3.js，這是一篇簡短記錄自己學習D3.js歷程的文章，文章前半段是經驗分享，後半段是學習資源清單。
開始學習看D3.js範例的同時，一邊查它的API，看完好幾遍同一、二個範例還是不懂，覺得這API文件超硬，都沒有講初學者看API文件應該要先掌握哪些概念。反省了一陣子，發現原因是自己不懂Javascript、CSS和SVG，這樣看再多遍API資料、範例、再做多少次練習，都只能照範例依樣畫葫蘆，若自己撰寫的程式碼出錯，也不知道如何debug。因為練習的環境是Ruby on Rails所以想寫Javascript，連帶要跟著懂Ruby on Rails平台使用的CoffeeScript。
為了要理解Javascript的概念，所以才有前幾篇的學習Javascript經驗文章，我覺得Coffeescript眾多用法中，最常見到的寫法是Javascript的function literal用法。看懂用法之後，可以很容易轉換範例的Javascript原始碼寫法到Coffeescript，自己寫出CoffeeScript內容後，再由Rails的Coffeescript interpreter轉換成Javascript原始碼。我讀CoffeeScript和JavaScript資料好幾次，並且反覆練習一些範例腦中才逐漸理解兩種寫法的差異之處。D3.js的折線圖範例很常使用Javascript變數函數來定義X軸和Y軸值範圍，我用Coffeescript嘗試改寫Javascript這部份，我體會到Coffeescript語法糖(syntax sugar)簡潔的好滋味 :)
練習的過程曾發現自己即使照折線圖和Bullet範例寫完同樣的程式碼，瀏覽器還是不會畫圖出來，反覆查了好幾次，終於發現自己始終忽略要在網頁裡新增SVG的標籤並替它定class name或是id，才能如折線圖和Bullet範例運作，因為這些範例都早在HTML原始碼中加上SVG標籤，不用在Javascript程式碼中才新增。SVG的translate()函式是負責讓視覺化的資料如何變化，如同電影劇本，設定在A場景中，路人甲如何從舞台一端走到另一端。剩下一些attribute，查查SVG文件你就知道這些attribute在D3.js的意義是什麼了。
有個簡體中文網頁的講解範例非常詳細，D3.js初學者可經由它的說明了解D3.js範例運作方式。我閱讀後的心得是D3.js非常仰賴SVG來畫圖，學習者一定要了解SVG的attribute。 D3.js很重要的概念是極度仰賴SVG，隨後才是D3.js自身的.data(yourdata)函式，及其enter、append()、exit和remove()，因為這些決定了如何新增和移除資料，可以參考這個資料 和D3.js workshop投影片。.data(yourdata)使用方式可以參考學習參考資源第三條的b項的Loading data段落，安排在撰寫的網頁讀取資料，這也是.data()的範圍。其次是它的Selection、Axis、Scale、Range function，以及使用attr()來設定線條路徑與填滿顏色(SVG attribute：path和clip path)的範圍和區域。
學習文章資源清單：
D3.js workshop in slideshare http://www.slideshare.net/antonkatunin/d3-workshop
D3.js API reference https://github.com/mbostock/d3/wiki/API-Reference
D3 tutorial from some guy writes: tutorial a, b, c:
D3 examples, for example: Bullet chart http://bl.ocks.org/mbostock/4061961 , Bubble chart http://bl.ocks.org/mbostock/4063269 .
簡體中文資料,用D3.js實現基於SVG的線形圖 http://ju.outofmemory.cn/entry/60346
Mozilla SVG Reference https://developer.mozilla.org/en-US/docs/Web/SVG
W3C SVG Reference http://www.w3schools.com/svg/
書《深入淺出JavaScript》
CSS 顏色和區域概念
Coffeescript官方網站 http://coffeescript.org/