【公告】網站目前停止所有的課程訂閱服務，原有學員權益不受影響，造成不便還請見諒，我們正在打造更多課程以及圖書，包含 Python 為主的課程主題，未來將會合併且擴充目前的課程內容，提供全新課程訂閱服務，感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動，是針對最後一批少量書籍絕版的短期特別活動，只提供 20 個名額（剩 4 名），教學影片要在今年暑假過後才會重新開放訂閱，並沒有提供之前單獨購書的讀者，還請見諒， 如果您需要教學影片，屆時再請參與，也感謝讀者學員的支持，我們正在開發更多的教學內容，歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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
  • 開始圖表製作
  • 完善圖表

於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)