sabeehtaqi/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>md-geometry</title>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v2.min.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
var width = 960, height = 500;
var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
// For d3 representation of various stateplanes, see: d3-stateplane
// We'll set the scale and translate later, based on the data
var projection = d3.geoConicConformal()
    .parallels([38 + 18 / 60, 39 + 27 / 60])
    .rotate([77, -37 - 40 / 60]);
var path = d3.geoPath()
    .projection(projection);
var threshold = d3.scaleThreshold()
    .domain([1, 10, 50, 200, 800, 2000, 5000, 10000])
    .range(d3.schemeOrRd[9]);
d3.queue()
    .defer(d3.json, "tracts.json")
    .defer(d3.json, "population.json")
    .await(ready);
function ready(error, json, population) {
  if (error) throw error;
  // Convert topojson to GeoJSON
  geojson = topojson.feature(json, json.objects.tracts);
  // Set the projection's scale and translate based on the GeoJSON
  projection.fitSize([960, 500], geojson);
  // Extract an array of features (one tract for each feature)
  tracts = geojson.features;
  console.log('tracts[0]', tracts[0])
  console.log('population[0]', population[0])
  console.log('population[1]', population[1])
  // Compute population density for each census tract
  tracts.forEach(function(tract, i) {
      var countyfips = tract.properties.COUNTYFP;
      var tractce = tract.properties.TRACTCE;
      var pop = +population.filter(function(d) { return (d[2] === countyfips) && (d[3] === tractce); })[0][0];
      var aland = tract.properties.ALAND / 2589975.2356; // area in square miles
      tract.properties.density = pop / aland;
  });
  // Tracts
  svg.selectAll('path.tract')
      .data(tracts)
    .enter().append('path')
      .attr('d', path)
      .attr('class', 'tract')
      .style('fill', function(d) { return threshold(d.properties.density); })
      .style('stroke', '#000')
      .style('stroke-opacity', '0.15')
  // Remove all counties except the county with FIPS code = 003
  svg.selectAll('path.tract')
      .filter(function(d) { return d.properties.COUNTYFP !== "003" })
      .remove();
  addLegend();
}
function addLegend() {
  var formatNumber = d3.format("d");
  var x = d3.scalePow().exponent('.15')
      .domain([1, 80000])
      .range([0, 300]);
  var xAxis = d3.axisBottom(x)
      .tickSize(13)
      .tickValues(threshold.domain())
      .tickFormat(formatNumber)
  var g = svg.append("g")
      .attr('transform', 'translate(100, 200)')
      .call(xAxis);
  g.select(".domain")
      .remove();
  g.selectAll("rect")
    .data(threshold.range().map(function(color) {
      var d = threshold.invertExtent(color);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
    .enter().insert("rect", ".tick")
      .attr("height", 8)
      .attr("x", function(d) { return x(d[0]); })
      .attr("width", function(d) { return x(d[1]) - x(d[0]); })
      .attr("fill", function(d) { return threshold(d[0]); });
  g.append("text")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .attr("y", -6)
      .text("Population per square mile");
}
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>md-geometry</title>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="//d3js.org/topojson.v2.min.js"></script>
	<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script>
	var width = 960, height = 500;
	var svg = d3.select('body').append('svg')
	.attr('width', width)
	.attr('height', height);
	// For d3 representation of various stateplanes, see: d3-stateplane
	// We'll set the scale and translate later, based on the data
	var projection = d3.geoConicConformal()
	.parallels([38 + 18 / 60, 39 + 27 / 60])
	.rotate([77, -37 - 40 / 60]);
	var path = d3.geoPath()
	.projection(projection);
	var threshold = d3.scaleThreshold()
	.domain([1, 10, 50, 200, 800, 2000, 5000, 10000])
	.range(d3.schemeOrRd[9]);
	d3.queue()
	.defer(d3.json, "tracts.json")
	.defer(d3.json, "population.json")
	.await(ready);
	function ready(error, json, population) {
	if (error) throw error;
	// Convert topojson to GeoJSON
	geojson = topojson.feature(json, json.objects.tracts);
	// Set the projection's scale and translate based on the GeoJSON
	projection.fitSize([960, 500], geojson);
	// Extract an array of features (one tract for each feature)
	tracts = geojson.features;
	console.log('tracts[0]', tracts[0])
	console.log('population[0]', population[0])
	console.log('population[1]', population[1])
	// Compute population density for each census tract
	tracts.forEach(function(tract, i) {
	var countyfips = tract.properties.COUNTYFP;
	var tractce = tract.properties.TRACTCE;
	var pop = +population.filter(function(d) { return (d[2] === countyfips) && (d[3] === tractce); })[0][0];
	var aland = tract.properties.ALAND / 2589975.2356; // area in square miles
	tract.properties.density = pop / aland;
	});
	// Tracts
	svg.selectAll('path.tract')
	.data(tracts)
	.enter().append('path')
	.attr('d', path)
	.attr('class', 'tract')
	.style('fill', function(d) { return threshold(d.properties.density); })
	.style('stroke', '#000')
	.style('stroke-opacity', '0.15')
	// Remove all counties except the county with FIPS code = 003
	svg.selectAll('path.tract')
	.filter(function(d) { return d.properties.COUNTYFP !== "003" })
	.remove();
	addLegend();
	}
	function addLegend() {
	var formatNumber = d3.format("d");
	var x = d3.scalePow().exponent('.15')
	.domain([1, 80000])
	.range([0, 300]);
	var xAxis = d3.axisBottom(x)
	.tickSize(13)
	.tickValues(threshold.domain())
	.tickFormat(formatNumber)
	var g = svg.append("g")
	.attr('transform', 'translate(100, 200)')
	.call(xAxis);
	g.select(".domain")
	.remove();
	g.selectAll("rect")
	.data(threshold.range().map(function(color) {
	var d = threshold.invertExtent(color);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	}))
	.enter().insert("rect", ".tick")
	.attr("height", 8)
	.attr("x", function(d) { return x(d[0]); })
	.attr("width", function(d) { return x(d[1]) - x(d[0]); })
	.attr("fill", function(d) { return threshold(d[0]); });
	g.append("text")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.attr("text-anchor", "start")
	.attr("y", -6)
	.text("Population per square mile");
	}
	</script>