12 个用于数据可视化的JavaScript库
Dygraphs.js
The Dygraphs.js library allows developers to create interactive charts using the X and Y axis to display powerful diagrams. The more data being parsed, the higher the functionality of the graph. That being said, Dygraphs was built for these visualizations to contain a multitude of views. For example, Dygraphs.js makes it capable to analyze separate portions of a data-set, such as specific months, in addition to the timeframe in its entirety. Also, the Dygraphs.js library is compatible across all major web browsers, and can responds to touch sensitivity, making it a thoroughougly solid choice as a data visualization framework.
D3.js
Eventually becoming the successor to Protovis.js, D3 is capable of creating stunning graphics via dynamically updating the DOM. An acronym for Data-Driven Document, D3.js makes use of chained methods when scripting visualizations, subsequently creating dynamic code that is also reusable. Due to its reliance on the DOM, D3 has been created in accordance with W3C web standards so that the library may render correctly across web browsers. Lastly, D3′s path generator function, defined as d3.svg.line(), gives developers the capability to produce a handful of SVGs by defining different paths, and their properties.
InfoVis
Commonly referred to as InfoVis, the JavaScript InfoVis Toolkit (JIT) also earned its stripes as a JavaScript library for data visualization. Equipped with WebGL support, InfoVis has been trusted by names like Mozilla and AlJazeera, showing its solidarity as a visualization tool. Along with the D3 framework, InfoVis also makes use of chained methods to manipulate the DOM, making it a reliable library for developers of any skill set.
The Google Visualization API
Hailing from the Google Developers Console (GDC), Google’s Visualization API can be called with barely any code. In addition to easy DOM modification, this Google API makes it easy for its user to easily define custom modifier functions that can then be placed into custom groups. Furthermore, this interface’s usability, matched with its support from the GDC’s open source network, place it among the top of the list of data visualization tools.
Springy.js
Springy.js is a JavaScript library that relies on an algorithm to create force-directed graphs, resulting in nodes reacting in a spring-like manner on the web page. Although Springy.js comes configured with a predefined algorithm, options such as spring stiffness and damping can easily be passed as parameters. Springy.js was developed by Dennis Hotson as a library for developers to build off of – a fact that he makes clear.
Polymaps.js
Polymaps.js makes use of SVGs to generate interactive web maps with cross browser compatibility in mind. At the heart of Polymaps lies vector tiles, which help ensure both optimal load speeds and optimal zoom functionality. Although it may come configured with components, Polymaps.js is easily customized, and is able to read data in the form of vector geometry, GeoJSON Files, and more. Check out the graph below of the U.S. created by the U.S. Census borough.
Dimple
This past January, the Dimple API was developed so that analysts at Align-Alytics could develop strong data visualizations without having to possess much development knowledge. That being said, Dimple makes it easy for anyone, analyst or not, to develop stunning, three dimensional graphics without any real JavaScript training. Moreover, dimplejs.org displays several demonstrations, which can be easily manipulated by one’s personal data to render a graph with the same configuration, but different values. So, if you, or anyone you know is trying to segway into the depths of JavaScript, then these examples are perfect for beginners to vist and poke around.
Sigma.js
For people looking to build highly advanced line graphs, Sigma.js provides an unbelievable amount of interactive settings inside its library, and also within its plug-ins. Hailing a motto that states “Dedicated to Graph Drawing”, those developing using Sigma.js cannot help but feel like they have chosen a reliable library to work with. Moreover, Sigma’s developers encourage people to re-configure this library and create plug-ins, which has resulted in a large open-source network. Having said all that, I was extremely pleased with various aspects of Sigma, and it is among my favorite libraries for creating graphical representations in JavaScript.
Raphael.js
The Raphael.js library was created with an emphasis on browser compatibility. The framework follows the SVG W3C Recommendation, which is a set of standards that ensure images are completely scalable and without pixelation. In addition to the use of SVGs, Raphael.js even reverts to the Vector Model Language (VML) if rendered in Internet Explorer browsers prior to IE9. Although VML is very rarely used today, the support for it does a great job of showing the attention to detail that the Raphael.js team placed on this project when developing the library.
gRaphaël
Although Raphael.js is a library used to for the creation of SVGs, it was not built with a total focus on the representation of large datasets. In turn, the gRaphaël JavaScript library was created. Weighing in at a mere 10KB, gRaphaël.js has proven to be a worthy extension to Raphael.js. Although it may have not been developed behind things like a force-driven algorithm, nor does it come pre-configured with any physics properties, gRaphaël is still a well respected library for reasons ranging from its cross-compatible SVG structure, to its ease of use. As long as it coincides with the task at hand, I believe that gRaphaël.js should always be looked at as a viable resource to complete a project.
Leaflet
Whether developing for a smartphone, tablet, or desktop, the Leaflet JavaScript library has ranked atop the list of interactive mapping libraries for several reasons. Lead by the founder of MapBox, Vladimir Agafonkin, the Leaflets team of developers worked to create a library “designed with simplicity, performance, and usability in mind.” Along with Polymaps, Leaflet shares the ability to render SVG pattens via vector tiles, however only Leaflet has been developed to support Retina display. Furthermore, Leaflet can interpret various forms of data such as GeoJSON, making it perfect for a number of tasks.
Ember Charts
For those who already use the juggernaut that is Ember.js, the developers at Addepar Open Source have created a few add-on libraries to extend the Ember experience: Ember Table, Ember Widgets, and Ember Charts. A child of Ember.js and D3.js, Ember Charts utilizes the properties of flat-design. Although limited, the library does have a handful of options that deal with properties such as color and size, making it fairly simple to create impressive visualizations. Nonetheless, Ember’s presence in the front end could really help Ember Chart’s popularity in the future.