Last active
August 29, 2015 14:23
-
-
Save alexmasselot/d410208abc1b618d1f51 to your computer and use it in GitHub Desktop.
pviz.js with alternate sequence
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.js adding an alternate sequence, as additional customized features</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> | |
| <style type="text/css" media="screen" clas="example"> | |
| g.altSequence text { | |
| text-anchor: middle; | |
| font-family: monospace; | |
| opacity: 1.0; | |
| fill: red; | |
| } | |
| </style> | |
| </head> | |
| <body class="container"> | |
| <div class="row"> | |
| <h2>adding an alternate sequence, as additional customized features</h2> | |
| </div> | |
| <!-- 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> | |
| Let's add a secondary sequence. CSS is defined in header. | |
| </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"> | |
| var pviz = this.pviz; | |
| var seq = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLRLPASPETHLDMLRHLYQGCQVVQGNLELTYLPTNASLSFLQDIQEVQGYVLIAHNQVRQVPLQRLRIVRGTQLFEDNYALAVLDNGDPLNNTTPVTGASPGGLRELQLRSLTEILKGGVLIQRNPQLCYQDTILWKDIFHKNNQLA'; | |
| var seqEntry = new pviz.SeqEntry({ | |
| sequence: seq | |
| }); | |
| new pviz.SeqEntryAnnotInteractiveView({ | |
| model: seqEntry, | |
| el: '#main' | |
| }).render(); | |
| /** | |
| * setting custome handler for a given type is stringly coupled with d3.js | |
| * two components: | |
| * - appender: to build the widget structure | |
| * - positioner: called at zooming, to adapt position, size (or whatever indeed) | |
| * - color and transparency are defined by css, found in the html header | |
| */ | |
| pviz.FeatureDisplayer.setCustomHandler('altSequence', { | |
| appender: function (viewport, svgGroup, features, type) { | |
| var sel = svgGroup.selectAll("g.feature.internal.data." + type).data(features).enter().append("g").attr("class", "feature internal data " + type) | |
| sel.append("text") | |
| .text(function (ft) { | |
| return ft.aa; | |
| }); | |
| return sel; | |
| }, | |
| positioner: function (viewport, d3selection) { | |
| //adapt the font size inregard to the distance betweence two AA positions | |
| var dx = viewport.scales.x(1) - viewport.scales.x(0); | |
| var ftSize = Math.min(20, dx); | |
| d3selection.selectAll('text') | |
| .attr('x', function (ft, i) { | |
| return viewport.scales.x(ft.start); | |
| }) | |
| .style('font-size', '' + ftSize + 'px'); | |
| return d3selection | |
| } | |
| }); | |
| var offset = 5; | |
| var features = _.map('GO SURF A WAVE'.split(''), function (c, i) { | |
| return { | |
| category: 'my other_seq', | |
| categoryName: '', | |
| type: 'altSequence', | |
| start: i + offset, | |
| end: i + offset, | |
| aa: c | |
| } | |
| }); | |
| seqEntry.addFeatures(features); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment