鐵人檔案
是不是覺得用D3.js 畫圖表很酷炫但也很難學呢？想好好學卻發現官方文件看不懂嗎？網路上別人教學的程式碼搬過來卻跑不動嗎？版本變化太快，找不到最新版的教學嗎？現在不用擔心了，這系列通通幫你解決！
本系列使用目前D3.js最新版v7，並從最基礎的D3核心概念開始講解。帶大家了解DOM、JS Event、CSS selection、SVG的原理，以及D3.js 選取與資料綁定的核心；接著一路帶到 D3.js 繁多如麻的API講解，以及要如何看懂官方文件去找到 API 的使用方法；最後則把常見的圖表全帶大家手把手寫一次，並加上圖表動畫~讓你之後畫圖表不求人！
本篇大綱：基本散佈圖範例、進階散佈圖範例 今天的一天一圖表，我們要來畫 散點圖 / 散佈圖！散佈圖適合用在以下幾種情況： 了解資料的分布狀況 比較不同資料...
本篇大綱：開放資料下載、繪製長條圖 今天的一天一圖表，我們來畫圖表世界中最常見的 長條圖 吧！長條圖系列總共分成三部曲，分別是「基礎長條圖、複數長條圖、堆積...
本篇大綱：開放資料下載、本次範例的畫面與互動效果、複數長條圖的繪製關鍵、繪製複數長條圖 今天的一天一圖表，我們要來畫圖表長條圖第二部曲 — 複數長條圖！ 複...
本篇大綱：d3.stack( ) 的用法、本次範例的畫面與互動效果、繪製堆積長條圖 今天的一天一圖表，來到長條圖三部曲的終章 — 堆積長條圖！ 堆積長條圖的...
本篇大綱：d3.line( )、d3.bisector( )、d3.defined( )、範例圖表一、範例圖表二 今天的一天一圖表，我們要來看到折線圖！折線...
本篇大綱：範例圖表一、範例圖表二 昨天看完了單線折線圖怎麼繪製，今天我們就來看看多線折線圖吧！ 有時候我們拿到的資料會分成很多組，需要去比較不同組別的數據，...
本篇大綱：範例一、範例二 昨天我們講完了基礎圖表的章節，學會圓餅圖、散點圖、直條圖跟折線圖等等基礎常見的圖表，今天我們要進到進階的圖表啦！進階的圖表主要是較...
本篇大綱：繪製氣泡圖的關鍵、資料下載、範例圖表的畫面與互動效果、繪製圖表 今天的一天一圖表，我們要來畫氣泡圖！ 繪製氣泡圖的關鍵 氣泡圖其實是散點圖的延伸，...
本篇大綱：合併圖表繪製關鍵、圖表畫面與互動效果、本次使用資料、圖表繪製 今天的一天一圖表，我們要來看怎麼把兩張圖表合併啦！一般來說，我們最常看到的合併圖表就...
就是今天！！想不到寫著寫著三十天就這樣過去了～回顧這三十天的旅成還是覺得有點不可思議，真的只能用我同事說的「淚流滿面」還形容ＸＤＤ 雖然本來就有打算要參加鐵人賽...
