搜索
查看: 4235|回复: 5

在shiny程序里面嵌入IGV来做可视化

[复制链接]

633

主题

1182

帖子

4030

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4030
发表于 2017-5-2 20:19:58 | 显示全部楼层 |阅读模式
这个真的很赞~~

几个例子:http://igv.org/web/examples/
直接下载里面的html文件,用文本编辑器打开就明白了。也可以直接看效果,http://igv.org/web/examples/1kg-vcf.html 比如这个在网页里面显示千人基因组计划的snp信息
作者写了如何操作IGV的JS来显示数据:https://github.com/igvteam/igv.js/wiki/Browser

我解析了一下,模仿了一个简单的例子: shiny-igv.png
代码是:
[AppleScript] 纯文本查看 复制代码
library(shiny)
library(shinyjs)
shinyApp(
  ui <- fluidPage( 
    tags$head(
      includeCSS("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"),
      includeCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"),
      includeCSS("https://igv.org/web/release/1.0.7/igv-1.0.7.css"),
      includeScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"),
      includeScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"),
      includeScript("https://igv.org/web/release/1.0.7/igv-1.0.7.js")
    ),
    h1("test IGV.js"),
    div(id="igvDiv"),
    tags$script(src="igv.js")
  ) ,
  
    server = function(input, output, session) {
      
    }
)

上面代码很简单,就一个H1标题,一个DIV用来显示图片,一个tags$script用来加载我们写好的igv.js文件, 但是需要配置一些东西,才算是完整的IGV嵌入到网页了。
首先igv.js文件,需要自己制作,放在shiny网页的WWW文件夹下面。
我的如下:
[JavaScript] 纯文本查看 复制代码
var div = document.getElementById('igvDiv');
var options = { 
  reference: {
    id: "hg19",
    fastaURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/1kg_v37/human_g1k_v37_decoy.fasta",
    cytobandURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/b37/b37_cytoband.txt"
  },
  locus: "chr9:19390926-19395075",
  tracks: [
    {
      name: "Genes",
      type: "annotation",
      format: "bed",
      sourceType: "file",
      url: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz",
      indexURL: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz.tbi",
      order: Number.MAX_VALUE,
      visibilityWindow: 300000000,
      displayMode: "EXPANDED"
    },
    
    {
      name: " BED peaks",
      type: "annotation",
      format: "bed",
      sourceType: "file",
      url: 'test.bed' ,
      displayMode: "EXPANDED"
    }
    
    ]
  
};
var browser = igv.createBrowser(div, options);

这个JS文件的规则,就是IGV的精髓,需要仔细理解哈。

可以看到我的JS文件里面用到了test.bed这个文件,所以也需要制作它,跟前面自己制作的igv.js都放在www文件夹下面,这样shiny就可以找到它们啦。
文件如下:
[AppleScript] 纯文本查看 复制代码
chr9        19393926        19394075        H3K4me3        4.68632        +
chr9        19393355        19393507        H3K4me3        3.34122        +
chr9        19393282        19393565        H3K4me3        4.32084        +
chr9        19393293        19393439        H3K27ac        5.5464        +
chr9        19393261        19393444        H3K4me1        6.69108        +
chr9        19392682        19392913        H3K9ac        5.36002        +
chr9        19392243        19392707        H3K4me3        4.58506        +
chr9        19392160        19392308        H3K4me1        7.71803        +
chr9        19391563        19391780        H3K9me2        4.73822        +
chr9        19391293        19391733        H3        3.62618        +
chr9        19391206        19391357        H3K4me2        5.36271        +
chr9        19391104        19391430        H3K27me3        2.55625        +
chr9        19390561        19391538        H3K27me3        2.83102        +
chr9        19390439        19391269        H3K27me3        2.84007        +
chr9        19390534        19391135        H3K27me3        4.14188        +
chr9        19389820        19391457        H3K27me3        2.20278        +
chr9        19390510        19390693        H3K4me1        5.22513        +
chr9        19390508        19390682        H3K4me2        6.2081        +
chr9        19389702        19391063        H3K27me3        2.90374        +
chr9        19390218        19390475        H3        4.45795        +
chr9        19390215        19390475        H3        4.60786        +
chr9        19389823        19390843        H3K27me3        2.62846        +
chr9        19390182        19390449        H3K4me3        7.85053        +
chr9        19389130        19391489        H3K27me3        2.96637        +
chr9        19388996        19391575        H3K27me3        2.51065        +
chr9        19389703        19390784        H3K27me3        2.88581        +
chr9        19389664        19390631        H3K27me3        2.75199        +
chr9        19389958        19390122        H3K4me1        4.33304        +
chr9        19389922        19390107        H3K4me1        12.19512        +
chr9        19389935        19390081        H3K4me2        5.88422        +
chr9        19389933        19390079        H3K4me2        5.67488        +
chr9        19389932        19390078        H3K27ac        5.53169        +
chr9        19389448        19390560        H3K9me3        2.9803        +
chr9        19389930        19390076        H3K4me2        5.93049        +
chr9        19389929        19390075        H3K4me2        6.03938        +
chr9        19389929        19390075        H3K4me2        5.83798        +
chr9        19389920        19390082        H3K36me3        5.60481        +
chr9        19389924        19390079        H3K4me2        8.45642        +
chr9        19389924        19390074        H3K4me2        8.60056        +
chr9        19389925        19390071        H3K4me2        6.596        +
chr9        19389920        19390072        H3K27ac        5.41272        +
chr9        19389919        19390073        H3K36me3        6.26753        +
chr9        19389921        19390071        H3K4me2        6.36319        +
chr9        19389913        19390079        H3K4me2        6.92671        +
chr9        19389923        19390069        H3K4me2        6.06191        +
chr9        19389918        19390073        H3K4me2        6.85061        +
chr9        19389910        19390078        H3K27me3        6.15839        +
chr9        19389920        19390069        H3K4me2        7.65956        +
chr9        19389917        19390071        H3K4me2        7.92282        +
chr9        19389919        19390065        H3K4me2        6.19765        +
chr9        19389912        19390068        H3K27me3        4.74332        +
chr9        19389906        19390075        H3K27me3        6.79141        +
chr9        19389917        19390063        H3K4me2        5.64732        +
chr9        19389912        19390066        H3K4me1        7.5358        +
chr9        19389914        19390064        H3K4me1        6.93626        +
chr9        19389909        19390070        H3K4me2        8.23142        +
chr9        19389907        19390070        H3K4me2        9.21489        +
chr9        19389908        19390066        H3K4me3        5.31529        +
chr9        19389914        19390060        H3K4me2        6.57777        +
chr9        19389913        19390059        H3K4me2        5.72056        +
chr9        19389912        19390058        H3K4me2        6.13604        +
chr9        19389887        19390071        H3K4me3        7.02035        +
chr9        19389832        19390116        H3K9me2        4.83388        +
chr9        19389628        19390160        H3K27me3        3.20862        +
chr9        19389612        19390154        H3K27me3        3.09976        +
chr9        19389537        19390071        H3K36me3        5.17001        +
chr9        19389679        19389866        H2A1        5.60577        +
chr9        19389474        19390067        H3K27me3        3.88004        +
chr9        19389604        19389916        H3K9me3        3.65624        +
chr9        19389442        19390070        H3K36me3        5.59891        +
chr9        19389596        19389858        H3K27me3        2.82685        +
chr9        19389365        19389920        H3K27me3        3.5976        +
chr9        19389383        19389788        H3K27me3        5.37399        +
chr9        19389186        19389907        H3K9me3        3.41964        +
chr9        19388884        19389923        H3K27me3        2.95363        +
chr9        19389140        19389646        H3K27ac        3.96707        +
chr9        19389213        19389486        H3K27ac        3.87833        +
chr9        19389191        19389337        H3K4me1        4.36872        +
chr9        19388378        19389739        H3K27me3        2.87973        +
chr9        19388883        19389036        H3R26Cit        6.9541        +
chr9        19388801        19389107        H3K4me1        4.25031        +
chr9        19388570        19389082        H3K4me1        6.32751        +
chr9        19388727        19388881        H3R26Cit        6.49266        +
chr9        19388717        19388863        H3K27ac        6.29296        +
chr9        19388624        19388935        H3K27ac        6.48228        +
chr9        19388671        19388879        H3K27ac        3.69249        +
chr9        19388604        19388907        H3K4me1        4.48585        +
chr9        19388653        19388857        H3K27ac        4.85824        +
chr9        19388474        19388963        H3K27ac        6.17619        +
chr9        19388431        19388991        H3K27ac        5.67967        +
chr9        19388461        19388807        H3K4me1        4.46337        +
chr9        19388553        19388699        H3K27ac        5.47963        +
chr9        19388500        19388731        H3        4.9075        +
chr9        19388532        19388690        H3K4me1        4.97545        +
chr9        19388507        19388677        H3K4me1        4.70582        +
chr9        19388507        19388655        H3K4me1        4.03827        +
chr9        19388491        19388649        H3K36me3        4.81725        +
chr9        19388450        19388687        H3K4me3        5.13375        +
chr9        19388492        19388642        H3K27me3        3.50288        +
chr9        19388487        19388644        H3K27ac        4.57652        +

最后的效果如下:
igv_js.png


这个是主动型的显示数据,还有被动型的,下次再介绍~~~~~~


你这个问题很复杂,需要打赏,请点击 http://www.bio-info-trainee.com/donate 进行打赏,谢谢
回复

使用道具 举报

633

主题

1182

帖子

4030

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4030
 楼主| 发表于 2017-5-2 20:40:50 | 显示全部楼层
远程用url加载css和js文件可能会速度不快,建议把那6个文件下载下来再加载。
[Shell] 纯文本查看 复制代码
wget https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css 
wget https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
wget https://igv.org/web/release/1.0.7/igv-1.0.7.css
wget https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
wget https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
wget https://igv.org/web/release/1.0.7/igv-1.0.7.js

你这个问题很复杂,需要打赏,请点击 http://www.bio-info-trainee.com/donate 进行打赏,谢谢
回复 支持 反对

使用道具 举报

0

主题

2

帖子

35

积分

新手上路

Rank: 1

积分
35
发表于 2017-5-3 10:11:39 | 显示全部楼层
建议搭建自己的 ga4gh 标准server,通过REST API 来显示自己的数据
回复 支持 反对

使用道具 举报

633

主题

1182

帖子

4030

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4030
 楼主| 发表于 2017-5-4 11:04:45 | 显示全部楼层
Jimmy 发表于 2017-5-2 20:40
远程用url加载css和js文件可能会速度不快,建议把那6个文件下载下来再加载。
[mw_shl_code=shell,true]wget ...

Examples




你这个问题很复杂,需要打赏,请点击 http://www.bio-info-trainee.com/donate 进行打赏,谢谢
回复 支持 反对

使用道具 举报

633

主题

1182

帖子

4030

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4030
 楼主| 发表于 2017-5-4 11:05:52 | 显示全部楼层
xux9894664 发表于 2017-5-3 10:11
建议搭建自己的 ga4gh 标准server,通过REST API 来显示自己的数据

我表示完全不懂,可否抽空写一篇简单入门教程呢大神
你这个问题很复杂,需要打赏,请点击 http://www.bio-info-trainee.com/donate 进行打赏,谢谢
回复 支持 反对

使用道具 举报

0

主题

1

帖子

59

积分

注册会员

Rank: 2

积分
59
发表于 2019-6-13 17:42:37 | 显示全部楼层
你好,我最近在做把igv放入shiny的工作,根据你的帖子内容摸索得差不多了,这个帖子很有用,谢谢!但是我遇到了一个问题,就是我把要显示的文件放在shiny应用文件夹下的www文件夹的时候,在track里面看上去像加载完了,但是图像显示不出来,不知道是什么问题。我在igv.js的track里面还加了一些链接作为测试,发现使用链接的track都显示正常,只有引用本地文件的不行
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|生信技能树 ( 粤ICP备15016384号  

GMT+8, 2019-11-20 00:48 , Processed in 0.042648 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.