Census Watershed Data

<!DOCTYPE html>
<meta charset="utf-8">
<title>watershed</title>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v2.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);

d3.json("https://raw.githubusercontent.com/leenoah1/class_project/master/geop-wtshd.json", function(error, json) {
  if (error) throw error;

// Convert topojson to geojson
  geojson = topojson.feature(json, json.objects.NAD83censuswtshd);

// Set the projection's scale and translate based on the geojson
  projection.fitSize([960, 500], geojson);

// Tracts
  svg.selectAll('path.tract')
      .data(geojson.features)
    .enter().append('path')
      .attr('d', path)
      .attr('class', 'tract')
      .style('fill', 'none')
      .style('stroke', '#000')
      .style('stroke-opacity', '1')
});
</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js