Solution to homework from Class #2
Assignment: Create a bar chart showing the number of earthquakes of magnitude [0 - 1), [1 - 2), [2 - 3), etc. Using data from the USGS real-time earthquake feed.
The idea is to combine what we learned about the USGS API with the bar chart from Mike Bostock’s most excellent Let’s Make a Bar Chart, the code for which is here. To help get you started, this demo shows how to access and inspect data from the USGS earthquake API.
<!doctype HTML>
<meta charset="utf-8">
<title>umbc2</title>
<style>
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<body>
<div>
<h1>Open the developer's console...</h1>
</div>
<div class="chart"></div>
<script>
var data; // This is a global. We'll talk about why I defined it here.
var url = "//earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson";
d3.json(url, function(error, quakes) {
if (error) console.log(error);
console.log("Data from USGS:", quakes);
quakes = quakes.features.map(function(d) { return d.properties.mag; }); // Setting the value of the global here.
console.log("Earthquake magnitudes:", quakes);
data = [];
for (var i = 0; i < 10; i++) {
data[i] = quakes.filter(function(d) { return d >= i && d < i + 1; }).length;
}
console.log("Binned data:", data);
// The rest of the code is directly from the example. All we've done is provide a new "data" array
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; });
});
</script>