Last active
August 29, 2015 13:57
-
-
Save alexmasselot/9397848 to your computer and use it in GitHub Desktop.
pViz.js basic interactive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>pViz basic interactive</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"> | |
| <!-- min-width is for http://bl.ocks.org/ iframe (doc width sometimes 0 at init time)--> | |
| <div id="main" class="row" style="min-width:720px"></div> | |
| <div class="row"> | |
| <h3>Comments</h3> | |
| We define here SeqEntry object with an explicit sequence (start of HER2) and a few features (one region and a dozen of secondary structure). | |
| This is not the usual way to populate the object but we can do it. | |
| <br/> | |
| Zoom by dragging mouse and out by double-clicking | |
| </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 | |
| var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNASLSFLQDIQEVQGYVLIAHNQVRQVPLQRLRIVRGTQLFEDNYALAVLDNGDPLNNTTPVTGASPGGLRELQLRSLTEILKGGVLIQRNPQLCYQDTILWKDIFHKNNQLA'; | |
| var seqEntry = new pviz.SeqEntry({ | |
| sequence : seq | |
| }); | |
| /* | |
| * thefined the view, in a backbone.js fashion | |
| * model: that's the model, who would have guessed | |
| * el: a selector to the target where to insert the view (size and so will be inherited) | |
| * | |
| * .render(): call the rendering | |
| * | |
| * NB: even though the features are not yet added to the model, the view will be recomputed at the end of any feature addition. | |
| * This is to take into account asynchroncity, when data comes from several remote sources | |
| */ | |
| new pviz.SeqEntryAnnotInteractiveView({ | |
| model : seqEntry, | |
| el : '#main' | |
| }).render(); | |
| /* we can add featureswith properties | |
| * group: features will be grouped together on this property. they might no be displayed on the same line, but feature with different grous cannot be on the same line | |
| * type: within group, property can have different types | |
| * text: to be displayed or use wherever you want | |
| * start: initial position, starting at 0 | |
| * end: last position of the feature (including), starting at 0 | |
| * | |
| * NB: the explicit loading of features could be replaced by a JSON call. But for the sake of a standalone example, ajax does not work with file queries | |
| d3.tsv('example-features.tsv', function(err, data) { | |
| seqEntry.addFeatures(data); | |
| }); | |
| */ | |
| seqEntry.addFeatures([{ | |
| category : 'ptms', | |
| type : 'mickey', | |
| start : 20, | |
| end : 20, | |
| count : 10 | |
| }, { | |
| category : 'ptms', | |
| type : 'mickey', | |
| start : 22, | |
| end : 22, | |
| count : 3 | |
| }, { | |
| category : 'ptms', | |
| type : 'mickey', | |
| start : 40, | |
| end : 40, | |
| count : 10, | |
| improbable : true //!! an option attribute | |
| }, { | |
| category : 'ptms', | |
| type : 'mickey', | |
| start : 50, | |
| end : 50, | |
| count : 2 | |
| }, { | |
| category : 'regions', | |
| type : 'topological domain', | |
| text : 'extra cellular', | |
| start : 22, | |
| end : 650 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 24, | |
| end : 26 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'helix', | |
| start : 38, | |
| end : 49 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 53, | |
| end : 57 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 59, | |
| end : 63 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'helix', | |
| start : 71, | |
| end : 73 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 78, | |
| end : 81 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 83, | |
| end : 87 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 91, | |
| end : 94 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'turn', | |
| start : 108, | |
| end : 110 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 111, | |
| end : 116 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'turn', | |
| start : 129, | |
| end : 131 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| start : 138, | |
| end : 140 | |
| }, { | |
| category : 'secondary structure', | |
| type : 'beta_strand', | |
| 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