MD Counties again with explanations

<!DOCTYPE html>
<head>
  <title>Make a map with MD Counties</title>
    <meta charset="utf-8">
  
   <style>
  /This style will be used to draw the county boundaries and hover per Bostocks US Counties TOpojson at https://bl.ocks.org/mbostock/4122298

.counties :hover {
  fill: red;
}

.county-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
    /* This style is used when dragging the dot */
.active {
  stroke: #000;
  stroke-width: 2px;
}
path {
  fill: #555555;
  stroke: #aaaaaa;
}
  </style>
  
  <body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src ="https://d3js.org/topojson.v2.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script>
    
    var width = 960, height = 500;
    
    
    var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    
    var threshold = d3.scaleThreshold()
    .domain([1, 10, 20, 200, 800, 2000, 5000, 10000])
   .range(d3.schemeOrRd[9]);
    
     d3.queue()
   .defer(d3.json, 'https://umbcvis.github.io/classes/class-12/tracts.json')
   .defer(d3.json, 'https://umbcvis.github.io/classes/class-12/population.json')
   .await(ready);
    
    var projection = d3.geoConicConformal()
    .parallels([38 + 18 / 60, 39 + 27 / 60])
    .rotate([77, -37 -40 / 60]);
            
             var path = d3.geoPath()
             .projection(projection);
    
    svg.append("path")
 
    // Get all tracts in the county with FIPS = '003'
county = json.objects.tracts.geometries
    .filter(function(d) { return d.properties.COUNTYFP === '003'; });

// Plot the boundry of the county with FIPS = "003"
svg.append("path")
    .datum(topojson.merge(json, county))
    .attr('class', 'county')
    .attr('d', path)
    .style('stroke', '#aaa')
    .style('stroke-width', '2px')
    .style('fill', 'none');
    
    // define projection
    var projection = d3.geoConicConformal()
    .parallels([38 + 18 / 60, 39 + 27 / 60])
    .rotate([77, -37 -40 / 60]);
            
             var path = d3.geoPath()
             .projection(projection);
    
    function ready(error, json, population) {
      if (error) throw error;
      
  // Convert topojson to GeoJSON    
      geojson = topojson.feature(json, json.objects.tracts);
      tracts = geojson.features;
      
     // Set the projection's scale and translate based on the GeoJSON         
             projection.fitSize([960, 500], geojson);

// 1. NEW: Define an array with Rockville MD longitude & latitude
var Rockville = [-77.1528, 39.0840]; 
      
      // 2. NEW: Add an HTML <div> element that will function as the tooltip
var tooltip = d3.select('body').append('div')
    .attr('class', 'tooltip')
    .text('Hello, world!')

// 3. NEW: Add a draggable circle to the map
  // See: https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e)

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

https://d3js.org/d3-scale-chromatic.v1.min.js