Census Watershed Map

<!DOCTYPE html>
<meta charset="utf-8">
<title>Anacostia Watershed Census</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);
  
  // Plot the individual counties
  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')
  
  .on('mouseover', function(d, i) {
        console.log('mouseover:', i, d);
        d3.select(this).attr('fill', 'yellow');
        d3.select(".info").html(d.properties.White_NewP	 + "<br>White"
                              + "<br>Latino: " + d.properties.Latino_New
                              + "<br>Black: " + d.properties.Black_NewP
                              + "<br>Asian: " + d.properties.Asian_NewP
                              + "<br>Other Race: " + d.properties.OtherRace_
                              + "<br>MoreThanOneRace: " + d.properties.More1Race_)
                              
                             
      })
      .on('mouseout', function(d) {
        d3.select(this).attr('fill', '#ff1462');
        d3.select(".info").html("")
      });
});
      
          
</script>

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

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