Popular open source JavaScript frameworks for data visualisation
Tags: dataviz, javascript
Published: 2020-03-09 09:10:04

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](https://github.com/d3/d3)_
_Homepage: [http://d3js.org](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](https://github.com/Leaflet/Leaflet)_
_Homepage: [http://leafletjs.com](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](https://github.com/danvk/dygraphs)_ 
_Homepage: [http://dygraphs.com](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/](https://github.com/processing-js/processing-js/)_
_Homepage: [http://processingjs.org](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/](https://github.com/DmitryBaranovskiy/raphael/)_
_Homepage: [http://dmitrybaranovskiy.github.io/raphael](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](https://github.com/vega/vega)_
_Homepage: [http://vega.github.io/vega](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](https://github.com/philogb/jit)_
_Homepage: [http://philogb.github.io/jit/](http://philogb.github.io/jit/index.html)_


## **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/](https://github.com/dhotson/springy/)_
_Homepage: [http://getspringy.com](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](https://github.com/simplegeo/polymaps)_
_Homepage: [http://polymaps.org](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](https://github.com/jacomyal/sigma.js)_
_Homepage: [http://sigmajs.org](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/](https://github.com/jqPlot/jqPlot/)_ 
_Homepage: [http://www.jqplot.com](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](https://github.com/flot/flot)_
_Homepage: [http://www.flotcharts.org](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](https://github.com/shutterstock/rickshaw)_
_Homepage: [https://dc-js.github.io/dc.js](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](https://github.com/shutterstock/rickshaw)_
_Homepage: [http://code.shutterstock.com/rickshaw](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](https://github.com/mozilla/metrics-graphics)_
_Homepage: [http://metricsgraphicsjs.org](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](https://github.com/chartjs/Chart.js)_
_Homepage: [http://www.chartjs.org](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](https://github.com/addepar/ember-charts)_
_Homepage: [http://opensource.addepar.com/ember-charts/](http://opensource.addepar.com/ember-charts/#/overview)_

## **Chartist.js**

Chartist.js it’s a lightweight library for creating customizable responsive charts.

_Github: [https://github.com/gionkunz/chartist-js](https://github.com/gionkunz/chartist-js)_
_Homepage: [http://gionkunz.github.io/chartist-js](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](https://twitter.com/SonalakeHQ/)