D3.js 基礎繪圖
本學期學了統計學，所以想說來用 D3 練習做統計圖表，本次練習的內容是主要我們常用的長條圖、線圖跟散布圖。
注意
這次使用的 d3 函式庫是 v4 版本，所以有些函式的寫法會跟前一篇不太一樣。
本文章內容不討論樣式設計，意思是不討論像是字體該不該用 sans-serief ，顏色怎麼用才能美觀， padding 要多少才看起來舒適等等。
本範例是用 Jsbin 。
D3.js 採用建立者模式
大家可能會在前一篇 D3.js 的研究 發現我們建立圖表時，會用到很多函式，原因是當我們的圖形更互動或者是邏輯順序複雜的時候，我們可以透過不同的方式去膠合我們的邏輯，我們可能會需要用到很多建構子來滿足需求，而這個設計模式，我們稱之為建立者模式。
Bar chart
通常長條圖的一軸代表類別，另一軸則代表數據，他是生活中最常見也最簡單，幾乎甚麼都可用來表示的統計圖表。
我們在前面先定義畫布大小，還有每個長條之間的間距，接著我們產生一組小資料。
中間第 6 行到第 9 行的程式碼，是建立作圖的區塊，如果你對這幾行的程式碼不太熟悉，歡迎參考前一篇 D3.js 的研究。
接著從第 11 行程式碼開始，逐行意思是，我選擇全部在 svg 底下的長方形物件，接著，我將資料集輸入長方形中，中間的 .enter() 表示，如果該筆資料不存在或者是資料量大於長條元素數量時，我就建立這筆資料元素，後面接 .append() 函式使資料量跟元素量一致。後面的 attr 基本上就是對這個圖形做樣式設定，在此不多做討論。
最後在 jsbin 產生的畫面如下：
Line Chart
折線圖最主要的功能，是顯示兩個變數間的關係。
這邊一樣，前面都先定義畫布大小跟資料集。
在第 16 行，我們定義線圖的
並透過 path 去讓他畫出整個線的連接，其中第 27 行的 d 屬性適用於定義一個路徑，我們在產生的圖片區進行檢查，可以發現 svg 底下有個 path 標籤，而這個 path 裡面有 d=”M30, …..”， 裡面的 M 是起始點，所有的 Path 一定從 M 開始，M 有兩個參數，x 和 y，而 L 可以從目前的點畫直線到指定座標，一樣帶有有兩個參數 x、y，也就是要畫到的座標點。
而大家可能看到第 33 行後面，這個是針對每個點建立標籤，好讓閱讀者知道哪裡有哪些 text。他的建立方式是直接在畫布上的指定點座標加入標籤，所以你會看到第 38 跟 39 行都指定每個 text 標籤要在該位置顯示 d.sales 的值。
最後的總結果，輸出在 jsbin 的畫面如下：
Scatter Plot
散佈圖透過圖表呈現的方式，來辨認某現象的測量值與可能原因之間的關係
首先，我們定義點，定義點的原因在於散布圖所繪製成的圖是由各資料的點所構成，我們定義 circle 標籤，並且將資料集帶入這些點，定義各資料的圓心座標以及直徑，在第 42 行有個 fill ，裡面的公用是判斷是 d.sales 若超過 200 則標另外一種顏色，這樣的好處在於我可以視覺化大於 200 的點有哪些。接著較特別的大概是第 49 行了，我一樣建立標籤，但這次我只想顯示 min 跟 max 的資料，所以我寫了一個 showMinMax() 函式來找出最大跟最小值。
最後在 jsbin 產生的畫面如下：
結論
基本上圖表的特點在於使數據更有意義，使解讀能力更為提昇，圖表中的文字往往只用來詮釋數據。
在這篇文章除了探討製作長條、折線跟散布圖，也有探討如和針對圖表做簡易上色、加入標籤，及利用簡單的判斷式達到指定的位置著色以及指定的數據大小才顯示標籤。
我們可以透過 d3.js 來繪製出統計圖表，雖然很費工，但是也有有趣之處。
