d3 responsive scatterplot

<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>D3 Practice</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="d3/d3.js"></script>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <!-- Add your site or application content here -->
    <h2>Try it out</h2>
    <p style="float:left;">
        <button type='button'>Randomize Data</button>
        </p>

        <script type='text/javascript'>
        var w = 600;
        var h = 250;
        var padding = 30;

         // Create dynamic random dataset function
        var datagen = function() {
            var dataset = [];
            var numValues = 25;
            var maxRange = Math.random() * 1000;
            for (var i = 0; i < numValues; i++) {
                //create x and y coords
                var xnum = Math.floor(Math.random() * maxRange);
                var ynum = Math.floor(Math.random() * maxRange);
                //add number to array
                dataset.push([xnum, ynum]);
            }
            return dataset;
        };
         //creat data
        dataset = datagen();

         // Create scale functions
        var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) {
                return d[0];
            })])
            .range([padding, w - padding * 2]);

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

         // Define Axis
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .ticks(5);
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient('left')
            .ticks(5);

         // Create svg element 
        var svg = d3.select('body')
            .append('svg')
            .attr('width', w)
            .attr('height', h);

         // Create circles
        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', 4)
            .attr('fill', 'teal');

         // Create axis
        svg.append('g') // new group element 
        .attr('class', 'x axis')
         //move to bottom
        .attr('transform', 'translate(' + 0 + ',' + (h - padding) + ')')
            .call(xAxis);

        svg.append('g')
            .attr('class', 'y axis')
         //move left a bit to compensate for padding
        .attr('transform', 'translate(' + padding + ',' + 0 + ')')
            .call(yAxis);

         // On click, update with new random data
        d3.select('button')
            .on('click', function(d) {
                //renew data
                dataset = datagen();

                //Update scale domains
                xScale.domain([0, d3.max(dataset, function(d) {
                    return d[0];
                })]);
                yScale.domain([0, d3.max(dataset, function(d) {
                    return d[1];
                })]);

                // Update all circles
                svg.selectAll('circle')
                    .data(dataset)
                    .transition() // Transition 1
                .duration(1000)
                    .ease('circle')
                    .each('start', function() {
                        d3.select(this)
                            .attr('fill', 'gray')
                            .attr('r', 2);
                    })
                    .attr('cx', function(d) {
                        return xScale(d[0]);
                    })
                    .attr('cy', function(d) {
                        return yScale(d[1]);
                    })
                    .transition() // Transition 2, equiv to below
                .duration(250)
                    .attr('fill', 'teal')
                    .attr('r', 4);

                // .each('end', function() {
                //     d3.select(this)
                //         .transition()
                //         .duration(250)
                //         .attr('fill', 'teal')
                //         .attr('r', 4);
                // });

                // Update axis
                svg.select('.x.axis')
                    .transition()
                    .duration(1000)
                    .call(xAxis);

                svg.select('.y.axis')
                    .transition()
                    .duration(1000)
                    .call(yAxis);

            });
        </script>

</body>

</html>

// Code goes here

svg {
    float:left;
}
#header {
    margin-bottom:10px;
}
bar {
    display: inline-block;
    width: 20px;
    height: 75px;
    /* We'll override height later */
    background-color: teal;
    margin-right:2px;
}
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: auto;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}