D3 周邊資源

D3學習過程中，在需要快速產出圖表的時候或剛起步學習時，官方直接的API文件是相當乏味的，因此此篇會大概介紹，哪邊有適合的圖表範例可以查詢或是學習資源。

官方資源

連結：https://github.com/d3/d3/wiki/Tutorials

官方提供的教學讓我們可以一步一步完成各種基礎圖表，並連結至Observable，讓我們開發時可以非常輕易了解，目前變數以及即時產出的圖表。

Observable

目前官方也把教學範例內容移置此平台，這類似D3的codepen，有即時預覽輸出的功能，當我們在寫D3或其他網頁UI相關的操作的時候，這是非常方便除錯，而且也能非常快速得到反應結果，可大幅提升開發速度。創辦人也是D3的作者，整個就是他的天地！

我們可以一邊打Code，寫下註解，並直接產生內容！

豐富的作品

當然也能觀摩各大神公開的作品，透過看別人怎麼寫，來精進自己D3的能力，跟codepen的瀏覽功能非常相似。

其他相關資源

• bl.ocks.org
  透過連結的方式，可以直接讀取gist.github上的圖表範例，這邊也有許多強者的圖表範例，也適合搜尋自己需要的圖表。

• christopheviau D3.js Gallery
  此網站內有2490個範例，我也有部分的特殊案例是在此找到類似範例，但年代有點久，可能有部分API需要注意是否過時。

• d3-graph-gallery
  此網站也有不少可直接參考的範例，圖表完整，呈現的樣式效果都滿不錯的，不會太粗糙。

特別的資源

許多強者都叫Mike! D3的作者就是Mike Bostock，此兩個站就是Mike寫的一系列D3圖表範例。

• [Mike Bostock] (https://bost.ocks.org/mike/)
  此網站目前已經沒有更新了。

• [@mbostock] (https://observablehq.com/@mbostock )
  目前新的文章圖表都在此，而且常常更新！非常活躍！

總結

上面看起來沒有甚麼強而有力的0-1教學文章，因為我也沒有找到，但透過看別人的範例，實際了解API使用，並且融會貫通概念，在API更動後其實仍然很快可以上手，比起直接看一整個列表的API，學習的愉悅程度差別很大！

參考資源

連結皆在文章內