12 JavaScript Libraries for Data Visualization

Thomas Greco
Tweet

Regardless of the industry, businesses throughout the world are relying more and more on data, specifically when in very large groups, to make assumptions about both the past and future. In addition to being collected, this data often must be converted into effective diagrams that highlight any and all necessary findings: a task that the JavaScript language has proven itself fully capable of completing. In turn, a much heavier focus is currently being placed on JavaScript as a data visualization tool; therefore, I compiled the following list of twelve JavaScript frameworks that can be extremely useful for data visualization.

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.

Conclusion

And thus concludes the list of twelve effective JavaScript libraries for data visualization. As I mentioned earlier in the article, the need for interactive data models is becoming increasingly large as the days pass, and the current trend of big-data shows that it will be for some time. Therefore, becoming familiar with the libraries above is definitely something that could be helpful to one’s career.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.designingsean.com Sean Ryan

    Any reason Highcharts was left off the list? I am a big fan, but want to make sure the omission was something innocuous, and not some bad experience you have had with the library.

    • gapipro

      I was asking myself the same thing. Where is Highcharts library?

    • tgreco

      @designingsean:disqus There were so many too choose from that highcarts got left out; it was not done on purpose. Having said that, the number of js data visualization libraries is already large and it’s rapidly expanding so do not be surprised if there is another installation to this!

      • http://www.designingsean.com Sean Ryan

        Cool, thanks for the reply. Good to know its exclusion was not due to any bad experiences.

  • Timothy Solomon

    Some pics would be nice :/

  • Jeff

    Great post.

    You may want to add ShieldUI to the list. They have a very powerfull dataviz suite.

    Cheers,
    Jeff

    • Logan

      Nice job spamming and putting in multiple plugs for your website.

  • Logan

    Nice job spamming and putting in multiple plugs for your website.

  • Mohd. Mahabubul ALam

    12 JavaScript Libraries for Data Visualization

    12 JavaScript Libraries for Data Visualization by Thomas Greco.

    Thomas gives quick summaries and links for:

    Dygraphs.js

    D3.js

    InfoVis

    The Google Visualization API

    Springy.js

    Polymaps.js

    Dimple

    Sigma.js

    Raphael.js

    gRaphëaut;l

    Leaflet

    Ember Charts

  • http://tacitoyexplicito.wordpress.com/ Luis Alfonso Noguera

    excellent article and compilation tools