這次參加鐵人賽，我也猶豫了很久，在開始前我已經準備好了近十篇另一個主題(視覺前端與前端技術)，但是牙一咬就報名了另一個主題d3.js，用意是想學d3.js。學習的過程中挫折也是挺大的，因為我對於資料處理並不擅長，光在json的處理就費盡心思，還好在學習的過程中有許多人可以讓我詢問該怎麼做，不然真知道怎撐到最後。

在寫的過程中，原本想要在SVG結束之後，看著書做到底就好...，又怕被覺得太混，於是就一直到處挖可以用的資料或是技術，結果越挖越遠，造成文章順序有點跳躍式的...，為了避免這個問題，下次還是選熟悉些的技術好了，哈哈。

再怎麼說，透過這次的鐵人，也是有達到目的，就和上次一樣，一個月的密集研究，可以快速地學習一項技術，就像進入精神時光屋一樣，在30天內進步其他人一年的程度...。

在此就列出30天的成就吧：

• SVG

  • SVG 簡介
  • SVG 超硬派了解 line, polygon, polyline, path (手工繪製)
  • SVG 超硬派了解 path Arcs
  • SVG Defs 以及 CSS
  • SVG Stroke , Marker 以及 CSS

• D3.js 基礎

  • 初入D3.js
  • D3js 將資料投影到SVG上
  • D3.js Scale 尺度
  • D3.js 國慶日在家裡畫長條圖
  • D3.js 讀取CSV資料並繪製成長條圖
  • D3.js 軸線(Axis)
  • D3.js 折線圖(Line Chart)
  • D3.js Transition動態效果
  • D3.js 資料數量增減

• D3.js 主題範例

  • D3.js 究竟搭不搭捷運與死亡率有沒有關係？(1)
  • D3.js 究竟搭不搭捷運與死亡率有沒有關係？(2) - Google 試算表
  • D3.js 究竟搭不搭捷運與死亡率有沒有關係？(3) - 將資料繪製成折線圖
  • 像jQuery 一樣的D3.js，柯P野生官網API
  • D3.js 也可以像音樂一樣動吃動吃動(1)
  • D3.js 也可以像音樂一樣動吃動吃動(2)
  • D3.js layout (以環保局資料為例)
  • D3.js 再看更多layout前，先來轉換json結構
  • 柯P的財務報表套用 D3js Partition Layout

• D3.js 小玩意

  • D3.js 圈圈小效果
  • D3.js 超粘的Voronoi Diagram繪圖

• 其他工具

  • D3js 前置作業，製作簡易Server
  • D3.js 利用Excel建立資料(CSV)
  • PDF轉CSV，利用Tabula

以上次這次鐵人賽的文章，如果對文章內容有問題，也歡迎留言給我。下次還是不幸被推坑的話，還是做視覺前端的相關主題吧！

另外，我在暑假期間的時候有發起翻譯Google Material的活動，目前還是Gitbook上的暢銷書，在此推薦大家閱讀。

http://wcc723.gitbooks.io/google_design_translate/

就這麼樣，我們下次見(如果還有力氣的話)。