class 4 Homework // source https://jsbin.com/damuta

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <h3><p><font size="6" color="navy">Earthquake Map</font></p>
  <title>class 4 Homework</title>
   <h1><p><font size="6" color="maroon"> Past 7 Days Earthquakes by Magnitude </h1>
<style>
  
h1 {
  font-family: sans-serif;
  color: #000;
  text-align: center;
  font-size: 25px;
  }
body {
  position: absolute;
  margin: 0px;
}
  
svg {
  background-color: #2F4F4F;
} 
  
path.state {
  fill: #F5F5DC;
  stroke: #282829;
}
path.quake1, square.quake1 {
  fill: limegreen;
  fill-opacity: 0.6;
}
path.quake2, square.quake2 {
  fill: Yellow;
  fill-opacity: 0.6;
}
path.quake3, square.quake3 {
  fill: DarkOrange;
  fill-opacity: 0.9;
}  
path.quake4, square.quake4 {
  fill: Red;
  fill-opacity: 0.9;
}
    
</style>
    
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.21.0/d3-legend.js"></script>
    
<body>
<script>
  
var width = 960, height = 500;
  // used Taylor's code here as reference, because could not figure out after hours spent
  
  
  
// Global variable for state data
var state_data;
// Global variable for USGS data
var usgs_data;
// Create SVG element
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
// Add layer one (US States) to SVG
var layer1 = svg.append("g");
// Add layers (US Earthquakes) to SVG
var layer2 = svg.append("g");
var layer3 = svg.append("g");
var layer4 = svg.append("g");
var layer5 = svg.append("g");
    
// Add coordinate information to the body
var info = d3.select("body").append("div")
    .attr("class", "info");
// Set the map projection
var projection = d3.geoAlbersUsa();
// Set geographic path generator
var path = d3.geoPath()
    .pointRadius(3.5)
    .projection(projection);
// Read and plot the earthquake data
var US_Base = "https://umbcvis.github.io/classes/class-03/us.json"
// USGS Real-Time Earthquake Feed
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
// Create an Ordinal Legend          
var ordinal = d3.scaleOrdinal()
  .domain(["1.0 - 2.0", "2.0 - 3.0", "3.0 - 4.0", "4.0+"])
  .range([ "rgb(50, 205, 50)", "rgb(255, 255, 0)", "rgb(255, 140, 0)", "rgb(255, 0, 0)"]);
var svg2 = d3.select("svg").append("svg")
  .attr("x", 7)
  .attr("y", 300);
svg2.append("g")
  .attr("class", "legendOrdinal")
  .attr("transform", "translate(20,20)")
  .attr("fill", "white");
var legendOrdinal = d3.legendColor()
  .shape("path", d3.symbol().type(d3.symbolCircle).size(150)())
  .shapePadding(10)
  .title("Magnitude")
  .scale(ordinal);
svg.select(".legendOrdinal")
  .call(legendOrdinal);
// Read and plot the US States
d3.json(US_Base, plotStates);
function plotStates(error, json) {
  
  // Create array of GeoJSON features -- this defines the global variable "state_data"
  state_data = json.objects.us.geometries.map(
    function(d) { 
      return topojson.feature(json, d);
    })
  
  // Read and plot the US Earthquakes
  d3.json(usgs, plotQuakes);
  function plotQuakes(error, json) {
  
    // Assign the json to a global variable "usgs_data"
    usgs_data = json;
    
    var features1 = usgs_data.features.filter(function(d) {
      return (d.properties.mag >= 1.0) && (d.properties.mag < 2.0)
    });
    
    var features2 = usgs_data.features.filter(function(d) {
      return (d.properties.mag >= 2.0) && (d.properties.mag < 3.0)
    });
  
    var features3 = usgs_data.features.filter(function(d) {
      return (d.properties.mag >= 3.0) && (d.properties.mag < 4.0)
    });
    
    var features4 = usgs_data.features.filter(function(d) {
      return (d.properties.mag >= 4.0)
    });
    
    // Plot the earthquakes
    layer2.selectAll("path.quake1")
        .data(features1)
      .enter().append("path")
        .attr("class", "quake1")
        .attr("d", path)
    
    layer3.selectAll("path.quake2")
        .data(features2)
      .enter().append("path")
        .attr("class", "quake2")
        .attr("d", path)
    
    layer4.selectAll("path.quake3")
        .data(features3)
      .enter().append("path")
        .attr("class", "quake3")
        .attr("d", path)
    
    layer5.selectAll("path.quake4")
        .data(features4)
      .enter().append("path")
        .attr("class", "quake4")
        .attr("d", path)
 
  }
  
  // Plot the states
  layer1.selectAll("path")
      .data(state_data)
    .enter()
      .append("path")
      .attr("class", "state")
      .attr("d", path);
}
  
</script>

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.21.0/d3-legend.js