Web 資料視覺化 - D3 入門概念

Web 繪圖技術 - SVG & 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 的使用說明與圖表實作示範。


沒有留言: