作者：小天
大家好，我是小天，從事於一家金融類公司，負責前端架構與大資料視覺化相關工作。本篇文章與大家簡單聊一下前端與資料視覺化。
相信從事前端開發人員還是對於html,css,javascript,Browser等等有一定認識瞭解的。但是瞭解的程度如何呢? 知道含義?簡單/熟練使用?深入研究?
請大家試著回答我下面幾個問題:
- 頁面編寫是否更多還停留在 div 套 div ?樣式編寫更多還是寬，高，定位？
- JavaScript 是否深入瞭解過? javascript 為什麼是單執行緒呢?(設計初衷?受限原因?)
- JavaScript 在 Browser (瀏覽器)中如何執行的? 如何編譯的？( 預編譯?即時編譯? )
- 在前端領域內自己是否有專注的一個方向?或者說是找工作的殺手鐗?
試著解答過後或許結果並不是那麼理想，結果如何沒有太大關係，個人認為有問題不可怕,及時發現問題就是好的結果。對於每個人來說都不是萬能的,是需要時刻學習,時刻進步的。
首先這邊 1,2,3 點本篇不展開講解,網上資料很多可以自行解決有相關具體疑惑地方的話可以留言, (主要前面都是鋪墊- -，)，我們們直接進入今天的重點，前端領域大家是否有選擇一個方向進行深入研究(或者說是找工作的殺手鐗)？
這道問題的答案個人覺得深度比廣度更容易體現價值。如果因為某些意外大家還沒有確定選擇方向(那是最好的,哈哈我的機會來了)那麼可以認真往下看,說不準本門課程會激發了你的鬥志,繼而選擇了之後深耕的領域,成為領域專家,成為找工作的一個殺手鐗。
什麼是資料視覺化
資料視覺化是將資料轉化成為互動的圖形或影像等，以視覺感受的方式表達，增強人的認知能力，達到發現、解釋、分析、探索、決策和學習。
資料視覺化主要旨在藉助於圖形化⼿段，清晰有效地傳達與溝通訊息。
前端中資料視覺化
首先日常開發中越來越多的視覺化需求,例如靜態類圖表如:柱狀圖,折線圖;互動式圖表如:網路分析圖,智慧社群等等。很多大廠進行了崗位劃分,視覺化工程師逐漸分離出來(越來越多的重視，導致很多公司投入專門團隊研發視覺化方向。。。所以前景是一片希望，光明。) 但是從實際出發更多的人研發是通過現成的視覺化庫去實現自己的需求,這邊舉幾個例子:
- D3.js
- echarts.js
- three.js
- Chart.js
- cytoscape.js
- sigma.js
- AntV(G2 G6等)
- Go.js
- …其他
首先說明本人這邊所舉框架都是各有優勢,例舉無排名先後哈,有幸這些技術本人或多或少都有相關技術調研及使用。還是要從業務需求業務場景來考慮到底使用哪一種視覺化庫。比如D3.js有豐富的動畫,互動式圖表(事件),圖演算法;echarts.js 豐富的圖表型別,絢麗的特效,支援多渲染引擎等等。
最後說一下本人的一點看法,市面上的視覺化庫架構設計出發角度更多是抽象化的功能,滿足大眾化的需求。個人認為好的視覺化一定要有”靈魂”,它應該通過視覺化完備互動,探索式分析的方式以及背後強大的算力能幫助使用者更快更準提取有效價值；如何更好體現業務價值,從互動 演算法底層是需要深入研究,自研往往是必經之路。(P:自研此處指並非完全從零實現一個視覺化庫,可以在現有庫基礎進行擴充加入業務定製化，比如業務型演算法)
如何深入視覺化
先來了解一下視覺化基礎技術架構,基礎包含需要:
- 渲染層負責視覺化圖形影像生成相關 API 研發,比如:繪製圓,三角形等
- 演算法層負責視覺化圖形影像生成相關演算法,比如:佈局演算法 繪製元素座標計算如何分佈等
- 資料層負責資料相關操作,比如:資料增刪改查以及資料與檢視進行一致性保證等
- 其他層例如通訊層 工具層等
其次大家都知道很多框架渲染引擎內部是canvas / svg / webgl 實現的,內部到底如何實現? 那麼接下來對於渲染層拿canvas舉例進行探討:
比方說實現上方這個視覺化圖表效果,從canvas繪製層來說,需要提供倆個繪製 API :
- 繪製圓形元素
- 繪製連線元素
在開始繪製之前
繪製圓形
繪製曲線
以上就是所需要提供的繪製層 API ,後續需要結合演算法層比如通過 layout (佈局演算法)計算節點分佈座標計算、通過節點出入度和業務規則計算節點大小等進行繪製渲染,就可以實現上面美觀的視覺化。
最後
是不是很有意思呢?
如果想了解學習更多可以看我最新錄製的課程
課程連結：https://ke.sifou.com/course/1...
課程大綱介紹：
為什麼要學這門課？
- 前端新機遇：大資料視覺化
- 前端開發中的圖形學
基礎篇：畫素級操作大師 Canvas
- 重新認識Canvas
- Canvas的優勢及特性詳解
- Canvas形狀繪製：文字&樣式&圖片
- Canvas動效設計與實現
- Canvas使用者互動設計與實現
進階篇：從零研發關係視覺化元件
- 視覺化元件架構設計
- 編寫關係類繪製元件
- 編寫關係類演算法(FR)
實戰篇：熱門視覺化庫實戰
- d3 入門
- d3 實戰：tree 層級圖
- d3 實戰：bar 圖表
- echarts 入門
- echarts 實戰：sankey 圖
實戰篇：研發關係視覺化分析平臺
- 架構設計說明
- 資料採集清洗
- 訊息機制學習
- 事件互動學習
- 專案程式碼實現