D3 Examples - sales points 5 | add range to axes

xxxxxxxxxx
 
​
​
<!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_svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
    
    d3.csv("months.csv", function(data) {
    
        data.sort(function(a, b) {
            return d3.descending(+a.sales, +b.sales);
        });
        
        xScale.domain([0, d3.max(data, function(d) {
            return +d.sales;
        })]);
    
        yScale.domain(data.map(function(d) {
            return d.month;
        }));
​
        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>
 
    