MTClass/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<title>NY Counties 4</title>
<style>
body {
  margin: 0;
  background-color: #eee;
}

.info {
  position: absolute;
  top: 20px;
  left: 260px;
}
</style>
<div class="info"></div>
<svg width="960" height="500" stroke-linejoin="round" stroke-linecap="round">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    </filter>
  </defs>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

var svg = d3.select("svg");

var defs = svg.select("defs");

// New York central state plane, EPSG: 2829
// (central meridian = - 76.5833..., latitute of origin = 40)
var projection = d3.geoTransverseMercator()
        .rotate([76 + 35 / 60, - 40]);

var path = d3.geoPath()
    .projection(projection);

var threshold = d3.scaleThreshold()
    .domain([1, 10, 50, 200, 500, 2000, 8000, 30000])
    .range(d3.schemeOrRd[9]);

// Configure the pie chart
var color = d3.scaleOrdinal(d3.schemeCategory10);
var radius = 80;
var pie = d3.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var arcPath = d3.arc()
    .outerRadius(radius)
    .innerRadius(0);

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

svg.append("g")
    .attr('id', "pie")
    .attr('transform', 'translate(' + [radius + 60, radius + 40] + ')')

var counties = "https://raw.githubusercontent.com/umbcvis/classes/master/class-14/counties.json";
 var population = "https://raw.githubusercontent.com/umbcvis/classes/master/class-14/population.json";
// Load the topojson and the population data
d3.queue()
    .defer(d3.json,"counties.json")
    .defer(d3.json, "population.json")
    .await(ready);

// Wait for the data to arrive, then begin processing
function ready(error, us, population) {
  if (error) throw error;

  // Make the population data easy to query by FIPS code
  var data = d3.map();
  population.forEach(function(d, i) {
    if (i === 0) return;  // skip the first line in the population data
    data.set(d[1] + d[2], +d[0]);
  });

  // Convert the topojson to an array of GeoJSON counties
  var counties = topojson.feature(us, us.objects.counties);

  // Get NY counties as array of GeoJSON features
  var newyork = counties.features.filter(function(d) { return d.properties.STATEFP === '36' })

  // Make the population & pie-chart data easy to query by FIPS code
  var pieData = d3.map();
  newyork.forEach(function(d, i) {
    var pop = data.get(d.properties.GEOID);
    var aland = d.properties.ALAND / 2589975.2356; // area in square miles
    d.populationDensity = pop / aland; // population per square mile
    d.population = pop; // population
    d.land = aland; // land aread (square miles)
    pieData.set(d.properties.GEOID, [{ key: "population", value: pop / 100 },
                                     { key: "land", value: aland },
                                     { key: "density", value: d.populationDensity }] )
  })

  projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork });

  // Plot the boundary of the US
  svg.append("path")
      .attr("id", "nation")
      .attr("d", path(topojson.merge(us, us.objects.counties.geometries)))
      .attr("stroke", "#000")
      .attr("stroke-width", 2)

  // Drop-shadow styling (this is blurred shadow)
  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill-opacity", 0.2)
      .attr("filter", "url(#blur)");

  // Drop-shadow styling (this is white overlay)
  svg.append("use")
      .attr("xlink:href", "#nation")
      .attr("fill", "#fff");

  // Plot the state boundaries
  svg.append("path")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("fill", "none")
      .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a.properties.STATEFP !== b.properties.STATEFP; })));

  // Plot the individual counties
  svg.selectAll('path.county')
      .data( newyork )
    .enter().append("path")
      .attr("d", path)
      .attr("class", "county")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 1)
      .attr("fill", function(d) { return threshold(d.populationDensity); })
      .on('mouseover', function(d, i) {
        addPie( pieData.get(d.properties.GEOID) );
        d3.select(this).attr('stroke-width', 4).raise()
        d3.select(".info").html(d.properties.NAME + " County"
            + "<br>Population Density: " + d3.format(",d")(d.populationDensity)
            + "<br>Population: " + d3.format(",d")(d.population)
            + "<br>Land (square miles): " + d3.format(",d")(d.land))
      })
      .on('mouseout', function(d) {
        d3.select(".info").html("")
        d3.select(this).attr('stroke-width', 0.5)
        d3.select("#pie").selectAll(".arc").remove();
      });
}

function addPie(data) {
  var arc = d3.select("#pie").selectAll(".arc")
      .data( pie(data) )
    .enter().append("g")
      .attr("class", "arc")

  arc.append("path")
      .attr("fill", function(d) { return color(d.data.key); })
      .attr("d", arcPath)

  arc.append("text")
      .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
      .attr("dy", "0.35em")
      .text(function(d) { return d.data.key; })
      .raise();
}
</script>
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<title>NY Counties 4</title>
	<style>
	body {
	margin: 0;
	background-color: #eee;
	}

	.info {
	position: absolute;
	top: 20px;
	left: 260px;
	}
	</style>
	<div class="info"></div>
	<svg width="960" height="500" stroke-linejoin="round" stroke-linecap="round">
	<defs>
	<filter id="blur">
	<feGaussianBlur stdDeviation="5"></feGaussianBlur>
	</filter>
	</defs>
	</svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/topojson-client@3"></script>
	<script src="//d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script>

	var svg = d3.select("svg");

	var defs = svg.select("defs");

	// New York central state plane, EPSG: 2829
	// (central meridian = - 76.5833..., latitute of origin = 40)
	var projection = d3.geoTransverseMercator()
	.rotate([76 + 35 / 60, - 40]);

	var path = d3.geoPath()
	.projection(projection);

	var threshold = d3.scaleThreshold()
	.domain([1, 10, 50, 200, 500, 2000, 8000, 30000])
	.range(d3.schemeOrRd[9]);

	// Configure the pie chart
	var color = d3.scaleOrdinal(d3.schemeCategory10);
	var radius = 80;
	var pie = d3.pie()
	.sort(null)
	.value(function(d) { return d.value; });

	var arcPath = d3.arc()
	.outerRadius(radius)
	.innerRadius(0);

	var label = d3.arc()
	.outerRadius(radius - 40)
	.innerRadius(radius - 40);

	svg.append("g")
	.attr('id', "pie")
	.attr('transform', 'translate(' + [radius + 60, radius + 40] + ')')

	var counties = "https://raw.githubusercontent.com/umbcvis/classes/master/class-14/counties.json";
	var population = "https://raw.githubusercontent.com/umbcvis/classes/master/class-14/population.json";
	// Load the topojson and the population data
	d3.queue()
	.defer(d3.json,"counties.json")
	.defer(d3.json, "population.json")
	.await(ready);

	// Wait for the data to arrive, then begin processing
	function ready(error, us, population) {
	if (error) throw error;

	// Make the population data easy to query by FIPS code
	var data = d3.map();
	population.forEach(function(d, i) {
	if (i === 0) return; // skip the first line in the population data
	data.set(d[1] + d[2], +d[0]);
	});

	// Convert the topojson to an array of GeoJSON counties
	var counties = topojson.feature(us, us.objects.counties);

	// Get NY counties as array of GeoJSON features
	var newyork = counties.features.filter(function(d) { return d.properties.STATEFP === '36' })

	// Make the population & pie-chart data easy to query by FIPS code
	var pieData = d3.map();
	newyork.forEach(function(d, i) {
	var pop = data.get(d.properties.GEOID);
	var aland = d.properties.ALAND / 2589975.2356; // area in square miles
	d.populationDensity = pop / aland; // population per square mile
	d.population = pop; // population
	d.land = aland; // land aread (square miles)
	pieData.set(d.properties.GEOID, [{ key: "population", value: pop / 100 },
	{ key: "land", value: aland },
	{ key: "density", value: d.populationDensity }] )
	})

	projection.fitExtent([[10,10],[960 - 20, 500 - 20]], { type: "FeatureCollection", features: newyork });

	// Plot the boundary of the US
	svg.append("path")
	.attr("id", "nation")
	.attr("d", path(topojson.merge(us, us.objects.counties.geometries)))
	.attr("stroke", "#000")
	.attr("stroke-width", 2)

	// Drop-shadow styling (this is blurred shadow)
	svg.append("use")
	.attr("xlink:href", "#nation")
	.attr("fill-opacity", 0.2)
	.attr("filter", "url(#blur)");

	// Drop-shadow styling (this is white overlay)
	svg.append("use")
	.attr("xlink:href", "#nation")
	.attr("fill", "#fff");

	// Plot the state boundaries
	svg.append("path")
	.attr("stroke", "#000")
	.attr("stroke-width", 1)
	.attr("fill", "none")
	.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a.properties.STATEFP !== b.properties.STATEFP; })));

	// Plot the individual counties
	svg.selectAll('path.county')
	.data( newyork )
	.enter().append("path")
	.attr("d", path)
	.attr("class", "county")
	.attr("stroke", "#aaa")
	.attr("stroke-width", 1)
	.attr("fill", function(d) { return threshold(d.populationDensity); })
	.on('mouseover', function(d, i) {
	addPie( pieData.get(d.properties.GEOID) );
	d3.select(this).attr('stroke-width', 4).raise()
	d3.select(".info").html(d.properties.NAME + " County"
	+ "<br>Population Density: " + d3.format(",d")(d.populationDensity)
	+ "<br>Population: " + d3.format(",d")(d.population)
	+ "<br>Land (square miles): " + d3.format(",d")(d.land))
	})
	.on('mouseout', function(d) {
	d3.select(".info").html("")
	d3.select(this).attr('stroke-width', 0.5)
	d3.select("#pie").selectAll(".arc").remove();
	});
	}

	function addPie(data) {
	var arc = d3.select("#pie").selectAll(".arc")
	.data( pie(data) )
	.enter().append("g")
	.attr("class", "arc")

	arc.append("path")
	.attr("fill", function(d) { return color(d.data.key); })
	.attr("d", arcPath)

	arc.append("text")
	.attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
	.attr("dy", "0.35em")
	.text(function(d) { return d.data.key; })
	.raise();
	}
	</script>