Edit in JSFiddle

Result
JavaScript
HTML
CSS

var w = 500,
    h = 300,
    padding = 30,
    dataset = [],
    numDataPoints = 50,
    xRange = Math.random() * 1000,
    yRange = Math.random() * 1000;

for (var i = 0; i < numDataPoints; i++) {
  var newNumber1 = Math.floor(Math.random() * xRange);
  var newNumber2 = Math.floor(Math.random() * yRange);	
  
	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]);
	 });


//Create labels
svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
   		return d[0] + "," + d[1];
   })
   .attr("x", function(d) {
   		return xScale(d[0]);
   })
   .attr("y", function(d) {
   		return yScale(d[1]);
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "red");


//Create X axis
svg.append("g")
   .attr("class", "axis")
   .attr("transform", "translate(0," + (h - padding) + ")")
   .call(xAxis);

//Create Y axis
svg.append("g")
   .attr("class", "axis")
   .attr("transform", "translate(" + padding + ",0)")
   .call(yAxis);

<body>
  <div class="container">
    <h1>D3.js Bar Scatterplot</h1>
  </div>
</body>

body {
  background-color: #FEF1A3;
}

.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;
}