前端視覺化是一個比較大的方向，目前也有專門的視覺化工程師，前端視覺化其實主要基於兩種方式去實現，一種是html5新出的canvas，另一種是svg。

    在我看來，canvas更像自己用手畫上去的，它是一種點陣圖，在網頁中具有儲存的功能，另外缺點就是放大會失真，但是毫無疑問效能比svg要好，而svg更像html標籤一樣，另外我們用純div+css也可以做到視覺化，不過效能就更差了，svg是基於xml的一個個標籤，而這些標籤可以新增dom事件，同樣svg是一種向量圖，放大不會失真。

    所以一般都是基於canvas對網頁進行視覺化展示的，不過canvas與頁面元素互動效果並不好，畢竟不是dom元素，他需要測量canvas的座標的一定範圍確定位置，所以需要複雜的封裝才可以互動，就目前來說canvas更火一點！！

    介紹一下svg'和canvas的基本框架，canvas基本上都會採用echarts，相信大多數前端工作者或多或少都會接觸到echarts，可以說真的十分神奇，包含了一些基本的視覺化內容。圖表、柱狀圖、折線圖、熱力圖、地圖.......而svg基本的框架則是d3.js，不是很瞭解，不過聽說是視覺化方面的jq，可見是多麼的重要。

    而視覺化之所以可以獨立出來是因為它不只可以做基本的圖示互動，甚至還可以做h5遊戲，3D效果圖等。

    WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript繫結，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯示卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能建立複雜的導航和資料視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染外掛的麻煩，可被用於建立具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等等。

    這是一些介紹，主要的框架是three.js，這是一種很大的視覺化知識，就像小程式可以從前端當中分離出去一樣，視覺化也在漸漸的從前端分離出去，但是前端工程師也必須用到一些知識，個人認為會用上面其中一種就夠用了。