class-02 demo // source https://jsbin.com/pakogiwude

<!DOCTYPE html>
<meta charset="utf-8">
<title>class-02 demo</title>

// Set the map projection centered on Oklahoma
var projection = d3.geoAlbersUsa()
    .scale(7543)
    .translate([702, -186]);

var path = d3.geoPath()
    .pointRadius(5)
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var layer1 = svg.append("g");
var layer2 = svg.append("g");

var base = "https://umbcvis.github.io/classes/class-03/us.json;
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

// Read and plot the earthquake data
var url = base + "quakes.json";
d3.json(url, plotQuakes);
//d3.json(usgs, plotQuakes);

// Read and plot the state & county boundaries  
d3.json(base + "us.json", plotState);

function plotQuakes(error, json) {
  if (error) console.log(error);
  
  // Assign the json to a global so we can manipulate it in the console
  data = json;
  
  // Filter the small earthquakes
  var features = data.features.filter(function(d) { return (+ d.properties.mag >= smallest) });

// Plot the earthquakes
  layer2.selectAll("path.quake")
      .data(features)
    .enter().append("path")
      .attr("class", "quake")
      .attr("d", path)
}

function plotState(error, ok) {
  if (error) console.log(error);
  
  var objects = ok.objects.ok;
  var all = topojson.merge(ok, objects.geometries);
  
  layer1.append("path")
      .datum(all)
      .attr("class", "state")
      .attr("d", path);
  
  layer1.append("path")
      .datum(topojson.mesh(ok, objects, function(a, b) { return a !== b; }))
      .attr("class", "county-border")
      .attr("d", path);
 }
</script>

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

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