最近幾年隨著大資料的興起，以及瀏覽器效能的提公升，資料視覺化成為了乙個熱點，前端也冒出來了很多資料視覺化的崗位。本人也做過一些資料視覺化相關的產品，下面聊聊對資料視覺化的一些思考。本文的資料視覺化一般專指網際網路公司web前端接觸的資料視覺化
而前端常說的視覺視覺化大部分是指借助曲線圖表等展示形式把一些相關資料更直接、形象、生動、具體的展示在web頁面上。要做乙個好的資料產品是需要 產品經理->設計師->前端->後端->使用者整個鏈路緊密配合密切合作並且協調的。
產品需要懂資料視覺化的理論基礎，哪些資料可以視覺化，哪些資料是使用者最想要的。
設計師包括視覺和互動，需要理清楚資料怎麼展示最合理，曲線，柱狀圖，餅狀圖，都有哪些優缺點，不能僅僅為了美觀設計了乙個好看的圖形，而不顧實際資料情況，展示出來就很奇怪。
前端其實在裡面是最緊密的一環，資料怎麼獲取，什麼格式對前後端最友好，採用什麼技術方案，是svg的庫，還是canvas的庫，是自己擼還是用現成的庫。實現成本有多高，效能、擴充套件性怎麼樣都是需要考慮的問題
後端需要考慮的就是資料的拉取，需要考慮資料格式以及能獲取哪些資料。
以上分工只是乙個粗略的說明。這裡看了一篇文章小心，這餅有毒！論餅圖的正確開啟方式裡面講的一些經歷可能大家都遇到過，我也深有同感
我的這些資料，好像柱狀圖、折線圖、餅圖都能表示啊，到底應該選哪個？
餅圖和環形圖也差不多，取決於我要不要在中間顯示其他內容嗎？
我可不可以將資料對映到餅圖的半徑維度上
資料視覺化最重要的不是好看，而是讓人一目了然的明白這個圖表傳達出來的意思。
其實這方面是有相關的資訊圖表學的相關知識儲備的話就不會犯這些錯誤了。支付寶有個g2 裡面有兩個相關的圖表學基礎知識介紹，我個人認為這是g2 比echart更近一步，更規範化的點之一。
詳見這裡
視覺化基礎-圖表使用建議
視覺化基礎-圖表設計指引規範：
以及經典文獻：
在資料視覺化的研究和實現中，《資料視覺化》、《the grammarof graphics》、《深入淺出統計學》、《計算機圖形學幾何工具演算法詳解》、《visualization analysis and design》 、《ggplot2：資料分析與圖形藝術》 。
叨叨了這麼多基礎，下面說說前端在視覺化裡的一些相關的發展和技術選型
首先需要明白乙個觀點：技術選型沒有一勞永逸的，永遠是根據你的專案實際情況以及你的個人偏好和技術基礎來做的選擇。
1.echarts
echarts算是國產的圖表庫里最好的了。efe團隊也是國內技術實力最雄厚的視覺化團隊.採用canvas作為渲染容器。底層一些實現比如滑鼠事件啥的用的自己開發的zrender框架。
echart2.0對應不同的元件比如座標軸圖例是用不同的canvas來渲染的，echart3之後都合併到乙個canvas裡面了，猜測應該是底層的框架公升級了
部落格： 鄙人的部落格就是copy的他們的**。。。。。。
這個部落格更的很慢了。
2.highcharts
這個框架用的人也不少，主打就是ie6也支援。。。。。。。。。然並卵微軟都不支援ie6了。**連ie8都不支援了。。。。收費的庫，底層用的svg。私以為他的api使用起來沒有echart友好。
3.g2-支付寶
螞蟻金服的產品，圖表容器為canvas，玉伯的團隊開發的。怎麼說呢。。這個東西看著還不錯，不過實際使用的時候大部分人還是會不由自主的去選擇前面兩個，大阿里系的開源東西就是這麼個鬼情況。東西是不錯，就怕搞著搞著團隊沒了。而且他們官網那些示例最開始貌似是那個嫩藍色（or嫩綠色？）看起來讓人覺得整個產品很輕浮，不像echarts 墨黑色，一種商務穩重風。現在貌似也慢慢像穩重風格靠攏了。繼續下去感覺還是不錯的。
4.d3.js
d3也算是資歷比較老的乙個產品了，採用svg作為圖表容器。剛開始出來的時候各種動畫比較驚豔圖表型別也很豐富，感覺echarts一開始也參照它的圖表型別新增了好幾個圖表示例。
d3的優點是各種示例demo比較完善適合拿來就用，缺點就是demo不適合二次開發，熟悉api的話也可以直接自己畫，他的api是對svg的dom的一種整理和相容，模擬於jquery對應html的dom。
其他：以上就是最常見的一些圖表庫，那麼我們需要根據實際專案需要來做一些技術選型。
移動端圖表庫，echarts和g2應該都可以。pc端就看個人喜好了。報表型別的專案看設計師畫的效果稿吧，echarts可定製性最高，g2沒用過，highcharts文件不健全。
監控型別的專案需要頻繁更新資料的優選選擇canvas的效能應該更好。
下面說說資料視覺化的一般應用場景
報表類，監控類，動效pr稿類，地圖類，資料視覺化系統等。
報表類
報表類使用場景最多，使用的圖表也最簡單一般echarts裡面的示例圖表就能滿足了，
監控類
監控類稍微複雜點，一般涉及到實時性和穩健性，開發的時候需要考慮後端的介面效能，以及頁面圖表渲染的效能問題，資料量大了之後對前後端都很有挑戰性。做起來也比較有意思，和業務場景結合起來能做一整套的資料視覺化的產品系統。
動效pr稿類
這種型別的專案一般都有乙個特點：急，炫，累。專案週期很急，動畫效果要很炫，幹起活來很累。偶爾做做還行，一直搞，就感覺路走的有點偏，而且一般很少能找到現成的庫和框架，前期需要大量的技術調研和技術儲備。相關的庫一般需要canvas的效果庫，webgl的庫，比如: ，threejs，要求更高的可能需要一些遊戲庫來幫忙了比如： ，等等。
地圖類
資料視覺化系統
這個範疇比較大，還是需要看業務場景，某些業務場景就特別適合做一堆相關聯的資料視覺化系統。做好了成就感還是滿滿的。
未完待續
資料視覺化的互動中的一些概念
選擇 標記區域以檢視其特徵或變化 通常是一些計算或操作的後續步驟。常見操作 滑鼠 懸停 刷選 框選 取決於操作成本 探索 目標 尋找某種清晰圖案 方法 調節繪製 視角位置 大小等引數 重配 通過顯示不同的排列提供不同的角度。提供多種合理的布局方式。改變編碼 顏色 大小 方向 位置 抽象 具體 顯示相...
文字資料視覺化中一些概念
詞云 詞云是乙個自動化的文字視覺化工具。詞云的特點 1 自動提取高頻詞 2 呈現高頻詞 3 字型大小體現單詞出現的次數。文字視覺化的重要意義 在於幫助使用者快速地完成大量文字閱讀和理解，並從中獲取重要的資訊。文字資料 比如 報紙 網頁等 應用場景 電子商務 社交計算 商業智慧型 使用者體驗 分析 公...
Python資料視覺化（一）
import matplotlib.pyplot as plt 將pyplot 改名為 plt x 1,2,3,4,5,6,7,8,9,10,11,12,13 y 2,3,3,4,5,6,7,8,9,10,11,12,13 plt.scatter x,y plt.show 執行結果如下圖 impor...