Tool for rendering quick PNG/SVG/etc. from a single BED12 element?

1

Entering edit mode

6.2 years ago

Alex Reynolds 36k

In attempting not to reinvent the wheel, are there any lightweight tools that take a single BED12 element and quickly render its intron/UTR/CDS structure and directionality?

I'm not looking for a heavyweight toolkit or framework that renders a static genome browser shot of multiple BED12 elements, but something that takes in an element and simply shows a rough sketch of its structure. Thanks for any tips!

visualization bed12 gene bed • 1.6k views

ADD COMMENT • link updated 6.2 years ago by Pierre Lindenbaum 166k • written 6.2 years ago by Alex Reynolds 36k

4

Entering edit mode

6.2 years ago

Pierre Lindenbaum 166k

a very basic html form converting a bed12 entry to SVG :

	<html xmlns:xhtml="http://www.w3.org/1999/xhtml">
	<head>

	<script>

	function element(name) {
	return document.createElementNS("http://www.w3.org/2000/svg",name);
	}

	function run() {
	var tokens = document.getElementById("bed12").value.split(/[ \t]+/);

	var gmain = document.getElementById("main");
	while (gmain.firstChild) gmain.removeChild(gmain.firstChild);
	console.log(tokens.length);
	if(tokens.length<12) return;
	var col=1;
	var chromStart = parseInt(tokens[col++]);
	var chromEnd = parseInt(tokens[col++]);
	var name= tokens[col++];
	var score = tokens[col++];
	var strand = tokens[col++];
	var thickStart = parseInt(tokens[col++]);
	var thickEnd = parseInt(tokens[col++]);
	var color= tokens[col++];
	var blockCount = parseInt(tokens[col++]);
	var blockSizes = tokens[col++].split(/[,]/).map(function(s){return parseInt(s);});
	var blockStarts = tokens[col++].split(/[,]/).map(function(s){return parseInt(s);});
	var height=12;
	var mid = height/2.0;
	var width = 1000.0;
	var pos2pixel = function(pos) {
	return ((pos - chromStart)/((chromEnd - chromStart)1.0))width;
	};



	var line= element("line");
	line.setAttribute("class","gene");
	line.setAttribute("x1",pos2pixel(chromStart));
	line.setAttribute("x2",pos2pixel(chromEnd));
	line.setAttribute("y1",mid);
	line.setAttribute("y2",mid);
	gmain.appendChild(line);

	var rect= element("rect");
	rect.setAttribute("class","translate");
	rect.setAttribute("x",pos2pixel(thickStart));
	rect.setAttribute("y",mid-2);
	rect.setAttribute("width",pos2pixel(thickEnd)-pos2pixel(thickStart));
	rect.setAttribute("height",4);
	gmain.appendChild(rect);

	for(var i=0;i< width;i+=10) {
	var use=element("use");
	use.setAttribute("x",i);
	use.setAttribute("y",mid);
	use.setAttribute("href","#"+(strand=="+"?"ft":"rt"));
	gmain.appendChild(use);
	}


	for(var i=0;i< blockCount;i++)
	{

	var exonStart= chromStart+blockStarts[i];
	var exonEnd = exonStart + blockSizes[i];

	rect= element("rect");
	rect.setAttribute("class","exon");
	rect.setAttribute("x",pos2pixel(exonStart));
	rect.setAttribute("y",mid-8);
	rect.setAttribute("width",pos2pixel(exonEnd)-pos2pixel(exonStart));
	rect.setAttribute("height",16);
	gmain.appendChild(rect);
	}

	console.log("ok");
	}


	</script>
	<body>
	<input type="text" id="bed12" onchange="run()" placeholder="bed12" value="chr1 119911552 120069703 NM_024408.3 0 - 119915305 120069406 0 34 5142,98,148,302,169,97,211,143,348,506,113,237,133,185,154,202,229,153,120,114,146,193,111,234,114,114,189,156,234,123,336,260,82,370, 0,6112,6853,7759,8676,10160,10683,11083,12084,13752,14946,17423,23919,25729,26304,29002,29973,36861,37454,39171,41990,43487,47839,52021,53900,54823,55880,56524,57958,75407,85444,93776,118353,157781,"/><button onclick="run();">Run</button><br/>
	<hr/>
	<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="14" style="stroke-width:1px;">
	<style type="text/css">
	.ticks {stroke:black;stroke-width:1px;fill:none;}
	.gene {stroke:black;stroke-width:1px;fill:none;}
	.translate { stroke:gray;stroke-width:1px;fill:green;fill-opacity:0.1;}
	.exon { stroke:blue;stroke-width:1px;fill:orange;fill-opacity:0.3;}
	</style>
	<defs>
	<path id="ft" class="ticks" d="m -3 -3 l 3 3 l -3 3"/>
	<path id="rt" class="ticks" d="m 3 -3 l -3 3 l 3 3"/>
	</defs>
	<g id="main"/>
	</svg>
	<hr/>
	</body>
	</html>