var width = 760,
    height = 900;

var svg = d3.select("#map")
    .attr("width", width)
    .attr("height", height);



var sfpdprecincts = "sfpddists.geojson";
console.log(d3.geoAlbers)

var projection = d3.geoMercator()
    .center([-122.429, 37.77])  // sf is 37.7749° N, 122.4194
  //  .rotate([4.4, 0])
//    .parallels([50, 60])
    .scale(230000)
    .translate([width / 2, height / 2]);

var path = d3.geoPath(projection);



 d3.request(sfpdprecincts)
  .get(function(err,d){
  //  console.log(d, err)
    if(err){
      console.log(err)
    }

    var strd = d.responseText;
    console.log(JSON.parse(strd))
    var precgeo = JSON.parse(strd).features

    svg.selectAll(".precicnts")
    .data(precgeo)
    .enter().append('path')
    .attr('class', 'precincts')
    .attr("d", d3.geoPath(projection))
    .attr('fill', 'blue')
    .attr('stroke', "black")
    .attr('data', function(d){
      return d
    })
    .on('click', function(d){
      console.log(d)
    });

// url to get all the crime reported things after the given date
// https://data.sfgov.org/resource/gxxq-x39z.json?$where=date%3E%222015-04-20T00:00:00%22
    d3.json('https://data.sfgov.org/resource/gxxq-x39z.json?$where=date%3E%222015-04-20T00:00:00%22', function(err, c){
      if(err){
        console.log(err)
      }
      console.log(c)

      c = c.map(function(r){
            r.geometry = {
                      type: 'point',
                      coordinates: [r.x, r.y]
                    }
              return r;
            })

            console.log(c)

      svg.selectAll('.crimes')

        .data(c, function(q){
          console.log('cleaning data', q)
          return q;
        })
        .enter()
        .append('circle')
        .attr('cx', function(d){
          return projection(d.geometry.coordinates)[0]

        })
        .attr('cy', function(d){
        //  console.log(d);
          return projection(d.geometry.coordinates)[1]
        })
        .attr('r', '10px')
        //.attr('d', path)
        .attr('class','crimes')
        .attr('fill', 'red')
    })


  });