鐵人檔案
身為一個從來沒寫過D3.js的前端工程師，為學習開發資料視覺化圖表，利用這次鐵人賽的機會當作自我挑戰。以阿貝拉(Andrew Abela)的圖表指南中將依據不同資料類型所歸類的21種圖表為目標，嘗試使用D3.js各別挑選獨立主題完成開發練習。
一、本系列介紹及範圍 本系列的標題「D3.js新手開發基本圖表」又是新手又是基本的，看來預防針打的很足（？）。在這裡「新手」指的是我自己，在開始本系列之前，我只...
一、關於學習筆記 接下來的「圖表學習筆記整理」預計會有兩到三篇文章，內容主要是從前一篇提到的「哈佛教你做出好圖表」這本書中，我閱讀之後依我自己的理解整理、並補充...
一、圖表結構 圖表所應該具備的原素（大部份或者全部）如下： 1.標題 2.副標題 3.視覺區域（視覺圖示、座標軸、標、圖說、圖例） 3.來源出處 我們可以將必要...
一、Canvas和SVG Canvas和SVG都是html5用於繪圖的元素，都已經廣範被瀏覽器所支援。Canvas是屬於點陣圖、而SVG是屬於向量圖；我們都知道...
一、文字 在SVG中可以使用<text>標籤繪製文字，例： <text x=“200” y="10" dx="5...
一、hello world D3.js和一般的javascript函式庫一樣，直接用CDN方式引入html即可使用。比較要注意的是所使用的版本，因為v3.x和v...
一、基本理解 今天的主題主要是圍繞在我對於D3的基本運作的理解方式。 首先來看，D3的全名是"Data-Driven Documents"，...
一、資料綁定(Data-Join)的data() 前一篇提到D3的資料綁定(Data-Join)，今天要針對其中的**data()**方法來討論。 這裡我們將前...
D3.js的學習對我來說是比較抽象一點，所以我一開始的學習策略，就打算一開始只學習比較基本的觀念和函式的操作，接著就直接找練習題實作邊做邊學。 圖表類型我是參考...
一、使用<rect>元素繪製長條圖 第一個練習先從簡單化的資料來開始，這邊有一組數值，繪製出直式長條圖即算是完成。 var dataSet = [7...
