資料視覺化與D3.js
資料視覺化
資料視覺化是如何把資料更好的展現出來的一個課題，在大資料出現後，它變得更為重要和迫切。
以前使用excel進行柱狀圖、餅狀圖、折線圖等是最常用的資料視覺化手段之一，而在WEB端，使用流行的extjs、fusioncharts、jfreechart，或者相對不太流行的amchart、highcharts、Bootstrap裡的charts、jquery的一些外掛等等都可以實現餅狀圖等的展示。
然而我這裡說的資料視覺化並不是這種傳統的、簡單的圖形，而是更為複雜，能夠在有限的空間裡展示更多的資料資訊，尤其是針對大資料的更好展現。比如treemap1就是一個例子。傳統實現樹形資料結構的展示都會通過一棵樹，比如extjs裡的樹形元件，而treemap通過一個個矩形，加以不同的切分、不同的顏色實現更多資訊的展示。
資料視覺化的WEB技術
資料視覺化的技術有很多，但這裡只討論WEB端的，所以excel即使它現在或以後能實現多牛叉的資料視覺化，本文也先不討論。
如今流行的WEB資料視覺化技術有D3.js和tableau等等很多。D3有非常多的視覺化圖形，多得都看不過來。具體可見D3-Example。而tableau除了對treemap等的支援外，對地圖的支援尤為突出。具體可見tableau-gallery
其實，只要能把資料通過圖形化展示，都可以稱為資料視覺化。但是我這裡劃分為兩類是為了更好的區分老一代資料視覺化和在大資料背景下新的資料視覺化技術。比如在下面這篇文章中：
Extjs和d3js都是資料視覺化工具。但是我認為，extjs更傾向於js元件庫，而資料的圖形化只是它的其中一個功能，所以也不太會面面俱到，只提供基本的圖形即可。而D3則不同，它是專門針對資料視覺化的，除了常見的圖形，它更專注於如何更好的進行資料視覺化。
下面重點介紹D3的入門使用。
D3.js入門
如何下載
官方網站
在首頁下載d3.zip，目前的版本是3.5.5（在d3..js檔案的第3行可看見）。解壓後只有三個檔案：
- d3.js
- d3.min.js
- LICENSE
檢視Example
點選首頁的上方的Example。根據example裡的原始檔，可以快速做出一個helloword的例子。如果不使用伺服器的情況下，建議使用Firefox瀏覽器，我親自測試使用chrome和ie並不成功。
檢視中文文件
學習一個新技術，除了原始碼（d3.js），文件絕對是最重要的。
Wiki中文連結
第一個例子
- index.html
- box.js
- morley.csv
直接用火狐（我的版本是Mozilla Firefox35.0.1）開啟index.html即可。其他瀏覽器最好先部署個伺服器才能開啟。否則會在d3.csv、d3.json等程式碼行報錯：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource
參考
推薦一個很好的d3.js中文網，基本我遇到的大部分初級問題，都在這裡找解答。
- ourd3js
推薦幾篇文章：
- 如果不知道treemap是什麼，可通過D3.js對treemap的一個實現大概看看treemap的模樣。 ↩