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
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>
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="src/jvenn.min.js">jvenn.min.js</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
70
71
72
				  	</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">
73
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
74
  $('#example').jvenn({
75
76
77
78
79
80
81
82
    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
83
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
84
85
86
87
88
89
90
91
				</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">
92
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
93
  $('#example').jvenn({
Jerome Mariette's avatar
Jerome Mariette committed
94
95
96
97
98
99
100
101
    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
102
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
103
104
					<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
105
					<pre class="prettyprint linenums">
106
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
107
  $('#example').jvenn({
108
    series: [{
Jerome Mariette's avatar
Jerome Mariette committed
109
110
111
112
113
    	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}
    }],
114
  });
Philippe Bardou's avatar
Philippe Bardou committed
115
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
116
117
					<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
    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
130
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
131
132
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
133
				<section id="displayMode">
Jerome Mariette's avatar
Jerome Mariette committed
134
					<div class="page-header">
Jerome Mariette's avatar
Jerome Mariette committed
135
				    	<h1>displayMode</h1>
Jerome Mariette's avatar
Jerome Mariette committed
136
137
138
139
140
					</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
141
  $('#example').jvenn({
Jerome Mariette's avatar
Jerome Mariette committed
142
143
    displayMode: 'edwards'
  });
Philippe Bardou's avatar
Philippe Bardou committed
144
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
145
146
147
148
149
150
				</section>

				<section id="displayStat">
					<div class="page-header">
				    	<h1>displayStat</h1>
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
151
				  	<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
152
153
154
155
156
157
158
				  	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
159
  });
Philippe Bardou's avatar
Philippe Bardou committed
160
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
161
162
				</section>
				
163
164
165
166
				<section id="displaySwitch">
					<div class="page-header">
				    	<h1>displaySwitch</h1>
					</div>
Jerome Mariette's avatar
Jerome Mariette committed
167
				  	<p>The default value is true to display a switch button panel, if more than 3 lists are provided.</p>
168
169
170
171
172
173
174
175
				  	<pre class="prettyprint linenums">
$(document).ready(function(){
  $('#example').jvenn({
    displaySwitch: false
  });
});</pre>
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
176
177
178
179
180
181
				<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">
182
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
183
  $('#example').jvenn({
184
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
    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
211
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
212
213
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
214
215
216
217
				<section id="colors">
					<div class="page-header">
				    	<h1>colors</h1>
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
218
				  	<p>Jvenn comes with some default colors, you can change them to the ones you want.</p>
Jerome Mariette's avatar
Jerome Mariette committed
219
220
221
222
223
				  	<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
224
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
});</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
251
252
253
254
255
256
257
258
259
260
261
262
263
				</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
264
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
265
266
				</section>
				
Jerome Mariette's avatar
Jerome Mariette committed
267
268
269
270
271
272
				<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">
273
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
274
  $('#example').jvenn({
275
276
277
278
279
280
281
282
283
    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
284
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
285
286
287
288
289
290
291
292
				</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">
293
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
294
  $('#example').jvenn({
295
296
297
298
299
300
301
    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
302
});</pre>
Jerome Mariette's avatar
Jerome Mariette committed
303
304
305
306
307
308
309
310
				</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">
311
$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
312
  $('#example').jvenn({
313
314
315
316
317
318
319
    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
320
});</pre>
Philippe Bardou's avatar
Philippe Bardou committed
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
				</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
346
});</pre>
Philippe Bardou's avatar
Philippe Bardou committed
347
				</section>
Jerome Mariette's avatar
Jerome Mariette committed
348
349
350
351
		  	</div>
		</div>
		
		<hr>
Philippe Bardou's avatar
Philippe Bardou committed
352
		<footer style="text-align: center;">
Philippe Bardou's avatar
Philippe Bardou committed
353
			<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
354
355
356
			   <a href="http://sigenae.org" target="_blank">Sigenae</a> teams.
			</p>
	    </footer>
Jerome Mariette's avatar
Jerome Mariette committed
357
358
359
360
361
362
363
364
365
	</div>
	<script>
     	!function ($) {
     		$(function(){
				window.prettyPrint && prettyPrint()   
			})
		}(window.jQuery)
	</script>
</body>
366
</html>