d3.csv('data.csv', function (data) {
  // Variables
  var body = d3.select('body')
	var margin = { top: 50, right: 50, bottom: 50, left: 50 }
	var h = 500 - margin.top - margin.bottom
	var w = 800 - margin.left - margin.right
	// var formatPercent = d3.format('.2%')
	// Scales
  var colorScale = d3.scale.category20()
  var xScale = d3.scale.linear()
    .domain([0, 700])
    	//d3.min([0,d3.min(data,function (d) { return d.difference })]), 
    	//d3.max([0,d3.max(data,function (d) { return d.difference })]) 
    	//])
    .range([0,w])
  var yScale = d3.scale.linear()
    .domain([0, 400])
    	//d3.min([0,d3.min(data,function (d) { return d.avg_days })]), 
    	//d3.max([0,d3.max(data,function (d) { return d.avg_days })]) 
    	//])
    .range([h,0])
	// SVG
	var svg = body.append('svg')
	    .attr('height',h + margin.top + margin.bottom)
	    .attr('width',w + margin.left + margin.right)
	  .append('g')
	    .attr('transform','translate(' + margin.left + ',' + margin.top + ')')
	// X-axis
	var xAxis = d3.svg.axis()
	  .scale(xScale)
	  // .tickFormat(formatPercent)  this will probably have to change from pecent to a number
	  .ticks(7) // this will have to change to some kind of reasonable number. 
	  .orient('bottom')
  // Y-axis
	var yAxis = d3.svg.axis()
	  .scale(yScale)
	  // .tickFormat(formatPercent) // change from percent
	  .ticks(4) // change to a better range
	  .orient('left')
  // Circles
  var circles = svg.selectAll('circle')
      .data(data)
      .enter()
    .append('circle')
      .attr('cx',function (d) { return xScale(d.difference) }) 
      .attr('cy',function (d) { return yScale(d.avg_days) }) 
      .attr('r','7')
      .attr('stroke','black')
      .attr('stroke-width',1)
      .attr('fill',function (d,i) { return colorScale(i) })
      .on('mouseover', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',20)
          .attr('stroke-width',3)
      })
      .on('mouseout', function () {
        d3.select(this)
          .transition()
          .duration(500)
          .attr('r',10)
          .attr('stroke-width',1)
      })
    .append('title') // Tooltip
      .text(function (d) { return d.type + ": " + d.level +
                           '\nLow End: ' + d.min_days + " days" +
                           '\nHigh End: ' + d.max_days + " days" })
  // X-axis
  svg.append('g')
      .attr('class','axis')
      .attr('transform', 'translate(0,' + h + ')')
      .call(xAxis)
    .append('text') // X-axis Label
      .attr('class','label')
      .attr('y',-10)
      .attr('x',w)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('Variability of Recovery') 
  // Y-axis
  svg.append('g')
      .attr('class', 'axis')
      .call(yAxis)
    .append('text') // y-axis Label
      .attr('class','label')
      .attr('transform','rotate(-90)')
      .attr('x',0)
      .attr('y',5)
      .attr('dy','.71em')
      .style('text-anchor','end')
      .text('Average Days to Recovery') 
})