D3.js 的研究
前言
本學期學了統計學，所以想說來用 D3 練習做統計圖表
D3.js 是什麼？
D3.js 是全名是 Data-Driven Documents，是一個以 Javascript 為基底的函式庫，其包含製圖方便的輔助工具及資料操作模型
簡單來說，就是將倒入的資料進行圖表化，甚至更進一步讓使用者操作以便展現出不同的樣式。呈現圖形的方面我們採用 SVG，SVG 是屬於向量的技術，而D3 結合 SVG 來做圖形呈現。
D3 的優點是設計時的彈性極大，但反過來說實作繁瑣是一個缺點，後面會有範例看到其麻煩之處，其他方式製作的圖表則是容易建立但形式會有所侷限。
D3 是資料與物件的結合，我們將資料一一放入各個物件，比如說要製作長條圖，我們必須將資料一一倒入物件，讓程式表現出數字大小不同時會有長有短。這是 D3 的基本運作原理。
準備工作
使用物品： jsbin、d3.js 的 library。
首先，你必須在 html 檔裡面放入以下的 CDN 連結
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>會呈現如下的樣子
這樣我們基本上已經把 D3 的函式庫放到 html 裡面，可以開始在 html 裡面進行 D3 的實作練習了！
一切的一切都從 SVG 開始
前面沒有很詳細地介紹 <svg> 是甚麼。 SVG 的意思是 可縮放向量圖形，主要 用於描述二維向量圖形的圖形格式，也可以作動態效果、提供網頁互動功能。 SVG 由於可以搭配使用如 CSS、利用 JavaScript 操作 DOM 的獨特性，所以現在很多人使用 SVG 做向量圖。例如，想要讓 SVG 有圖像色彩及其他視覺的表現，可以搭配 CSS 來進行視覺改變。希望圖像具備互動，可以使用JavaScript 或 JQuery 等腳本語言做出互動效果。
所以我們先從 <svg> 開始講起，我想要繪製一個長方形，我只需要在 <svg></svg> 裡面放入 <rect> 元素並定義好，就可以製作出長條了。如果你不是很熟 <svg> 的人，可以點我了解。
那麼，這個跟 D3 有什麼關係？除了 可縮放 向量圖形，可以保持圖像清晰度，不會隨放大與縮小而有所失真，也不會大幅增加檔案的大小的優點外。還有就是你不必花時間自己用一層層 <div> 跟 CSS 自己建構出圖片。看看你用 <svg> 跟 <rect> 就可輕鬆建構出一個長方形了。
當然你可能需要在像 IE 8 的版本做這些事，那麼我推薦你參考這個文章，還是有人專門為這種老舊的瀏覽器研究出其他解決方法。你也可以從這篇文章發現時坐上又更為複雜了，所以這是我認為直接使用 <svg> 比較好的原因。
那說完使用 <svg> 的原因後，我們接著進入使用 D3 Library 來建立我們的長方形。
使用 D3 Library 建立一個長條
你可能發現用 D3 跟直接用 <svg> 跟 <rect> 在 html 建構出來的東西是一樣的，但是差別在哪？差別在於現在是還沒有放入資料的情境， D3 有像是 d3.json()、.data() 等函式幫助你倒入資料，並進而呈現圖表，本文章目前只是教你繪製圖表基礎中的基礎，所以目前你應該是看不出 D3 的威力。
練習：畫圓形以及文字
除了減少文字贅述，給大家做練習外，直接變形實作，也是最快熟悉一個語言的概念與方法。兩個題目的實作方式與前面的概念一樣，但請注意 <svg> 裡面的變化。
如果真的不知道從何下手，可以參考下面的 gist ，而這些練習的答案則是附在文章的尾端。
D3 principles
本段落應該打更多範例的後面，但是考量到練習，所以提前到這邊，如果你是練習完後來看這裡，你應該會有感覺， D3 是有設計原則的。
如果你還未練習就直接跳到這邊來看，這邊就當做參考，幫助你在學習時，有基礎的設計理論來幫助實作。
selections
這邊是讓 D3 從 DOM 中指定一個作圖區塊。以範例來說，他選定 <body > 做為作圖區塊
d3.select("body") //選擇 html 檔的 <body> 元素Append Operator
讓 D3 將<svg> 跟其內容物接在你指定的作圖區塊的後面。
d3.select("body") //選擇 html 檔的 <body> 元素
.append("svg") // 新增 <svg> 元素
.append("rect") // 在 <svg> 元素裡面增加 長方形元素Style Operator
讓 D3 針對某個物件設定其屬性。這邊注意到你要針對不同的物件進行屬性設定時，你要注意你要將屬性設定在哪。
d3.select("body") //選擇 html 檔的 <body> 元素
.append("svg") // 新增 <svg> 元素
.append("rect") // 在 <svg> 元素裡面增加 長方形元素
.attr("width", 50) // 設定一長條的寬度
.attr("height", 200) // 設定一長條的高度
.style("fill", "blue"); // 設定一長條的顏色(預設顏色是黑色)大家會注意到這邊是用 chaining syntax ，所以換行或者是空白或者是全部黏在一起都不影響程式碼運作
小結
D3.js 有很多不錯的工具， 像是大家在官網上看到那些豐富的繪圖輔助函式庫，協助我們透過程式碼，繪製出好看的圖表，這不就是工程師的浪漫嗎 =D
