Class13

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

<body>
<script>
  
// Set SVG size
var width = 1000, height = 800;
  
// 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://raw.githubusercontent.com/is64377/778Classes/master/Class5/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(215, 30, 29)"]);
var svg2 = d3.select("svg").append("svg")
  .attr("x", 825)
  .attr("y", 450);
svg2.append("g")
  .attr("class", "legendOrdinal")
  .attr("transform", "translate(20,10)")
  .attr("fill", "white");
var legendOrdinal = d3.legendColor()
  .shape("path", d3.symbol().type(d3.symbolCircle).size(100)())
  .shapePadding(12)
  .title("Magnitude")
  .scale(ordinal);
svg.select(".legendOrdinal")
  .call(legendOrdinal);
  
 
// Add a title using D3.js
svg.append("text")
  .attr("x", (width / 2))
  .attr("y", (height / 18))
  .attr("text-anchor", "middle")
  .style("font-size", "32px")
  .style("font-family", "sans-serif")
  .attr("fill", "white")
  .text("Class13: Add, Drag circle, Tooltips");    
  
// 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)

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