一、本系列介紹及範圍

本系列的標題「D3.js新手開發基本圖表」又是新手又是基本的，看來預防針打的很足（？）。在這裡「新手」指的是我自己，在開始本系列之前，我只看過幾個關於D3.js的教學影片、看過幾篇文章、書也翻了前幾個章節而已，所以預計會談論的主題都會是初學者程度的，如果當中內容有錯誤或不夠詳盡的部份也請多多指教及補充。

我自己所設定的比較具體一點的學習目標有兩個，一是能理解不同資料特性下合適的圖表呈現方式、二是學習D3.js並能以所具備了的知識開發常見圖表。

後面的章節皆還沒決定，不過大致上的方向目前規劃依續為以下三個主題：

1. 資料視覺化及合適的圖表呈現

2. svg及d3.js基本api及操作

3. 基本圖表開發練習

二、關於資料視覺化

其實本系列跟所謂資料視覺化(Data Visualization)、資訊視覺化(Information Visualization)並沒有什麼直接關係，但是就學習脈絡來看、或者在了解D3.js能做什麼的話題來說還是不免俗要提到一下。

若非相關領域有所了解的人，稍微查一下資料可能就會對資訊化圖表的應用和研究甚早感到驚訝：最早1786年William Playfair出版的本「商業與政治圖集」(The Commercial and Political Atlas)當中第一次使用了直條圖和聚合線圖、1858年南丁格爾繪製的玫瑰圖、1861年Charles Minard的拿破崙軍隊與蘇聯對戰潰敗的損失圖都是著名的最早期現代化圖表。到20世紀有了許多學者開始了許多現代資訊圖表的研究和著作…我能做的頂多就是抄抄歷史資料，所以其他更多相關資訊我也就不多談下去。

總而言之，隨著近代資訊科技及資料科學的發展，資料視覺化也已成為了一個特定而深入的領域。對於和我一樣完全門外漢的人我非常推薦這本書：「哈佛教你做出好圖表」

而本系列中關於資訊圖表的探討的主要參考也會從這本書中擷取出來。

其實對於這樣特定學科要找到這種通俗（說通俗但其實這本是蠻有深度的喔）的書大概也沒幾本，其實也不太需要我來推薦。

另外我也非常推薦沒看過的人可以看一下這場非常精彩的TED演講：

https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen#t-5029

二、了解相關資訊圖表開發工具

這裡所指的開發工具是針對網頁前端技術所採用的javascript函式庫或套件。

當然d3.js已經業界相當強大且開發者最多的js函式庫，這點是不需要談太多，但還是可以了解一下是否有其他的選擇可以滿足我們的需求：

1.echarts

http://echarts.baidu.com/

這是個發展很久也相當強大的library，可以簡單的做出強大的視覺化圖表，不過就我的理解這種高階的library都是基於圖表分類預先設定好、主要是以參數化的方式來調控，可自定義的程度就會較低。

2.G2

https://antv.alipay.com/zh-cn/g2/3.x/index.html

螞蟻金服所開發出來的library還相當年輕、知名度也不是那麼高，但我看到官網所看到的範例和文件（有中文XD）是覺得很驚艷，據說是依據The Grammar of Graphics這本書的理論基礎上所開發。

這邊就只舉兩個我覺得不錯library簡單分享。

其實就本系列將會觸即到的資訊圖表應該就只會有基本的型式，若需求就這樣單純也不一定就得要使用D3.js，當然依個人需求選擇適合自己的工具是重要的。以我個人而言，是基於對資訊視覺化領域高度興趣、以及在工作上有客製圖表需求下，決定要學好D3.js，而本系列對我自己而言從基本圖表算是踏入這個門檻前最基本的練習而已（學習之路還好遙遠啊…）。

三、關於D3.js的版本以及學習資源

在我開始尋找D3.js的學習資源上就遇到了許多挫折，一來是學習資源相較其他知名的javascript元件或框架來說，書在市面上大概就那幾本，要google文章也不是太多。

但我這裡還是要特別提的一個原因是我注意到D3.js的版本問題，說明如下：

目前網路上所查的資料大多為v3.x或v4.x，最新版本是v5.x，是今年(2018年4月)才發表的。尤其以v3.x和v4.x因為兩個版本是不相容的算是一個很大的分界點。

v3.0.0 是2012年12月發佈

v4.0.0 是2016年6月發佈

由此可知在尋找教學資料或書藉時，需要非常小心其所使用的版本號。就我自己到目前的感覺網路上的資料還是以v3.x為多，尤其是中文資料，所以依照網路範例就跟著做，而沒使用正確的版本時就無法正確執行。

另外，D3.js官網 (https://github.com/d3/d3/wiki) 雖也有提供中文資料的連結，但往往很多都還是v3.x版本的資訊，所以在官網查閱文件時也是要特別注意的。

出版物也是同樣的情形，市面上的中文書藉也還是以v3.x為主，本系列主要參考書藉「最符合人腦的解讀方式–用D3.js完成網頁視覺化」也是以v3.x為主，他只有在最後幾個章節多增加v4.x版的新增功能說明。

在我了解這個情況以及對自己英文能力有自知之明，最後還是決定先以學習v3.x為目標日後再更新版本。就目前所看到的資料新版本的操作邏輯應該是一致的，只是所使用的api語法不同而已所以應該不會有太大的困難。

再次說明，本系列將以v3.x版本的D3.js為主。

四、小結

學前準備比較多發散，也講了不少廢話。其實我也不是很有把握之後是不是每天都能夠順列的打出這麼多個字 QQ

最起碼開了個頭，就來看看我自己能走到哪邊去吧！