biojs-vis-sequence
Version:
Display a protein/nucleotide sequence
53 lines (47 loc) • 1.49 kB
HTML
<div id="holder"></div>
<script src="./biojs_vis_sequence.min.js">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var mySequence;
window.onload = function() {
var theSequence = '111111111122222222223333333333444444444455555555556666666666111111111122222222223333333333444444444455555555556666666666';
mySequence = new Biojs.Sequence({
sequence : theSequence,
target : "holder",
format : 'CODATA',
formatOptions : {
title:false,
footer:false
},
id : 'P918283'
});
//mySequence.setSelection(1,4);
//mySequence.setSelection(2,4);
mySequence.addAnnotation({
name:"track1",
html:"<br> Example of <b>HTML</b>",
color:"green",
regions: [
{start: 2, end: 2},
{start: 20, end: 30},
{start: 31, end: 43},
{start: 44, end: 44},
{start: 50, end: 90}]
});
mySequence.addAnnotation({
name:"track2",
html:"<br> Example of <b>HTML</b>",
color:"green",
regions: [
{start: 7, end: 40},
{start: 45, end: 45},
{start: 47, end: 48},
{start: 49, end: 55},
{start: 80, end: 91}]
});
//mySequence.setSequence("P");
mySequence.addHighlight( { "start": 1, "end": 15, "color": "white", "background": "red", "id": "aaa" } );
mySequence.addHighlight( { "start": 7, "end": 21, "color": "white", "background": "green", "id": "bbb" } );
mySequence.addHighlight( { "start": 12, "end": 26, "color": "white", "background": "blue", "id": "ccc" } );
};
</script>