adamwd392/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <style>
.bar {
  fill: teal;
}
.axis {
  font: 10px arial;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
}
</style>
<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

 var margin = {top: 40, right: 40, bottom: 40, left: 50},
      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)
      .orient("bottom");

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

  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 url = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

  d3.json(url, function(error, data) {
    if (error) console.log(error);

    quakes = [];
    quakes = data.features.map(function(d) { return d.properties.mag; });
    groupedQuakes_magnitude = [];

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

    x.domain([0, groupedQuakes_magnitude.length]);
    y.domain([d3.min(groupedQuakes_magnitude), d3.max(groupedQuakes_magnitude)]);

    var barWidth = width / groupedQuakes_magnitude.length;

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

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

      svg.append("text")
        .attr("x", width/1.75)
        .attr("y", height + 2*margin.bottom/3 + 9)
        .style("text-anchor", "end")
        .text("Magnitude");

      svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("x", -height/2)
        .attr("y", -1 -margin.left/3)
        .attr("dy", "-1em")
        .style("text-anchor", "middle")
        .text("Number of Earthquakes");

      svg.selectAll(".bar")
        .data(groupedQuakes_magnitude)
        .enter()
        .append("rect")
        .attr("class", "bar");

        svg.selectAll("rect")
        .data(groupedQuakes_magnitude)
          .attr("x", function(d, i) { return x(i); })
          .attr("y", function(d) { return y(d); })
        .attr("width", barWidth-1)
          .attr("height", function(d) { return height - y(d); });

    });

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<style>
	.bar {
	fill: teal;
	}
	.axis {
	font: 10px arial;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	}
	</style>
	<body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>

	var margin = {top: 40, right: 40, bottom: 40, left: 50},
	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)
	.orient("bottom");

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

	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 url = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

	d3.json(url, function(error, data) {
	if (error) console.log(error);

	quakes = [];
	quakes = data.features.map(function(d) { return d.properties.mag; });
	groupedQuakes_magnitude = [];

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

	x.domain([0, groupedQuakes_magnitude.length]);
	y.domain([d3.min(groupedQuakes_magnitude), d3.max(groupedQuakes_magnitude)]);

	var barWidth = width / groupedQuakes_magnitude.length;

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

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

	svg.append("text")
	.attr("x", width/1.75)
	.attr("y", height + 2*margin.bottom/3 + 9)
	.style("text-anchor", "end")
	.text("Magnitude");

	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("x", -height/2)
	.attr("y", -1 -margin.left/3)
	.attr("dy", "-1em")
	.style("text-anchor", "middle")
	.text("Number of Earthquakes");

	svg.selectAll(".bar")
	.data(groupedQuakes_magnitude)
	.enter()
	.append("rect")
	.attr("class", "bar");

	svg.selectAll("rect")
	.data(groupedQuakes_magnitude)
	.attr("x", function(d, i) { return x(i); })
	.attr("y", function(d) { return y(d); })
	.attr("width", barWidth-1)
	.attr("height", function(d) { return height - y(d); });

	});

	</script>
	</body>
	</html>