Created
March 26, 2012 05:37
-
-
Save lgrammel/2203193 to your computer and use it in GitHub Desktop.
USGS Earthquakes of last 7 days rendered with d3 / polymaps / Stamen toner tiles / coffeescript
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
| resolve = (value,path) -> | |
| for element in path.split(".") | |
| value = value[element] | |
| value | |
| # Code based on Polymaps example from Mike Bostock http://bl.ocks.org/899670 | |
| po = org.polymaps | |
| map = po.map().container(d3.select("#map").append("svg:svg").node()) | |
| .zoom(2) | |
| .center({lat: 40, lon: 0}) | |
| .add(po.drag()) | |
| .add(po.wheel().smooth(false)) | |
| .add(po.dblclick()) | |
| .add(po.arrow()) | |
| # background tiles from Stamen http://maps.stamen.com | |
| map.add(po.image().url(po.url("http://tile.stamen.com/toner/{Z}/{X}/{Y}.png"))) | |
| resultHandler = (json) -> | |
| data = resolve(json, "query.results.item") | |
| transform = (earthquake) -> | |
| d = map.locationPoint({lat: earthquake.lat, lon: earthquake.long}) | |
| "translate(" + d.x + "," + d.y + ")" | |
| # Insert our layer beneath the compass. | |
| layer = d3.select("#map svg").insert("svg:g", ".compass"); | |
| marker = layer.selectAll("g").data(data) | |
| .enter().append("svg:g") | |
| .attr("transform", transform) | |
| .attr("class", "earthquake") | |
| color = d3.interpolateRgb("#a00","#f00") | |
| marker.append("svg:circle") | |
| .attr("r", 4.5) | |
| .attr("fill", (d) => color(d.subject[0] / 10)) # color by magnitude (brighter = stronger) | |
| map.on("move", -> | |
| layer.selectAll("g").attr("transform", transform) | |
| ) | |
| map.add(po.compass().pan("none")) | |
| do -> | |
| d3.json("http://query.yahooapis.com/v1/public/yql?q=use%20%22http%3A%2F%2Fearthquake.usgs.gov%2Fearthquakes%2Fcatalogs%2Feqs7day-M2.5.xml%22%3B%20select%20*%20from%20rss%20where%20url%3D%22http%3A%2F%2Fearthquake.usgs.gov%2Fearthquakes%2Fcatalogs%2Feqs7day-M2.5.xml%22%3B&format=json&diagnostics=true", resultHandler) | |
| # Using YQL to get data from http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-M2.5.xml | |
| # to circumvent cross-origin problems via JSONP |
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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html> | |
| <head> | |
| <title>Latest Earthquakes in the World - Past 7 days (from USGS)</title> | |
| <script type="text/javascript" src="https://raw.github.com/simplegeo/polymaps/v2.5.0/polymaps.min.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js" ></script> | |
| <script type="text/coffeescript" src="earthquakes.coffee"></script> | |
| <script type="text/javascript" src="http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"></script> | |
| <style type="text/css"> | |
| html, body, #map { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .earthquake { | |
| position: absolute; | |
| } | |
| .earthquake circle { | |
| stroke: black; | |
| stroke-width: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment