Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
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.
How to start?
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>
<div>element to the page which should be turned to a IDD plot; add the attribute
<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;">
InteractiveDataDisplay.asPlot()function with the
<div>passed as a parameter (either its id or DOM element) after the document is loaded:
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...
There is also Interactive Data Display for WPF.