Maintenance - Mise à jour mensuelle Lundi 1 Juin 2020 entre 7h00 et 9h00

usermanual.html 8.2 KB
Newer Older
Jerome Mariette's avatar
Jerome Mariette committed
1 2 3 4 5
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
Philippe Bardou's avatar
Philippe Bardou committed
6
	
Jerome Mariette's avatar
Jerome Mariette committed
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 43
	<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
44 45
					<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
46
					<li><a href="#search"><i class="icon-chevron-right"></i> Search</a></li>
Philippe Bardou's avatar
Philippe Bardou committed
47 48
					<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
49 50 51 52
		    	</ul>
		  	</div>
		  	
		  	<div class="span9">
Philippe Bardou's avatar
Philippe Bardou committed
53
		  		<section id="quickStart">
Jerome Mariette's avatar
Jerome Mariette committed
54
					<div class="page-header">
Philippe Bardou's avatar
Philippe Bardou committed
55 56
				    	<h1>Quick start</h1>
				    </div>
Jerome Mariette's avatar
Jerome Mariette committed
57
				    <h4>How to provide list(s) of element(s)</h4>
Philippe Bardou's avatar
Philippe Bardou committed
58
				    <p>
Jerome Mariette's avatar
Jerome Mariette committed
59
				    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
60
				    If the same item is given multiple times, this one will be considered as unique. <br/>
Philippe Bardou's avatar
Philippe Bardou committed
61
				    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
62
				    </p>
Philippe Bardou's avatar
Philippe Bardou committed
63 64 65
				    <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
66
				    <h4>Two display modes: classic and Edwards</h4>
Jerome Mariette's avatar
Jerome Mariette committed
67
				    <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
68
				    diagram representation, just select 'edwards' using the drop-down list. Available values are: 'classic' and 'edwards'.</p>
Philippe Bardou's avatar
Philippe Bardou committed
69 70 71
					<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
72 73
				  	<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
74 75 76 77 78
				  	<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
79 80
				  	The real value pops-up on mouseover.</p>
				  	<h4>Click function</h4>
Jerome Mariette's avatar
Jerome Mariette committed
81 82
				  	<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
83 84 85
				  	<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
86 87 88 89
				</section>
		  		
		  		<section id="export">
					<div class="page-header">
Jerome Mariette's avatar
Jerome Mariette committed
90
				    	<h1>Export to PNG, SVG and/or CSV</h1>
Philippe Bardou's avatar
Philippe Bardou committed
91 92 93 94
				    </div>
				    <p>By clicking on the top right icon you can export:
					    <ul>
					    	<li>the venn diagram as a PNG file</li>
Jerome Mariette's avatar
Jerome Mariette committed
95
					    	<li>the venn diagram as a SVG file</li>
Philippe Bardou's avatar
Philippe Bardou committed
96 97 98 99 100 101 102
					    	<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
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
				
				<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
120 121 122
				<section id="legend">
					<div class="page-header">
				    	<h1>Switch button panel</h1>
Jerome Mariette's avatar
Jerome Mariette committed
123
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
124
				  	<p>
Philippe Bardou's avatar
Philippe Bardou committed
125 126
				  	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
127
					not to present all the values and to link some areas to their figures using lines. This
Philippe Bardou's avatar
Philippe Bardou committed
128
					still did not permit to show all figures, use the switch button panel to display it.
Philippe Bardou's avatar
Philippe Bardou committed
129
					<br/><br/>
Jerome Mariette's avatar
Jerome Mariette committed
130
					<b>Warning:</b> having one switch botton on disable all other interaction with the diagram.</p>
Philippe Bardou's avatar
Philippe Bardou committed
131 132 133
					<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
134 135
				</section>
				
Philippe Bardou's avatar
Philippe Bardou committed
136
				<section id="extraCharts">
Jerome Mariette's avatar
Jerome Mariette committed
137
					<div class="page-header">
Philippe Bardou's avatar
Philippe Bardou committed
138
				    	<h1>Extra charts</h1>
Jerome Mariette's avatar
Jerome Mariette committed
139
					</div>
Philippe Bardou's avatar
Philippe Bardou committed
140 141 142 143 144 145 146 147 148 149 150 151 152 153
				  	<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
154
				  		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
155 156
				  		<br/><br/><br/>
				  	</div>
Jerome Mariette's avatar
Jerome Mariette committed
157 158 159 160
		  	</div>
		</div>
		
		<hr>
Philippe Bardou's avatar
Philippe Bardou committed
161
		<footer style="text-align: center;">
Philippe Bardou's avatar
Philippe Bardou committed
162
			<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
163 164 165
			   <a href="http://sigenae.org" target="_blank">Sigenae</a> teams.
			</p>
	    </footer>
Jerome Mariette's avatar
Jerome Mariette committed
166 167 168 169 170 171 172 173 174 175
	</div>
	<script>
     	!function ($) {
     		$(function(){
				window.prettyPrint && prettyPrint()   
			})
		}(window.jQuery)
	</script>
</body>
</html>