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 a reference both to idd.css and idd.js files; for example:

<link rel="stylesheet" type="text/css" href="../src/css/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="scripts/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;">

Plots

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...