documentation.html 13 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
						<li><a target="_blank" href="https://forgemia.inra.fr/genotoul-bioinfo/jvenn">Sources</a></li>
						<li><a href="mailto:support.bioinfo.genotoul@inra.fr">Contact</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
35 36 37 38 39 40 41
					</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>
48
					<li><a href="#displaySwitch"><i class="icon-chevron-right"></i> displaySwitch</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
49
					<li><a href="#fnClickCallback"><i class="icon-chevron-right"></i> fnClickCallback</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
50
					<li><a href="#colors"><i class="icon-chevron-right"></i> colors</a></li>
Philippe Bardou's avatar
Philippe Bardou committed
51 52
					<li><a href="#fontFamily"><i class="icon-chevron-right"></i> fontFamily</a></li>
					<li><a href="#fontSize"><i class="icon-chevron-right"></i> fontSize</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
53
					<li><a href="#shortNumber"><i class="icon-chevron-right"></i> shortNumber</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
54 55 56
					<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
57
					<li><a href="#search"><i class="icon-chevron-right"></i> search...</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
58
		    	</ul>
59
		  	</div>
Jerome Mariette's avatar
Jerome Mariette committed
60 61 62 63 64 65
		  	
		  	<div class="span9">
		  		<section id="plugin-insertion">
					<div class="page-header">
				    	<h1>Plugin insertion</h1>
					</div>
Jerome Mariette's avatar
Jerome Mariette committed
66
				  	<p>In order to use jvenn, you need to import within your web page: </p>
Jerome Mariette's avatar
Jerome Mariette committed
67
				  	<ul>
Jerome Mariette's avatar
Jerome Mariette committed
68
				  		<li><a href="http://jquery.com/">jQuery v1.6.x or higher</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
69
				  		<li><a href="js/canvas2svg.js">canvas2svg.js</a></li>
70
				  		<li><a href="js/jvenn.min.js">jvenn.min.js</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
71 72 73
				  	</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">
74
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
75
  $('#example').jvenn({
76 77 78 79 80 81 82 83
    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"]
      }]
  });
Philippe Bardou's avatar
Philippe Bardou committed
84
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
85 86 87 88 89 90 91 92
				</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">
93
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
94
  $('#example').jvenn({
Jerome Mariette's avatar
Jerome Mariette committed
95 96 97 98 99 100 101 102
    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"]
      }]
  });
Philippe Bardou's avatar
Philippe Bardou committed
103
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
104 105
					<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
106
					<pre class="prettyprint linenums">
107
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
108
  $('#example').jvenn({
109
    series: [{
Jerome Mariette's avatar
Jerome Mariette committed
110 111 112 113 114
    	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}
    }],
115
  });
Philippe Bardou's avatar
Philippe Bardou committed
116
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
117 118
					<p>Finaly, the serie can define the list values with the number of occurence for each value.</p>
					<pre class="prettyprint">
119
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
120
  $('#example').jvenn({
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]
       }]
  });
Philippe Bardou's avatar
Philippe Bardou committed
131
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
132 133
				</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
    displayMode: 'edwards'
  });
Philippe Bardou's avatar
Philippe Bardou committed
145
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
146 147 148 149 150 151
				</section>

				<section id="displayStat">
					<div class="page-header">
				    	<h1>displayStat</h1>
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
152
				  	<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
153 154 155 156 157 158 159
				  	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
160
  });
Philippe Bardou's avatar
Philippe Bardou committed
161
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
162 163
				</section>
				
164 165 166 167
				<section id="displaySwitch">
					<div class="page-header">
				    	<h1>displaySwitch</h1>
					</div>
168
				  	<p>The default value is true to display a switch button panel, if more than 3 lists are provided.</p>
169 170 171 172 173 174 175 176
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    displaySwitch: false
  });
});</pre>
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
177 178 179 180 181 182
				<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">
183
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
184
  $('#example').jvenn({
185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211
    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);
    }
  });
Philippe Bardou's avatar
Philippe Bardou committed
212
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
213 214
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
215 216 217 218
				<section id="colors">
					<div class="page-header">
				    	<h1>colors</h1>
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
219
				  	<p>Jvenn comes with some default colors, you can change them to the ones you want.</p>
Jerome Mariette's avatar
Jerome Mariette committed
220 221 222 223 224
				  	<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)"]
  });
Philippe Bardou's avatar
Philippe Bardou committed
225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251
});</pre>
				</section>

				<section id="fontFamily">
					<div class="page-header">
				    	<h1>fontFamily</h1>
					</div>
				  	<p>The jvenn default font family is Arial, you can change it using "fontFamily" parameter.</p>
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    fontFamily: "monospace"
  });
});</pre>
				</section>
				
				<section id="fontSize">
					<div class="page-header">
				    	<h1>fontSize</h1>
					</div>
				  	<p>The jvenn default font size is 12px, you can change it using "fontSize" parameter.</p>
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    fontSize: "11px"
  });
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
252 253 254 255 256 257 258 259 260 261 262 263 264
				</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
  });
Philippe Bardou's avatar
Philippe Bardou committed
265
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
266 267
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
268 269 270 271 272 273
				<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">
274
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
275
  $('#example').jvenn({
276 277 278 279 280 281 282 283 284
    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
  });
Philippe Bardou's avatar
Philippe Bardou committed
285
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
286 287 288 289 290 291 292 293
				</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">
294
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
295
  $('#example').jvenn({
296 297 298 299 300 301 302
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
          values: [5, 15, 250, 20, 23, 58, 89]
       }],
      useValues: true
  });
Philippe Bardou's avatar
Philippe Bardou committed
303
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
304 305 306 307 308 309 310 311
				</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">
312
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
313
  $('#example').jvenn({
314 315 316 317 318 319 320
    series: [{
          name: 'sample1',
          data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
          values: [5, 15, 250, 20, 23, 58, 89]
       }],
      exporting: false
  });
Philippe Bardou's avatar
Philippe Bardou committed
321
});</pre>
Philippe Bardou's avatar
Philippe Bardou committed
322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346
				</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
  });
Philippe Bardou's avatar
Philippe Bardou committed
347
});</pre>
Philippe Bardou's avatar
Philippe Bardou committed
348
				</section>
Jerome Mariette's avatar
Jerome Mariette committed
349 350 351 352
		  	</div>
		</div>
		
		<hr>
Philippe Bardou's avatar
Philippe Bardou committed
353
		<footer style="text-align: center;">
Philippe Bardou's avatar
Philippe Bardou committed
354
			<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
355 356 357
			   <a href="http://sigenae.org" target="_blank">Sigenae</a> teams.
			</p>
	    </footer>
Jerome Mariette's avatar
Jerome Mariette committed
358 359 360 361 362 363 364 365 366
	</div>
	<script>
     	!function ($) {
     		$(function(){
				window.prettyPrint && prettyPrint()   
			})
		}(window.jQuery)
	</script>
</body>
367
</html>