documentation.html 11.8 KB
Newer Older
1
<!DOCTYPE html>
Jerome Mariette's avatar
Jerome Mariette committed
2 3 4 5 6
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">

Jerome Mariette's avatar
Jerome Mariette committed
7
	<title>jvenn</title>
8
	<!-- Les styles -->
Jerome Mariette's avatar
Jerome Mariette committed
9
	<link href="css/bootstrap.css" rel="stylesheet" media="screen">
Jerome Mariette's avatar
Jerome Mariette committed
10
	<link href="css/docs.css" rel="stylesheet" media="screen">
Jerome Mariette's avatar
Jerome Mariette committed
11 12 13 14 15
	<link href="css/prettify.css" rel="stylesheet" media="screen">
	<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/prettify.js"></script>
Jerome Mariette's avatar
Jerome Mariette committed
16
</head>
17
<body data-spy="scroll" data-target=".bs-docs-sidebar">
Jerome Mariette's avatar
Jerome Mariette committed
18 19 20 21 22 23 24 25
	<div class="navbar navbar-inverse navbar-fixed-top">
      	<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
Jerome Mariette's avatar
Jerome Mariette committed
26
				<a class="brand" href="./index.html">jvenn</a>
Jerome Mariette's avatar
Jerome Mariette committed
27 28 29
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li><a href="./index.html">About</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
30
						<li><a href="./example.html">Example</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
31 32
						<li class="active"><a href="./documentation.html">Plugin documentation</a></li>
						<li><a href="./usermanual.html">User manual</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
33 34 35 36 37 38 39 40 41
						<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">Sources</a></li>
						<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
42 43
			<div class="span3 bs-docs-sidebar">
				<ul class="nav nav-list bs-docs-sidenav affix">
Jerome Mariette's avatar
Jerome Mariette committed
44 45
					<li class="active"><a href="#plugin-insertion"><i class="icon-chevron-right"></i> plugin insertion</a></li>
					<li><a href="#series"><i class="icon-chevron-right"></i> series</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
46 47
					<li><a href="#displayMode"><i class="icon-chevron-right"></i> displayMode</a></li>
					<li><a href="#displayStat"><i class="icon-chevron-right"></i> displayStat</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
48
					<li><a href="#fnClickCallback"><i class="icon-chevron-right"></i> fnClickCallback</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
49 50
					<li><a href="#colors"><i class="icon-chevron-right"></i> colors</a></li>
					<li><a href="#shortNumber"><i class="icon-chevron-right"></i> shortNumber</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
51 52 53
					<li><a href="#disableClick"><i class="icon-chevron-right"></i> disableClick</a></li>
					<li><a href="#useValues"><i class="icon-chevron-right"></i> useValues</a></li>
					<li><a href="#exporting"><i class="icon-chevron-right"></i> exporting</a></li>
Philippe Bardou's avatar
Philippe Bardou committed
54
					<li><a href="#search"><i class="icon-chevron-right"></i> search...</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
55
		    	</ul>
56
		  	</div>
Jerome Mariette's avatar
Jerome Mariette committed
57 58 59 60 61 62
		  	
		  	<div class="span9">
		  		<section id="plugin-insertion">
					<div class="page-header">
				    	<h1>Plugin insertion</h1>
					</div>
Jerome Mariette's avatar
Jerome Mariette committed
63
				  	<p>In order to use jvenn, you need to import within your web page: </p>
Jerome Mariette's avatar
Jerome Mariette committed
64
				  	<ul>
Jerome Mariette's avatar
Jerome Mariette committed
65
				  		<li><a href="http://jquery.com/">jQuery v1.6.x or higher</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
66
				  		<li><a href="src/jvenn.min.js">jvenn.min.js</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
67 68 69
				  	</ul>
				  	<p>Take a peek at the code below, a single function call to initialise the venn diagram is all it takes:</p> 
				  	<pre class="prettyprint linenums">
70
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
71
  $('#example').jvenn({
72 73 74 75 76 77 78 79 80
    series: [{
        name: 'Actors',
        data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
      }, {
        name: 'Singers',
        data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
      }]
  });
});
Jerome Mariette's avatar
Jerome Mariette committed
81 82 83 84 85 86 87 88 89
					</pre>
				</section>
				
		  		<section id="series">
					<div class="page-header">
				    	<h1>series: the data in json</h1>
					</div>
				  	<p>The serie can be a list of value, the plugin will then compute itself the intersections between lists.</p>
				  	<pre class="prettyprint linenums">
90
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
91
  $('#example').jvenn({
Jerome Mariette's avatar
Jerome Mariette committed
92 93 94 95 96 97 98 99
    series: [{
        name: 'Actors',
        data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
      }, {
        name: 'Singers',
        data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
      }]
  });
100
});
Jerome Mariette's avatar
Jerome Mariette committed
101
					</pre>
Jerome Mariette's avatar
Jerome Mariette committed
102 103
					<p> The serie can also define the number of occurence for each intersections and their values. If only the data are provided, 
					the values are computed. If only the values are provided the callback function is desactivated.</p>
Jerome Mariette's avatar
Jerome Mariette committed
104
					<pre class="prettyprint linenums">
105
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
106
  $('#example').jvenn({
107
    series: [{
Jerome Mariette's avatar
Jerome Mariette committed
108 109 110 111 112
    	name: {A: 'Actors',
               B: 'Singers'},
    	data: {A: ["Arnold Schwarzenegger", "Jack Nicholson", "Robert de Niro", "Harrison Ford"], B: ["Freddy Mercury", "Ricky Martin", "Celine Dion"], AB: ["Marilyn Monroe", "Barbra Streisand", "Dean Martin"]},
    	values: {A: 4, B: 3, AB: 3}
    }],
113 114
  });
});
Jerome Mariette's avatar
Jerome Mariette committed
115 116 117
					</pre>
					<p>Finaly, the serie can define the list values with the number of occurence for each value.</p>
					<pre class="prettyprint">
118
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
119
  $('#example').jvenn({
120 121 122 123 124 125 126 127 128 129 130
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
          values: [5, 15, 250, 20, 23]
       },{
          name: 'sample2',
          data: ["Otu1", "Otu5", "Otu6", "Otu7"],
          values: [234, 29, 239, 5]
       }]
  });
});
Jerome Mariette's avatar
Jerome Mariette committed
131 132 133
					</pre>
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
134
				<section id="displayMode">
Jerome Mariette's avatar
Jerome Mariette committed
135
					<div class="page-header">
Jerome Mariette's avatar
Jerome Mariette committed
136
				    	<h1>displayMode</h1>
Jerome Mariette's avatar
Jerome Mariette committed
137 138 139 140 141
					</div>
				  	<p>The default value is 'classic' to have a classical venn diagram to be displayed. If you want a Edwards-Venn diagram display,
				  	just set this option to 'edwards'. Available values for this parameters are: 'classic', 'edwards'.</p>
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
142
  $('#example').jvenn({
Jerome Mariette's avatar
Jerome Mariette committed
143 144 145 146 147 148 149 150 151 152
    displayMode: 'edwards'
  });
});
					</pre>
				</section>

				<section id="displayStat">
					<div class="page-header">
				    	<h1>displayStat</h1>
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
153
				  	<p>The default value is true to display some statistics based on input lists. The first chart represents the histogram of the 
Jerome Mariette's avatar
Jerome Mariette committed
154 155 156 157 158 159 160
				  	lists size, providing to the user a rapid view on its lists composition to verify the samples homogeneity. The second chart 
				  	displays the number of common and specific elements between lists. This feature allows to quickly get an insight on the 
				  	similarity of the data sets when comparing multiple Venn diagrams.</p>
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    displayStat: false
Jerome Mariette's avatar
Jerome Mariette committed
161 162 163 164 165
  });
});
					</pre>
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
166 167 168 169 170 171
				<section id="fnClickCallback">
					<div class="page-header">
				    	<h1>fnClickCallback</h1>
					</div>
				  	<p>The callback function to execute when the user click on a number. </p>
				  	<pre class="prettyprint linenums">
172
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
173
  $('#example').jvenn({
174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201
    series: [{
      name: {A: 'List 1',
                  B: 'List 2',
                  C: 'List 3',
                  D: 'List 4'},
      data: {A: 340, B: 562, C: 620, D: 592,
                AB: 639, AC: 456, AD: 257, BC: 915,
                BD: 354, CD: 143, ABC: 552, ABD: 578,
                ACD: 298, BCD: 613, ABCD: 148}
    }],
    fnClickCallback: function() {
      var value = "";
      if (this.listnames.length == 1) {
        value += "Elements only in ";
      } else {
        value += "Common elements in ";
      }
      for (name in this.listnames) {
         value += this.listnames[name] + " ";
      }
      value += ":\n";
      for (val in this.list) {
        value += this.list[val] + "\n";
      }
      alert(value);
    }
  });
});
Jerome Mariette's avatar
Jerome Mariette committed
202 203 204
					</pre>
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
				<section id="colors">
					<div class="page-header">
				    	<h1>colors</h1>
					</div>
				  	<p>jvenn comes with some default colors, you can change them to the ones you want.</p>
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    colors: ["rgb(0,102,0)","rgb(90,155,212)","rgb(241,90,96)","rgb(250,220,91)","rgb(255,117,0)","rgb(192,152,83)"]
  });
});
					</pre>
				</section>

				<section id="shortNumber">
					<div class="page-header">
				    	<h1>shortNumber</h1>
					</div>
				  	<p>Default is false, if set to true, when intersection counts are too big to be displayed, jvenn will
				  	add a "?" instead of the value, which is accessible on the rollover action.</p>
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    shortNumber: true
  });
});
					</pre>
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
234 235 236 237 238 239
				<section id="disableClick">
					<div class="page-header">
				    	<h1>disableClick</h1>
					</div>
				  	<p>Default is false, if set to true, the click on the number si disabled.</p>
				  	<pre class="prettyprint linenums">
240
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
241
  $('#example').jvenn({
242 243 244 245 246 247 248 249 250 251
    series: [{
        name: 'Actors',
        data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
      }, {
        name: 'Singers',
        data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
      }],
      disableClick: true
  });
});
Jerome Mariette's avatar
Jerome Mariette committed
252 253 254 255 256 257 258 259 260
					</pre>
				</section>
				
				<section id="useValues">
					<div class="page-header">
				    	<h1>useValues</h1>
					</div>
				  	<p>Default is false, if set to true, the values provided in a mixte serie will be considered as the number of occurence of the element.</p>
				  	<pre class="prettyprint linenums">
261
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
262
  $('#example').jvenn({
263 264 265 266 267 268 269 270
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
          values: [5, 15, 250, 20, 23, 58, 89]
       }],
      useValues: true
  });
});
Jerome Mariette's avatar
Jerome Mariette committed
271 272 273 274 275 276 277 278 279
					</pre>
				</section>
				
				<section id="exporting">
					<div class="page-header">
				    	<h1>exporting</h1>
					</div>
				  	<p>Default is true, an export module is added to the window, if set to false the export module is disabled.</p>
				  	<pre class="prettyprint linenums">
280
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
281
  $('#example').jvenn({
282 283 284 285 286 287 288 289
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
          values: [5, 15, 250, 20, 23, 58, 89]
       }],
      exporting: false
  });
});
Jerome Mariette's avatar
Jerome Mariette committed
290
					</pre>
Philippe Bardou's avatar
Philippe Bardou committed
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318
				</section>
				
				<section id="search">
					<div class="page-header">
				    	<h1>search...</h1>
					</div>
				  	<p>Three parameters to manage a search field:
				  	<ul>
				  		<li>searchInput: a jquery object (an html input element), default value is null for no search feature</li>
				  		<li>searchStatus: a jquery object (a span type element) to display the search status</li>
				  		<li>searchMinSize: the minimum size of the input string to start the search.</li>
				  	</ul>
				  	</p>
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
          values: [5, 15, 250, 20, 23, 58, 89]
       }],
       searchInput:  $("#search-field"),
       searchStatus: $("#search-status"),
       searchMinSize: 1
  });
});
					</pre>
				</section>
Jerome Mariette's avatar
Jerome Mariette committed
319 320 321 322
		  	</div>
		</div>
		
		<hr>
Philippe Bardou's avatar
Philippe Bardou committed
323
		<footer style="text-align: center;">
Philippe Bardou's avatar
Philippe Bardou committed
324
			<p>Copyright &copy; 2015, INRA | Designed by <a href="http://bioinfo.genotoul.fr" target="_blank">GenoToul Bioinfo</a> and
Philippe Bardou's avatar
Philippe Bardou committed
325 326 327
			   <a href="http://sigenae.org" target="_blank">Sigenae</a> teams.
			</p>
	    </footer>
Jerome Mariette's avatar
Jerome Mariette committed
328 329 330 331 332 333 334 335 336
	</div>
	<script>
     	!function ($) {
     		$(function(){
				window.prettyPrint && prettyPrint()   
			})
		}(window.jQuery)
	</script>
</body>
337
</html>