根據下面各個框架本身的特性，以及各自的優缺點，推薦使用D3或者ECharts作為資料視覺化的首選框架，某些小特性可以輔用其他小框架實現。具體每個框架的說明和分析如下：

D3.js

D3是指資料驅動文件(Data-Driven Documents)。D3.js是一個JavaScript庫，它可以通過資料來操作文件。D3可以通過使用HTML、SVG和CSS把資料鮮活形象地展現出來。D3嚴格遵循Web標準，因而可以讓你的程式輕鬆相容現代主流瀏覽器並避免對特定框架的依賴。同時，它提供了強大的視覺化元件，可以讓使用者以資料驅動的方式去操作DOM。

D3允許開發者將任意資料繫結在文件物件模型（DOM）之上，然後再應用資料驅動轉換到文件中。例如，你可以使用D3從一個數組生成一個HTML表格。或者使用同樣的資料來建立一個帶有平滑過渡和互動功能的互動式SVG柱狀圖。

D3並非一個旨在涵蓋所有功能特徵的整體框架，相反，D3解決的問題核心是：基於資料的高效文件操作。這避免了局限的資料展現，提供了非凡的靈活性，體現出諸如CSS3，HTML5和SVG等Web標準的全部功能。使用最小的開銷，D3的速度非常快，支援大型資料集以及互動與動畫的動態行為。D3的函式風格允許通過各種元件和外掛的形式進行程式碼的重用。

官網和學習資料

https://github.com/mbostock/d3/wiki/Gallery
http://www.ourd3js.com/

示例

點評

d3js是所有列出來的這些框架裡面資料視覺化展示功能最強大的，尤其適合大資料量的展示和互動式動態效果的渲染。是一個很強大的框架，網上的資料也比較多，但是因為強大，上手相對於其他框架比較困難。在github上有原始碼和api手冊，尤其是有中文文件和中文學習網站。

Bonsaijs

一個輕量級的免費開源的javascript圖形庫，可以方便地建立圖形很動畫。這個類庫使用SVG作為輸出方式來生成圖形和動畫效果，擁有非常完整的圖形處理API，可以使得你更加方便的處理圖形效果。

有下面的一些特性：

• 設計上分開了選擇和執行器

• 可以使用iFrame， Worker和Node來執行

• 支援路徑

• 支援不同的資源（視訊，圖片，字型和小電影）

• 基於Keyframe和時間的動畫 （擁有easing功能）

• 變形路線（Path morphing）

官網

http://bonsaijs.org/

示例

點評

圖形api的介面js,理論上應該能實現很多效果。根據官網demo中的效果來看，pie Chart和Blobs效果還是很不錯的，尤其Blobs做得很炫。 並不完全建議用此框架來實現資料視覺化，但是可以作為一個有力的補充框架。

另外，網站上文件比較全面，寫得也很易懂，易用性比較強，上手容易。

Gephi

Gephi是一款開源免費跨平臺基於JVM的複雜網路分析軟體, 其主要用於各種網路和複雜系統，動態和分層圖的互動視覺化與探測開源工具。可用作：探索性資料分析，連結分析，社交網路分析，生物網路分析等。

Gephi是一款資訊資料視覺化利器

Gephi可以供大學研究專案資料分析使用，新聞工作者，統計研究，微博資訊研究等。

Gephi是在Netbeans平臺上開發，語言是JAVA，並且使用OpenGL作為它的視覺化引擎。依賴於它的APIs，開發者可以編寫自己感興趣的外掛，建立新的功能。

開發者對它寄予的希望是：成為 “資料視覺化領域的Photoshop” 。

教程

https://www.udemy.com/gephi/
https://gephi.org

###示例

點評

看著也是很酷的一個工具，能實現一些很炫的效果，但是粗略看了一下，並不是一個前端工具，好像也是需要另外的後端支援的。可能並不適合用於頁面開發，但是毋庸置疑是一個好的視覺化工具。

網上資料很多，有比較多的教程。

arborjs

Arbor.js是一個利用web workers和jQuery建立的資料圖形視覺化JavaScript框架。它為圖形組織和螢幕重新整理處理提供了一個高效、力導向佈局演算法。這個框架並沒有強制使用哪一種方法來繪製螢幕，你可以使用Canvas、SVG、甚至是HTML的位置元素。

官網

arborjs.org

示例

點評

上面的一張圖很具有代表性，這樣的網狀圖是arborjs擅長的，實際操作了一下效能也是可以接受的，看了一下基本上這個js框架的示例都是上面這樣的網狀圖。對其他的餅狀圖或者更復雜的影象可能並不擅長。

Raw

Raw不是一個js的框架，而是基於d3的一個線上工具，通過直接在網站上匯入資料，選擇一種資料呈現方式，即可視覺化地呈現資料。最終的效果可以用png影象格式下載或者生成svg原始碼嵌入到頁面中。

官網

http://raw.densitydesign.org/
https://github.com/densitydesign/raw/wiki/Developer-Guide

示例

點評

並不是一個頁面框架，也是一個工具，因為能快速生成效果圖，可以用來作為一個原型工具使用，而且能直接生成可以嵌入頁面中的svg程式碼，在一些場景下也是有用的。

簡單易用，但是網上資料並不很多

Springy

Springy是一個可拖拽的有向圖演算法javascript框架，很小巧，功能也簡單單一。

官網

http://getspringy.com/#getting-started

示例

點評

功能簡單，並不能作為一個完整的框架來實現功能，但是因為易於上手，而且框架本身也有特點(基於物理法則佈局，還沒有搞太明白)。可以作為其他框架的補充，還是很不錯的。

HighCharts

Highcharts 是一個用純JavaScript編寫的一個圖表庫， 能夠很簡單便捷的在web網站或是web應用程式新增有互動性的圖表，並且免費提供給個人學習、個人網站和非商業用途使用。HighCharts支援的圖表型別有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。

官網

http://www.hcharts.cn/

示例

點評

商業用途需要授權，有大量的圖形模板可以參考，基本上能涵蓋常用的曲線圖等圖表，但是對於資料之間的聯絡和互動式的展示上不如d3這些專用的資料視覺化框架。教程和資料較多，如果夠用的前提下，可能highcharts更能好上手，用起來更方便一些。

ECharts

ECharts，一個純 Javascript 的圖表庫，可以流暢的執行在 PC 和移動裝置上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。

ECharts 3 中更是加入了更多豐富的互動功能以及更多的視覺化效果，並且對移動端做了深度的優化。

ECharts 提供了常規的折線圖，柱狀圖，散點圖，餅圖，K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖，用於關係資料視覺化的關係圖，treemap，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。

官網

http://echarts.baidu.com/index.html
https://github.com/ecomfe/echarts

示例

點評

ECharts是百度團隊開源的JS框架，只要加上版權申明之後可以免費使用。從效果看，比HighCharts要炫一些，支援各種圖示，對大資料需要用到的關係圖支援的也比較好。不過ECharts本身也不是專用於資料視覺化的，專業性可能不如D3這樣的框架，需要評估