Today’s enterprises collect more data than ever, but before they can be leveraged, these large data sets must be properly visualised and translated into meaningful and actionable insights. As JavaScript is becoming more and more popular in the area of data visualisation, we’ve compiled a list below of a few popular open source frameworks that can be useful.
D3.js
D3.js is probably the most popular library in the field. The powerful visualization framework helps to produce dynamic, interactive data visualisations of all kinds using the power of HTML5, SVG, and CSS3. D3 is a bit more of a lower-level library compared to other strictly charting solutions, so it requires more boilerplate code to get similar results. In turn it provides greater control over the final result. It’s also become the de facto standard language for data visualisation. Many charting libraries are built atop D3.
Github: https://github.com/d3/d3
Homepage: http://d3js.org
Leaflet
Leaflet is a great library for creating mobile-friendly interactive maps. Developers value leaflet for its simplicity, performance (weighs only 33 kB) and lots of plugins that are available.
Github: https://github.com/Leaflet/Leaflet
Homepage: http://leafletjs.com
Dygraphs.js
Dygraphs is a charting library that produces interactive, zoomable charts of time series. It allows users to explore and interpret dense data sets making it an excellent choice for financial data visualization.
Github: https://github.com/danvk/dygraphs
Homepage: http://dygraphs.com
Processing.js
Processing.js it’s not a visualisation library in a traditional sense. It’s a library that ports Processing visualization language to JavaScript, allowing code written in Processing language to be run by any HTML5 compatible browser.
Github: https://github.com/processing-js/processing-js/
Homepage: http://processingjs.org
Raphael.js
Raphael is a lightweight library created to simplify working with vector graphics on the web. What’s cool about Raphael is that it uses the SVG and VML as a base for creating graphics which means that every graphical object created is also a DOM object.
Github: https://github.com/DmitryBaranovskiy/raphael/
Homepage: http://dmitrybaranovskiy.github.io/raphael
VEGA
Vega it’s a framework for creating, saving, and sharing interactive visualization designs. Vega allows you to describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate views using HTML5 Canvas or SVG.
Github: https://github.com/vega/vega
Homepage: http://vega.github.io/vega
InfoVis
InfoVis Toolkit provides tools for creating Interactive Data Visualizations. InfoVis offers many advanced features including graph manipulation and editing, tree animations and others.
Github: https://github.com/philogb/jit
Homepage: http://philogb.github.io/jit/
Springy.js
Springy.js is a library that relies on an algorithm to create force-directed graphs, resulting in nodes reacting in a spring-like manner on the web page. In other words it allows for graph manipulation and calculates a graph’s layout to display it optimally on the page.
Github: https://github.com/dhotson/springy/
Homepage: http://getspringy.com
Polymaps.js
Polymaps is a library for making dynamic, interactive maps. It utilizes SVG to produce large-scale data overlays on interactive maps.
Github: https://github.com/simplegeo/polymaps
Homepage: http://polymaps.org
Sigma.js
Sigma is a library designed to help developers build highly advanced line graphs. Since it’s dedicated to graph drawing, sigma is a great tool for tasks such as network visualizations and dynamic network exploration.
Github: https://github.com/jacomyal/sigma.js
Homepage: http://sigmajs.org
jqPlot
jqPlot is a plotting and charting plugin for the jQuery. It was designed from the ground up to support plugins and most functionality of jqPlot is handled through plugins.
Github: https://github.com/jqPlot/jqPlot/
Homepage: http://www.jqplot.com
Flot
Flot is a plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
Github: https://github.com/flot/flot
Homepage: http://www.flotcharts.org
DC.js
It’s charting library allowing highly efficient exploration on large multi-dimensional dataset. Charts rendered using dc.js are highly interactive therefore providing instant feedback on user’s interaction.
Github: https://github.com/shutterstock/rickshaw
Homepage: https://dc-js.github.io/dc.js
Rickshaw
Rickshaw is a toolkit for creating interactive time series graphs. It provides all of the elements to create interactive graphs: renderers, legends, hovers, range selectors, etc.
Github: https://github.com/shutterstock/rickshaw
Homepage: http://code.shutterstock.com/rickshaw
MetricsGraphics.js
MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data.
Github: https://github.com/mozilla/metrics-graphics
Homepage: http://metricsgraphicsjs.org
Chart.js
Chart.js is a very light (minified version weighs only 11kb) charting library for creating responsive charts using HTML5 canvas element.
Github: https://github.com/chartjs/Chart.js
Homepage: http://www.chartjs.org
Ember Charts
It’s a charting library built with the Ember.js and d3.js frameworks. Although limited it includes time series, bar, pie, and scatter charts which are easy to extend and modify.
Github: https://github.com/addepar/ember-charts
Homepage: http://opensource.addepar.com/ember-charts/
Chartist.js
Chartist.js it’s a lightweight library for creating customizable responsive charts.
Github: https://github.com/gionkunz/chartist-js
Homepage: http://gionkunz.github.io/chartist-js
There are plenty more great JavaScript visualization tools and frameworks out there with new ones popping up almost every month. If you know any other open source framework hit us on twitter @SonalakeHQ
Top comments (1)
Nice overview, thank you so much!
We are working quite succesful with github.com/recharts/recharts