Four Javascript Libraries for Dynamic Charts and Interactive Data 2011

A number of maturing JavaScript libraries now allow web developers and designers to create beautiful new visualizations quickly and easily.  With the approach of an HTML5 internet, we can expect these types of tools and their level of interactivity to continue to improve.  Today we are highlighting a few of the best JavaScript libraries available for quickly creating a nice balance between aesthetics and accessible info.

D3.js

The makers of D3.js (previously Protovis) have created an elegant library enabling the developer to bind data to a Document Object Model, and then apply data-driven transformations.  This type of functionality that will become native with HTML5 and the Canvas object and D3.js is poised for the transition with this powerful set of libraries.

D3 Choropleth:

D3 TreeMap:

JavaScript InfoVis Toolkit

Equally compelling and comparible to D3.js is the InfoVis Toolkit.  Created by Nicolas Garcia Belmonte, InfoVis is standards based, fast, beautiful and interactive.  Similarly to D3.js, InfoVis allows you to create a canvas and bind data as objects while providing a powerful library for interactivity.

InfoVis Pie Chart:

InfoVis SunBurst:

InfoVis TreeMap:

HighCharts

Highcharts is a charting library written in pure JavaScript.  Straightforward and intuitive, they currently support line, spline, area, areaspline, column, bar, pie and scatter chart types.  They are perfect for traditional chart types that seamlessly integrating interactive and real time features.  HighCharts has a sister library especially for stock market data called HighStock.

Ajax loaded data with clickable points. If you are familiar with Google Analytics Charts, you will recognize this one. 

HighCharts Pie Chart:

HighCharts Combo Chart:

Dygraphs

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.

Comparing two datasets:

U2MRWT3FRYX6

This entry was posted in Code Libraries and tagged , . Bookmark the permalink.

Leave a Reply