nimezhu · July 18, 2015 17:01
diff --git a/scatter_heatmap.html b/scatter_heatmap.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Scatter HeatMap Demo</title>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 </head>
 <body>
 <div id="canvas">
 	
 </div>
 <script>
 //pass in the mean and standard deviation
 (function(d3,$){

 var random_array_generator=function(n) {
 	var a=[]
 	for(var i=0;i<n;i++) { a.push(Math.random())}
 	return a
 }
 var seqnum_array_generator=function(n) {
 	var a=[]
 	for(var i=0;i<n;i++) { a.push(i)}
 	return a
 }
 var square = function(d) {
 	var retv = {
 		"i":d,"x":0,"y":0,"c":0,"d":[]
 	}
 	return retv
 }
 var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 540 - margin.left - margin.right,
    height = 570 - margin.top - margin.bottom;
 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 var num=10000
 var x=random_array_generator(num,0,1)
 var y=random_array_generator(num,0,1)
 var data=seqnum_array_generator(num)
 var xmin=d3.min(x)
 var xmax=d3.max(x)
 var ymin=d3.min(y)
 var ymax=d3.max(y)
 var xScale = d3.scale.linear().range([0,width]).domain([xmin,xmax])
 var yScale = d3.scale.linear().range([0,height]).domain([ymin,ymax])
 //var xMap=function(d){return xScale(x[d])} 
 //var yMap=function(d){return yScale(y[d])} 
 var resolution = 50;

 var xindex = d3.scale.linear().range([0,resolution]).domain([xmin,xmax])
 var yindex = d3.scale.linear().range([0,resolution]).domain([ymin,ymax])
 var getXIndex=function(d) {
 	return Math.floor(xindex(d))
 }
 var getYIndex=function(d) {
 	return Math.floor(yindex(d))
 }

 var sq_data={}


 data.forEach(function(d) {
 	var xindex=getXIndex(x[d])
 	var yindex=getYIndex(y[d])
 	var index=yindex*resolution+xindex
 	if (sq_data[index]) {
 		sq_data[index].d.push([x[d],y[d]])
 		sq_data[index].c+=1
 	} else {
 		var sq = square();
 		sq.x=xindex;
 		sq.y=yindex;
 		sq.i=index;
 		sq.c=1;
 		sq.d.push([x[d],y[d]])
 		sq_data[index]=sq;
 	}
 	 
 })
 var max_c=d3.max(Object.keys(sq_data),function(d){return sq_data[d].c})
 var colorScale = d3.scale.linear().range(["white","red"]).domain([0,max_c])
 var sqs = svg.selectAll(".sq")
      		.data(Object.keys(sq_data))
    		.enter().append("g")
      		.attr("class", "sq")
 var rect_height=Math.round(height/resolution)
 var rect_width=Math.round(width/resolution)
 sqs.filter(function(d){if(sq_data[d].c>2) {return true} else {return false}}).append("rect")
 	.attr("x",function(d) {return xScale(sq_data[d].x/resolution)})
 	.attr("y",function(d) {return yScale(sq_data[d].y/resolution)})
 	.attr("height",rect_height)
 	.attr("width",rect_width)
 	.attr("fill",function(d){return colorScale(sq_data[d].c)})
 	.on("mouseover",function(d){d3.select(this).attr("height",rect_height+2).attr("width",rect_width+2)})
 	.on("mouseout",function(d){d3.select(this).attr("height",rect_height).attr("width",rect_width)}) 
 	//.attr("fill","grey") 
 sqs.filter(function(d){if(sq_data[d].c>2) {return false} else {return true}})
 	.append("g").attr("class","exp_rect").attr("count",function(d) {
 	d3.select(this).selectAll(".dot").data(sq_data[d].d).enter().append("circle").attr("class","dot")
 	.attr("cx",function(d){return xScale(d[0])})
 	.attr("cy",function(d){return yScale(d[1])})
 	.attr("fill","black")
 	.attr("r",1)
 	.on("mouseover",function(d){d3.select(this).attr("r",2.5)})
 	.on("mouseout",function(d){d3.select(this).attr("r",1)})
 	})
 }(d3,jQuery))
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Scatter HeatMap Demo</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	</head>
	<body>
	<div id="canvas">

	</div>
	<script>
	//pass in the mean and standard deviation
	(function(d3,$){

	var random_array_generator=function(n) {
	var a=[]
	for(var i=0;i<n;i++) { a.push(Math.random())}
	return a
	}
	var seqnum_array_generator=function(n) {
	var a=[]
	for(var i=0;i<n;i++) { a.push(i)}
	return a
	}
	var square = function(d) {
	var retv = {
	"i":d,"x":0,"y":0,"c":0,"d":[]
	}
	return retv
	}
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 540 - margin.left - margin.right,
	height = 570 - margin.top - margin.bottom;
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var num=10000
	var x=random_array_generator(num,0,1)
	var y=random_array_generator(num,0,1)
	var data=seqnum_array_generator(num)
	var xmin=d3.min(x)
	var xmax=d3.max(x)
	var ymin=d3.min(y)
	var ymax=d3.max(y)
	var xScale = d3.scale.linear().range([0,width]).domain([xmin,xmax])
	var yScale = d3.scale.linear().range([0,height]).domain([ymin,ymax])
	//var xMap=function(d){return xScale(x[d])}
	//var yMap=function(d){return yScale(y[d])}
	var resolution = 50;

	var xindex = d3.scale.linear().range([0,resolution]).domain([xmin,xmax])
	var yindex = d3.scale.linear().range([0,resolution]).domain([ymin,ymax])
	var getXIndex=function(d) {
	return Math.floor(xindex(d))
	}
	var getYIndex=function(d) {
	return Math.floor(yindex(d))
	}

	var sq_data={}


	data.forEach(function(d) {
	var xindex=getXIndex(x[d])
	var yindex=getYIndex(y[d])
	var index=yindex*resolution+xindex
	if (sq_data[index]) {
	sq_data[index].d.push([x[d],y[d]])
	sq_data[index].c+=1
	} else {
	var sq = square();
	sq.x=xindex;
	sq.y=yindex;
	sq.i=index;
	sq.c=1;
	sq.d.push([x[d],y[d]])
	sq_data[index]=sq;
	}

	})
	var max_c=d3.max(Object.keys(sq_data),function(d){return sq_data[d].c})
	var colorScale = d3.scale.linear().range(["white","red"]).domain([0,max_c])
	var sqs = svg.selectAll(".sq")
	.data(Object.keys(sq_data))
	.enter().append("g")
	.attr("class", "sq")
	var rect_height=Math.round(height/resolution)
	var rect_width=Math.round(width/resolution)
	sqs.filter(function(d){if(sq_data[d].c>2) {return true} else {return false}}).append("rect")
	.attr("x",function(d) {return xScale(sq_data[d].x/resolution)})
	.attr("y",function(d) {return yScale(sq_data[d].y/resolution)})
	.attr("height",rect_height)
	.attr("width",rect_width)
	.attr("fill",function(d){return colorScale(sq_data[d].c)})
	.on("mouseover",function(d){d3.select(this).attr("height",rect_height+2).attr("width",rect_width+2)})
	.on("mouseout",function(d){d3.select(this).attr("height",rect_height).attr("width",rect_width)})
	//.attr("fill","grey")
	sqs.filter(function(d){if(sq_data[d].c>2) {return false} else {return true}})
	.append("g").attr("class","exp_rect").attr("count",function(d) {
	d3.select(this).selectAll(".dot").data(sq_data[d].d).enter().append("circle").attr("class","dot")
	.attr("cx",function(d){return xScale(d[0])})
	.attr("cy",function(d){return yScale(d[1])})
	.attr("fill","black")
	.attr("r",1)
	.on("mouseover",function(d){d3.select(this).attr("r",2.5)})
	.on("mouseout",function(d){d3.select(this).attr("r",1)})
	})
	}(d3,jQuery))
	</script>
	</body>
	</html>