Adds Etna tourism story

Adds the story elements for Etna tourism, closes #7, started to work on lava stream code

coffee/d3layer.coffee

@@ -2,7 +2,7 @@
 
 # provides a layer of circles corresponding to the area of influence of an eruption
 # uses d3 to draw on a mapbox layer.
-@etna.d3layer = (map, mapDrawSvg, mapDrawGroup) ->
+@etna.d3layer = (map, mapDrawSvg, mapDrawGroup, lavaDrawGroup) ->
   etnaLocation = [15.004, 37.734]
   # official plume area for different VEI values (from Wikipedia)
   plumes = {
@@ -23,6 +23,7 @@
       lon: location[0]
     [point.x, point.y]
 
+
   # calculates the distance in lat points with the hack 111km = 1 lat point
   getDistance = (vei) ->
     plumes[vei] / 111;  # each VEI point corresponds to the official plume area
@@ -39,6 +40,31 @@
       firstDraw = false
 
     pixelLocation = project(etnaLocation)
+    # mapDrawGroup.selectAll('rect')
+    #   .attr('x', pixelLocation[0])
+    #   .attr('y', pixelLocation[1])
+    #   .attr('width', 5)
+    #   .attr('height', (d, i) ->
+    #     h = 0
+    #     if d.lavaflows
+    #       for direction, length of d.lavaflows
+    #         #h = 1
+    #         switch direction
+    #           when "South" then h = length
+
+    #     h
+    #     #dist = d.lava / 111
+    #   )
+
+    # lineFunction = d3.svg.line
+    #   .x( (d) ->
+    #     d.x
+    #   )
+    #   .y( (d) ->
+    #     d.y
+    #   )
+    #   .interpolate("linear")
+
     d3.selectAll('circle')
       .attr('cx', pixelLocation[0])
       .attr('cy', pixelLocation[1])
@@ -49,17 +75,75 @@
         pixelLocation[1] - distPoint[1]
       )
 
+    d3.selectAll('path')
+      .attr('d', (d, i) ->
+        #lineFunction(d)
+        path = "M 0 0 L 0 0"
+        if d.lavaflows && d.lavaflows
+          for direction, length of d.lavaflows
+            switch direction
+              when "South"
+                dist = length / 111
+                distPointLat = etnaLocation[1] - dist
+                distPoint = project([etnaLocation[0], distPointLat])
+                path = "M #{pixelLocation[0]} #{pixelLocation[1]} L #{distPoint[0]} #{distPoint[1]}"
+              when "North"
+                dist = length / 111
+                distPointLat = etnaLocation[1] + dist
+                distPoint = project([etnaLocation[0], distPointLat])
+                path = "M #{pixelLocation[0]} #{pixelLocation[1]} L #{distPoint[0]} #{distPoint[1]}"
+              when "East"
+                dist = length / (111 * Math.cos(pixelLocation[1]))
+                distPointLon = etnaLocation[0] + dist
+                distPoint = project([distPointLon, etnaLocation[1]])
+                path = "M #{pixelLocation[0]} #{pixelLocation[1]} L #{distPoint[0]} #{distPoint[1]}"
+              when "West"
+                dist = length / (111 * Math.cos(pixelLocation[1]))
+                distPointLon = etnaLocation[0] - dist
+                distPoint = project([distPointLon, etnaLocation[1]])
+                path = "M #{pixelLocation[0]} #{pixelLocation[1]} L #{distPoint[0]} #{distPoint[1]}"
+              else
+                path = "M 0 0 L 0 0"
+
+        path
+      )
+      .attr("stroke", "red")
+      .attr("stroke-width", 10)
+      .attr("fill", "red")
+      .selectAll('title')
+        .text((d, i) ->
+          text = "lavaflow in #{d.date.getFullYear()}"
+          # if d.lavaflows && d.lavaflows
+          #   for direction, length of d.lavaflows
+          #     text = "#{text} #{length} in direction #{direction}"
+          text
+        )
+
+      # .attr('x1', pixelLocation[0])
+      # .attr('x2', pixelLocation[0] + 1)
+      # .attr('y1', pixelLocation[1])
+      # .attr('y2', (d, i) ->
+      #   if d.lavaflows
+      #     console.log d
+      #   pixelLocation[1] + 1
+      # )
+
+
   # binds the bounding box and eruptions data to the svg
   data: (boundingBox, eruptions) ->
     bounds = d3.geo.bounds(boundingBox)
     feature = mapDrawGroup.selectAll('circle')
       .data(eruptions)
     feature.exit().remove()
     feature.enter().append('circle')
+    lava = lavaDrawGroup.selectAll('path')
+      .data(eruptions)
+    lava.exit().remove()
+    lava.enter().append('path').append('title')
 
   # sets the visible map extension
   extent: () ->
-    new MM.Extent( 
+    new MM.Extent(
       new MM.Location(bounds[0][1], bounds[0][0]),
       new MM.Location(bounds[1][1], bounds[1][0])
     )

coffee/eruptions.coffee

@@ -158,6 +158,7 @@
         'airportShutdown': eruptionData[eruption].airportShutdown
         'destroyed': eruptionData[eruption].destroyed
         'earthquake': eruptionData[eruption].earthquake
+        'lavaflows': eruptionData[eruption].lavaflows
 
 
   drawBarchart: (eruptionData) =>

coffee/map.coffee

@@ -65,7 +65,8 @@
       .attr('class', 'd3-vec')
     mapDrawSvg = mapDrawDiv.append('svg')
     mapDrawGroup = mapDrawSvg.append('g')
-    @circleLayer = etna.d3layer(@map, mapDrawSvg, mapDrawGroup)
+    lavaDrawGroup = mapDrawSvg.append('g')
+    @circleLayer = etna.d3layer(@map, mapDrawSvg, mapDrawGroup, lavaDrawGroup)
     @circleLayer.parent = mapDrawDiv.node()
     @map.addLayer(@circleLayer)
 

css/barchart.css

@@ -54,3 +54,7 @@ circle {
   stroke: #fff;
   stroke-width: 1.5px;
 }
+
+path {
+  opacity: 0.2;
+}

css/story.css

@@ -19,11 +19,27 @@ p {
 .section-title.introduction {
   background-color: #000;
   margin-top: 0;
+  background-color: #000;
+  background-image: url('../img/lava.jpg');
+  height: 550px;
+  background-repeat: no-repeat;
+  background-position: left;
 }
 
-div.section-title.introduction .hero-unit {
-  background-color: #000;
+div.section-title.introduction .intro-title {
+  position: absolute;
+  top: 250px;
+  right: 150px;
+}
+
+div.section-title.introduction .intro-title h1 {
+  font-size: 3em;
 }
+
+div.section-title.introduction .intro-title p {
+  font-size: 1.5em;
+}
+
 .section-title.etna-map {
   background-color: #6DCB62;
 }
@@ -41,6 +57,10 @@ div.section-title.introduction .hero-unit {
   background-color: #387FA8;
 }
 
+.section-title.cs171 {
+  background-color: #000;
+}
+
 .section-title h2 {
   font-size: 3em;
   padding: 100px 0;