去年參加了鐵人賽,主題是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
透過Snap,可以更容易繪製動態的SVG圖形,假設設計師已經提供了向量原始檔,在結合Snap,就能夠像以前的Flash做出豐富的HTML5互動網站(它說像用jQuery控制DOM一樣容易…)。
對Snap繪製互動圖形有興趣,也可以參考它的基本教學
D3.js
當然,這次我報名的是D3.js,所以當然這就是這次的主角。D3在中文上的翻譯是”資料驅動文件”,圖形化的過程中,資料是非常重要的,選擇D3一部份原因也是工作需求。
參考資料
D3的學習資料相當多,在這三十天中,我會先簡單介紹SVG,接下來再透過Oreilly所出版的網頁互動式資料視覺化的教學來習作,另外還會搜尋許多的範例及資料來學習。
- 主要參考書籍 網頁互動式資料視覺化:使用D3http://www.books.com.tw/products/0010621239
- 參考範例 https://github.com/mbostock/d3/wiki/Gallery
所以這三十篇不會是教學,而是個人學習記錄分享,而到了最後會有其他延伸運用。當然有遇到任何問題,也是會跟大家討論。