數據可視化，是利用計算機圖形學和圖像處理技術，將數據轉換為圖形或者圖像在屏幕上顯示出來進行交互處理的理論方法和技術。當然這是最基本的理解，進一步來說，數據可視化毫無疑問是基於數據的，我們很幸運地處於這樣一個讓我們興奮的時代，數據科學讓我們越來越多地從數據中發現人類社會中的複雜行為模式，以數據為基礎的技術決定著人類的未來，但並非是數據本身改變了我們的世界，起決定作用的是我們可用的知識。大數據已經改變了我們生活工作的方式，也對我們的思維模式帶來影響。隨著體量多，類型複雜的大數據更加接近我們，傳統的數據處理方法顯然無法適應，而數據可視化是一種能很好展示大數據，處理大數據的方法。同時現在隨著圖形圖像處理的快速發展，渲染引擎提高，可視化能更好的使用。當然，數據可視化不只是只各種工具，新穎的技術，同時作為一種表達數據的方式，它是對現實世界的抽象表達。它像文字一樣，為我們講述各種各樣的故事。
2、為什麼要進行數據可視化？（1）我們利用視覺獲取的信息量，遠遠比別的感官要多得多
如圖所示，視覺器官是人和動物利用光的作用感知外界事物的感受器官，光作用於視覺器官，使其感受細胞興奮，其信息經過視覺神經系統加工後產生視覺。通過視覺，人和動物感知到畫面的大小，明暗，顏色，變化趨勢，人的知識中至少百分十八十以上的信息經過視覺獲得，所以，數據可視化可以幫助我們更好的傳遞信息，畢竟人對視覺獲取的信息比較容易。
（2）數據可視化能夠幫助我們對數據有更加全面的認識
對該解釋有一個經典的例子。 F. J. Anscombe 在1973年在他的一篇論文 "Graphs in Statistical Analysis"中分析散點圖和線性回歸的關係裡面提到圖像表示對數據分析的重要性。他用了下面這個例子，如下有四組數據：
對這四組數據進行簡單的數據分析，每組數據有變量X和Y，我們使用常用的統計算法去分析這四組數據，會發現這四組數據擁有相同的統計值：
顯然，按照傳統的統計分析方法，我們無法找出這四組數據的區別，但是如果採用可視化的方法：
第一租數據圖告訴我們，x 和 y 有week linear relation。
第二組數據圖告訴我們, x 和 y 有curve regression relation。
第三組數據圖告訴我們, x 和 y 有strong linear relation 而且還有一個異常點。
第四組數據圖可以看書橫坐標數據集中在一起，而且也有一個異常值。
我們用了簡單的圖表對比以後，就會發現實際上這些在用圖像表示出來後，有完全不一樣的故事。
（3）數據可視化能夠在小空間中展示大規模數據
如圖，每一個數據變成一個點，數據間關係通過線段連接，大量的數據能映射到非常小的一張圖片上。
（4）人類大腦在記憶能力的限制
人類的記憶能力是有限的，我們不可能記住所有的數據，單純地記憶數據特診對我們來說也是不小的挑戰。俗話說的好，百聞不如一見。如果能夠將數據總結到一張圖表中，我們通過圖像記憶，能更好地幫助我們記憶。
3、數據可視化的原材料
基於數據的可視化組件可以分為四種：視覺暗示、坐標系、標尺以及背景信息。不論在譜圖的什麼位置，可視化都是基於數據和這四種組件創建的。有時它們是顯式的，而有時它們則會組成一個無形的框架。這些組件協同工作，對一個組件的選擇會影響到其他組件。
（1）視覺暗示
可視化最基本的形式就是簡單地把數據映射成彩色圖形。它的工作原理就是大腦傾向於尋找模式，你可以在圖形和它所代表的數字間來回切換。這一點很重要。你必須確定數據的本質並沒有在這反覆切換中丟失，如果不能映射回數據，可視化圖表就只是一堆無用的圖形。
（2）坐標系
編碼數據的時候，總得把物體放到一定的位置。有一個結構化的空間，還有指定圖形和顏色畫在哪裡的規則，這就是坐標系，它賦予 XY 坐標或經緯度以意義。有幾種不同的坐標系，一下三種坐標系幾乎可以覆蓋所有的需求，它們分別為直角坐標系（也稱為笛卡爾坐標系）、極坐標系和地理坐標系。
（3）標尺
坐標係指定了可視化的維度，而標尺則指定了在每一個維度裡數據映射到哪裡。標尺有很多種，你也可以用數學函數定義自己的標尺，但是基本上不會偏離這三種標尺，分別為數字標尺、分類標尺和時間標尺。
（4）背景信息
背景信息（幫助更好地理解數據相關的 5W 信息，即何人、何事、何時、何地、為何）可以使數據更清晰，並且能正確引導讀者。至少，幾個月後回過頭來再看的時候，它可以提醒你這張圖在說什麼。有時背景信息是直接畫出來的，有時它們則隱含在媒介中。
4、數據可視化過程你在分析中所採取的具體步驟會隨著數據集合項目的不同而不同，但在探索數據可視化時，總體而言應該考慮以下四點：
擁有什麼數據？
關於數據你想了解什麼？
應該使用哪種可視化方式？
你看見了什麼，有意義嗎？
（1）你擁有什麼數據？
這一步常見的錯誤是先形成視覺形式，然後再找數據。其實應該反過來，先有數據，在進行可視化。通常獲得需要的數據是最困難，耗時最多的一步。在本次比賽中，我們得到了大量的異構數據。為了之後可視化，需要對數據進行整理，這裡我們花費了大量的時間。數據可視化是基於數據的，所以首先我們需要明確自己擁有的數據，並掌握必要的數據處理方法。
（2）關於數據，你想了解什麼？
數據可視化主要有兩個用途：一個是用於講故事，一個是用於探索。往往當我們有一個包含數以千計甚至數個百萬觀察結果的數據集時，我們「淹沒在信息海洋中」，不知道從哪裡開始才好。為了避免這種情況的發生，你得學會遊泳。我們要做的就是提出與數據有關的問題，讓好奇心來引導你。針對問題，回答得越具體，方向就越明確。你可能想知道數據中最好的和最差的各是什麼，這時候，你會研究排名；如果有多個變量，就要決定什麼是有好處的，什麼是不好的。如果有時序數據，你可能還會想知道幾十年來什麼改善了，什麼更糟了。
（3）應該採用哪種可視化方式？
有很多圖表和視覺暗示的組合可以選擇。為數據選擇正確的表格的時候，你可能會感到茫然。在研究的初期階段，更重要的是要從不同的角度觀察數據，並深入到對項目更重要的事情上。
製作多個圖表的時，要比較所有的變量，看看有沒有值得進一步研究的東西。
先從總體上觀察數據，然後放大到具體的分類和獨立的特點。這裡，我給出基本圖表的選擇方法：
柱狀圖：適用於二維數據集，但只有一個維度需要比較。柱狀圖利用柱子的高度，反應數據的差異。肉眼對高度差異很敏感，便是效果比較好。柱狀圖的局限在於只適用於中小規模的數據集。
折線圖：折線圖適用於二維的大數據集，尤其是那些趨勢比單個數據點更重要的場合。它還適用於多個二維數據集的比較。
餅圖：餅圖應該是一種避免使用的圖表，因為肉眼對面積的大小不敏感。一般情況下，總是應該用柱狀圖替代餅圖，但是有一個例外，就是反應某個部分佔整體的比重。
散點圖：散點圖適用於三維數據集，但其中只有兩維需要比較。有時候為了識別第三維，可以為每個點加上文字標識，或者不同的顏色。
氣泡圖：氣泡圖是散點圖的一種變形，通過每個點的面積大小，反應第三維。如果為氣泡圖加上不同顏色(或者文字標籤）,氣泡圖就可以用來表示四維數據。
雷達圖：雷達圖適用於多維數據（四維以上），且每個維度必須可以排序。但是，它有一個局限，就是數據點最多6個，否則無法辨別，因此試用場合有限。
（4）你看到了什麼，有意義嗎？
可視化數據之後，你需要尋找一些東西。包括增長、減少、離群值、或者一些組合，當然，確保不要再模式中混入幹擾信息。同時也要注意有多少變化，以及模式有多明顯。數據中的差異與隨機性相比是怎樣的？因為估值的不確定性、人為的或技術的錯誤或者因為人和事物與眾不同，從而使得你的觀察結果與眾不同。人們常常認為數據就是事實，因為數字是不可能變動的。但是數據具有不確定性，因為每個數據點都是對某一瞬間所發生的事情的快速捕捉，其他地內容都是你推斷的。
5、上海市各大商圈人流預警系統
（1）實時人流檢測
系統展示的是一塊地圖，該地圖基於採用百度地圖開發。我們固定了顯示範圍為上海市區域。通過熱力圖的方式來反映各商圈的人流信息，人數越多的地方越好。為了獲得更具體的人流數據，我們還加入信息點，通過地圖覆蓋物實現。當滑鼠懸浮到信息點的時候，會顯示該商圈具體人流情況，我們使用了哪些數據，就顯示出來。
下圖是系統界面：（包含時間信息顯示，天氣預報，事故預警，人流信息列表，地圖容器，以及兩個數據圖表分析）
（2）百度地圖開發
本次開發中主要使用百度地圖，可以通過百度地圖開放平臺(http://lbsyun.baidu.com/)獲取SDK，以及API參考。
百度地圖是百度提供的一項網絡地圖搜索服務，覆蓋了國內近400個城市、數千個區縣。在百度地圖裡，用戶可以查詢街道、商場、樓盤的地理位置，也可以找到離您最近的所有餐館、學校、銀行、公園等等。2010年8月26日，在使用百度地圖服務時，除普通的電子地圖功能之外，新增加了三維地圖按鈕。
本次開發中遇到兩個坑，這裡分享下：
百度有自己專門的一套坐標系統，現在國際上使用的GPS坐標(WGS84），我們獲得數據都是WGS84的坐標信息，所以這個過程中需要進行坐標系的轉換，百度提供了轉化的函數，所以實現過程中用node謝了轉化的腳本。
為了滑鼠懸浮覆蓋物彈出信息框，發現百度自帶的infoWindow樣式固定，同時網頁版百度地圖api還提供了開源庫infobox用作替換infowindows。但是開發中發現還是無法滿足我需要，所以自己通過寫CSS的方式實現。
查看網頁信息，會發先infowindow由多個div組合，樣式寫死在html中，沒有關注點分離，所以操作過程中等地圖渲染完成後再次修改樣式，這樣導致執行效率比較低，目前沒有其他解決方法。考慮自己寫個開源庫實現。
（3）商圈人流走勢
為了展示商圈的人流走勢，顯然我們選擇了折線圖。在前端開發中，統計圖的繪製我們選擇了Echarts(http://echarts.baidu.com/)。
Echarts是一個純JavaScript的圖標庫，可以流暢的運行在PC和行動裝置上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）,底層依賴輕量級的Canvas類庫ZRender，提供直觀、生動、可交互，可高度個性化定製的數據可視化圖表。
現在Echart已經迭代到了版本3,其中加入了更多豐富的交互功能和更多的可視化效果，並且對移動端做了深度的優化。Echarts官網也提供了完整的文檔，入手較快。
（4）商圈人流對比
在商圈人流走勢中，我們的橫坐標是我們自定義算法中的商圈擁擠度，所以各大商圈走勢幾乎一致，在擁擠度的差別上對比卻不明顯，為了體現三大商圈的對比，我們採用d3.js庫動態的展示了商圈人流數上的對比。
D3.js（https://d3js.org/）是一個JavaScript庫，它可以通過數據來操作文檔。D3可以通過使用HTML、SVG和CSS把數據鮮活形象地展現出來。D3嚴格遵循Web標準，因而可以讓你的程序輕鬆兼容現代主流瀏覽器並避免對特定框架的依賴。同時，它提供了強大的可視化組件，可以讓使用者以數據驅動的方式去操作DOM。
D3官網也提供了較為清晰的文檔，但相比Echarts，D3的實現更為靈活，所有入門難度稍微大一些。
（5）D3.js和Echarts選擇上的建議
在圖表製作的JavaScript庫中，有前面提到的Echarts，d3.js，這裡在介紹一個highcharts.js，Highcharts和echarts是一類東西，但跟d3.js維度不同。假如前面兩個能解決你的需求，那麼就可以先不考慮d3。英語好選highcharts，英語不好選echarts。當然最好要先評估一下它們對瀏覽器的兼容性，免得寫完了發現用戶那運行不了。Highcharts和echarts基本上就是畫圖表用的，而d3.js 更自由些，你很容易去做出自己想要的效果，比如mindchart、heat chart、tile chart 之類的東西。d3.js源碼封裝對svg的操作，而svg不依賴解析度，而canvas則依賴解析度低，對密集型遊戲處理效果還是很不錯的，而svg對複雜高的渲染速度會很慢.不過d3.js最新的迭代版本已經支持canvas操作。
6、優秀的數據可視化作品欣賞
在學習過程中，腦海中有了這個名詞，當遇到這方面的內容總會多關注下，下面分享一些優秀的可視化作品。
http://www.iqiyi.com/v_19rrnue9oc.html，愛奇藝中可以搜索可視化看到。這裡不是打廣告哈。
D3製作的example(注意迭代版本): https://github.com/d3/d3/wiki/Gallery
風、氣象、海洋狀況的全球地圖: https://earth.nullschool.net/zh-cn/
視物|致知: http://www.vizinsight.com/
阿里指數: https://alizs.taobao.com/
iremember: http://i-remember.fr/en
標籤雲製作tagul: https://tagul.com/
可視化案例: http://www.open-open.com/news/view/154a034/
地理信息可視化開源庫: http://mapv.baidu.com/
看名字就知道: http://www.informationisbeautiful.net/
同樣看名字就知道: http://www.visualisingdata.com/
當然，優秀的可視化作品數不勝數，我也分享下幾本可視化方面的書籍。
連結：http://pan.baidu.com/s/1hsmJPaO，密碼：io4x
最後希望大家能夠喜歡可視化。