homework 6

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
 h { 
    display: block;
    font-size: 1.5em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    color: #191970;
}
  
</style>
<body>
<h align="center" >Earthquakes in California vs Earthquakes Worldwide from March 7, 2017 to March 14,2017</h> 
  <p >  The scatterplot illustrates numbers of earthquakes worldwide in the past 7 days. Large numbers of earthquakes in California are emphasized on the graph. The main objective of this graph is to compare intensity, amount, and average of earthquakes worldwide vs in California. In the last 7 days, 53% percentage of all earthquakes on our planet occurred in California. The high amount of seismic activity on the West coast is caused by the movement of the Pacific and North American plates. Although California has the most earthquakes versus the rest of the world, the magnitude of California’s earthquakes are not as dangerous compared to earthquakes worldwide. The highest magnitude of California’s earthquakes reaches 3.72 vs the magnitude of 6 worldwide and the average magnitude in California is 1.01, whereas, the average worldwide is 1.53.</p>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// legend for a graph

// set the dimensions and margins of the graph
var margin = {top: 80, right: 20, bottom: 600, left: 50},
    width = 960 - margin.left - margin.right,
    height = 1000 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, -1]);
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom  )
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
var data = null;
// Get the data
var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.csv";
d3.csv(url, function(error, data) {
  if (error) throw error;
  // format the data
  data.forEach(function(d) {
      d.time = parseTime(d.time);
      d.mag = +d.mag;
  });
  // bounding box for California 
  var california_bbox = data.filter(function(d){
      return (((d.longitude >= -124.408585) && (d.latitude >= 32.534291))
             && ((d.longitude <= -114.138271) && (d.latitude <= 42.007768)))
    });
  console.log(california_bbox);
// axis name
  // y - magnitude 
  var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  focus.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -35 - margin.left)
      .attr("x", 90 - (height / 2))
			.attr("font-size", "18px")
      .style("text-anchor", "middle")
      .text("Magnitude");

// x - date
  var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform",
            "translate(" + ((width + 110 + margin.right + margin.left)/2) + " ," + 
                           (height - 100 + margin.top + margin.bottom) + ")");
  focus.append("text")
      .attr("transform", "rotate(0)")
      .attr("y", -480 - margin.left)
      .attr("x",50 - (height / 2))
			.attr("font-size", "18px")
      .style("text-anchor", "middle")
      .text("Date");  
  // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.time; }));
  y.domain([-1, d3.max(data, function(d) { return d.mag; })]);    
  // Add the scatterplot
  svg.selectAll("dot")
      .data(data)
    .enter().append("circle")
      .attr("r", 3)
  		.attr("fill", "lightgreen")
      .attr("cx", function(d) { return x(d.time); })
      .attr("cy", function(d) { return y(d.mag); });
  // Add California color 
    
    svg.selectAll("dot")
        .data(california_bbox)
      .enter().append("circle")
        .style("fill", "red")
        .attr("r", 3)
        .attr("cx", function(d) { return x(d.time); })
        .attr("cy", function(d) { return y(d.mag); });
  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  // Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
   // earthquakes  in california
  var cacount = california_bbox.length;
  svg.append("text")
      .attr("x", 10)
      .attr("y", 460)
      .style("font-size", "15px")
      .text("Number of eartquakes in Califronia : " + cacount) ;
  // earthquakes worldwide 
  var allearthquakes = data.filter(function(d) {return (data)});
  var count = allearthquakes.length; 
  svg.append("text")
      .attr("x", 10)
      .attr("y", 480)
      .style("font-size", "15px")
      .text("Number of eartquakes worldwide: " + count  ) ;
  // percentage of earthquakes in California
  var percentage = cacount / count * 100 
  var pernumber = percentage.toFixed(2);
  svg.append("text")
      .attr("x", 10)
      .attr("y", 500)
      .style("font-size", "15px")
      .text("Percentage of eartquackes in califronia vs worldwide : " + pernumber + "%" ) ;
  // max value worldwide 
  var maxworld = d3.max(data, function(d) { return d.mag; });
  svg.append("text")
      .attr("x", 450)
      .attr("y", 460)
      .style("font-size", "15px")
      .text("The highest magintude of the earthquake worldwide: " + maxworld) ;
  //max earthquake in califronia 
  var maxcali = d3.max(california_bbox, function(d) { return d.mag; });
  svg.append("text")
      .attr("x", 450)
      .attr("y", 480) 
      .style("font-size", "15px")
      .text("The highest magintude of the earthquake in California: " + maxcali) ;
  // average mag worldwide 
   var avgworld = d3.mean(data, function(d) { return d.mag; });
 	 var avgworldnumber = avgworld.toFixed(2);
   svg.append("text")
      .attr("x", 450)
      .attr("y", 500)
      .style("font-size", "15px")
      .text("Average magintude value worldwide:  " + avgworldnumber) ;
  // average mag California
  var avgcali = d3.mean(california_bbox, function(d) { return d.mag; });
 	var avgcalinumber = avgcali.toFixed(2);
   svg.append("text")
      .attr("x", 450)
      .attr("y", 520)
      .style("font-size", "15px")
      .text("Average magintude value in California:  " + avgcalinumber) ;
 // legend graph 
  svg.append("circle")
      .attr("cx", 10)
      .attr("cy", 380)
      .attr("r", 3)
      .style("fill", 'red')
  svg.append("text")
      .attr("x", 20)
      .attr("y", 385) 
      .style("font-size", "15px")
      .text("Earthquakes in California")
    svg.append("circle")
      .attr("cx", 10)
      .attr("cy", 410)
      .attr("r", 3)
      .style("fill", 'lightgreen')
  svg.append("text")
      .attr("x", 20)
      .attr("y", 415) 
      .style("font-size", "15px")
      .text("Earthquakes worldwide")
    });
</script>
</body>

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