Created
March 16, 2017 21:14
-
-
Save qaisarmehmood/090f602f757bb16fd7da6c61bc17b22d to your computer and use it in GitHub Desktop.
homework 5 final
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.chart rect { | |
fill: blue; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.bar:hover { | |
fill: orangered ; | |
} | |
.chart text { | |
font: 13px sans-serif; | |
} | |
</style> | |
<svg class = "chart"></svg> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
<script> | |
var quakes; //global variable | |
var url = "http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment