使用raphael绘制weblogo的jQuery plugin (A jQuery plugin to draw weblogo based on raphael library)

之前写的使用canvas绘制weblogo的jQuery plugin (A jQuery plugin to draw weblogo on HTML5 canvas)有一个很大的局限,那就是IE对canvas的支持不是太好,所以决定重新写了一个,基于raphael的,基本上对于IE6.0以上都支持得很好。

A jQuery plugin to draw motif weblogo based on raphael library. It can draw one or more weblogo in one container. Because it is based one javascript, it can be used to show weblogo dynamically and show aligned weblogo stack.

demo download

选项|Opionts

  • motif: 3-dim array of motif probability count matrix.
  • height: weblogo height (>=50pt), default: 100
  • names: array of motif names
  • p: object of a hash table for GC contents of background; default: {“A”:0.25, “C”:0.25, “G”:0.25, “T”:0.25}
  • xlab: x-axis label, default: position
  • ylab: y-axis label, default: bit
  • title: title, default: jWebLogo
  • col: color set of ACGT, default: {“A”:”#008000″, “C”:”#00c”, “G”:”#ffb300″, “T”:”#c00″}

sample code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>weblogo drawer</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery-raphael-plotWebLogo-0.1.0.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
 $("#canvas1").plotWebLogo({motif: [[	[	 367,	 139,	 916,	 148],
										[	 470,	  12,	1279,	  14],
										[	  93,	1688,	   0,	   0],
										[	1738,	  43,	   0,	   0],
										[	   0,	   0,	1781,	  10],
										[	  61,	 109,	1601,	1662],
										[	   0,	   0,	 119,	   6],
										[	   0,	   0,	1775,	 699]
									 ]
									],
							height: 100,
							names: ["motifName1"],
							title: "file title",
							p:{"A":0.25, "C":0.25, "G":0.25, "T":0.25},
							xlab:"position",
							ylab:"bits"
							});
 $("#canvas2").plotWebLogo({motif: [[	[	 367,	 139,	 916,	 148],
										[	 470,	  12,	1279,	  14],
										[	  93,	1688,	   0,	   0],
										[	1738,	  43,	   0,	   0],
										[	   0,	   0,	1781,	  10],
										[	  61,	 109,	1601,	1662],
										[	   0,	   0,	 119,	   6],
										[	   0,	   0,	1775,	 699]
										],
									 [	[  0,  0,  0,100],
									 	[  0,  0,100,  0],
									 	[  0,100,  0,  0],
									 	[100,  0,  0,  0],
									 	[ 50, 50,  0,  0],
									 	[ 50,  0, 50,  0],
									 	[ 50,  0,  0, 50],
									 	[  0, 50, 50,  0],
									 	[  0, 50,  0, 50],
									 	[  0,  0, 50, 50],
									 	[ 50, 50, 50,  0],
									 	[ 50, 50,  0, 50],
									 	[ 50,  0, 50, 50],
									 	[ 50, 50, 50, 50]
									 ]
									],
							height: 100,
							names: ["motifName1","motifName2"],
							title: "file title",
							p:{"A":0.25, "C":0.25, "G":0.25, "T":0.25},
							xlab:"position",
							ylab:"bits"
							});
});
</script>
</head>
 
<body>
<center>
<label>sigle motif</label><br/>
<div id="canvas1"></div><br/>
<br/>
<label>multiple motifs</label><br/>
<div id="canvas2"></div>
</center>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注