使用canvas绘制weblogo的jQuery plugin (A jQuery plugin to draw weblogo on HTML5 canvas)

demo download

引|Overview

这是一个使用canvas绘制motif的weblogo的javascript工具,它依赖于jQuery和canvas(IE9以下不支持)。它可以一次绘制1至多个weblogo在一个canvas内,可以极大的减小包含多个weblogo的网页体积,并适合堆栈显示多个已经对齐的多个weblogo。
A jQuery plugin to draw motif weblogo on a HTML5 canvas. It can draw one or more weblogo in one canvas. Because it is based one javascript, it can be used to show weblogo dynamically and show aligned weblogo stack.

选项|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/jquery-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/>
<canvas id="canvas1"></canvas><br/>
<br/>
<label>multiple motifs</label><br/>
<canvas id="canvas2"></canvas>
</center>
</body>
</html>

One thought on “使用canvas绘制weblogo的jQuery plugin (A jQuery plugin to draw weblogo on HTML5 canvas)

发表评论

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