Various homework assignments for Fall 2015
Last active
October 6, 2015 23:19
-
-
Save pbogden/b3c503d217f88cce361e to your computer and use it in GitHub Desktop.
suzee6
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> | |
.axis text { | |
font: 12px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.dot { | |
stroke: #000; | |
} | |
</style> | |
<svg class="chart"></svg> | |
<body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script> | |
var url = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson"; | |
var margin = {top: 50, right: 50, bottom: 50, 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 color = d3.scale.category10(); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var chart = d3.select(".chart") | |
.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) { | |
if (error) return console.log(error); | |
var quakes = data.features; // This is the array of earthquake objects | |
// Accessors (defined here, rather than later as anonymous functions) | |
var quakeLon = function(d) { return d.geometry.coordinates[0]; }; | |
var quakeLat = function(d) { return d.geometry.coordinates[1]; }; | |
var quakeBin = function(d) { return Math.floor( d.properties.mag ); }; | |
//set X input domain as the min/max longitude values | |
x.domain(d3.extent(quakes, quakeLon)); // Notice how we're using an accessor | |
//set Y input domain as the min/max latitude values | |
y.domain(d3.extent(quakes, quakeLat)); | |
color.domain(d3.range(11)); | |
//append the x axis | |
chart.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("x", width) | |
.attr("y", -6) | |
.style("text-anchor", "end") | |
.text("Longitude"); | |
//append the y axis | |
chart.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Latitude") | |
//bind the data to the dots | |
chart.selectAll(".dot") | |
.data(quakes) // Note: the array of earthquake objects is "data.features" | |
.enter().append("circle") | |
.attr("class", "dot") | |
.attr("r", 3.5) | |
.attr("cx", function(d) { return x( quakeLon(d) ); }) | |
.attr("cy", function(d) { return y( quakeLat(d) ); }) | |
.style("fill", function(d) { return color( quakeBin(d) ); }); | |
//LEGEND | |
var legend = chart.selectAll(".legend") | |
.data(color.domain()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
legend.append("rect") | |
.attr("x", width - 18) | |
.attr("width", 18) | |
.attr("height", 18) | |
.style("fill", color); | |
legend.append("text") | |
.attr("x", width - 24) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.style("text-anchor", "end") | |
.text(function(d) { return d; }); | |
//append title | |
chart.append("text") | |
.attr("text-anchor", "middle") | |
.attr("x", width/2) | |
.attr("y", -margin.top/2) | |
.attr("dy", "+.75em") | |
.text("All Earthquakes, Past Day"); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment