sales points 5 | add range to axes

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Cleaning Up</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		
		<style type="text/css">
					
			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

dots_svg {
				background-color: white;
			}

circle {
				fill: #B2B2CC;
			}

circle:hover {
				fill: orange;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 10px;
			}

.y.axis path,
			.y.axis line {
				opacity: 0;
			}
		</style>
		
		
	</head>

<body>
<h1>header here </h1>
	<script type = "text/javascript">

var w = 200;
	var h = 200;
	var padding = [ 10, 10, 10, 30 ];

var xScale = d3.scale.ordinal()
		.rangeRoundBands([ padding[3], w - padding[1] - padding[3] ]);
	
	var yScale = d3.scale.linear()
		.range([ padding[0], h - padding[2] ]);
	
	var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom");

var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left");

var dots = dots_svg.selectAll("circle")
			.data(data)
			.enter()
			.append("circle");

dots.attr("cx", function(d) {
				return xScale(d.month);
			})
			.attr("cy", function(d) {
				return yScale(d.sales);
			})
			.attr("r", 5)
			.attr("fill", "#ece7f2")

dots_svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(0," + (h - barPadding) + ")")
			.call(xAxis);

dots_svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + barPadding + ", 0 )")
			.call(yAxis);

})
    
	</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js