Changes to assignment #5. I believe this one does what you want. 3 changes are noted.
Last active
September 27, 2015 21:34
-
-
Save pbogden/d007f2cdd747094b2d23 to your computer and use it in GitHub Desktop.
suzee5
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> | |
.bar { | |
fill: steelblue; | |
} | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.chart text { | |
font: 12px sans-serif; | |
} | |
</style> | |
<svg class="chart"></svg> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var data4console; //Global variable for console inspection | |
var url = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson"; //Earthquake data | |
var margin = {top: 20, right: 30, bottom: 30, left: 40}, //set the margins | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.linear() //scaling the x data | |
.range([0, width]); // Note from PB: I removed the second argument, which was being ignored. | |
var y = d3.scale.linear() //scaling the y data | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() //creating an x axis | |
.scale(x) | |
.tickValues([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() //creating a y axis | |
.scale(y) | |
.orient("left"); | |
var chart = d3.select(".chart") //appending an svg g element, and transform (offset) by the margins | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.json(url, function(error, data) { //calling the data | |
if (error) return console.log(error); | |
data4console = data //assigning data to global var for console inspection | |
quakesMag = []; //create empty array for mags | |
quakesMag = data.features.map(function(d) { return d.properties.mag; }); //populate mag array with mag values | |
quakesBin = []; //create empty array to bin the mag values | |
for (var i = 0; i < 10; i++) {//loop/increment while mag value less than 10 | |
quakesBin[i] = quakesMag.filter(function(d) { return d >= i && d < i + 1; }).length; //populate mag bin array with binned mag values | |
} | |
// Goal: A histogram of earthquake magnitudes, with bin size of 1 (i.e, 0-1, 1-2, 2-3, etc.). | |
// The X-axis will indicate the range in magnitudes for each bin. | |
// The Y-axis will show the number of earthquakes in each bin. | |
// the X scale maps from bin index, to position on the SVG -- Note from PB: I changed the upper limit | |
x.domain([0, quakesBin.length]); //set x domain from 0 to max mag | |
y.domain([d3.min(quakesBin, function(d) { return d; }), d3.max(quakesBin, function(d) { return d; })]); //set y domain from min mag-bin value to max mag-bin value | |
var barWidth = width / quakesMag.length; //set bar width to window width / # of quakes | |
chart.append("g")//append x axis to chart | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
chart.append("g")//append y axis to chart | |
.attr("class", "y axis") | |
.call(yAxis); | |
chart.append("text")//append y axis label | |
.attr("text-anchor", "middle") | |
.attr("x", -height/2) | |
.attr("y", -1 - margin.left/3) | |
.attr("dy", "-1em") | |
.attr("transform", "rotate(-90)") | |
.text("Earthquake Frequency"); | |
chart.append("text")//append x axis label | |
.attr("text-anchor", "end") | |
.attr("x", width/2) | |
.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", "+.75em") | |
.text("Earthquake Occurences, 2.5 days"); | |
chart.selectAll(".bar")//create empty selection for bars | |
.data(quakesBin)//data to use is the mag bins data | |
.enter().append("rect")//append a rect for each mag bin | |
.attr("class", "bar") | |
chart.selectAll("rect")//update selection for all rect | |
.data(quakesBin) // NOTE from PB: Changed argument to quakesBin | |
.attr("x", function(d, i) { return x(i); }) // NOTE from PB: Changed argument of x scale | |
.attr("y", function(d) { return y(d); })//y location scaled from doamin to range, based on data | |
.attr("height", function(d) { return height - y(d); })//not sure????? | |
.attr("width", barWidth); //set width of each bar | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment