iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

D3.js新手開發基本圖表 系列

身為一個從來沒寫過D3.js的前端工程師,為學習開發資料視覺化圖表,利用這次鐵人賽的機會當作自我挑戰。以阿貝拉(Andrew Abela)的圖表指南中將依據不同資料類型所歸類的21種圖表為目標,嘗試使用D3.js各別挑選獨立主題完成開發練習。

鐵人鍊成 | 共 30 篇文章 | 43 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21 練習 - 線圖

一、使用線產生器繪製線圖 這篇的圖表練習要呈現的是中國及日本在一定區間的GDP,繪製成線圖圖表。 首先設定圖表的寬高、間距,並建立svg var width =...

2018-11-04 ‧ 由 Thunder 分享
DAY 22

Day22 動畫 (1)

一、過渡(transition) 在「Day17 練習 - 散布圖 (3)」中已經有先做了一個最基本的動畫練習。今天要來針對動畫部份多最一些說明和練習。 這裡所...

2018-11-05 ‧ 由 Thunder 分享
DAY 23

Day23 動畫 (2)

一、內插 (interpolate) 在前面文章「Day18 繪製產生器 (1)」中針對顏色(RGB及HSL)的計算已有簡單介紹。在使用transition()...

2018-11-06 ‧ 由 Thunder 分享
DAY 24

Day24 練習 - 圓餅圖 (1)

一、使用版面配置(Layout)畫出圓餅圖 在前面的文章「Day20 繪製產生器 (3)」中有介紹過使用弧產生器來繪製圓餅圖的方法,使用弧產生器需使用弧形的角度...

2018-11-07 ‧ 由 Thunder 分享
DAY 25

Day25 練習 - 圓餅圖 (2)

一、繪製座標改以圖表本身作為起始點 延續前一篇的程式碼,我已已透過弧內中心座標點的計算來繪製出圓餅圖內的數字,為方便閱讀把繪製數字的程式碼再貼過來。 arcs....

2018-11-08 ‧ 由 Thunder 分享
DAY 26

Day26 練習 - 圓餅圖 (3)

一、圓餅圖layout繪製角度 圓餅圖的layout提供了pie.startAngle(pi)及pie.endAngle(pi)兩個方法來設定圖形的起始及結束角...

2018-11-09 ‧ 由 Thunder 分享
DAY 27

Day27 互動

一、監聽器 D3可以在元素上增加監聽器,語法為 selection.on(type, function) 寫起來會非常的似曾相識,簡直就像在寫jquery一樣。...

2018-11-10 ‧ 由 Thunder 分享
DAY 28

Day28 練習 - 直方圖 (1)

一、條直方圖(Column Histogram)繪製 **直方圖 (Histogram Chart)和長條圖 (Line Chart)**有些微的不同,在「Da...

2018-11-11 ‧ 由 Thunder 分享
DAY 29

Day29 練習 - 直方圖 (2)

一、使用線性比例尺繪製刻度 前述程式範例的x軸使用的比例尺為序數比例尺,由於資料是離散的,所以繪製出來的刻度會在長條圖的正中間。 而有另一種直方圖的呈現方式是讓...

2018-11-12 ‧ 由 Thunder 分享
DAY 30

Day30 後續學習

最後一篇就沒有額外準備新的學習進度了,整理一下我個人的學習心得。 在開始鐵人賽之前,我看了「哈佛教你做出好圖表」這本書大約90%,惡補了一下關於資訊視覺化及圖表...

2018-11-13 ‧ 由 Thunder 分享