// source http://jsbin.com/jimava/5

<!doctype html>
<html ng-app="foo">
  <head>
<script src="https://d3js.org/d3.v3.min.js"></script>
  <style id="jsbin-css">
.axis path,
.axis line {
  fill: none;
  stroke:black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family:'Avenir Next Condensed',sans-serif;
  font-size:14px;
}
</style>
</head>
  <body>    
  <script id="jsbin-javascript">
// /*
var dataset = [];
var width = 500;
var height = 300;
var padding = 30;

for(var i = 0; i < 50; i++){
  var dataPoint=[];
  dataPoint.push(Math.random() * 600);
  dataPoint.push((Math.random() * 100) + 10);
  dataset.push(dataPoint);
}

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

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

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

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient('bottom')
              .ticks(5);

var yAxis = d3.svg.axis()
              .scale(yScale)
              .orient('left')
              .ticks(5);

var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);

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

svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);

svg.append('g')
.attr('class', 'axis')
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>

.axis text {
  font-family:'Avenir Next Condensed',sans-serif;
  font-size:14px;
}</script>