Home

Overview

Interactive Data Display for JavaScript (or IDD for short) is a set of extensible JavaScript/HTML5 for adding interactive visualization of dynamic data to your web pages. It allows to create line plots, bubble charts, heat maps and other complex 2D plots. IDD integrates well with Bing Maps control to show data on a geographic map in latitude/longitude coordinates. Charts can be declared in HTML or created and operated programmatically.

Supported browsers

Interactive Data Display has cross-browser compatibility. Supported browsers are: Microsoft Internet Explorer 9 (with restrictions), Microsoft Internet Explorer 10/11, Edge, Google Chrome 23.0, Mozilla Firefox 16.0, Safari 5.1 and higher. If the heatmap plot is used in the Internet Explorer 9, it is replaced with the message that the plot is not supported by this browser. All other features are still available.

Interactive Data Display can be used in Windows Store applications and supports multitouch on Surface and iPad devices.

Also there are versions of Interactive Data Display for WPF and Silverlight as well.

How to start?

1. Get the IDD release scripts. See README file about how to get IDD using bower.

   To use IDD in a global namespace, add references to idd.css and idd.js files; for example:

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/interactive-data-display/1.5.0/idd.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 
   <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.lite.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/interactive-data-display/1.5.0/idd.js"></script> 

2. Add a <div> element to the page which should be turned to a IDD plot; add the attribute data-idd-plot to the <div> (see more details on the attribute in the section Plot, Figure and Chart) and set its width and height as follows:

   <div id="myplot" data-idd-plot="chart" style="width: 800px; height: 600px;">

3. Initialize the plot in JavaScript code by calling the InteractiveDataDisplay.asPlot() function with the <div> passed as a parameter (either its id or DOM element) after the document is loaded:

   InteractiveDataDisplay.asPlot(“myplot”);

Available Plots

Polyline plot dispays information as straight line segments connecting a series of data points. If a variable that determines the position on the vertical axis is uncertain, bands corresponding to the quantiles of the uncertain values are displayed instead of line segments. Read more...

Markers plot displays data as a collection of points, each having the value of one data series determining the position on the horizontal axis and the value of the other data series determining the position on the vertical axis. Also data series can be bound to marker size and color, and other appearance settings. Read more...

Heatmap plot displays a graphical representation of data where the individual values contained in a matrix are represented as colors. If the values are uncertain, it allows to see quantiles of each point and highlight regions with similar values. Read more...

Area plot dispays a colored band between two scalar grid functions. Read more...

Boundary line plot represents infinite horizontal or vertical line. Read more...

Other

There is also Interactive Data Display for WPF.

Frequent questions

See this separate page