nimezhu · September 24, 2015 05:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>query genes to bar plot</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <script src="../lib/snowflake.js" charset="utf-8"></script>
 </head>
 <body>
 <h2></h2>
 <div id="main">
 <div id="input">
 <textarea id="genes" rows="5" cols="20"></textarea>
 </div>
 <div id="canvas">
 </div>
 <div>
 </div>
 <script>
 (function($,d3,S){
 var svg=d3.select("#main").append("svg").attr("height",1000).attr("width",1680);
 var url=S.tools.getUrlParam("q")
 var genes=S.tools.getUrlParam("genes") ||  "RUNX1,STAT1,STAT2,STAT3,NOS2"
 $("#genes").text(genes);
 var cols=S.tools.getUrlParamList("cols") || [3,4,5,6,7]
 var handleData = function(data) {
 	window.data=data;
 }
 S.tools.parseUrlTsv(url,handleData) 
 var plot = function() {
 	var genelist=$("#genes").val().split(",");
 	var geneset = {};
 	genelist.forEach(function ( val ) {
   		geneset[val.toUpperCase()] = 1;
 	});
 	var genedata = {}
 	var lmax=-Infinity;
 	data.table.rows.forEach( function(d) {
 		var k=d.c[0].v.toUpperCase();
 		console.log(d);
 		if (geneset[k]){
 		genedata[k]=d;
 		cols.forEach(function(i){
 			console.log(d.c[i])
 			var c=parseFloat(d.c[i].v);
 			if(lmax<c) {lmax=c};
 			})
 		}	
 	})
 	var barplot = function() {
 	var height=120;
 	var domain;
 	var scale=d3.scale.linear().range([0,height]);
 	function max(array) {
 		var max=-Infinity;
 		array.forEach(function(d0){ if (max<d0){max=d0}})
 		return max
 	}
 	function barplot(el) {
 	el.selectAll("svg").remove();
 	var svg=el.append("svg");
 	var id=""
 	el.attr("id",function(d) {
 		var ldata=[];
 		cols.forEach(function(i){ldata.push(parseFloat(genedata[d].c[i].v))})
 		scale.domain(domain || [0,max(ldata)])
 		svg.selectAll("rect").data(ldata).enter()
 		.append("rect")
 		.attr("x",function(d0,i) {return i*10})
 		.attr("y",function(d0,i) {return height-scale(d0)})
 		.attr("height",function(d0,i) {return scale(d0)})
 		.attr("width",8 )
 		.attr("fill","blue").append("title").text(function(d0,i){return d0});
 		id=d;
 		return d
 	})
 	svg.attr("id","svg_"+id);
 	}
 	barplot.domain=function(x) {
    		if (!arguments.length) return domain;
 		domain=x;
    		return barplot;
  		};
 	return barplot
 	}
 	d3.select("#canvas").selectAll("div").remove();
 	var divs = d3.select("#canvas").selectAll("div")
 		.data(genelist)
 		.enter()
 		.append("div")
 		.style("float","left")
 		.style("width","200px")
 		.style("height","200px")
 	divs.append("text")
 		.text(function(d){
 	return d});
 	divs.attr("id",function(d) {
 	var chart=barplot()
 	if($("#scale").val()==0){	
 	  chart.domain([0,lmax]);
 	} else {
 	}
 	d3.select(this).data([d]).call(chart);
 	return d;
 	})
 		
 }

 var btnPlot=d3.select("#input").append("button").attr("value","plot").append("text").text("plot");
 var scaleOptions=d3.select("#input").append("select").attr("id","scale");
 scaleOptions.selectAll("option")
 	.data(["Global","Local"])
 	.enter().append("option").attr("value",function(d,i){return i}).append("text").text(function(d){return d})

 btnPlot.on("click",function(e){ plot()})

 }(jQuery,d3,snowflake))
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>query genes to bar plot</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="../lib/snowflake.js" charset="utf-8"></script>
	</head>
	<body>
	<h2></h2>
	<div id="main">
	<div id="input">
	<textarea id="genes" rows="5" cols="20"></textarea>
	</div>
	<div id="canvas">
	</div>
	<div>
	</div>
	<script>
	(function($,d3,S){
	var svg=d3.select("#main").append("svg").attr("height",1000).attr("width",1680);
	var url=S.tools.getUrlParam("q")
	var genes=S.tools.getUrlParam("genes") \|\| "RUNX1,STAT1,STAT2,STAT3,NOS2"
	$("#genes").text(genes);
	var cols=S.tools.getUrlParamList("cols") \|\| [3,4,5,6,7]
	var handleData = function(data) {
	window.data=data;
	}
	S.tools.parseUrlTsv(url,handleData)
	var plot = function() {
	var genelist=$("#genes").val().split(",");
	var geneset = {};
	genelist.forEach(function ( val ) {
	geneset[val.toUpperCase()] = 1;
	});
	var genedata = {}
	var lmax=-Infinity;
	data.table.rows.forEach( function(d) {
	var k=d.c[0].v.toUpperCase();
	console.log(d);
	if (geneset[k]){
	genedata[k]=d;
	cols.forEach(function(i){
	console.log(d.c[i])
	var c=parseFloat(d.c[i].v);
	if(lmax<c) {lmax=c};
	})
	}
	})
	var barplot = function() {
	var height=120;
	var domain;
	var scale=d3.scale.linear().range([0,height]);
	function max(array) {
	var max=-Infinity;
	array.forEach(function(d0){ if (max<d0){max=d0}})
	return max
	}
	function barplot(el) {
	el.selectAll("svg").remove();
	var svg=el.append("svg");
	var id=""
	el.attr("id",function(d) {
	var ldata=[];
	cols.forEach(function(i){ldata.push(parseFloat(genedata[d].c[i].v))})
	scale.domain(domain \|\| [0,max(ldata)])
	svg.selectAll("rect").data(ldata).enter()
	.append("rect")
	.attr("x",function(d0,i) {return i*10})
	.attr("y",function(d0,i) {return height-scale(d0)})
	.attr("height",function(d0,i) {return scale(d0)})
	.attr("width",8 )
	.attr("fill","blue").append("title").text(function(d0,i){return d0});
	id=d;
	return d
	})
	svg.attr("id","svg_"+id);
	}
	barplot.domain=function(x) {
	if (!arguments.length) return domain;
	domain=x;
	return barplot;
	};
	return barplot
	}
	d3.select("#canvas").selectAll("div").remove();
	var divs = d3.select("#canvas").selectAll("div")
	.data(genelist)
	.enter()
	.append("div")
	.style("float","left")
	.style("width","200px")
	.style("height","200px")
	divs.append("text")
	.text(function(d){
	return d});
	divs.attr("id",function(d) {
	var chart=barplot()
	if($("#scale").val()==0){
	chart.domain([0,lmax]);
	} else {
	}
	d3.select(this).data([d]).call(chart);
	return d;
	})

	}

	var btnPlot=d3.select("#input").append("button").attr("value","plot").append("text").text("plot");
	var scaleOptions=d3.select("#input").append("select").attr("id","scale");
	scaleOptions.selectAll("option")
	.data(["Global","Local"])
	.enter().append("option").attr("value",function(d,i){return i}).append("text").text(function(d){return d})

	btnPlot.on("click",function(e){ plot()})

	}(jQuery,d3,snowflake))
	</script>
	</body>
	</html>