和朋友有聊到鐵人賽這次的發文問題，確實問題挺多的...，或許這也是鐵人的挑戰之一吧，不過還好我有自備Blog，建議可以連到我提供的網址觀看～

以下文章同步發表於 http://wcc723.github.io/d3js/2014/09/30/Ironman-30-days-01/

去年參加了鐵人賽，主題是CSS，這過程中讓我獲得很多， 重點並不是在於得獎，而是在每天追求的過程中，必須在有限的時間內不斷地追求知識， 也不斷的挖掘有什麼是可以分享的。

先簡單自我介紹一下背景

• 我是一位設計師，目前是專職前端的工程師
• 去年鐵人賽摸到了優選
• 技術的Blog : http://wcc723.github.io

在今年的工作中，我感受到SVG (Scalable Vector Graphics)的未來性 原因如下：

• XML標準 (相對於Canvas更容易使用CSS、JS控制)
• 向量圖形 (目前的裝置解析度不一，而向量圖沒有解析度問題)
• 格式靈活，可以用繪圖軟體或是純文字繪製

SVG library

剛剛有提到，SVG有許多執行的方式，我是視覺設計出身，就會想直接用繪圖軟體畫，然後再轉存成svg格式檔案，但是這樣並沒有辦法動，所以就需要透過CSS 或是 JS。

相關的JS lib 以及 plugin 相當的多，下面介紹兩款主流的lib。

Snap.js

http://snapsvg.io

透過Snap，可以更容易繪製動態的SVG圖形，假設設計師已經提供了向量原始檔，在結合Snap，就能夠像以前的Flash做出豐富的HTML5互動網站(它說像用jQuery控制DOM一樣容易...)。

對Snap繪製互動圖形有興趣，也可以參考它的基本教學

http://snapsvg.io/start/

D3.js

http://d3js.org

當然，這次我報名的是D3.js，所以當然這就是這次的主角。D3在中文上的翻譯是”資料驅動文件”，圖形化的過程中，資料是非常重要的，選擇D3一部份原因也是工作需求。

參考資料

D3的學習資料相當多，在這三十天中，我會先簡單介紹SVG，接下來再透過Oreilly所出版的網頁互動式資料視覺化的教學來習作，另外還會搜尋許多的範例及資料來學習。

• 主要參考書籍 網頁互動式資料視覺化：使用D3 [*]http://www.books.com.tw/products/0010621239,
• 參考範例[*]https://github.com/mbostock/d3/wiki/Gallery

所以這三十篇不會是教學，而是個人學習記錄分享，而到了最後會有其他延伸運用。當然有遇到任何問題，也是會跟大家討論。