【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。

Web 資料視覺化 - 使用 D3

過去在網頁上描繪各種圖形或是統計圖表不是一件容易的事,對於一些簡單的圖形(例如長條圖)僅能透過 DOM 進行實作,如果要進一步的視覺效果則必須依賴其它的外掛程式,例如 Flash。

HTML5 導入了額外的 Canvas, SVG 元等素支援繪圖功能,當你需要將數字資料視覺化時,可以透過 這些新的元素進行實作,Canvas, SVG 是相當基礎的標籤,對於高度複雜且具美觀要求的圖形描繪,依然須進一步撰寫大量的 JavaScript 完成實踐。

SVG 是一種向量圖形,為了避免撰寫大量處理圖形的 JavaScript 程式碼,我們可以利用D3.js來處理 SVG 之類的向量圖形內容,將以下這一行嵌入網頁的 head 標籤中即可開始使用 D3。

<script src="https://d3js.org/d3.v5.min.js"></script>

D3 Gallery 提供了大量透過D3實作的圖表作品,想體驗D3在網頁上呈現的視覺效果,可以瀏覽這個範例集散網頁。


這套課程將陸續提供以下的教學內容,說明 D3 的使用說明與圖表實作示範。

  • 開始使用 D3
  • 操作 DOM 
  • 串接方法鏈
  • 資料繫結與處理
  • SVG 與 D3
  • 開始圖表製作
  • 完善圖表

沒有留言: