homework 5 final

<!DOCTYPE html>
<meta charset="utf-8">

.bar:hover {
  fill: orangered ;
}

.chart text {
  font: 13px sans-serif;
}
</style>

var quakes; //global variable

var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson";

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")

/*var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
  })*/

var chart = d3.select(".chart") //.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 + ")");

//svg.call(tip);

d3.json(url, function(error, data) {
  if (error) console.log(error);
  console.log("Data from USGS:", data);

quakes = data
  quakesMag = [];
  quakesMag = data.features.map(function(d) { return d.properties.mag; });
  console.log("Magnitude of Earthquakes:", quakesMag);

quakesBin = []; // empty array to bin the mag values

for (var i = 0; i < 10; i++) {
    quakesBin[i] = quakesMag.filter(function(d) { return d >= i && d < i + 1;}).length;
  }

x.domain([0, quakesBin.length]);
  y.domain(d3.extent(quakesBin));

var barWith = width / quakesMag.length;

chart.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

chart.append("g")
      .attr("class", "y axis")
      .call(yAxis);

chart.append("text") // append for y axis label
      .attr("transform", "rotate(-90)")
      .attr("x", -height/2)
      .attr("y", -1 - margin.left/3)
      .attr("dy", "-1.2em")
      .attr("text-anchor", "middle")
      .text("Frequency of Earthquakes ");

chart.append("text") // append for x axis label
      .attr("text-anchor", "end")
      .attr("x", width/1.75) 
      .attr("y", height + 2*margin.bottom/3 + 9) 
      .text("Magnitude of Earthquakes");

chart.append("text") // append title
      .attr("text-anchor", "middle")
      .attr("x", width/2)
      .attr("y", -margin.top/2)
      .attr("dy", ".5em") 
      .text("Earthquake Occurences in last 24 Hours");

chart.selectAll("rect")
      .data(quakesBin)
      .enter().append("rect")
      .attr("x", function(d, i) { return x(i); })
      .attr("y", function(d) { return y(d); })
      .attr("height", function(d) { return height - y(d); })
      .attr("width", barWith)

});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js