class 4 - states // source https://jsbin.com/wusasofina

<!DOCTYPE html>
<meta charset="utf-8">
<title>class 4 - states</title>

<style>

body {
  position: absolute;
  margin: 0px;
}
  
svg {
  background-color: black;
} 
  
path.state {
  fill: white;
  stroke: black;
}

path.quake1, circle.quake1 {
  fill: orange;
  fill-opacity: 0.6;
}

path.quake2, circle.quake2 {
  fill: Yellow;
  fill-opacity: 0.6;
}

path.quake3, circle.quake3 {
  fill: green;
  fill-opacity: 0.9;
}

path.quake4, circle.quake4 {
  fill: Red;
  fill-opacity: 0.9;
}
  
  
</style>

// Set SVG size
var width = 960, height = 700;
  
// 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 = d3.select("svg").append("svg")
    .attr("y", 100);

// Add layers (US Earthquakes) to SVG
var layer2 = d3.select("svg").append("svg")
      .attr("y", 100);
var layer3 = d3.select("svg").append("svg")
      .attr("y", 100);
var layer4 = d3.select("svg").append("svg")
      .attr("y", 100);
var layer5 = d3.select("svg").append("svg")
      .attr("y", 100);

// Set the map projection
var projection = d3.geoAlbersUsa();

// Set geographic path generator
var path = d3.geoPath()
    .pointRadius(3.5)
    .projection(projection);
  
// US Basemap
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 - 2.5", "2.5 - 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", 825)
  .attr("y", 450);

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);
  
// Add a title using D3.js
svg.append("text")
  .attr("x", (width / 4))
  .attr("y", (height / 10))
  .attr("text-anchor", "middle")
  .style("font-size", "30px")
  .style("font-family", "Times New Roman")
  .attr("fill", "red")
  .text("Magnitude of Earthquakes in past week");

// 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;

// Filter the features by magnitude
    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 and calculate the total count
    layer2.selectAll('path.quake1')
        .data(features1)
      .enter().append('path')
        .attr("class", "quake1")
        .attr("d", path)
        
    var us_bbox1 = features1.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -125.011) && (d.geometry.coordinates[0] <= -66.9326))
             && ((d.geometry.coordinates[1] >= 24.9493) && (d.geometry.coordinates[1] <= 49.5904)))
    });
    
    var ak_bbox1 = features1.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -179.1505) && (d.geometry.coordinates[0] <= -129.9795))
             && ((d.geometry.coordinates[1] >= 51.2097) && (d.geometry.coordinates[1] <= 71.4410)))
    });
    
    var hw_bbox1 = features1.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -160.2471) && (d.geometry.coordinates[0] <= -154.8066))
             && ((d.geometry.coordinates[1] >= 18.9117) && (d.geometry.coordinates[1] <= 22.2356)))
    });
    
    var sum1 = us_bbox1.length + ak_bbox1.length + hw_bbox1.length;
   
    layer3.selectAll("path.quake2")
        .data(features2)
      .enter().append("path")
        .attr("class", "quake2")
        .attr("d", path)
    
    var us_bbox2 = features2.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -125.011) && (d.geometry.coordinates[0] <= -66.9326))
             && ((d.geometry.coordinates[1] >= 24.9493) && (d.geometry.coordinates[1] <= 49.5904)))
    });
    
    var ak_bbox2 = features2.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -180) && (d.geometry.coordinates[0] <= -125.8593))
             && ((d.geometry.coordinates[1] >= 48.3416) && (d.geometry.coordinates[1] <= 71.8014)))
    });
    
    var hw_bbox2 = features2.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -160.2471) && (d.geometry.coordinates[0] <= -154.8066))
             && ((d.geometry.coordinates[1] >= 18.9117) && (d.geometry.coordinates[1] <= 22.2356)))
    });
    
    var sum2 = us_bbox2.length + ak_bbox2.length + hw_bbox2.length; 
    
    layer4.selectAll("path.quake3")
        .data(features3)
      .enter().append("path")
        .attr("class", "quake3")
        .attr("d", path)
    
    var us_bbox3 = features3.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -125.011) && (d.geometry.coordinates[0] <= -66.9326))
             && ((d.geometry.coordinates[1] >= 24.9493) && (d.geometry.coordinates[1] <= 49.5904)))
    });
    
    var ak_bbox3 = features3.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -180) && (d.geometry.coordinates[0] <= -125.8593))
             && ((d.geometry.coordinates[1] >= 48.3416) && (d.geometry.coordinates[1] <= 71.8014)))
    });
    
    var hw_bbox3 = features3.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -160.2471) && (d.geometry.coordinates[0] <= -154.8066))
             && ((d.geometry.coordinates[1] >= 18.9117) && (d.geometry.coordinates[1] <= 22.2356)))
    });
    
    var sum3 = us_bbox3.length + ak_bbox3.length + hw_bbox3.length; 
    
    layer5.selectAll("path.quake4")
        .data(features4)
      .enter().append("path")
        .attr("class", "quake4")
        .attr("d", path)
    
    var us_bbox4 = features4.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -125.011) && (d.geometry.coordinates[0] <= -66.9326))
             && ((d.geometry.coordinates[1] >= 24.9493) && (d.geometry.coordinates[1] <= 49.5904)))
    });
    
    var ak_bbox4 = features4.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -180) && (d.geometry.coordinates[0] <= -125.8593))
             && ((d.geometry.coordinates[1] >= 48.3416) && (d.geometry.coordinates[1] <= 71.8014)))
    });
    
    var hw_bbox4 = features4.filter(function(d) {
      return (((d.geometry.coordinates[0] >= -160.2471) && (d.geometry.coordinates[0] <= -154.8066))
             && ((d.geometry.coordinates[1] >= 18.9117) && (d.geometry.coordinates[1] <= 22.2356)))
    });
    
    var sum4 = us_bbox4.length + ak_bbox4.length + hw_bbox4.length; 
    
    // Display the total count of earthquakes by filter
    svg.append("text")
      .attr("x", (width / 5))
      .attr("y", (height - 25))
      .style("font-size", "17px")
      .style("font-family", "Times New Roman")
      .attr("fill", "white")
      .text("Total # of Earthquakes by Magnitude: ")
    
    svg.append("text")
      .attr("x", (width / 1.9))
      .attr("y", (height - 25))
      .style("font-size", "17px")
      .style("font-family", "Times New Roman")
      .style("font-weight", "bold")
      .attr("fill", "LimeGreen")
      .text(sum1 + ",")
    
    svg.append("text")
      .attr("x", (width / 1.74))
      .attr("y", (height - 25))
      .style("font-size", "17px")
      .style("font-family", "Times New Roman")
      .style("font-weight", "bold")
      .attr("fill", "yellow")
      .text(sum2 + ",")
    
    svg.append("text")
      .attr("x", (width / 1.6))
      .attr("y", (height - 25))
      .style("font-size", "17px")
      .style("font-family", "Times New Roman")
      .style("font-weight", "bold")
      .attr("fill", "orange")
      .text(sum3 + ",")
    
    svg.append("text")
      .attr("x", (width / 1.5))
      .attr("y", (height - 25))
      .style("font-size", "17px")
      .style("font-family", "Times New Roman")
      .style("font-weight", "bold")
      .attr("fill", "red")
      .text(sum4);
    
  }
  
  // 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