12個幫助實現超棒資料視覺化效果的Javascript框架

---

隨著商業及其相關需求的發展，資料成為越來越重要的元素之一，為了更加直觀和明顯的展示商業潛在的趨勢和內在的特性，我們需要使用圖表和圖形的方式來直觀動態的展示資料內在祕密，在今天的這篇文章中我們推薦12款最棒的資料視覺化的Javascript框架，希望能夠幫助大家在專案中更好的實現資料視覺化效果。

Dygraphs.js

Dygraphs是一款允許開發人員建立互動圖表的JS類庫。資料越多，圖表功能越強大。也就是說Dyrgaphs是基於視覺化來包含大量的檢視。可以分開的分析和展示資料不同部分，例如指定月份。同時這個類庫相容主要的瀏覽器，並且支援觸控，使得它成為一個完整健壯的視覺化框架.

• Dygraphs.js Resize演示

• Dygraph.js Options文件

D3.js

最後成為了Protovis.js的繼承者，D3能夠幫助你通過動態更新DOM來建立令人讚歎的圖形。D3.js使用鏈式方法來建立視覺化，並且程式碼可重用。因為基於DOM，D3支援w3c的web標準，所以能夠正確的在web瀏覽器中正確的渲染。最後，D3的路徑生成方法（d3.svg.line()），給予了開發人員通過定義不同路徑和屬性來建立實用SVG的方法

• WimbledonInteractive Circle SVG

• D3.js文件

InfoVis

infoVis是Javascript infovistoolkit(JIT)，同樣也提供了資料視覺化的功能。支援WebGL，infovis被很多的組織例如，Mozilla，Aljazeera認可。和D3框架配合，infovis也提供了鏈式方法來操作DOM，使得它也成為了一個非常可靠的JS類庫。

• PresidentObama Budget TreeMap

• InfoVis文件

The Google Visualization API

來自Google developers console(GDC)，google的視覺化API。除了非常容易使用的DOM修改，這個GoogleAPI使得定義定製的方法非常簡單。而且介面可用性，及其來自GDC的開源網路支援，使得它也成為了頂級的視覺化功能。

• GDCVisualization API Documentation

• Visualization API – GoogleSpreadsheet – Google Earth API

Springy.js

Spring.js是一個使用特定演算法來實現force-directedgraphs的Javascript類庫，在web頁面成類似噴泉樣式的節點。雖然它包含了預先定義的演算法，我們仍舊可以傳入一些引數例如，斜率及其減幅。Springy.js由DennisHotson開發。

• Springy.jsNode-Drag Demo

• Springy.js GitHub Repo

Polymaps.js

使用SVG來生成互動的web地圖，並且相容瀏覽器。核心是向量的片段，幫助確保載入速度和縮放功能。雖然可能需要配置元件，Polymaps很容備定製，能夠處理資料為向量幾何，GeoJSONFiles及其其它。

• Census Borough UnemploymentMap

• Polymaps.js文件 Documentation

Dimple

DimpleAPI可以幫助分析師不需要了解太多技術內容而開發強大的資料視覺化效果，簡單的說，Dimple是的任何人都能夠開發令人驚歎的三維圖形效果，不需要掌握任何的JS知識。而且dimplejs.org包含了幾個超棒的演示，可以很簡單的使用使用者自己資料來生成效果。如果你不希望瞭解太深入的JS效果的話，這些例子是你開始使用的必備工具

• DimpleAPI演示

• Dimple API文件

Sigma.js

如果你需要開發高階特性的線型圖，Sigma.js在它的類庫和外掛中提供了一個超棒的互動設定。使用Sigma.js感覺就想使用一個可靠地類庫。然而，Sigma鼓勵開發人員去重新的配置類庫建立外掛，這樣導致了大量的開源。Sigma讓人使用非常的舒服，是我個人比較喜歡的用來建立圖形效果的Javascript類庫

• Sigma.js翻轉效果

• Sigma.js文件

Raphael.js

Raphael.js類庫專注於瀏覽器的相容性。 這個框架遵循了SVGW3C推薦，使用一套標準來保證圖片完全縮放並且沒有畫素損失。除了使用SVG，Rapheal.js在IE9之前使用Vector ModelLanguage（VML）。雖然VML不在廣泛使用，這個支援使得Raphael.js擁有最好的相容性。

• Raphael.js餅圖演示

• Raphael.js文件

gRaphaël

雖然Raphael.js是一個用來建立SVG的類庫，它並不是用來處理大量資料集的。相反gRaphaë是用來處理這樣型別資料的。對於一個10KB資料，gRaphaël被證明是一個非常不錯的Raphael擴充套件。雖然它沒有使用forece-driven演算法來開發，也沒有包含任何物理屬性，gRaphaël仍舊是一個在跨SVG結構相容解決方案中非常值得尊重的類庫，而且使用簡單。只要對於專案來說它合適，就應該作為完整專案中的一個可行的資源來看待。

• gRaphael.js直線圖效果

• gRaphael.js文件

Leaflet

無論開發智慧手機，平板或者桌面，Leaflet的Javascript類庫絕對是一個互動類庫中排名比較高的。 以下是幾點原因：由MapBox的創世人VladimirAgafonkin所領導，整個團隊嘗試開發簡單，高效能，高使用者體驗的類庫。Leaflet通過vector tiles分享渲染SVG的能力。
然而，只有leaflet支援Retina顯示。而且能夠解析資料形式例如，GeoJSON。

• LeafletAPI Manhattan Geolocation

• Leaflet特性

Ember Charts

如果你使用Ember.js，那麼來自Addepar OpenSource的開發人員建立了一些附屬元件來擴充套件ember的體驗：
Ember table，EmberWidget和Ember圖表。它使用Ember.js和D3.js來實現，包含了扁平化設計屬性。包含了一系列的實用的選項，例如，顏色和尺寸，是的非常簡單實現一些令人印象深刻的視覺效果。

• Ember ChartsTime-Series Chart

• Ember Charts文件

總結

如果你也有一些沒有包含到此篇文章中的Javascript類庫，請給我們留言。目前的大資料趨勢使得資料視覺化成為未來大家所推崇的一種互動展示模式。如果你早一些瞭解或者掌握相信對於你未來將會非常有幫助！

via sitepoint.com