NYC Neighborhoods IV by pstuffa

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style>

path {

  stroke: #000;
  fill: none;
}

#neighborhoodPopover { 
  position: absolute;     
  text-align: center;         
  padding: 2px;       
  font: 12px sans-serif;    
  background: #fff; 
  border: 0px;    
  border-radius: 8px;     
  pointer-events: none;
  opacity: 0;     
}

  .contour {
  stroke: #000;
  fill-opacity: .25;
  stroke-width: .5;
  stroke-dasharray: 1;
  }
</style>

<body>
  <svg ></svg>
  <div id='neighborhoodPopover'> </div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  
<script>

var svg = d3.select("svg"),
    width = 900,
    height = 1000;
  
  svg.attr("width", width)
  	.attr("height", height)

//   asdfasdfsdfas
// //data.beta.nyc//dataset/0ff93d2d-90ba-457c-9f7e-39e47bf2ac5f/resource/35dd04fb-81b3-479b-a074-a27a37888ce7/download/d085e2f8d0b54d4590b1e7d1f35594c1pediacitiesnycneighborhoods.geojson
  
 d3.queue()
 .defer(d3.json,"nyc.json")
 .defer(d3.json,"https://data.cityofnewyork.us/resource/y7yy-gq65.json")
 .await(ready);
  
  
function ready(error, nyc, nycData) {
  console.log(nyc, nycData)

  if (error) throw error;

  var neighborHoodLookup = {
    "WILLIAMSBURG CENTRAL": "Williamsburg",
    "WILLIAMSBURG EAST": "Williamsburg",
    "WILLIAMSBURG NORTH": "williamsburg",
    "WILLIAMSBURG SOUTH": "williamsburg"
    }
  
  var nestedHousingData = d3.nest()
  		.key(function(d) { return neighborHoodLookup[d["neighborhood"]] == undefined ? d["neighborhood"] : neighborHoodLookup[d["neighborhood"]] })
  		.rollup(function(leaves) {
        return d3.sum(leaves, function(d) { return d["number_of_sales"]})
      }).entries(nycData)

  var popMap = {}
  nestedHousingData.forEach(function(d) {
    popMap[d.key.replace(/ /g, "").toLowerCase()] = d.value;
  })
  
  
  console.log(popMap)
  var path = d3.geoPath()
      .projection(d3.geoConicConformal()
      .parallels([33, 45])
      .rotate([96, -39])
      .fitSize([width, height], nyc));
  
// asdfasdfasd fas 
  
  svg.append("path")
      .datum(nyc)
      .attr("d", path)
  		.attr("id", "nycPath")
  
  
   svg.append("clipPath")
  		.attr("id", "clipPathID")
    .append("use")
      .attr("xlink:href","#nycPath");
  
    console.log(nyc);
  
  var color = d3.scaleSequential(d3.interpolateBlues);
  console.log("wtf", popMap["parkslope"])

  var populationData = [];
  console.log
  nyc.features.forEach(function(neighborhood) {

 
    var numPopulation =  popMap[neighborhood["properties"]["neighborhood"].replace(/ /g, "").toLowerCase()]
    
    d3.range(numPopulation).map(Object).forEach(function(pop, id) {
      populationData.push({"neighborHoodD": neighborhood, popID: id})
    })
  })
  
  var contourPopData = d3.contourDensity()
        .x(function(d) { return path.centroid(d.neighborHoodD)[0]; })
        .y(function(d) { return path.centroid(d.neighborHoodD)[1]; })
        .size([width, height])
         .cellSize(10)
        .bandwidth(20)
      (populationData);

  
     color.domain(d3.extent(contourPopData, function(d) { return d.value }))

//   console.log(populationData);
  var contours = svg.append("g")
 
      .attr("fill", "none")
    .selectAll(".contour")
    .data(contourPopData)
    .enter().append("g");
  
   contours.append("path")
  			.attr("clip-path","url(#clipPathID)")
  			.attr("class", "contour")
    		.style("fill", function(d) { return color(d.value) })
      	.attr("d", d3.geoPath());
  
}

</script>
</body>