Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added some real proteins and an example of adding additional annotation.
  • Loading branch information
MattOates committed Nov 11, 2013
1 parent 46b33eb commit 471c8a4
Show file tree
Hide file tree
Showing 5 changed files with 375 additions and 14 deletions.
25 changes: 17 additions & 8 deletions aaseq.css
Expand Up @@ -10,17 +10,29 @@

}


.aaheader {

}

.aa {
display:inline-block;
width:1em;
font-family: 'twenty-characters';
text-align:center;
cursor:pointer;
font-size: 100%;
border: none;
}

.aa:hover {
font-family: 'courier';
}

.aminos .aa:hover {
font-size: 130%;
border: 1px solid;
border-radius: 5px;
}

.disorder {
font-style:italic;
font-weight:bolder;
}

.R, .K {
Expand Down Expand Up @@ -51,6 +63,3 @@
color:blue;
}

.disorder {
background-color:#bbb;
}
77 changes: 73 additions & 4 deletions aaseq.html
Expand Up @@ -3,16 +3,85 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.aaseq.js"></script>
<link rel="stylesheet" href="aaseq.css" />
<script src="jquery.tipsy.js"></script>
<link rel="stylesheet" href="tipsy.css" />
</head>
<body>
<pre id="sequence" class="aminos">MEDPLIGRDSLGGGGTDRVRRSEAITHGTPFQKAAALVDLAEDGIGLPVEILDQSSFGESARYYFIFTRLDLIWSLNYFALLFLNFFEQPLWCEKNPKPSCKDRDYYYLGELPYLTNAESIIYEVITLAILLVHTFFPISYEGSRIFWTSRLNLVKVACVVILFVDVLVDFLYLSPLAFDFLPFRIAPYVRVIIFILSIRELRDTLVLLSGMLGTYLNILALWMLFLLFASWIAFVMFEDTQQGLTVFTSYGATLYQMFILFTTSNNPDVWIPAYKSSRWSSVFFVLYVLIGVYFVTNLILAVVYDSFKEQLAKQVSGMDQMKRRMLEKAFGLIDSDKNGEIDKNQCIKLFEQLTNYRTLPKISKEEFGLIFDELDDTRDFKINKDEFADLCQAIALRFQKEEVPSLFEHFPQIYHSALSQQLRAFVRSPNFGYAISFILIINFIAVVVETTLDIEESSAQKPWQVAEFVFGWIYVLEMALKIYTYGFENYWREGANRFDFLVTWVIVIGETATFITPDENTFFSNGEWIRYLLLARMLRLIRLLMNVQRYRAFIATFITLIPSLMPYLGTIFCVLCIYCSIGVQVFGGLVNAGNKKLFETELAEDDYLLFNFNDYPNGMVTLFNLLVMGNWQVWMESYKDLTGTWWSITYFVSFYVITILLLLNLVVAFVLEAFFTELDLEEEEKCQGQDSQEKRNRRRSAGSKSRSQRVDTLLHHMLGDELSKPECSTSDT</pre>
<h1>The Extended Twenty Characters Alphabet</h1>
<p>A custom alphabet and webfont for representing proteogenic amino acids based on <a href="https://twitter.com/k_rother">Kristian Rother's (@k_rother)</a> award <a href="http://www.iscb.org/cms_addon/conferences/ismbeccb2009/artscience.php#rother">winning piece</a> of calligrapy. Pyrrolysine 'O' is coming soon >:3</p>
<p class="aa" style="font-size:2em;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<h2>Ubiquitin (D5H3J3)</h2>
<pre id="ubiquitin" class="aminos">
MQIFVKTLTGKTITLEVEPSDTIENVKAKIQDKEGIPPDQQRLIFAGKQLEDGRTLSDYN
IQKESTLHLVLRLRGGVIEPSLRILAQKYNQDKQICRKCYARLHPRATNCRKKKCGHSND
LRPKKKPK
</pre>
<h2>Cellular tumor antigen p53 (P04637)</h2>
<p>Disordered regions are highlighted in <span class="disorder">bold-italics</span> taken from the <a href="http://d2p2.pro/view/sequence/up/P04637">D<sup>2</sup>P<sup>2</sup></a> resource.</p>
<pre id="p53" class="aminos">
MEEPQSDPSVEPPLSQETFSDLWKLLPENNVLSPLPSQAMDDLMLSPDDIEQWFTEDPGP
DEAPRMPEAAPPVAPAPAAPTPAAPAPAPSWPLSSSVPSQKTYQGSYGFRLGFLHSGTAK
SVTCTYSPALNKMFCQLAKTCPVQLWVDSTPPPGTRVRAMAIYKQSQHMTEVVRRCPHHE
RCSDSDGLAPPQHLIRVEGNLRVEYLDDRNTFRHSVVVPYEPPEVGSDCTTIHYNYMCNS
SCMGGMNRRPILTIITLEDSSGNLLGRNSFEVRVCACPGRDRRTEEENLRKKGEPHHELP
PGSTKRALPNNTSSSPQPKKKPLDGEYFTLQIRGRERFEMFRELNEALELKDAQAGKEPG
GSRAHSSHLKSKKGQSTSRHKKLMFKTEGPDSD
</pre>
<h2>Collagen COL1A1 (P02452)</h2>
<p>An example with a non default width and grouped formatting.</p>
<pre id="collagen" class="aminos">
MFSFVDLRLLLLLAATALLTHGQEEGQVEGQDEDIPPITCVQNGLRYHDRDVWKPEPCRI
CVCDNGKVLCDDVICDETKNCPGAEVPEGECCPVCPDGSESPTDQETTGVEGPKGDTGPR
GPRGPAGPPGRDGIPGQPGLPGPPGPPGPPGPPGLGGNFAPQLSYGYDEKSTGGISVPGP
MGPSGPRGLPGPPGAPGPQGFQGPPGEPGEPGASGPMGPRGPPGPPGKNGDDGEAGKPGR
PGERGPPGPQGARGLPGTAGLPGMKGHRGFSGLDGAKGDAGPAGPKGEPGSPGENGAPGQ
MGPRGLPGERGRPGAPGPAGARGNDGATGAAGPPGPTGPAGPPGFPGAVGAKGEAGPQGP
RGSEGPQGVRGEPGPPGPAGAAGPAGNPGADGQPGAKGANGAPGIAGAPGFPGARGPSGP
QGPGGPPGPKGNSGEPGAPGSKGDTGAKGEPGPVGVQGPPGPAGEEGKRGARGEPGPTGL
PGPPGERGGPGSRGFPGADGVAGPKGPAGERGSPGPAGPKGSPGEAGRPGEAGLPGAKGL
TGSPGSPGPDGKTGPPGPAGQDGRPGPPGPPGARGQAGVMGFPGPKGAAGEPGKAGERGV
PGPPGAVGPAGKDGEAGAQGPPGPAGPAGERGEQGPAGSPGFQGLPGPAGPPGEAGKPGE
QGVPGDLGAPGPSGARGERGFPGERGVQGPPGPAGPRGANGAPGNDGAKGDAGAPGAPGS
QGAPGLQGMPGERGAAGLPGPKGDRGDAGPKGADGSPGKDGVRGLTGPIGPPGPAGAPGD
KGESGPSGPAGPTGARGAPGDRGEPGPPGPAGFAGPPGADGQPGAKGEPGDAGAKGDAGP
PGPAGPAGPPGPIGNVGAPGAKGARGSAGPPGATGFPGAAGRVGPPGPSGNAGPPGPPGP
AGKEGGKGPRGETGPAGRPGEVGPPGPPGPAGEKGSPGADGPAGAPGTPGPQGIAGQRGV
VGLPGQRGERGFPGLPGPSGEPGKQGPSGASGERGPPGPMGPPGLAGPPGESGREGAPGA
EGSPGRDGSPGAKGDRGETGPAGPPGAPGAPGAPGPVGPAGKSGDRGETGPAGPTGPVGP
VGARGPAGPQGPRGDKGETGEQGDRGIKGHRGFSGLQGPPGPPGSPGEQGPSGASGPAGP
RGPPGSAGAPGKDGLNGLPGPIGPPGPRGRTGDAGPVGPPGPPGPPGPPGPPSAGFDFSF
LPQPPQEKAHDGGRYYRADDANVVRDRDLEVDTTLKSLSQQIENIRSPEGSRKNPARTCR
DLKMCHSDWKSGEYWIDPNQGCNLDAIKVFCNMETGETCVYPTQPSVAQKNWYISKNPKD
KRHVWFGESMTDGFQFEYGGQGSDPADVAIQLTFLRLMSTEASQNITYHCKNSVAYMDQQ
TGNLKKALLLQGSNEIEIRAEGNSRFTYSVTVDGCTSHTGAWGKTVIEYKTTKTSRLPII
DVAPLDVGAPDQEFGFDVGPVCFL
</pre>
</body>
<script>
$('#sequence').aaseq({
//Defaults
$('#ubiquitin').aaseq();

//Features apply that CSS class for amino acids between the start and end residue pairs defined
$('#p53').aaseq({
features: {
disorder: [[1,10],[20,35]],
domain: [[5,15],[30,100]]
disorder: [
[1, 22],
[26, 27],
[30, 31],
[33, 97],
[281, 329],
[343, 393]
]
}
});

//Width and Groups options allow you to specify grouped alignment for ease of counting
$('#collagen').aaseq({
width: 10,
groups: 5
});

//Add tipsy title tips, title is already set by aaseq
$("span.aa").tipsy({gravity: 's'});
</script>
</html>
4 changes: 2 additions & 2 deletions jquery.aaseq.js
Expand Up @@ -34,7 +34,7 @@
}
};
opt = $.extend(defaults,opt);
var seq = this.text().split(new RegExp('(.{'+opt.width+'})','g')).filter(Boolean).map(function(groupseq,group){
var seq = this.text().replace(/\s/g,"").split(new RegExp('(.{'+opt.width+'})','g')).filter(Boolean).map(function(groupseq,group){
return (group % opt.groups ? '' : '\n' + ' '.slice(-2+(''+1+group*opt.width).length) + (1+group*opt.width) + ' ') + groupseq.split(/(.{1})/g).filter(Boolean).map(function(amino,offset){
var pos = 1+group*opt.width+offset;
var classes = '';
Expand Down Expand Up @@ -66,7 +66,7 @@
header += ' ';
prev = label.length+group;
}
seq = header + seq;
//seq = header + seq;
this.html(seq);
return this;
};
Expand Down

0 comments on commit 471c8a4

Please sign in to comment.