D3 scatter plot

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <div class="container">
  </div>
</body>

CSS

.container {
  width: 80%;
  margin: 0 auto;
  padding-top: 50px;
  svg {
    margin: 0 auto;
    width: 600px;
    // border: 1px dashed grey;
  }
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

JavaScript

var w = 500,
    h = 300,
    padding = 25,
    dataset = [],
    numDataPoints = 50,
    height = 1,
    width = 1;

for (var i = 0; i < numDataPoints; i++) {
  var newNumber1 = Math.random();
  var newNumber2 = Math.random();	
  
	dataset.push([newNumber1, newNumber2]);
}

//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]);

var rScale = d3.scale.linear()
							 .domain([0, d3.max(dataset, function(d) {
                 return d[1];
               })])
							.range([2, 5]);

var formatAsPercentage = d3.format(".1%"); 

//Define X axis
var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(5) 
              .tickFormat(formatAsPercentage);

//Define Y axis
var yAxis = d3.svg.axis()
              .scale(yScale)
							.orient("left")
							.ticks(5)
							.tickFormat(formatAsPercentage);

//Create SVG element
var svg = d3.select(".container")
						.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", function(d) {
	   return rScale(d[1]);
	 })
   .on("click", dragstarted)
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));
var upper, lower;
function dragstarted(d) {
	console.log("This: " + xScale(d[0]));
  lower = d[0] * 0.5;
  upper = d[0] * 1.15;
  d3.select(this).raise().classed("active", true);
  var priceRange = d3.scaleLinear()
    .domain([lower, upper])
   ...