04 August 2010

A Tiny Genome Browser (XHTML/Javascript/json/svg)

I'm currently working on a small set of NGS data and all I need is a simple genome browser to display my mutations while being able to select some SNPs according to some criteria (is it a known rs## , what is the prediction with SIFT or/and Polyphen ?, etc... ). As it is a relative small amount of data, it can be embedded in a webpage without needing a web server.

First, I need a description of the genes as JSON: I described yesterday how I generated this file using mysql, XSLT and the data from the UCSC:

var knownGenes=[{"name":"uc001aaa.3","chrom":"chr1","strand":"+","txStart":11873,"txEnd":14409,"cdsStart":11873,"cdsEnd":11873,"exonCount":3,"exonStarts":[11873,12612,13220],"exonEnds":[12227,12721,14409],"proteinID":"","alignID":"uc001aaa.3"}

Second, I need a JSON description of my data:
/** these are ==RANDOM== data */
var variations=[
{"chrom":"chr1","start":792398,"end":792399,"ref":"A","alt":"G","struct":false,"depth":89,"sift":"TOLERATED","pph2div":"probably damaging","pph2var":"benign","rs":null,"hq":true,"id":1},
{"chrom":"chr1","start":959761,"end":959762,"ref":"A","alt":"G","struct":false,"depth":76,"sift":"DAMAGING","pph2div":"probably damaging","pph2var":"benign","rs":null,"hq":true,"id":2}

Third, I wrote a small genome browser using javascript , displaying the data as SVG and using the two previous files. Here is a screenshot:

I posted a random sample of the files on http://gist.github.com/508676, feel free to play with it.

That's it


casbon said...

You know jbrowse is perfect for this stuff. You just need GFF3 inputs. I use it for this kind of browser all the time.

Pierre Lindenbaum said...

... but jbrowse requires an external server.

casbon said...

Well, I just use 'python -m SimpleHTTPServer' inside a directory. Works pretty well at serving anything.

Pierre Lindenbaum said...

Thanks, nice to know