Dynamic Scales

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="utf-8">
<title>Title Here</title>
<script type="text/javascript" src="../d3.v3/d3.v3.js"></script>
<style type="text/css">
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
.axis text{
	font-family:sans-serif;
	font-size: 11px;
}
</style>
</head>
<body>

var dataset=[];
var xRange = Math.random()*1000;
var yRange = Math.random()*1000;
var xAxis;
var yAxis;

for(var i =0; i<100; i++){
	pointArray=[];
	pointArray.push(Math.floor(Math.random()*xRange+padding));
	pointArray.push(Math.floor(Math.random()*yRange));
	dataset.push(pointArray);
}

var xScale = d3.scale.linear()
				.domain([0,d3.max(dataset,function(d){
					return d[0];
				})])
				.range([padding+5,w-padding]);

var yScale = d3.scale.linear()
				.domain([0,d3.max(dataset,function(d){
					return d[1];
				})])
				.range([h-padding-10,padding]);
xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom");

yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left");  //orientation for labels

svg.append("g")
			.attr("class","x axis")
			.attr("transform","translate("+padding+","+(h-padding)+")")
			.call(xAxis);
svg.append("g")
			.attr("class","y axis")
			.attr("transform", "translate("+padding+","+-10+")")
			.call(yAxis);

svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d){
	return xScale(d[0]);
})
.attr("cy",function(d){
	return yScale(d[1]);
})
.attr("r",function(d){
	return Math.sqrt(h-yScale(d[1]));
})
.attr("fill",function(d){
	return "rgb("+d[0]*2+",0,0)";
});

svg.selectAll("circle")
	.on("click",function(d){
		xRange2 = Math.random()*1000;
		yRange2 = Math.random()*1000;
		
		newData = []

for(var i =0; i<100; i++){
			pArray=[];
			pArray.push(Math.floor(Math.random()*xRange2));
			pArray.push(Math.floor(Math.random()*yRange2));
			newData.push(pArray);
			
		}

yScale2 = d3.scale.linear().domain([0,d3.max(newData,function(d){
								return d[1];
								})])
								.range([h-padding-10,padding]);
		var maxRadius = d3.max(newData,function(d){
			return Math.sqrt(h-yScale2(d[1]));
		});

xScale2 = d3.scale.linear().domain([0,d3.max(newData,function(d){
								return d[0];
								})])
								.range([padding+maxRadius,w-padding]);

xAxis = d3.svg.axis()
				.scale(xScale2)
				.orient("bottom");

yAxis = d3.svg.axis()
				.scale(yScale2)
				.orient("left");  //orientation for labels

svg.select(".x.axis")
						.transition()
						.duration(100)
						.call(xAxis);
		svg.select(".y.axis")
						.transition()
						.duration(100)
						.call(yAxis);
		
		svg.selectAll("circle")
					.data(newData)
					.transition()
					.duration(1000)
					.attr("fill",function(d){
							return "rgb(0,0,"+d[0]*2+")";
								
					})
					.attr("cx",function(d){
							return xScale2(d[0]);
							})
					.attr("cy",function(d){
						if(d[1]>=0){
							return yScale2(d[1]);
						}
						else{
							return h-50;
							}
						})
					.attr("r",function(d){
						if(d[1]>=0){
							return Math.sqrt(h-yScale2(d[1]));
										}
						else{
							return 0;
							}		
					});

});

</script>
</body>
</html>