D3 Examples - Class 14

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset'utf-8'>
<title>US Counties</title>
<svg width="960" height="600" 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 from https://bl.ocks.org/mbostock/4108203
var svg = d3.select("svg");
var defs = svg.select("defs");
var projection = d3.geoAlbersUsa();
var path = d3.geoPath()
    .projection(projection);
// Wait for the data to arrive, then begin processing
d3.json("https://raw.githubusercontent.com/umbcvis/classes/master/class-14/counties.json", function(error, us) {
  if (error) throw error;
  // Convert the topojson to an array of GeoJSON counties
  var counties = topojson.feature(us, us.objects.counties).features;
  // 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 nation)
  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 fill the individual counties
  svg.selectAll('path.county')
      .data( counties )
    .enter().append("path")
      .attr("d", path)
      .attr("fill", "none")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5);
});
</script>
    