pstuffa/.block

## .block
license: mit
height: 1000

## README.md

      
    Raw
  

              README.md
            
          
    forked from pstuffa's block: NYC Neighborhoods II
Layering on some density contours based on NYC open data population maps
forked from pstuffa's block: NYC Neighborhoods III

  
## 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
// http://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>

## nyc.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              nyc.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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
	// http://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>