D3 Examples - NV_Final

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
<title>NY Counties</title>
<style>
body {
  margin: 0;
  background-color: #eee;
}
​
.info {
  position: absolute;
  top: 50px;
  left: 50px;
}
</style>
<div class="info"></div>
<svg width="960" height="500" stroke="#000" 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>
​
// This demo modified slightly from https://bl.ocks.org/mbostock/4108203
​
var svg = d3.select("svg");
​
var defs = svg.select("defs");
  
var quakes = svg.append("g");
​
// New York central state plane, EPSG: 2829
// (central meridian = - 76.5833..., latitute of origin = 40)
  //California state plane: Conic Conformal
    //Latitude of origin: 36 deg 30' N 
   // Central Meridian: - 120 deg 30' E 
   // Standard Parallel #1: 38 deg 26' N 
    //Standard Parallel #2: 37 deg 4' N
var projection = d3.geoConicConformal()
    .parallels([38 + 26/ 60, 37 + 4 / 60])
    .rotate([120 - 30 / 60, -36 - 30 / 60]);
  
var path = d3.geoPath()
    .projection(projection);
  
  
  var counties = "https://raw.githubusercontent.com/nohevog1/classes-2/master/class-14/counties.json"
 
 var population = "https://raw.githubusercontent.com/nohevog1/classes-2/master/class-14/population.json"
  
// 3. Read and plot the earthquakes (after the projection has been specified)
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
var quakes = [];
​
// Load the topojson and the population data
d3.queue()
        
    .defer(d3.json, counties)
    .defer(d3.json, population)
        .defer(d3.json, usgs)   
        .await(ready);
​
// Wait for the data to arrive, then begin processing
function ready(error, us, population, usgs) {
  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);
  
  // 3. Read and plot the earthquakes (after the projection has been specified)
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
var quakes = [];
d3.json(usgs, function(error, usgs) {
  if (error) throw error;
  quakes = usgs.features;
​
  svg.selectAll('.quake')
      .data(quakes)
    .enter().append("path")
      .attr("class", "quake")
      .style("fill", 'crimson')
      .attr('d', path)
});
​
  // Get NY counties as array of GeoJSON features
  var newyork = counties.features.filter(function(d) { return d.properties.STATEFP === '06' })
​
  
  // Inspect the data in the developer console
  console.log('here is the population data:', population[0], population[1]);
  console.log('here is one of the counties:', newyork[0]);
​
  projection.fitExtent([[20,20],[940 - 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-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-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("fill", "#fff")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .on('mouseover', function(d, i) {
        console.log('mouseover:', i, d);
        d3.select(this).attr('fill', 'crimson');
        d3.select(".info").html(d.properties.NAME + " County"
                              + "<br>Population: "
                             + d3.format(",d")(data.get(d.properties.GEOID)))
      })
      .on('mouseout', function(d) {
        d3.select(this).attr('fill', '#fff');
        d3.select(".info").html("")
      });
}
​
</script>
​
    