鐵人檔案
身為一個從來沒寫過D3.js的前端工程師，為學習開發資料視覺化圖表，利用這次鐵人賽的機會當作自我挑戰。以阿貝拉(Andrew Abela)的圖表指南中將依據不同資料類型所歸類的21種圖表為目標，嘗試使用D3.js各別挑選獨立主題完成開發練習。
昨天練習了繪製直式長條圖，使用enter()方法將元素加入svg當中；接著今天的練習是要假設圖表是可以重覆繪製的，所以來延續昨天的程式碼來實作更新圖表。 首先把...
昨天將直式長條圖的更新繪制的部份完成了，今天主要是要再繼續延續做一點練習，將原本的程式碼做一點改寫練習。 一、取得常態分佈亂數 原本在取亂數的時候是使用java...
在前一天最後一個練習當中有使用到線性比例尺來做直長條圖的高度換算，今天就針對比例尺的部份來做稍微詳細一點的說明。 在D3中比例尺(Scale)的應用是將一個區間...
座標軸是圖表常見的組成之一，D3提供了座標軸的製作方式，可以省掉自己手刻svg的工。以下是一段基本的程式範例。 var svg = d3.select(&quo...
一、以比例尺繪制x,y軸座標軸 今天要來練習繪製一個具有兩個參數資料的散布圖圖表，這個散布圖將各別資料的兩個參數值放到x,y座軸上面畫出座標點。 這個範例資料集...
一、繪製具分隔線的刻度 為了來了解d3.svg.axis()其他的api用途，這邊要做一點變化，把原來的資料改成用百分比的方式來呈現。 比例尺做一點修改，把定義...
前一天已經完成了一個散布圖的練習繪製，今天延續原本的程式碼做一點變化。今天要完成的目標有兩個： 圖表繪製更新資料 資料更新時圖點要有動畫效果 一、圖...
顏色 D3的顏色有RGB和HSL兩種方法，可以互相轉換。 d3.rgb(r,g,b) 以rgb作參數，範圍都為0~255d3.rgb(color) 輸入顏色字串...
如果要自己手刻svg標籤來繪圖是非常辛苦的一件事情，D3提供了許多繪製的產生器可以幫助我們省下很多工，再來將挑出幾個做一些基本的說明。 一、線產生器 首先用D3...
一、弧產生器 相關的方法 d3.svg.arc() 建立弧產生器，回傳可使用的函式src.innterRadius() 內半徑src.outerRadius()...
