Last active
September 23, 2015 22:49
-
-
Save adamwd392/cc96552c1db3eb054157 to your computer and use it in GitHub Desktop.
hw4
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> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
<style> | |
body { | |
position: absolute; | |
margin: 0px; | |
} | |
svg { | |
background-color: #4682b4; | |
} | |
.info { | |
font-family: sans-serif; | |
color: #000; | |
position: absolute; | |
top: 450px; | |
left: 50px; | |
} | |
</style> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script> | |
</head> | |
<body> | |
<script> | |
var width = 1000, height = 500; | |
var projection = d3.geo.mercator(); | |
var path = d3.geo.path().projection(projection); | |
//Building container/canvas - needed to draw the visualization | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var delay1,delay2,delay3; | |
var layer2 = svg.append("g"); | |
var layer1 = svg.append("g"); | |
var slightLayer = svg.append("g"); | |
var strongLayer = svg.append("g"); | |
var destructiveLayer = svg.append("g"); | |
//----Drawing the Container and Canvas settings | |
var url = "https://gist.githubusercontent.com/pbogden/8c6bcd912f9edebab99d/raw/countries.json"; | |
d3.json(url, plotCountries); | |
var quakes = "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"; | |
//Bind the data | |
d3.json(quakes, plotQuakes); | |
function plotCountries(error, json) { | |
// Create array of GeoJSON features -- this defines the global variable "data" | |
data = json.objects.ne_50m_admin_0_countries.geometries | |
.map(function(d) { return topojson.feature(json, d); }); | |
// Put your code here | |
// Plot the features | |
layer2.selectAll("path") | |
.data(data) | |
.enter() | |
.append("path") | |
.attr("d", path) | |
.attr("stroke", "black") | |
.attr("fill", "grey"); | |
} | |
function plotQuakes(error, data){ | |
if (error) console.log(error); | |
console.log("Quakes: " + data); | |
var slightQuakes = data.features.filter(function(d) { return ( d.properties.mag >= 1 && d.properties.mag <= 3.5) }); | |
console.log("Slight Quakes: " + slightQuakes); | |
var strongQuakes = data.features.filter(function(d) { return ( d.properties.mag > 3.5 && d.properties.mag <= 5.5) }); | |
console.log("Strong Quakes" + strongQuakes) | |
var destructiveQuakes = data.features.filter(function(d) { return ( d.properties.mag > 5.5 && d.properties.mag <= 8) }); | |
console.log("Destructive Quakes" + destructiveQuakes) | |
// Bind the earthquake data | |
var slightGroup = slightLayer.selectAll("g") | |
.data(slightQuakes) | |
.enter(); | |
var strongGroup = strongLayer.selectAll("g") | |
.data(strongQuakes) | |
.enter(); | |
var destructiveGroup = destructiveLayer.selectAll("g") | |
.data(destructiveQuakes) | |
.enter(); | |
slightGroup.append("path") | |
.transition() | |
.delay(function(d,i) { return i*100}) | |
.attr("d", path) | |
.attr("class", "quake") | |
.attr("fill", "yellow"); | |
slightGroup.append("text") | |
.transition() | |
.delay(function(d,i) { return i*100}) | |
.attr("font-weight", "bold") | |
.attr("x", function (d) { return path.centroid(d)[0]; }) | |
.attr("y", function (d) { return path.centroid(d)[1]; }) | |
.text(function(d) { return d.properties.mag;}); | |
strongGroup.append("path") | |
.transition() | |
.delay(function(d,i) { return (i*100)+slightQuakes.length*100}) | |
.attr("d", path) | |
.attr("class", "quake") | |
.attr("fill", "orange"); | |
strongGroup.append("text") | |
.transition() | |
.delay(function(d,i) { return (i*100)+slightQuakes.length*100}) | |
.attr("font-weight", "bold") | |
.attr("x", function (d) { return path.centroid(d)[0]; }) | |
.attr("y", function (d) { return path.centroid(d)[1]; }) | |
.text(function(d) { return d.properties.mag;}); | |
destructiveGroup.append("path") | |
.transition() | |
.delay(function(d,i) { return (i*100)+strongQuakes.length*100+slightQuakes.length*100}) | |
.attr("d", path) | |
.attr("class", "quake") | |
.attr("fill", "red"); | |
destructiveGroup.append("text") | |
.transition() | |
.delay(function(d,i) { return (i*100)+strongQuakes.length*100+slightQuakes.length*100}) | |
.attr("font-weight", "bold") | |
.attr("x", function (d) { return path.centroid(d)[0]; }) | |
.attr("y", function (d) { return path.centroid(d)[1]; }) | |
.text(function(d) { return d.properties.mag;}); | |
} | |
function mousemoved() { | |
info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale())); | |
} | |
function formatLocation(p, k) { | |
var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f"); | |
return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " | |
+ (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E"); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment