Slightly modified version of Suzee's block. Changes:
- plotQuakes & getQuakes are separate -- setTimeout calls plotQuakes
- window.setTimeout is inside getQuakes, where its argument is defined
- info message also indicates when the quakes are added
Last active
September 22, 2015 00:00
-
-
Save pbogden/79c6988135e3a2257bb3 to your computer and use it in GitHub Desktop.
suzee v2
This file contains hidden or 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"> | |
| <title>Homework 4</title> | |
| <style> | |
| body { | |
| position: absolute; | |
| margin: 0px; | |
| } | |
| svg { | |
| background-color: #377ab8; | |
| } | |
| .info { | |
| font-family: sans-serif; | |
| color: #000; | |
| position: absolute; | |
| top: 450px; | |
| left: 800px; | |
| } | |
| /* quake circle color/fill*/ | |
| path.quake, circle.quake { | |
| fill: #990000; | |
| fill-opacity: .5; | |
| stroke-width: .1; | |
| } | |
| path { | |
| fill: #4daf4a; | |
| stroke: #a1d99b; | |
| stroke-width: .4 | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> | |
| <body> | |
| <script> | |
| var width = 960, height = 500; | |
| var data; // declare a global variable | |
| //this is the layer for the states and background | |
| var layer = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .on("mousemove", mousemoved); | |
| var info = d3.select("body").append("div") | |
| .attr("class", "info"); | |
| var path = d3.geo.path(); | |
| var projection = path.projection(); | |
| // US geometries | |
| var url = "https://gist.githubusercontent.com/pbogden/5da1822e8fffc06cf5ed/raw/us.json" | |
| //USGS query August-September 2015 min magnitude =3 | |
| var urlUSGS = "http://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2015-08-23&endtime=2015-09-19&minmagnitude=3"; | |
| //read the states data | |
| d3.json(url, plotStates); | |
| // Read the earthquake data | |
| d3.json(urlUSGS, getQuakes); | |
| //plot the states data | |
| function plotStates(error, json) { | |
| // Create array of GeoJSON features -- this defines the global variable "data" | |
| data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); }) | |
| layer.selectAll("path") | |
| .data(data) | |
| .enter() | |
| .append("path") | |
| .attr("d", path); | |
| } | |
| //plot the new quakes data | |
| function getQuakes(error, quakes) { | |
| if (error) console.log(error); | |
| console.log("Data from USGS:", quakes); | |
| // show earthquakes by mag>3 | |
| var features = quakes.features.filter(function(d) { return (+ d.properties.mag >3) }); | |
| window.setTimeout(function() { plotQuakes(features) }, 3000); | |
| } | |
| function plotQuakes(features) { | |
| info.text("Here you go!"); | |
| // Plot the new earthquakes | |
| layer.selectAll("path.quake") | |
| .data(features) | |
| .enter().append("path") | |
| .attr("class", "quake") | |
| .attr("d", path); | |
| } | |
| 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> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment