Last active
August 29, 2015 13:57
-
-
Save alexmasselot/9399404 to your computer and use it in GitHub Desktop.
pViz.js custom css display example
This file contains hidden or 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 custom css display example</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" class="example"> | |
| g.feature.psms.stanley rect.feature { | |
| fill: red; | |
| fill-opacity: 0.8; | |
| } | |
| g.feature.psms.stanley:hover rect.feature { | |
| fill: black; | |
| fill-opacity: 0.8; | |
| } | |
| g.feature.psms.stanley text { | |
| font-weight: bold; | |
| fill: yellow; | |
| } | |
| g.feature.psms.livingstone rect.feature { | |
| fill: green; | |
| fill-opacity: 0.2; | |
| } | |
| g.feature.psms rect.feature-block-end { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="container"> | |
| <div class="row"> | |
| <h2>pViz custom display with css example</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> | |
| Instead of displaying features as basic, we can use css to custom the svg rectangle. | |
| <br/> | |
| Both category and feature type can be captured at the css level. | |
| <br/>Mouse over the red features. | |
| </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 = 'MELAALCRWGLLLALLPPGAASTQVCTGTDMKLR'; | |
| var seqEntry = new pviz.SeqEntry({ | |
| sequence : seq | |
| }); | |
| new pviz.SeqEntryAnnotInteractiveView({ | |
| model : seqEntry, | |
| el : '#main' | |
| }).render(); | |
| var fts = [[1, 5, 'livingstone'], [1, 7, 'livingstone'], [6, 8, 'livingstone'], [12, 23, 'livingstone'], [7, 15, 'livingstone'], [1, 30, 'stanley'], [5, 7, 'stanley'], [9, 12, 'stanley']]; | |
| seqEntry.addFeatures(fts.map(function(ft) { | |
| return { | |
| category : 'psms', | |
| type : ft[2], | |
| start : ft[0], | |
| end : ft[1], | |
| text : ft[0] + '-' + ft[1] + '/' + ft[2] | |
| } | |
| })) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment