usermanual.html 8.15 KB
Newer Older
Jerome Mariette's avatar
Jerome Mariette committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>jvenn</title>
	<!-- Les styles -->
	<link href="css/bootstrap.css" rel="stylesheet" media="screen">
	<link href="css/docs.css" rel="stylesheet" media="screen">
	<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>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
	<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>
				<a class="brand" href="./index.html">jvenn</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li><a href="./index.html">About</a></li>
						<li><a href="./example.html">Example</a></li>
						<li><a href="./documentation.html">Plugin documentation</a></li>
						<li class="active"><a href="./usermanual.html">User manual</a></li>
						<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">
			<div class="span3 bs-docs-sidebar">
				<ul class="nav nav-list bs-docs-sidenav affix">
Philippe Bardou's avatar
Philippe Bardou committed
43
44
					<li class="active"><a href="#quickStart"><i class="icon-chevron-right"></i> Quick start</a></li>
					<li><a href="#export"><i class="icon-chevron-right"></i> Export to ...</a></li>
Philippe Bardou's avatar
Philippe Bardou committed
45
					<li><a href="#search"><i class="icon-chevron-right"></i> Search</a></li>
Philippe Bardou's avatar
Philippe Bardou committed
46
47
					<li><a href="#legend"><i class="icon-chevron-right"></i> Switch button panel</a></li>
		    		<li><a href="#extraCharts"><i class="icon-chevron-right"></i> Extra chats</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
48
49
50
51
		    	</ul>
		  	</div>
		  	
		  	<div class="span9">
Philippe Bardou's avatar
Philippe Bardou committed
52
		  		<section id="quickStart">
Jerome Mariette's avatar
Jerome Mariette committed
53
					<div class="page-header">
Philippe Bardou's avatar
Philippe Bardou committed
54
55
				    	<h1>Quick start</h1>
				    </div>
Jerome Mariette's avatar
Jerome Mariette committed
56
				    <h4>How to provide list(s) of element(s)</h4>
Philippe Bardou's avatar
Philippe Bardou committed
57
				    <p>
Jerome Mariette's avatar
Jerome Mariette committed
58
				    On the right of the example page, you can fill each of the six textareas with your own data (<b>warning:</b> one element per line!).
Jerome Mariette's avatar
Jerome Mariette committed
59
				    If the same item is given multiple times, this one will be considered as unique. <br/>
Philippe Bardou's avatar
Philippe Bardou committed
60
				    You can also customize the list labels using the text field on the top of each textarea. The length of the name is limited at eleven characters.
Philippe Bardou's avatar
Philippe Bardou committed
61
				    </p>
Philippe Bardou's avatar
Philippe Bardou committed
62
63
64
				    <div class="bs-docs-example" style="text-align: center;">
				  		<img width="45%" src="img/jvenn-input-lists.png" class="img-rounded">
				  	</div> 
Philippe Bardou's avatar
Philippe Bardou committed
65
				    <h4>Two display modes: classic and Edwards</h4>
Jerome Mariette's avatar
Jerome Mariette committed
66
				    <p>The default value is 'classic' to output a classical venn diagram. If you want an Edwards-Venn
Jerome Mariette's avatar
Jerome Mariette committed
67
				    diagram representation, just select 'edwards' using the drop-down list. Available values are: 'classic' and 'edwards'.</p>
Philippe Bardou's avatar
Philippe Bardou committed
68
69
70
					<div class="bs-docs-example" style="text-align: center;">
				  		<img width="48%" src="img/jvenn-classic.png" class="img-rounded img-polaroid"> <img width="48%" src="img/jvenn-edwards.png" class="img-rounded img-polaroid">
				  	</div>
Jerome Mariette's avatar
Jerome Mariette committed
71
72
				  	<h4>Highlighting intersections</h4>
				  	<p>When you point an intersection count, all list(s) sharing it are highlighted.</p>
Philippe Bardou's avatar
Philippe Bardou committed
73
74
75
76
77
				  	<div class="bs-docs-example" style="text-align: center;">
				  		<img width="48%" src="img/jvenn-hl-classic.png" class="img-rounded img-polaroid"> <img width="48%" src="img/jvenn-hl-edwards.png" class="img-rounded img-polaroid">
				  	</div>
				  	<h4>Question mark</h4>
				  	<p>For all diagrams, when the intersection count size exceeds the allowed space, the value is substituted by a question mark.
Philippe Bardou's avatar
Philippe Bardou committed
78
79
				  	The real value pops-up on mouseover.</p>
				  	<h4>Click function</h4>
Jerome Mariette's avatar
Jerome Mariette committed
80
81
				  	<p>To display the specific or shared element(s) click on the intersection numbers. The linked elements are listed in the
				  	textarea below the jvenn diagram.</p>
Philippe Bardou's avatar
Philippe Bardou committed
82
83
84
				  	<div class="bs-docs-example" style="text-align: center;">
				  		<img width="50%" src="img/jvenn-click.png" class="img-rounded">
				  	</div> 
Philippe Bardou's avatar
Philippe Bardou committed
85
86
87
88
				</section>
		  		
		  		<section id="export">
					<div class="page-header">
Jerome Mariette's avatar
Jerome Mariette committed
89
				    	<h1>Export to PNG, SVG and/or CSV</h1>
Philippe Bardou's avatar
Philippe Bardou committed
90
91
92
93
94
95
96
97
98
99
100
				    </div>
				    <p>By clicking on the top right icon you can export:
					    <ul>
					    	<li>the venn diagram as a PNG file</li>
					    	<li>the intersection table as a CSV file</li>
					    </ul>
					</p>
					<div class="bs-docs-example" style="text-align: center;">
				  		<img width="50%" src="img/jvenn-export.png" class="img-rounded">
				  	</div> 
				</section>
Philippe Bardou's avatar
Philippe Bardou committed
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
				
				<section id="search">
					<div class="page-header">
				    	<h1>Search for an element</h1>
				    </div>
				    <p>Fill the input field on the top of the page to search for an element (case sensitive). Three different status are possible: 
					<ul>
						<li><b>found</b> only one element matched, the corresponding intersection is then highlighted</li>
					    <li><b>not found</b> no element matched, all intersections are faded out</li>
   					    <li><b>ambiguous</b> two or more elements matched, keep on searching...</li>
					    </ul>
					</p>
					<div class="bs-docs-example" style="text-align: center;">
				  		<img width="48%" src="img/jvenn-search1.png" class="img-rounded img-polaroid"> <img width="48%" src="img/jvenn-search2.png" class="img-rounded img-polaroid">
				  	</div>
				</section>
				
Philippe Bardou's avatar
Philippe Bardou committed
118
119
120
				<section id="legend">
					<div class="page-header">
				    	<h1>Switch button panel</h1>
Jerome Mariette's avatar
Jerome Mariette committed
121
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
122
				  	<p>
Philippe Bardou's avatar
Philippe Bardou committed
123
124
				  	If you provide more than 3 lists a switch button panel is available. Use it to focus on the intersection of interest.
				  	Moreover, to enhance the figure’s readability on the classical six lists Venn graphic, it was decided
Philippe Bardou's avatar
Philippe Bardou committed
125
					not to present all the values and to link some areas to their figures using lines. This
Philippe Bardou's avatar
Philippe Bardou committed
126
					still did not permit to show all figures, use the switch button panel to display it.
Philippe Bardou's avatar
Philippe Bardou committed
127
					<br/><br/>
Jerome Mariette's avatar
Jerome Mariette committed
128
					<b>Warning:</b> having one switch botton on disable all other interaction with the diagram.</p>
Philippe Bardou's avatar
Philippe Bardou committed
129
130
131
					<div class="bs-docs-example" style="text-align: center;">
				  		<img width="48%" src="img/jvenn-legend-classic.png" class="img-rounded img-polaroid"> <img width="48%" src="img/jvenn-legend-edwards.png" class="img-rounded img-polaroid">
				  	</div>
Jerome Mariette's avatar
Jerome Mariette committed
132
133
				</section>
				
Philippe Bardou's avatar
Philippe Bardou committed
134
				<section id="extraCharts">
Jerome Mariette's avatar
Jerome Mariette committed
135
					<div class="page-header">
Philippe Bardou's avatar
Philippe Bardou committed
136
				    	<h1>Extra charts</h1>
Jerome Mariette's avatar
Jerome Mariette committed
137
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
138
139
140
141
142
143
144
145
146
147
148
149
150
151
				  	<p>Having an overview of the list size and comparing multiple diagrams can be difficult using a Venn diagram. Thus, jvenn provides
				  	two extra charts bellow the Venn.
					  	<ul>
					  		<li>The first one represents the input lists size histogram. It allows users to	check the homogeneity of the lists size.</li>
							<li>The second one displays the number of elements located in intersections of a certain size.
								This feature can be used to compare the compactness of multiple Venn diagrams.
							</li>
						</ul>
					</p>
					<div class="bs-docs-example">
				  		<img width="50%" style="float:left" src="img/jvenn-extra-chart.png" class="img-rounded">
				  		<br/><br/>
				  		In the first chart you can see the number of elements in each list (the shorter list is the "list 5" with 858 elements).
				  		<br/><br/><br/><br/>
Jerome Mariette's avatar
Jerome Mariette committed
152
				  		In the second chart, 1707 elements are specific of one list and 399 elements are shared by two of the six lists.
Philippe Bardou's avatar
Philippe Bardou committed
153
154
				  		<br/><br/><br/>
				  	</div>
Jerome Mariette's avatar
Jerome Mariette committed
155
156
157
158
		  	</div>
		</div>
		
		<hr>
Philippe Bardou's avatar
Philippe Bardou committed
159
160
161
162
163
		<footer style="text-align: center;">
			<p>Copyright &copy; 2014, INRA | Designed by <a href="http://bioinfo.genotoul.fr" target="_blank">GenoToul Bioinfo</a> and
			   <a href="http://sigenae.org" target="_blank">Sigenae</a> teams.
			</p>
	    </footer>
Jerome Mariette's avatar
Jerome Mariette committed
164
165
166
167
168
169
170
171
172
173
	</div>
	<script>
     	!function ($) {
     		$(function(){
				window.prettyPrint && prettyPrint()   
			})
		}(window.jQuery)
	</script>
</body>
</html>