var margin = 50,
    width = 700,
    height = 442;

var svg = d3.select("svg")
var bg_color = "#986C9E";
trib.adjust_y_axes = 0;
r = 6.9525;
d3.json('/static/bus_perf.json', function(data){

  	svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", bg_color)
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle");

  x_extent = d3.extent(data, function(d){return d.collision_with_injury});
  var x_scale = d3.scale.linear()
      .range([margin,width-margin])
      .domain(x_extent);

  y_extent = d3.extent(data, function(d){return d.dist_between_fail});
  var y_scale = d3.scale.linear()
      .range([height-margin, margin])
      .domain(y_extent);

  d3.selectAll("circle")
    .attr("cx", function(d){return x_scale(d.collision_with_injury)})
    .attr("cy", function(d){return y_scale(d.dist_between_fail)});

  d3.selectAll("circle")
    .attr("r",r);

  var x_axis = d3.svg.axis().scale(x_scale);
  var y_axis = d3.svg.axis().scale(y_scale).orient("left");


  svg
    .append("g")
    	.attr("class", "x axis")
	    .attr("transform", "translate(0," + (height-margin) + ")")
    .call(x_axis);

  svg
    .append("g")
    	.attr("class", "y axis")
      .attr("transform", "translate(" + (margin + trib.adjust_y_axes)  + "," + 6 + ")")
    .call(y_axis);

  d3.selectAll(".axis path")
    .attr("fill","none")
    .attr("stroke","black");

  d3.selectAll(".axis")
    .attr("font-size","8pt")
    .attr("font-family","sans-serif");

  d3.selectAll(".tick")
    .attr("fill","none")
    .attr("stroke","black");


  d3.selectAll("circle")
    .attr("stroke-width","0.5px")
    .attr("stroke","black")
    .attr("opacity","0.5")
    .attr("fill","RoyalBlue");
});