12個幫助實現超棒數據可視化效果的Javascript框架

jopen 10年前發布 | 64K 次閱讀 圖表/報表制作 JavaScript

Dygraphs.js

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

  • Dygraphs.js Resize演示
  • </ul>

    • Dygraph.js Options文檔
    • </ul>
      D3.js

      最后成為了Protovis.js的繼承者,D3能夠幫助你通過動態更新DOM來創建令人贊嘆的圖形。D3.js使用鏈式方法來創建可視化,并且代碼可重用。因為基于DOM,D3支持w3c 的web標準,所以能夠正確的在web瀏覽器中正確的渲染。最后,D3的路徑生成方法(d3.svg.line()),給予了開發人員通過定義不同路徑和屬性來創建實用SVG的方法

      • WimbledonInteractive Circle SVG
      • </ul>

        • D3.js文檔
        • </ul>
          InfoVis

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

          • PresidentObama Budget TreeMap
          • </ul>

            • InfoVis文檔
            • </ul>
              The Google Visualization API

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

              • GDCVisualization API Documentation
              • </ul>

                • Visualization API – GoogleSpreadsheet – Google Earth API
                • </ul>
                  Springy.js

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

                  • Springy.jsNode-Drag Demo
                  • </ul>

                    • Springy.js GitHub Repo
                    • </ul>
                      Polymaps.js

                      使用SVG來生成互動的web地圖,并且兼容瀏覽器。核心是矢量的片段,幫助確保加載速度和縮放功能。雖然可能需要配置組件,Polymaps很容備定制,能夠處理數據為矢量幾何,GeoJSONFiles及其其它。

                      • Census Borough UnemploymentMap
                      • </ul>

                        • Polymaps.js文檔 Documentation
                        • </ul>
                          Dimple

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

                          • DimpleAPI演示
                          • </ul>

                            • Dimple API文檔
                            • </ul>
                              Sigma.js

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

                              • Sigma.js翻轉效果
                              • </ul>

                                • Sigma.js文檔
                                • </ul>
                                  Raphael.js

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

                                  • Raphael.js餅圖演示
                                  • </ul>

                                    • Raphael.js文檔
                                    • </ul>
                                      gRapha?l

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

                                      • gRaphael.js直線圖效果
                                      • </ul>

                                        • gRaphael.js文檔
                                        • </ul>
                                          Leaflet

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

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!