鐵人檔案
身為一個從來沒寫過D3.js的前端工程師，為學習開發資料視覺化圖表，利用這次鐵人賽的機會當作自我挑戰。以阿貝拉(Andrew Abela)的圖表指南中將依據不同資料類型所歸類的21種圖表為目標，嘗試使用D3.js各別挑選獨立主題完成開發練習。
一、使用線產生器繪製線圖 這篇的圖表練習要呈現的是中國及日本在一定區間的GDP，繪製成線圖圖表。 首先設定圖表的寬高、間距，並建立svg var width =...
一、過渡(transition) 在「Day17 練習 - 散布圖 (3)」中已經有先做了一個最基本的動畫練習。今天要來針對動畫部份多最一些說明和練習。 這裡所...
一、內插 (interpolate) 在前面文章「Day18 繪製產生器 (1)」中針對顏色（RGB及HSL）的計算已有簡單介紹。在使用transition()...
一、使用版面配置(Layout)畫出圓餅圖 在前面的文章「Day20 繪製產生器 (3)」中有介紹過使用弧產生器來繪製圓餅圖的方法，使用弧產生器需使用弧形的角度...
一、繪製座標改以圖表本身作為起始點 延續前一篇的程式碼，我已已透過弧內中心座標點的計算來繪製出圓餅圖內的數字，為方便閱讀把繪製數字的程式碼再貼過來。 arcs....
一、圓餅圖layout繪製角度 圓餅圖的layout提供了pie.startAngle(pi)及pie.endAngle(pi)兩個方法來設定圖形的起始及結束角...
一、監聽器 D3可以在元素上增加監聽器，語法為 selection.on(type, function) 寫起來會非常的似曾相識，簡直就像在寫jquery一樣。...
一、條直方圖(Column Histogram)繪製 **直方圖 (Histogram Chart)和長條圖 (Line Chart)**有些微的不同，在「Da...
一、使用線性比例尺繪製刻度 前述程式範例的x軸使用的比例尺為序數比例尺，由於資料是離散的，所以繪製出來的刻度會在長條圖的正中間。 而有另一種直方圖的呈現方式是讓...
最後一篇就沒有額外準備新的學習進度了，整理一下我個人的學習心得。 在開始鐵人賽之前，我看了「哈佛教你做出好圖表」這本書大約90%，惡補了一下關於資訊視覺化及圖表...
