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:

https://github.com/lindenb/jvarkit/wiki/LiftOverToSVG

"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.