Visualize Your Data: 25 Javascript Visualization Libraries

Visualize Your Data: 25 Javascript Visualization Libraries


by Janeth Kent Date: 30-07-2013 javascript libraries free visualizations data graphics

Do you need to reformat data for use in another application? Use it for an interactive Web graphic?

With JavaScript visualization libraries, it is possible to turn data sets into great web based visual representations that customers and management will love.

To help you get started visualizing your data, we have collected 25 of the best JavaScript visualization solutions for your web projects.


1. sigmajs – MORE INFO


Sigmajs is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to display interactively static graphs exported from a graph visualization software and dynamically graphs that are generated on the fly.

2. morris.js – MORE INFO

3. D3.js – MORE INFO


D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

4. heatmap.js – MORE INFO

Heatmap.js is an open source JavaScript library that can be used for generating realtime heatmaps. It uses the power and flexibility of the HTML5 canvas element to draw heatmaps based on your data.

5. ico – MORE INFO

Ico (GitHub: alexyoung / ico, License: MIT) is a JavaScript graph library. Graphs are created by instantiated classes.

6. Envision.js – MORE INFO

Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations.

7. JavaScript Infovis Toolkit – MORE INFO


The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.

8. bonsaiJS – MORE INFO

A lightweight graphics library with an intuitive graphics API and an SVG renderer.

9. jQuery Sparklines – MORE INFO

ThisjQuery plugin generates small inline charts directly in the browser using data supplied either inline in the HTML, or via JavaScript. The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 & 10 as well as iOS and Android.

10. Bluff – MORE INFO

Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy of JS.Class (2.6kB gzipped) and a copy of Google’s ExCanvas to support canvas in Internet Explorer. Both these scripts are supplied with the Bluff download. Bluff itself is around 11kB gzipped.

11. jQuery.Gantt – MORE INFO

jQuery.Gantt lets you draw Gantt charts using the famous jQuery ease of development.

12. flotr2 – MORE INFO

A modern graphing library for Canvas written in JavaScript.


13. moochart – MORE INFO

moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

It was originally developed for an EU-Project on the Adobe AIR platform.

14. Rickshaw – MORE INFO

Rickshaw is a JavaScript toolkit for creating interactive time series graphs..

15. Simile Widget Timelines – MORE INFO

Timeline is a Web Widget for Visualizing Temporal Data. With this widget, you can make beautiful interactive timelines.

16. Milkchart – MORE INFO

MilkChart is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with MilkChart.

This library will generate a graph similar to Microsoft Excel.

17. Processing.js – MORE INFO


Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.

18. Vivagraph JS – MORE INFO

VivaGraphJS is a free graph drawing library for JavaScript. It is designed to be extensible and to support different rendering engines and layout algorithms. At the moment it supports rendering graphs using WebGL, SVG or CSS formats.

19. Raphaël JavaScript Library – MORE INFO


Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

20. Harry Plotter – MORE INFO

Harry is a lightweight standalone javascript library to plot data as charts, pies, lines or curves. requi8res browser supportimg canvass like Chrome,Firefox,Opera,Safari and IE9.

21. Protovis – MORE INFO


Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inhritance, scales and layouts to simplify construction.

Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example.

UPDATE: Protovis is no longer under active development.
The final release of Protovis was v3.3.1 (4.7 MB). The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis; for more details, please read the introduction and browse the examples.

22. JSXGraph – MORE INFO

JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG, VML, or canvas. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. No plug-ins are required! Special care has been taken to optimize the performance.

23. Toxiclibs.js – MORE INFO

Toxiclibs.js is an open source computational design library ported to JavaScript. It works with great Canvas, with SVG or any ordinary DOM element.

24. Keylines – MORE INFO


KeyLines is a JavaScript toolkit for visualizing networks.

It works in all major browsers, and on all platforms, including the iPad. It uses HTML5 but also works on old versions of Internet Explorer.

KeyLines is ideal for organizations who want to migrate from legacy Java, Flex or Silverlight apps to the new world of HTML5.

25. jQuery.qrcode – MORE INFO

jQuery.qrcode enables you to dynamically add QR codes to your website. Choose between rendering the code in a canvas or with divs. The latter will be fine even for older browser. The QR code will always be in the least possible type/resolution.

26. Chartjs – MORE INFO

Everything you need to know to create great looking charts using Chart.js.Easy, object oriented client side graphs for designers and developers

27. ChartJS.devexpress – MORE INFO

First of all, ChartJS is not Chartjs! Whether you are creating traditional websites, sites that target mobile devices, or native apps built with HTML5 JavaScript and compiled with Apache Cordova (PhoneGap), ChartJS provides high-performance and elegant data visualization options for all your business intelligence needs.

by Janeth Kent Date: 30-07-2013 javascript libraries free visualizations data graphics hits : 140380  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.


Related Posts

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

A FULFILLED PROMISE - Using the FETCH API to make AJAX calls

In this article we talked about what AJAX calls are and how to use them in a traditional way, by using the XMLHttpRequest (XHR) object. In short, thanks to AJAX…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

Javascript: what are callbacks and how to use them.

Today we are going to learn about a concept that is widely used in javascript and that is used quite a lot by today's frameworks, libraries, especially NodeJS. This is…

Data structures in Java - Linked Lists

With 2020 we are going to look at a new aspect of programming: data structures. It is often the case that everyone uses structures provided by the various programming languages.…

HTTP Cookies: how they work and how to use them

Today we are going to write about the way to store data in a browser, why websites use cookies and how they work in detail. Continue reading to find out how…

Data Scraping and Data Crawling, what are they for?

Right now we are in an era where big data has become very important. At this very moment, data is being collected from millions of individual users and companies. In…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration