Homework 6

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

<style>

.chart rect {
  fill: seagreen;
}

/*.bar {
  fill: seagreen;
}*/
.axis text {
  font: 10px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.chart text {
  font: 12px sans-serif;
}

</style>

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

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

//var formatPercent = d3.format(".0%");

var x = d3.scale.linear()  // Note from PB: Changed scale from ordinal to linear
    .range([0, width])     // Note from PB: Changed range to [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("Earthquake Magnitude:", 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.min(quakesBin, function(d) { return d.frequency; })]);
  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("Earthquake Frequency");

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

chart.append("text") // append title
      .attr("text-anchor", "middle")
      .attr("x", width/2)
      .attr("y", -margin.top/2)
      .attr("dy", ".5em") 
      .text("Earthquake Occurences - Last 2.5 Days");

//chart.selectAll(".bar")     // Note from PB: Commented this line 
      //.data(quakesBin)        // Note from PB: Commented this line
      //.enter().append("rect")   // Note from PB: Commented this line
      //.attr("class", "bar")   // Note from PB: Commented this line

chart.selectAll("rect")
      .data(quakesBin)
      .enter().append("rect")           // Note from PB: added this line
      .attr("x", function(d, i) { return x(i); })
      .attr("y", function(d) { return y(d); })                   // Note from PB: Changed "d.properties" to "d"
      .attr("height", function(d) { return height - y(d); })     // Note from PB: Changed "d.properties" to "d"
      .attr("width", barWith)

//move mouse
      
      //.on('mouseover', tip.show)
      //.on('mouseout', tip.hide);
});

/*function type(d) {
  d.frequency = +d.frequency;
  return d;
}*/

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