Skip to content

Instantly share code, notes, and snippets.

@alexmasselot

alexmasselot/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexmasselot/9399600 to your computer and use it in GitHub Desktop.
Save alexmasselot/9399600 to your computer and use it in GitHub Desktop.
Download ZIP
pViz.js one liner with selected categories
Raw
index.html
<html>
<head>
<title>pViz.js one liner with selected categories</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://research-pub.gene.com/pviz/examples/deps/pviz-core.css">
<script src="http://research-pub.gene.com/pviz/examples/deps/pviz-bundle.min.js"></script>
</head>
<body class="container">
<div class="row">
<h2>pViz, a one-line example with selected categories</h2>
</div>
<div class="row">
<div class="span6">
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>psms</th>
</tr>
</thead>
<tbody>
<td> HER2 head </td>
<td id="one-liner"></td>
</tbody>
</table>
</div>
</div>
<div class="row">
<h3>Comments</h3>
We define a SeqEntry object, map features on it and display it as a simple one-liner image.
<br/>
More complex than the <a href="example-one-liner.html">whole features at once</a> one-liner, we can select a groups of features and display each of them on a line.
<br/>
We propose here a dispay of fictitious peptide/spectrum matches (PSM) coverage from two experiments (the
<code>
group
</code>
attibute is the experimental source)
</div>
<div class="row">
<h4>Way more examples and demo apps with pViz <a href="http://research-pub.gene.com/pviz/examples/" target="_TOP_">here</a></h4>
</div>
<script class="example">
//namespace handling pViz classes
var pviz = this.pviz;
/*
* Define the model, a sequence entry with an explicit sequence
* For this example, we don't actually need the sequence itself.
* Whatever string with the correct length is OK (ok, it's ugly, but it can be useful in certain cases)
*/
var seqEntry = new pviz.SeqEntry({
sequence : 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNASLSFLQDIQEVQGYVLIAHNQVRQVPLQRLRIVRGTQLFEDNYALAVLDNGDPLNNTTPVTGASPGGLRELQLRSLTEILKGGVLIQRNPQLCYQDTILWKDIFHKNNQLA'
});
new pviz.OneLiner({
model : seqEntry,
el : '#one-liner',
categories:['exp-A', 'exp-B']
}).render();
/*
* Features are added explicitely.
* There is only on group of features here (secondary_structure). There can be more that would be merged or we could keep only one group with the filer:'xxx' option
*
* In real application, these features would be read from DASReader, a PeffReader or whatever ajax call you find convenient (the view is rendered when model changes)
*/
seqEntry.addFeatures([{
category : 'exp-A',
type : 'psm',
start : 24,
end : 26
},{
category : 'exp-B',
type : 'psm',
start : 24,
end : 26
}, {
category : 'exp-A',
type : 'psm',
start : 38,
end : 49
}, {
category : 'exp-A',
type : 'psm',
start : 53,
end : 57
}, {
category : 'exp-A',
type : 'psm',
start : 59,
end : 63
}, {
category : 'exp-B',
type : 'psm',
start : 59,
end : 63
}, {
category : 'exp-A',
type : 'psm',
start : 71,
end : 73
}, {
category : 'exp-A',
type : 'psm',
start : 78,
end : 81
}, {
category : 'exp-B',
type : 'psm',
start : 78,
end : 87
}, {
category : 'exp-A',
type : 'psm',
start : 83,
end : 87
}, {
category : 'exp-A',
type : 'psm',
start : 91,
end : 94
}, {
category : 'exp-A',
type : 'psm',
start : 108,
end : 110
}, {
category : 'exp-A',
type : 'psm',
start : 111,
end : 116
}, {
category : 'exp-B',
type : 'psm',
start : 111,
end : 124
}, {
category : 'exp-A',
type : 'psm',
start : 129,
end : 131
}, {
category : 'exp-A',
type : 'psm',
start : 138,
end : 140
}, {
category : 'exp-A',
type : 'psm',
start : 150,
end : 155
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment