Interactive SVG Based Data Plotting Library For jQuery

The InteractiveDataDisplay JavaScript library allows to present complex data in interactive, customizable, SVG based charts with support for panning and zooming.

Dependencies:

• jQuery
• RxJS
• modernizr
• jQuery UI
• svg.js
• filesaver.js
• jQuery mousewheel plugin

Installation:

# NPM
$ npm install interactive-data-display

# Bower
$ bower install interactive-data-display

Basic usage:

1. Include the required JavaScript files on your html page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/rx.lite.min.js"></script>
<script src="/path/to/rx.jquery.min.js"></script>

2. Include the Interactive Data Display's JavaScript and CSS files:

<link rel="stylesheet" href="idd.css">
<script src="idd.min.js"></script>

3. Create a DIV container to place the chart.

<div id="chart" data-idd-plot="chart">
  ...
</div>

4. Prepare your data:

<div id="polyline" data-idd-plot="polyline" data-idd-style="stroke: rgb(89,150,255), thickness: 3">
  x y   
  0 0 
  3 6 
  7 8 
</div>

5. Plot your data as a simple line chart as this:

InteractiveDataDisplay.asPlot("demo");

---

This awesome jQuery plugin is developed by predictionmachines. For more Advanced Usages, please check the demo page or visit the official website.