d3 and openlayers3

data/seismo2.geojson

@@ -0,0 +1,22 @@
+{
+"type": "FeatureCollection",
+
+"features": [
+{ "type": "Feature", "properties": { "STAID": "ta.U15A", "STALOC": "North Rim", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=u15a" }, "geometry": { "type": "Point", "coordinates": [ -112.206011198156219, 36.364376251948237 ] } }
+,
+{ "type": "Feature", "properties": { "STAID": "ta.w13a", "STALOC": "Hualapai Mountain Park", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=w13a" }, "geometry": { "type": "Point", "coordinates": [ -113.810049646718539, 35.167075954207085 ] } }
+,
+{ "type": "Feature", "properties": { "STAID": "ta.x16a", "STALOC": "Lo Mia Camp", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=x16a" }, "geometry": { "type": "Point", "coordinates": [ -111.520790425376589, 34.48663319104741 ] } }
+,
+{ "type": "Feature", "properties": { "STAID": "ta.x18a", "STALOC": "Snowflake", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=x18a" }, "geometry": { "type": "Point", "coordinates": [ -110.025666607310598, 34.5979075931265 ] } }
+,
+{ "type": "Feature", "properties": { "STAID": "ta.y14a", "STALOC": "Wickenburg", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=y14a" }, "geometry": { "type": "Point", "coordinates": [ -113.07222112197762, 34.002769869910011 ] } }
+,
+{ "type": "Feature", "properties": { "STAID": "ta.z14a", "STALOC": "Wintersburg", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=z14a" }, "geometry": { "type": "Point", "coordinates": [ -113.030029971635173, 33.417484300717646 ] } }
+,
+{ "type": "Feature", "properties": { "STAID": "ta.113a", "STALOC": "Mohawk Valley", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=113a" }, "geometry": { "type": "Point", "coordinates": [ -113.691889876322008, 32.8329891521064 ] } }
+,
+{ "type": "Feature", "properties": { "STAID": "ta.319a", "STALOC": "Douglas", "TIFURL": "http:\/\/rev.seis.sc.edu\/stations\/?zip_or_station_code=319a" }, "geometry": { "type": "Point", "coordinates": [ -109.21154683334106, 31.313527992494564 ] } }
+
+]
+}

src/app.coffee

@@ -1,32 +1,94 @@
 root = @
 if not root.app? then app = root.app = {} else app = root.app
 
-app.map = new L.Map "map",
-  center: [34.267990, -112.085034]
-  zoom: 7
-
-app.osm_layer = new L.TileLayer 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-  attribution: 'Map data © OpenStreetMap contributors'
-
-app.map.addLayer app.osm_layer
-
-app.svg = d3.select(app.map.getPanes().overlayPane).append "svg"
-app.g = app.svg.append("g").attr "class", "leaflet-zoom-hide"
-
-xhr_url = "http://data.usgin.org/arizona/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=text/javascript&typeName=azgs:earthquakedata&format_options=callback:dothis"
-
-$.ajax
-  url:xhr_url
-  dataType:'jsonp'
-  jsonpCallback:'dothis'
-
-dothis = (jsondata) ->
-  app.mydata = jsondata
-  console.log "HELLO"
-  return app.mydata
-"""
-d3.json xhr_url, (jsondata) ->
-  app.mydata = jsondata
-  return app.mydata
-"""
-console.log app.mydata
+xhr_url = "http://data.usgin.org/arizona/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=text/javascript&typeName=azgs:earthquakedata&outputformat=json"
+
+app.center = ol.proj.transform [-112.085034, 34.267990], 'EPSG:4326', 'EPSG:3857'
+
+app.osm_layer = new ol.layer.TileLayer
+    source: new ol.source.MapQuestOpenAerial()
+
+ol.expr.register 'resolution', ->
+    app.map.getView().getView2D().getResolution()
+
+app.quakes_layer = new ol.layer.Vector
+    source: new ol.source.Vector
+        parser: new ol.parser.GeoJSON()
+        url: xhr_url
+    style: new ol.style.Style rules: [
+        new ol.style.Rule
+            symbolizers: [
+                new ol.style.Shape
+                    size: 20
+                    strokeColor: '#FFFF00'
+                    strokeOpacity: 1
+                    fillColor: '#FF0000'
+                    fillOpacity: 0.6
+            ]]
+
+app.view = new ol.View2D
+    center: app.center
+    zoom: 7
+
+app.map = new ol.Map
+    target: 'map'
+    layers: [app.osm_layer, app.quakes_layer]
+    renderer: ol.RendererHint.CANVAS
+    view: app.view
+
+
+app.margin = {top:20, right:20, bottom:30, left:40}
+app.width = 960 - app.margin.left - app.margin.right
+app.height = 500 - app.margin.top - app.margin.bottom
+
+app.x = d3.scale.linear()
+    .range([0, app.width])
+app.y = d3.scale.linear()
+    .range([app.height, 0])
+app.x_axis = d3.svg.axis()
+    .scale(app.x)
+    .orient('bottom')
+app.y_axis = d3.svg.axis()
+    .scale(app.y)
+    .orient('left')
+
+app.svg = d3.select("body").append("svg")
+    .attr("width", app.width + app.margin.left + app.margin.right)
+    .attr("height", app.height + app.margin.top + app.margin.bottom)
+    .append("g")
+    .attr("transform", "translate(" + app.margin.left + "," + app.margin.top + ")")
+
+d3.json xhr_url, (error, collection) ->
+    app.x.domain(d3.extent(collection.features, (d) -> return d.properties.calculated_magnitude) ).nice()
+    app.y.domain(d3.extent(collection.features, (d) -> return d.properties.depth )).nice()
+
+    app.svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + app.height + ")")
+        .call(app.x_axis)
+        .append("text")
+        .attr("class", "label")
+        .attr("x", app.width)
+        .attr("y", -6)
+        .style("text-anchor", "end")
+        .text("Magnitude")
+
+    app.svg.append("g")
+        .attr("class", "y axis")
+        .call(app.y_axis)
+        .append("text")
+        .attr("class", "label")
+        .attr("transform", "rotate(-90)")
+        .attr("y", 6)
+        .attr("dy", ".71em")
+        .style("text-anchor", "end")
+        .text("Depth")
+
+    app.svg.selectAll(".dot")
+        .data(collection.features)
+        .enter().append("circle")
+        .attr("class", "dot")
+        .attr("r", 3.5)
+        .attr("cx", (d) -> return app.x(d.properties.calculated_magnitude) )
+        .attr("cy", (d) -> return app.y(d.properties.depth) )
+        .style("fill", "#000")

src/index.jade

@@ -0,0 +1,13 @@
+doctype 5
+html(lang="en")
+    head
+        meta(charset="utf-8")
+        title Arizona Earthquakes
+        link(rel="stylesheet", href="http://ol3js.org/en/master/build/ol.css")
+        link(rel="stylesheet", href="styles/base.css")
+    body
+        #map(style="width:1000px;height:700px;")
+        script(src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js")
+        script(src="vendor/d3/d3.min.js")
+        script(src="http://ol3js.org/en/master/build/ol.js")
+        script(src="scripts/app.js")

styles/base.css

@@ -0,0 +1,9 @@
+.axis path,
+.axis line {
+    fill:none;
+    stroke:#000;
+    shape-rendering:crispEdges;
+}
+.dot {
+  stroke: #000;
+}