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="../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;">

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”);

Basic Definitions

A plot is an algorithm that maps data elements onto a set of graphic elements such as lines, markers or raster images using HTML5 <canvas>. Location, size, color and other visual properties of graphic elements can be bound to data or have some fixed values. For example, polyline plot transforms series of points (x, y) into a polyline with vertices coordinates equal to (x, y).

Each plot has a coordinate transform, a function that converts data values in plot coordinates to screen values in pixels. Coordinate transforms in IDD are orthogonal, i.e. x and y coordinates are transformed independently of each other.

Before coordinate transform is applied, sometimes it is necessary to convert data coordinates into plot coordinates (for instance, if we want logarithmic axis). For this purpose, there is a data transform that computes coordinates of data element on plot plane. Plot plane can be thought of as an abstract sheet of graph paper which size is limited only by representation of floating values. Domain of a given data transform is a possibly infinite segment on which the transformation functions are defined. Data transform can be non-linear and can consider some details about the nature of the data. If no data transform is used for a plot, then it equals to identity transformation. IDD supports two predefined data transforms: logarithmic and Mercator (available as InteractiveDataDisplay.logTransform and InteractiveDataDisplay.mercatorTransform). To create a custom data transform there is a method InteractiveDataDisplay.DataTransform(dataToPlot, plotToData, domain, type). Its constructor gets two functions: dataToPlot to convert data values to plot, plotToData to convert plot values to data, domain region (can be undefined than it is considered to be infinite) and type, the name of transform. Each plot transformation may consist of data and coordinate transforms.

Each plot transform has aspect ratio, a coefficient that shows the ratio of screen and plot sizes. If aspect ratio is equal to 1 the transformation is uniform by both axes. It is possible to fix aspect ratio, i.e. to guarantee that aspect ratio remains the same through all plot or screen transformations. The mode in which the invariability of aspect ratio is guaranteed is called auto fit mode. Auto fit mode is turned on by default, but any user actions (for example navigation) turns it off. Besides that the user can control auto fit by setting isAutoFitEnabled property. Auto fit rectangle is computed from plot bounding rectangle and screen padding.

Plot bounding rectangle is minimum rectangle in plot coordinates that contains all points of graphic elements produced by inner plots. Plot bounds computational algorithm is plot specific and if not defined than default rectangle [0, 1] x [0, 1] is visible.

Screen bounding rectangle of a plot is a minimum rectangle that contains all screen representations of graphic elements of inner plots. It adds screen padding to plot bounding rectangle. Default padding is 20 pixels. To change it reassign variable InteractiveDataDisplay.Padding.

In auto fit mode if data is changed dynamically auto fit rectangle changes so that all the data is always visible and aspect ratio remains the same. It is possible to show auto fit rectangle manually by performing fit-to-view (by mouse double-click if navigation is available or by calling InteractiveDataDisplay.Plot.fitToView() method).

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