Skip to content

Instantly share code, notes, and snippets.

@lgrammel
Created March 26, 2012 05:37
Show Gist options
  • Save lgrammel/2203193 to your computer and use it in GitHub Desktop.
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
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
<!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