var precinctArray = [];
  var recordsArray = [];
  var array = [];

  var translate = function(x,y){
    return "translate(" + String(x) + "," + String(y) + ")";
  }

  d3.csv("Sheet2.csv", function(d){
        for(var i=0;i<Object.keys(d).length;i++){
          precinctArray[i] = d[i].Precinct;
          recordsArray[i] = d[i].RecordCount;
          var obj = {
            Precinct: d[i].Precinct,
            RecordCount: d[i].RecordCount
          }
          array[i] = obj;
        }
      })
  var w = 960;
  var h = 500;
  var margin = {
    top: 15,
    right:  35,
    bottom: 238,
    left: 100
  };

  var plotWidth = w - margin.left - margin.right;
  var plotHeight = h - margin.top - margin.bottom;

  widthScale = d3.scale.linear()
      .domain([0, 2404])
      .range([0, plotWidth]);
      //.nice();

  colorScale = d3.scale.linear()
      .domain([0, 2404])
      .range(["green", "blue"])
      .nice();

  function make_x_axis() {        
    return d3.svg.axis()
        .scale(widthScale)
         .orient("bottom")
         .ticks(10)
  }
  var y = d3.scale.ordinal()
        .domain(["SOUTHERN", "NORTHERN", "MISSION", "CENTRAL", "BAYVIEW", "TARAVAL", "INGLESIDE", "TENDERLOIN", "RICHMOND", "PARK"])
        .rangeBands([0, plotHeight]);
        
  d3.csv("Sheet2.csv", function(data){
    var canvas = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h)

    plot = canvas.append("g").attr("id", "plot");

    plot.append("g")         
        .attr("class", "grid")
        .attr("transform", translate(0, plotHeight ))
        .call(make_x_axis()
            .tickSize(-plotHeight, 0, 0)
            .tickFormat(""));

    plot.selectAll("rect")
      .data(data)
      .enter()
        .append("rect")
        .attr("width", function(d) {return widthScale(d.RecordCount);})
        .attr("height", 20)
        .attr("y", function(d, i){return i * 25;})
        .style("fill", function(d,i){return 'rgb(' + ((i*22) + 139) + ','+ ((i*14)+ 69) + ',' + ((i*12) + 19)+')'});

      plot.attr("transform", translate(margin.left ,margin.top));

     var xAxis = d3.svg.axis()
        .scale(widthScale)
        .orient("bottom")
        .tickSize(.1);
        
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .scale(y)
        .tickSize(.1)
        .innerTickSize(.2);
        //.style("font-size","15px");
        //.tickFormat(function(d, i){return precinctArray[i];})
        //.tickValues(d3.range(10));

      plot.append("g")
      .attr("id", "y-axis")
      //.attr("transform", translate(plotHeight, 0))
      .attr("transform", translate(0,plotHeight-248))
      .call(yAxis);

      plot.append("g")
        .attr("id", "x-axis")
        .attr("transform", translate(0,plotHeight))
        .call(xAxis);
  
    })
    
   
    //var yAxis = d3.axisRight(countScale);