ClippingMask

<!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 scatter=function(){
	var xScale = d3.scale.linear()
									.domain([0,d3.max(points,function(d){
										return d[0];
									})])
									.range([padding+30,w-padding*2]);

var yScale= d3.scale.linear()
									.domain([0,d3.max(points,function(d){
									return d[1];
									})])
									.range([h-padding-30,padding]);

var rScale = d3.scale.linear()
									.domain([0,d3.max(dataset,function(d){
										return d[1];
									})])
									.range([2,5]);
	
	var cValue = d3.scale.category10();
	
	svg.append("clipPath")
				.attr("id","chart-area")
				.append("rect")
				.attr("x",padding+20)
				.attr("y",padding)
				.attr("width",w-padding*3)
				.attr("height",h-padding*2)

svg.append("g")
				.attr("id","circles")
				.attr("clip-path","url(#chart-area)")
				.selectAll("circle")
				.data(points)
				.enter()
				.append("circle")
				.attr("cx",function(d){
					return xScale(d[0]);
				})
				.attr("cy",function(d){
					return yScale(d[1]);	
				})
				.attr("r",function(d){
					return rScale(d[1])*2.5;
				})
				.attr("fill",function(d){
					return cValue(d);
				});

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom");
	var yAxis= d3.svg.axis()
						.scale(yScale)
						.orient("left");
	
	svg.append("g")
		.attr("class","xaxis")
		.attr("transform","translate(0,"+(h-padding-15)+")")
		.call(xAxis);

svg.append("g")
		.attr("class","yaxis")
		.attr("transform","translate(50,0)")
		.call(yAxis);
	
	svg.selectAll("circle")
	.on("click", function(){
		for(var b=0;b<p.length;b++){
			p[b][0]=p[b][0]*.85;
			p[b][1]=p[b][1]*.5;
			points=p;
		}
		svg.selectAll("circle")
			.data(points)
			.transition()
			.duration(1000)
			.attr("cx",function(d){
					return xScale(d[0])*.85;
				})
			.attr("cy",function(d){
					return yScale(d[1])*.5;
				});
		
		svg.select("xaxis")
			.transition()
			.duration(1000)
			.call(xAxis);

svg.select("yaxis")
			.transition()
			.duration(1000)
			.call(yAxis);
	});

makeLabels(xAxis, yAxis,points);
};

var makeLabels=function(xAx, yAx,p){
	svg.append("text")
	.text("Calories per Serving")
	.attr("x",180)
	.attr("y",-7)
	.attr("transform",function(d){
		return "rotate(90)"
	});

svg.append("text")
	.text("Grams of Fat Per Serving")
	.attr("x",280)
	.attr("y",h-8);
};
</script>
</body>
</html>