NYC Neighborhoods III by pstuffa

index.html

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

<style>

  svg {
    background-color: #000;
  }
  


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

  #nycPath {
    fill: #737373;
    stroke: #595959;
  }
  .contour {
/*   stroke: #000;
  fill-opacity: 0.58;
  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 = 1000,
    height = 1000;
  
  svg.attr("width", width)
  	.attr("height", height)


// //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/wwhg-3wy7.json")
 .await(ready);
  
  var popMap = {};
function ready(error, nyc, nycData) {
  console.log(nyc, nycData)

  if (error) throw error;
  
  nycData.forEach(function(d) {
    
    var hoods = d["nta_name"].split("-");
    
    hoods.forEach(function(hood) {
      popMap[hood] = (+d["population"]/hoods.length)
    })

  })

  console.log(popMap)
  var path = d3.geoPath()
      .projection(d3.geoConicConformal()
      .parallels([33, 45])
      .rotate([96, -39])
      .fitSize([width, height], nyc));
  
// asdfasdfasd fas 
  

  
    console.log(nyc);
  


  var populationData = [];
  
  nyc.features.forEach(function(neighborhood) {
  	
    var numPopulation = Math.round(popMap[neighborhood["properties"]		["neighborhood"]]/1000)
    
   	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);

  	var popExtent = d3.extent(contourPopData, function(d) { return d.value });
  
     // color.domain([popExtent[1],popExtent[0]])
    var color = d3.scaleSequential(d3.interpolateGreys)
 				.domain([.08, 0])

  svg.append("path")
      .datum(nyc)
      .attr("d", path)
  		.attr("id", "nycPath")
  		.style("fill", function() { return  color(.0075) })
  		.style("stroke", color(.01))
  
  
   svg.append("clipPath")
  		.attr("id", "clipPathID")
    .append("use")
      .attr("xlink:href","#nycPath");
  
  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>