Visualizing @GenomeBrowser liftOver/chain files using animated #SVG
I wrote a tool to visualize some UCSC "chain/liftOver" files as an animated SVG file. This tool is available on github at:
"A liftOver file is a chain file, where for each region in the genome the alignments of the best/longest syntenic regions are used to translate features from one version of a genome to another.".SVG Elements and CSS styles can be animated in a SVG file (see http://www.w3.org/TR/SVG/animate.html ) using the <animate/> element.For example the following SVG snippet
- defines a rectangle(x=351,y=35,width=6,height=5).
- at t=60secs the opacity will change from 0 to 0.7 for 2secs
- the position 'x' will move from x=351 to x=350 starting at t=62secs for 16 seconds
- the position 'y' will move from y=35 to y=36 starting at t=62secs for 16 seconds
- the 'width' will grow from width=6 to width=100 starting at t=62secs for 16 seconds
- at t=78secs the opacity will change from 0.7 to 0 for 2secs
<rect x="351" y="35" width="6" height="15"> <animate attributeType="CSS" attributeName="opacity" begin="60" dur="2" from="0" to="0.7" repeatCount="1" fill="freeze"/> <animate attributeType="XML" attributeName="x" begin="62" dur="16" from="351" to="350" repeatCount="1" fill="freeze"/> <animate attributeType="XML" attributeName="y" begin="62" dur="16" from="35" to="36" repeatCount="1" fill="freeze"/> <animate attributeType="XML" attributeName="width" begin="62" dur="16" from="6" to="100" repeatCount="1" fill="freeze"/> <animate attributeType="CSS" attributeName="opacity" begin="78" dur="2" from="0.7" to="0" repeatCount="1" fill="freeze"/> </rect>
A demo hg16-hg17-hg18-hg19-hg38 was posted here: http://cardioserve.nantes.inserm.fr/~lindenb/liftover2svg/hg16ToHg38.svg
visualizing @GenomeBrowser liftOver chain files from hg16 to hg38 using animated SVG: http://t.co/DgXx1vU1Vf pic.twitter.com/eR5e4LeH4R
- Pierre Lindenbaum (@yokofakun) October 30, 2014
That's it,
Pierre.