From b9f1ad076d2c4dbf7bdc26e452f250984b194852 Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Tue, 22 Sep 2015 12:48:28 -0300
Subject: [PATCH 01/12] fixing margin that got messed up along the way

---
 templates/base_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/base_template.html b/templates/base_template.html
index ba57021..d0bb6fa 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -125,7 +125,7 @@
 	   <figure style="width:32px; border: 1px solid #f2f2f2;">
 	     <img src="https://www.gravatar.com/avatar/{{ email_hash }}?s=32&d=identicon" /></figure></li>
 
-      <li class="dropdown">
+      <li class="dropdown" style="margin-right: 20px;">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ user.email }}<b class="caret"></b></a>
         <ul class="dropdown-menu">
           <li><a href="/profile">My profile</a></li>

From a5d7703d1791e83051543efd124b826b3c6ba8a1 Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Tue, 22 Sep 2015 13:07:31 -0300
Subject: [PATCH 02/12] adding scroll to, and loader

---
 static/js/app.js                | 4 +++-
 static/js/controllers/2DCtrl.js | 4 +++-
 templates/model2.html           | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index a9fffe0..630db91 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -117,7 +117,9 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.update_data = function(){
+    $('#loader').show();
     var earth_model = $scope.makeEarthModelStruct();
+    $("html, body").scrollTop($("#plot_header").offset().top);
       
     var seismic = {
       frequency: $scope.frequency,
@@ -137,12 +139,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var payload = JSON.stringify(data);
       $http.get($scope.server + '/data.json?type=seismic&script=convolution_model.py&payload=' + payload)
         .then(function(response){
-          console.log(response.data);
           $scope.plot(response.data);
           $scope.maxTrace = String(response.data.seismic.length - 1);
           $scope.maxTWT = String(response.data.seismic[0].length - 1);
           $scope.maxOffset = String(response.data.offset_gather.length - 1);
           $scope.updateClicked = true;
+          $('#loader').hide();
         }
       );
   };
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index b6e4c91..05905df 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -105,7 +105,9 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.update_data = function(){
+    $('#loader').show();
     var earth_model = $scope.makeEarthModelStruct();
+    $("html, body").scrollTop($("#plot_header").offset().top);
       
     var seismic = {
       frequency: $scope.frequency,
@@ -125,12 +127,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var payload = JSON.stringify(data);
       $http.get($scope.server + '/data.json?type=seismic&script=convolution_model.py&payload=' + payload)
         .then(function(response){
-          console.log(response.data);
           $scope.plot(response.data);
           $scope.maxTrace = String(response.data.seismic.length - 1);
           $scope.maxTWT = String(response.data.seismic[0].length - 1);
           $scope.maxOffset = String(response.data.offset_gather.length - 1);
           $scope.updateClicked = true;
+          $('#loader').hide();
         }
       );
   };
diff --git a/templates/model2.html b/templates/model2.html
index 9d6cfbc..55ce9e3 100644
--- a/templates/model2.html
+++ b/templates/model2.html
@@ -112,12 +112,12 @@ <h4><span class="label label-default">z-range of model</span></h4>
 	</div>
 
   <!-- RESULTS PANEL -->
-  <div class="panel panel-default">
+  <div class="panel panel-default" id="plot_header">
     <div class="panel-heading">
       <h3 class="panel-title">Result</h3>
     </div>
     <div class="panel-body">
-
+   		<img class="col-xs-12" style="height: 300px; display:none;" id="loader" src="/static/img/ajax-loader.gif" />
       <!-- GRAPHS -->
       <div class="col-xs-12 col-sm-8">
 				<div class="col-xs-6 vd_plot remove-padding"></div>

From 8ced964681a70119ac249acc0f4c34dd9c65bd9b Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Tue, 22 Sep 2015 13:55:25 -0300
Subject: [PATCH 03/12] fixing loader to not show everytime, only on initial
 load, added newest version of g3.js in min form

---
 static/js/app.js                |   5 +-
 static/js/controllers/2DCtrl.js |   5 +-
 static/js/g3.js                 | 876 +-------------------------------
 3 files changed, 10 insertions(+), 876 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 630db91..a2a3714 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -117,7 +117,10 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.update_data = function(){
-    $('#loader').show();
+    if($scope.updateClicked === undefined){
+      $('#loader').show();
+    }
+
     var earth_model = $scope.makeEarthModelStruct();
     $("html, body").scrollTop($("#plot_header").offset().top);
       
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index 05905df..c807630 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -105,7 +105,10 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.update_data = function(){
-    $('#loader').show();
+    if($scope.updateClicked === undefined){
+      $('#loader').show();
+    }
+
     var earth_model = $scope.makeEarthModelStruct();
     $("html, body").scrollTop($("#plot_header").offset().top);
       
diff --git a/static/js/g3.js b/static/js/g3.js
index 8cc9aec..53fa984 100644
--- a/static/js/g3.js
+++ b/static/js/g3.js
@@ -1,874 +1,2 @@
-/*! g3 - v0.0.1 - 2015-09-17 - justinkheisler */
-'use strict';
-;(function (window) {
-
-function defineg3() {
-	var g3 = {};
-	return g3;
-}
-if(typeof(g3) === 'undefined') {
-	window.g3 = defineg3();
-}
-
-const DEBUG = false;
-
-function createAxis(scale, innerTickSize, orient, ticks){
-	return d3.svg.axis()
-		.scale(scale)
-		.innerTickSize(innerTickSize)
-		.outerTickSize(3)
-		.tickPadding(5)
-		.orient(orient)
-		.ticks(ticks);
-}
-g3.horizon = function(plot, data, options){
-
-	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
-	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
-
-	var horizon = {};
-	horizon.interpolate = 'basis';
-	horizon.xInt = 1;
-	horizon.xMin = plot.xDomain[0];
-	horizon.yInt = 1;
-	horizon.yMin = plot.yDomain[0];
-	horizon.duration = 500;
-	horizon.gain = 1;
-
-	if(options){
-		if(options.interpolate){ horizon.interpolate = options.interpolate; }
-		if(options.xInt){ horizon.xInt = options.xInt; }
-		if(options.xMin){ horizon.xMin = options.xMin; }
-		if(options.yInt){ horizon.yInt = options.yInt; }
-		if(options.yMin){ horizon.yMin = options.yMin; }
-	}
-
-	horizon.setInterpolate = function(interpolate){
-		this.interpolate = interpolate;
-		return this;
-	}
-
-	horizon.setXMin = function(xMin){
-		this.xMin = xMin; 
-		return this;
-	}
-
-	horizon.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	}
-
-	horizon.setGain = function(gain){
-		this.gain = gain;
-		return this;
-	}
-
-	horizon.draw = function(){
-		var lineFunc = d3.svg.line()
-			.x(function (d, i) {
-				return plot.xScale(i + horizon.xMin);
-			})
-			.y(function (d) {
-				return plot.yScale(d * horizon.gain);
-			})
-			.interpolate(this.interpolate);
-
-		this.svg = plot.svg.append('svg:path')
-			.attr('d', lineFunc(data))
-			.attr('stroke', 'green')
-			.attr('stroke-width', 1.5)
-			.attr('fill', 'none');
-		return this;
-	}
-
-	horizon.reDraw = function(data){
-		var lineFunc = d3.svg.line()
-			.x(function (d, i) {
-				return plot.xScale(i + horizon.xMin);
-			})
-			.y(function (d) {
-				return plot.yScale(d * horizon.gain);
-			})
-			.interpolate(this.interpolate);
-		
-		this.svg.transition()
-			.duration(this.duration)
-			.attr('d', lineFunc(data));
-		return this;
-	}
-
-	return horizon;
-};
-
-g3.log = function(plot, data, options){
-	
-	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
-	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
-
-	var log = {};
-	log.xInt = 1;
-	log.xMin = plot.xDomain[0];
-	log.yInt = 1;
-	log.yMin = plot.yDomain[0];
-	log.color = "blue";
-	log.duration = 500;
-
-	if(options){
-		if(options.yInt){ log.yInt = options.zInt; }
-		if(options.yMin){ log.yMin = options.yMin; }
-		if(options.xInt){ log.xInt = options.xInt; }
-		if(options.xMin){ log.xMin = options.xMin; }
-	}
-
-	// Setters
-	log.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	}
-
-	log.setYInt = function(yInt){
-		this.yInt = yInt;
-		return this;
-	}
-
-	log.setYMin = function(yMin){
-		this.yMin = yMin;
-		return this;
-	}
-
-	log.setXInt = function(xInt){
-		this.xInt = xInt;
-		return this;
-	}
-
-	log.setXMin = function(xMin){
-		this.xMin = xMin;
-		return this;
-	}
-
-	log.setData = function(data){
-		this.data = data;
-		return this;
-	}
-
-	log.setColor = function(color){
-		this.color = color;
-		return this;
-	}
-
-  log.draw = function(){
-    this.svg = plot.svg.append("path")  
-      .datum(data)
-      .attr("d", lineFunc)
-      .attr("stroke", this.color)
-      .attr("stroke-width", 0.25)
-      .attr("fill", "none");
-
-    // var sorted = data.sort(function(a, b) {
-    //   return a - b;
-    // });
-
-    // var focus = plot.svg.append("g")
-    //     .attr("class", "focus")
-    //     .style("display", "none");
-
-    // focus.append("circle")
-    //     .attr("r", 4.5);
-
-    // focus.append("text")
-    //     .attr("x", 9)
-    //     .attr("dy", ".35em");
-    //     var bisectDate = d3.bisector(function(d) { return d; }).left;
-    // plot.svg.append("rect")
-    //     .attr("class", "overlay")
-    //     .attr("width", plot.width)
-    //     .attr("height", plot.height)
-    //     .on("mouseover", function() { focus.style("display", null); })
-    //     .on("mouseout", function() { focus.style("display", "none"); })
-    //     .on("mousemove", mousemove);
-
-    // function mousemove() {
-    //   var x0 = plot.xScale.invert(d3.mouse(this)[0]),
-    //       i = bisectDate(data, x0, 1),
-    //       d0 = data[i - 1],
-    //       d1 = data[i],
-    //       d = x0 - d0 > d1 - x0 ? d1 : d0;
-    //   focus.attr("transform", "translate(" + plot.xScale(d) + "," + plot.yScale(d) + ")");
-    //   focus.select("text").text(d);
-    // };
-    return this;
-  }
-
-	var lineFunc = d3.svg.line()
-	.x(function (d) {
-		return plot.xScale(d);
-	})
-	.y(function (d, i){
-		return plot.yScale(i * log.yInt + log.yMin);
-	})
-	.interpolate('basis');
-
-	log.reDraw = function(data){
-
-		this.svg.transition()
-			.duration(this.duration)
-			.attr('d', lineFunc(data))
-			.ease('linear');
-		return this;
-	}
-	return log;
-}
-
-g3.plot = function(elem, options){
-  
-  if(!elem){ return 'Param: elem is missing. A div to attach to is required'; }
-
-	var plot = {};
-	plot.margin = {top: 50, right: 0, bottom: 30, left: 0};
-	plot.width = $(elem).width() - plot.margin.left;
-	plot.height = 800;
-	plot.xDomain = [0,0];
-	plot.yDomain = [0,0];
-	plot.elem = elem;
-	plot.xAxisVisible = true;
-	plot.yAxisVisible = true;
-	plot.x2AxisVisible = false;
-	plot.y2AxisVisible = false;
-	plot.xOrient = 'top';
-	plot.x2Orient = 'bottom';
-	plot.yOrient = 'left';
-	plot.y2Orient = 'right';
-  plot.duration = 500;
-
-	if(options){
-	  if(options.margin){ plot.margin = options.margin; }
-	  if(options.width){ plot.width = options.width; }
-	  if(options.height){ plot.height = options.height; }
-	  if(options.xDomain){ plot.xDomain = options.xDomain; }
-	  if(options.yDomain){ plot.yDomain = options.yDomain; }
-	}
-
-  plot.setDuration = function(duration){
-    this.duration = duration;
-    return this;
-  }
-
-  plot.setMargin = function(top, right, bottom, left){
-  	this.margin = {top: top, right: right, bottom: bottom, left: left};
-  	return this;
-  }
-
-  plot.setWidth = function(width){
-  	this.width = width;
-  	return this;
-  }
-
-  plot.setHeight = function(height){
-  	this.height = height;
-  	return this;
-  }
-
-  plot.setXDomain = function(domain){
-  	this.xDomain = domain;
-  	return this;
-  }
-
-  plot.setYDomain = function(domain){
-  	this.yDomain = domain;
-  	return this;
-  }
-
-  plot.setX2Domain = function(domain){
-  	this.x2Domain = domain;
-  	return this;
-  }
-
-  plot.setY2Domain = function(domain){
-  	this.y2Domain = domain;
-  	return this;
-  }
-
-  plot.toggleXAxis = function(bool){
-  	this.xAxisVisible = bool;
-  	return this;
-  }
-
-  plot.toggleX2Axis = function(bool){
-  	this.x2AxisVisible = bool;
-  	return this;
-  }
-
-  plot.toggleYAxis = function(bool){
-  	this.yAxisVisible = bool;
-  	return this;
-  }
-
-  plot.toggleY2Axis = function(bool){
-  	this.y2AxisVisible = bool;
-  	return this;
-  }
-
-  plot.setXTicks = function(ticks){
-  	this.xTicks = ticks;
-  	return this;
-  }
-
-  plot.setYTicks = function(ticks){
-  	this.yTicks = ticks;
-  	return this;
-  }
-
-  plot.setX2Ticks = function(ticks){
-  	this.x2Ticks = ticks;
-  	return this;
-  }
-
-  plot.setY2Ticks = function(ticks){
-  	this.y2Ticks = ticks;
-  	return this;
-  }
-
-  plot.setYTitle = function(title){
-  	this.yTitle = title;
-  	return this;
-  }
-
-  plot.setXTitle = function(title){
-  	this.xTitle = title;
-  	return this;
-  }
-
-  plot.setY2Title = function(title){
-  	this.y2Title = title;
-  	return this;
-  }
-
-  plot.setX2Title = function(title){
-  	this.x2Title = title;
-  	return this;
-  }
-
-  plot.setXOrient = function(orient){
-  	this.xOrient = orient;
-  	return this;
-  }
-
-  plot.setX2Orient = function(orient){
-  	this.x2Orient = orient;
-  	return this;
-  }
-
-  plot.setYOrient = function(orient){
-  	this.yOrient = orient;
-  	return this;
-  }
-
-  plot.sety2Orient = function(orient){
-  	this.y2Orient = orient;
-  	return this;
-  }
-
-  plot.setXTickFormat = function(format){
-  	this.xTickFormat = format;
-  	return this;
-  }
-  
-  plot.setYTickFormat = function(format){
-  	this.yTickFormat = format;
-  	return this;
-  }
-  
-  plot.setX2TickFormat = function(format){
-  	this.x2TickFormat = format;
-  	return this;
-  }
-
-  plot.setY2TickFormat = function(format){
-  	this.y2TickFormat = format;
-  	return this;
-  }
-
-  plot.draw = function() {
-	  this.xScale = d3.scale.linear()
-    	.domain(this.xDomain)
-    	.range([0, this.width]);
-    this.yScale = d3.scale.linear()
-    	.domain(this.yDomain)
-    	.range([0, this.height]);
-
-    var innerWidth = this.width - this.margin.left - this.margin.right,
-    innerHeight = this.height - this.margin.top - this.margin.bottom;
-
-	  // Append svg object to dom element
-	  this.svg = d3.select(elem).append('svg')
-	    .attr('class', 'log_plot')
-	    .attr('width', this.width + this.margin.right + this.margin.left)
-	    .attr('height', this.height + this.margin.bottom + this.margin.top) 
-	    .append('g')
-	    .attr('height', this.height)
-	    .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
-
-	  // Set axis
-	  if(this.xAxisVisible){
-	  	this.xAxis = createAxis(this.xScale, -this.height, this.xOrient, this.xTicks);
-	  	this.xAxis.tickFormat(this.xTickFormat);
-	  	this.svg.append('g')
-	    	.attr('class', 'x axis')
-	    	.call(this.xAxis);
-	  }
-	  if(this.yAxisVisible){
-	  	this.yAxis = createAxis(this.yScale, -this.width, this.yOrient, this.yTicks);
-	  	this.yAxis.tickFormat(this.yTickFormat);
-	  	this.svg.append('g')
-		    .attr('class', 'y axis')
-		    .call(this.yAxis);
-	  }
-	  if(this.x2AxisVisible){
-	  	this.x2Scale = d3.scale.linear()
-	    	.domain(this.x2Domain)
-	    	.range([0, this.width]);
-	  	this.x2Axis = createAxis(this.x2Scale, -this.height, this.x2Orient, this.x2Ticks);
-	  	this.x2Axis.tickFormat(this.x2TickFormat);
-	  	this.svg.append('g')
-	    	.attr('class', 'x2 axis')
-		    .attr("transform", "translate(" + "0," + this.height + ")")
-	    	.call(this.x2Axis);
-	  }
-	 	if(this.y2AxisVisible){
-	 		this.y2Scale = d3.scale.linear()
-	    	.domain(this.y2Domain)
-	    	.range([0, this.height]);
-	  	this.y2Axis = createAxis(this.y2Scale, -this.width, this.y2Orient, this.y2Ticks);
-	  	this.y2Axis.tickFormat(this.y2TickFormat);
-	  	this.svg.append('g')
-		    .attr('class', 'y2 axis')
-		    .attr("transform", "translate(" + this.width + ",0)")
-		    .call(this.y2Axis);
-	  }
-
-    if(this.xTitle){
-      
-      if(this.xTickFormat === ""){
-        var margin = -10;
-      } else {
-        var margin = -30;
-      }
-      this.svg.append("text")
-          .attr("x", (this.width) / 2)
-          .attr("y", margin)
-          .style("text-anchor", "middle")
-          .style("font-size", 12)
-          .text(this.xTitle);
-    }
-    if(this.yTitle){
-
-      if(this.yTickFormat === ""){
-        var yMargin = -10;
-      } else {
-        var yMargin = -40;
-      }
-
-      this.svg.append("text")
-        .attr("transform", "rotate(-90)")
-        .attr("y", yMargin)
-        .attr("dy", "1em")
-        .style("text-anchor", "end")
-        .style("font-size", 12)
-        .text(this.yTitle);
-    }
-    if(this.x2Title){
-      
-      if(this.x2TickFormat === ""){
-        var margin = 10;
-      } else {
-        var margin = 30;
-      }
-      this.svg.append("text")
-          .attr("transform", "translate(" + "0," + this.height + ")")
-        .attr("x", (this.width) / 2)
-          .attr("y", margin)
-          .style("text-anchor", "middle")
-          .style("font-size", 12)
-          .text(this.x2Title);
-    }
-    if(this.y2Title){
-
-      if(this.yTickFormat === ""){
-        var yMargin = -10;
-      } else {
-        var yMargin = -40;
-      }
-
-      this.svg.append("text")
-        .attr("transform", "translate(" + "0," + this.height + ")")
-        .attr("y", yMargin)
-        .attr("dy", "1em")
-        .style("text-anchor", "end")
-        .style("font-size", 12)
-        .text(this.y2Title);
-    }
-	  return this;
-	};
-
-  plot.reDraw = function(xDomain, yDomain, x2Domain, y2Domain){    
-    if(xDomain){
-      this.xScale.domain(xDomain);
-      this.svg.select('.x.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.xAxis)
-        .ease('linear');
-    }
-
-    if(yDomain){
-      this.yScale.domain(yDomain);
-      this.svg.select('.y.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.yAxis)
-        .ease('linear');
-    }
-
-    if(x2Domain){
-      this.x2Scale.domain(x2Domain);
-      this.svg.select('.x2.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.x2Axis)
-        .ease('linear');
-    }
-
-    if(y2Domain){
-      this.y2Scale.domain(y2Domain);
-      this.svg.select('.y2.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.y2Axis)
-        .ease('linear');
-    }
-  }
-
-	return plot;
-}
-g3.seismic = function(plot, data, options){
-	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
-	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
-	
-	var seismic = {};
-	seismic.max = 1;
-	seismic.gain = 1;
-	seismic.plot = plot;
-	seismic.data = data;
-	seismic.duration = 500;
-
-  seismic.draw = function(){
-
-  	if(!seismic.color){
-		seismic.color = d3.scale.linear()
-		.domain([-this.max, 0, this.max])
-		.range(['#FF0000', '#FFF', '#0000FF']);
-	}
-
-  	var elem = $(plot.elem);
-    this.canvas = d3.select(plot.elem)
-      .append('canvas')
-      .attr('width', data.length)
-      .attr('height', data[0].length)
-      .style('width', plot.width +  'px')
-      .style('height', plot.height + 'px')
-      .style('opacity', 0.95)
-      .style('top', plot.margin.top + 'px')
-      .style('left', plot.margin.left + 'px')
-      .call(seismic.drawImage);
-    return this;
-  }
-
-	seismic.reDraw = function(data){
-
-  	// Update the Canvas Attributes
-  	seismic.canvas
-      .attr('width', data.length)
-      .attr('height', data[0].length)
-      .style('width', seismic.plot.width +  'px')
-      .style('height', seismic.plot.height + 'px');
-
-    // Wipe the old canvas, the new size can be different
-  	seismic.context.clearRect(0, 0, seismic.data.length, seismic.data[0].length);
-
-  	seismic.data = data;
-		var x = data.length,
-		y = data[0].length;
-		var image = seismic.context.createImageData(x,y);
-
-		// Paint the image
-		for(var i = 0, p = -1; i < y; ++ i){
-			for(var j = 0; j < x; ++j){
-				var c = d3.rgb(seismic.color(data[j][i] * seismic.gain));
-				image.data[++p] = c.r;
-				image.data[++p] = c.g;
-				image.data[++p] = c.b;
-				image.data[++p] = 255;
-			}
-		}
-
-		// Dump image to canvas
-		seismic.context.putImageData(image, 0, 0);
-	  return this;
-  }
-
-	seismic.drawImage = function(canvas){
-		seismic.context = canvas.node().getContext('2d');
-		var x = seismic.data.length,
-		y = seismic.data[0].length;
-		seismic.image = seismic.context.createImageData(x,y);
-
-		for(var i = 0, p = -1; i < y; ++ i){
-			for(var j = 0; j < x; ++j){
-				var c = d3.rgb(seismic.color(seismic.data[j][i] * seismic.gain));
-				seismic.image.data[++p] = c.r;
-				seismic.image.data[++p] = c.g;
-				seismic.image.data[++p] = c.b;
-				seismic.image.data[++p] = 255;
-			}
-		}
-		seismic.context.putImageData(seismic.image, 0, 0);
-		return this;
-	}
-
-	seismic.setColor = function(colorScale){
-		this.color = colorScale;
-		return this;
-	}
-
-	seismic.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	}
-
-	seismic.setMax = function(max){
-		this.max = max;
-		return this;
-	}	
-
-	seismic.setGain = function(gain){
-		this.gain = gain;
-		return this;
-	}
-
-	return seismic;
-}
-g3.wiggle = function(plot, data, options){
-
-	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
-	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
-
-	var wiggle = {};
-	wiggle.skip = 0;
-	wiggle.gain = 30;
-	wiggle.xInt = 1;
-	wiggle.xMin = plot.xDomain[0];
-	wiggle.yInt = 1;
-	wiggle.yMin = plot.yDomain[0];
-	wiggle.rand = Math.floor((Math.random() * 100) + 1);
-	wiggle.sampleRate = 1;
-	wiggle.duration = 500;
-
-	if(options){
-		if(options.skip){ wiggle.skip = options.skip; }
-		if(options.gain){ wiggle.gain = options.gain; }
-		if(options.xMin){ wiggle.xMin = options.xMin; }
-		if(options.xMin){ wiggle.xInt = options.xInt; }
-		if(options.yMin){ wiggle.yMin = options.yMin; }
-		if(options.yInt){ wiggle.yInt = options.yInt };
-		if(options.max){ wiggle.max = options.max; } // Add an OR case here
-	}
-
-	var s = wiggle.gain / wiggle.max;
-
-	wiggle.setSkip = function(skip){
-		this.skip = skip;
-		return this;
-	}
-
-	wiggle.setGain = function(gain){
-		this.gain = gain;
-		return this;
-	}
-
-	wiggle.setMax = function(max){
-		this.max = max;
-		return this;
-	}
-
-	wiggle.setXMin = function(xMin){
-		this.xMin = xMin;
-		return this;
-	}
-
-	wiggle.setYMin = function(yMin){
-		this.yMin = yMin;
-		return this;
-	}
-
-	wiggle.setXInt = function(xInt){
-		this.xInt = xInt;
-		return this;
-	}
-
-	wiggle.setYInt = function(yInt){
-		this.yInt = yInt;
-		return this;
-	}
-
-	wiggle.setFillColor = function(color){
-		this.fillColor = color;
-		return this;
-	}
-
-	wiggle.setColor = function(color){
-		this.color = color;
-		return this;
-	}
-
-	wiggle.setStrokeWidth = function(strokeWidth){
-		this.strokeWidth = strokeWidth;
-		return this;
-	}
-
-	wiggle.setSampleRate = function(sampleRate){
-		this.sampleRate = sampleRate;
-		return this;
-	}
-
-	wiggle.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	}
-
-	wiggle.draw = function() {
-		for(var k = data.length - 1; k >= 0; k--){
-	    if(this.skip === 0 || k % this.skip === 0){
-	      var mean = d3.mean(data[k]); 
-
-	      // Line function
-		    var line = d3.svg.area()
-		      .interpolate('basis')
-		      .x(function (d) {
-		        return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-		      })
-		      .y(function (d, i){
-		        return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-		      });
-
-		    // Clip path area function
-		    var area = d3.svg.area()
-		      .interpolate('basis')
-		      .x(function (d, i) {
-		        return plot.xScale(mean * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-		      })
-		      .y(function (d, i){
-		        return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-		      });
-
-        plot.svg.append('path')
-          .attr('class', 'line' + k)
-          .attr('d', line(data[k]))
-          .attr('stroke', 'black')
-          .attr('stroke-width', 0.50)
-          .attr('fill', 'none');
-
-        plot.svg.datum(data[k]);
-
-        plot.svg.append('clipPath')
-          .attr('id', 'clip-below' + wiggle.rand + k)
-          .append('path')
-          .attr('d', area.x0(plot.width));
-
-        plot.svg.append('path')
-          .attr('id', 'area-below' + k)
-          .attr('clip-path', 'url(#clip-below' + wiggle.rand + k)
-          .attr('fill', 'black')
-          .style('opacity', 0.4)
-          .attr('d', area.x0(function (d, i){ 
-            return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-          }));
-	    }
-	  }
-	  return this;
-	}
-
-wiggle.reDraw = function(data, xDomain, yDomain){
-
-	// Redraw the Axis
-	plot.xScale.domain(xDomain);
-	plot.yScale.domain(yDomain);
-		
-	plot.svg.select('.x.axis')
-		.transition()
-		.duration(this.duration)
-		.call(plot.xAxis)
-		.selectAll("text")  
-		.style("text-anchor", "start")
-    	.attr("transform", "rotate(-45)" );
-
-	plot.svg.select('.y.axis')
-		.transition()
-		.duration(this.duration)
-		.call(plot.yAxis);
-
-  for(var k = data.length - 1; k >= 0; k--){
-    if(this.skip === 0 || k % this.skip === 0){
-			var mean = d3.mean(data[k]); 
-      
-      plot.svg.select("#clip-below" + wiggle.rand + k)
-        .remove()
-
-      // Line function
-      var line = d3.svg.area()
-        .interpolate('basis')
-        .x(function (d) {
-          return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-        })
-        .y(function (d, i){
-          return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-        });
-
-      // Clip path area function
-      var area = d3.svg.area()
-        .interpolate('basis')
-        .x(function (d, i) {
-          return plot.xScale(mean * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-        })
-        .y(function (d, i){
-          return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-        });
-
-      plot.svg.select(".line" + k)
-        .transition()
-        .duration(this.duration)
-        .attr('d', line(data[k]))
-        .ease("linear");
-
-      plot.svg.datum(data[k]);
-
-      plot.svg.append('clipPath')
-        .attr('id', 'clip-below' + wiggle.rand + k)
-        .append('path')
-        .attr('d', area.x0(plot.width));
-        
-      plot.svg.select("#area-below" + k)
-        .attr('clip-path', 'url(#clip-below' + wiggle.rand + k)
-        .transition()
-        .duration(this.duration)
-        .attr('d', area.x0(function (d, i){ 
-          return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-        }))
-        .ease('linear');
-    	} 
-  	}
-    return this;
-  }
-	return wiggle;
-};
-
-} (window));
+/*! g3 - v0.0.1 - 2015-09-22 - justinkheisler */
+"use strict";(function(t){function i(){var t={};return t}function n(t,i,n,s){return d3.svg.axis().scale(t).innerTickSize(i).outerTickSize(3).tickPadding(5).orient(n).ticks(s)}"undefined"==typeof g3&&(t.g3=i()),g3.horizon=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};return n.interpolate="basis",n.xInt=1,n.xMin=t.xDomain[0],n.yInt=1,n.yMin=t.yDomain[0],n.duration=500,n.gain=1,n.setInterpolate=function(t){return this.interpolate=t,this},n.setXMin=function(t){return this.xMin=t,this},n.setDuration=function(t){return this.duration=t,this},n.setGain=function(t){return this.gain=t,this},n.draw=function(){var s=d3.svg.line().x(function(i,s){return t.xScale(s+n.xMin)}).y(function(i){return t.yScale(i*n.gain)}).interpolate(this.interpolate);return this.svg=t.svg.append("svg:path").attr("d",s(i)).attr("stroke","green").attr("stroke-width",1.5).attr("fill","none"),this},n.reDraw=function(i){var s=d3.svg.line().x(function(i,s){return t.xScale(s+n.xMin)}).y(function(i){return t.yScale(i*n.gain)}).interpolate(this.interpolate);return this.svg.transition().duration(this.duration).attr("d",s(i)),this},n},g3.log=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};n.xInt=1,n.xMin=t.xDomain[0],n.yInt=1,n.yMin=t.yDomain[0],n.color="blue",n.duration=500,n.setDuration=function(t){return this.duration=t,this},n.setYInt=function(t){return this.yInt=t,this},n.setYMin=function(t){return this.yMin=t,this},n.setXInt=function(t){return this.xInt=t,this},n.setXMin=function(t){return this.xMin=t,this},n.setData=function(t){return this.data=t,this},n.setColor=function(t){return this.color=t,this},n.draw=function(){return this.svg=t.svg.append("path").datum(i).attr("d",s).attr("stroke",this.color).attr("stroke-width",.25).attr("fill","none"),this};var s=d3.svg.line().x(function(i){return t.xScale(i)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)}).interpolate("basis");return n.reDraw=function(t){return this.svg.transition().duration(this.duration).attr("d",s(t)).ease("linear"),this},n},g3.plot=function(t){if(!t)return"Param: elem is missing. A div to attach to is required";var i={};return i.margin={top:50,right:0,bottom:30,left:0},i.width=$(t).width()-i.margin.left,i.height=800,i.xDomain=[0,0],i.yDomain=[0,0],i.elem=t,i.xAxisVisible=!0,i.yAxisVisible=!0,i.x2AxisVisible=!1,i.y2AxisVisible=!1,i.xOrient="top",i.x2Orient="bottom",i.yOrient="left",i.y2Orient="right",i.duration=500,i.setDuration=function(t){return this.duration=t,this},i.setMargin=function(t,i,n,s){return this.margin={top:t,right:i,bottom:n,left:s},this},i.setWidth=function(t){return this.width=t,this},i.setHeight=function(t){return this.height=t,this},i.setXDomain=function(t){return this.xDomain=t,this},i.setYDomain=function(t){return this.yDomain=t,this},i.setX2Domain=function(t){return this.x2Domain=t,this},i.setY2Domain=function(t){return this.y2Domain=t,this},i.toggleXAxis=function(t){return this.xAxisVisible=t,this},i.toggleX2Axis=function(t){return this.x2AxisVisible=t,this},i.toggleYAxis=function(t){return this.yAxisVisible=t,this},i.toggleY2Axis=function(t){return this.y2AxisVisible=t,this},i.setXTicks=function(t){return this.xTicks=t,this},i.setYTicks=function(t){return this.yTicks=t,this},i.setX2Ticks=function(t){return this.x2Ticks=t,this},i.setY2Ticks=function(t){return this.y2Ticks=t,this},i.setYTitle=function(t){return this.yTitle=t,this},i.setXTitle=function(t){return this.xTitle=t,this},i.setY2Title=function(t){return this.y2Title=t,this},i.setX2Title=function(t){return this.x2Title=t,this},i.setXOrient=function(t){return this.xOrient=t,this},i.setX2Orient=function(t){return this.x2Orient=t,this},i.setYOrient=function(t){return this.yOrient=t,this},i.sety2Orient=function(t){return this.y2Orient=t,this},i.setXTickFormat=function(t){return this.xTickFormat=t,this},i.setYTickFormat=function(t){return this.yTickFormat=t,this},i.setX2TickFormat=function(t){return this.x2TickFormat=t,this},i.setY2TickFormat=function(t){return this.y2TickFormat=t,this},i.draw=function(){if(this.xScale=d3.scale.linear().domain(this.xDomain).range([0,this.width]),this.yScale=d3.scale.linear().domain(this.yDomain).range([0,this.height]),this.width-this.margin.left-this.margin.right,this.height-this.margin.top-this.margin.bottom,this.svg=d3.select(t).append("svg").attr("class","log_plot").attr("width",this.width+this.margin.right+this.margin.left).attr("height",this.height+this.margin.bottom+this.margin.top).append("g").attr("height",this.height).attr("transform","translate("+this.margin.left+","+this.margin.top+")"),this.xAxisVisible&&(this.xAxis=n(this.xScale,-this.height,this.xOrient,this.xTicks),this.xAxis.tickFormat(this.xTickFormat),this.svg.append("g").attr("class","x axis").call(this.xAxis)),this.yAxisVisible&&(this.yAxis=n(this.yScale,-this.width,this.yOrient,this.yTicks),this.yAxis.tickFormat(this.yTickFormat),this.svg.append("g").attr("class","y axis").call(this.yAxis)),this.x2AxisVisible&&(this.x2Scale=d3.scale.linear().domain(this.x2Domain).range([0,this.width]),this.x2Axis=n(this.x2Scale,-this.height,this.x2Orient,this.x2Ticks),this.x2Axis.tickFormat(this.x2TickFormat),this.svg.append("g").attr("class","x2 axis").attr("transform","translate(0,"+this.height+")").call(this.x2Axis)),this.y2AxisVisible&&(this.y2Scale=d3.scale.linear().domain(this.y2Domain).range([0,this.height]),this.y2Axis=n(this.y2Scale,-this.width,this.y2Orient,this.y2Ticks),this.y2Axis.tickFormat(this.y2TickFormat),this.svg.append("g").attr("class","y2 axis").attr("transform","translate("+this.width+",0)").call(this.y2Axis)),this.xTitle){if(""===this.xTickFormat)var i=-10;else var i=-30;this.svg.append("text").attr("x",this.width/2).attr("y",i).style("text-anchor","middle").style("font-size",12).text(this.xTitle)}if(this.yTitle){if(""===this.yTickFormat)var s=-10;else var s=-40;this.svg.append("text").attr("transform","rotate(-90)").attr("y",s).attr("dy","1em").style("text-anchor","end").style("font-size",12).text(this.yTitle)}if(this.x2Title){if(""===this.x2TickFormat)var i=10;else var i=30;this.svg.append("text").attr("transform","translate(0,"+this.height+")").attr("x",this.width/2).attr("y",i).style("text-anchor","middle").style("font-size",12).text(this.x2Title)}if(this.y2Title){if(""===this.yTickFormat)var s=-10;else var s=-40;this.svg.append("text").attr("transform","translate(0,"+this.height+")").attr("y",s).attr("dy","1em").style("text-anchor","end").style("font-size",12).text(this.y2Title)}return this},i.reDraw=function(t,i,n,s){t&&(this.xScale.domain(t),this.svg.select(".x.axis").transition().duration(this.duration).call(this.xAxis).ease("linear")),i&&(this.yScale.domain(i),this.svg.select(".y.axis").transition().duration(this.duration).call(this.yAxis).ease("linear")),n&&(this.x2Scale.domain(n),this.svg.select(".x2.axis").transition().duration(this.duration).call(this.x2Axis).ease("linear")),s&&(this.y2Scale.domain(s),this.svg.select(".y2.axis").transition().duration(this.duration).call(this.y2Axis).ease("linear"))},i},g3.seismic=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};return n.max=1,n.gain=1,n.plot=t,n.data=i,n.duration=500,n.draw=function(){return n.color||(n.color=d3.scale.linear().domain([-this.max,0,this.max]).range(["#FF0000","#FFF","#0000FF"])),$(t.elem),this.canvas=d3.select(t.elem).append("canvas").attr("width",i.length).attr("height",i[0].length).style("width",t.width+"px").style("height",t.height+"px").style("opacity",.95).style("top",t.margin.top+"px").style("left",t.margin.left+"px").call(n.drawImage),this},n.reDraw=function(t){n.canvas.attr("width",t.length).attr("height",t[0].length).style("width",n.plot.width+"px").style("height",n.plot.height+"px"),n.context.clearRect(0,0,n.data.length,n.data[0].length),n.data=t;for(var i=t.length,s=t[0].length,a=n.context.createImageData(i,s),e=0,r=-1;s>e;++e)for(var h=0;i>h;++h){var o=d3.rgb(n.color(t[h][e]*n.gain));a.data[++r]=o.r,a.data[++r]=o.g,a.data[++r]=o.b,a.data[++r]=255}return n.context.putImageData(a,0,0),this},n.drawImage=function(t){n.context=t.node().getContext("2d");var i=n.data.length,s=n.data[0].length;n.image=n.context.createImageData(i,s);for(var a=0,e=-1;s>a;++a)for(var r=0;i>r;++r){var h=d3.rgb(n.color(n.data[r][a]*n.gain));n.image.data[++e]=h.r,n.image.data[++e]=h.g,n.image.data[++e]=h.b,n.image.data[++e]=255}return n.context.putImageData(n.image,0,0),this},n.setColor=function(t){return this.color=t,this},n.setDuration=function(t){return this.duration=t,this},n.setMax=function(t){return this.max=t,this},n.setGain=function(t){return this.gain=t,this},n},g3.wiggle=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};return n.skip=0,n.gain=30,n.xInt=1,n.xMin=t.xDomain[0],n.yInt=1,n.yMin=t.yDomain[0],n.rand=Math.floor(100*Math.random()+1),n.sampleRate=1,n.duration=500,n.gain/n.max,n.setSkip=function(t){return this.skip=t,this},n.setGain=function(t){return this.gain=t,this},n.setMax=function(t){return this.max=t,this},n.setXMin=function(t){return this.xMin=t,this},n.setYMin=function(t){return this.yMin=t,this},n.setXInt=function(t){return this.xInt=t,this},n.setYInt=function(t){return this.yInt=t,this},n.setFillColor=function(t){return this.fillColor=t,this},n.setColor=function(t){return this.color=t,this},n.setStrokeWidth=function(t){return this.strokeWidth=t,this},n.setSampleRate=function(t){return this.sampleRate=t,this},n.setDuration=function(t){return this.duration=t,this},n.draw=function(){for(var s=i.length-1;s>=0;s--)if(0===this.skip||0===s%this.skip){var a=d3.mean(i[s]),e=d3.svg.area().interpolate("basis").x(function(i){return t.xScale(i*n.gain+n.xMin+s*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)}),r=d3.svg.area().interpolate("basis").x(function(){return t.xScale(a*n.gain+n.xMin+s*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)});t.svg.append("path").attr("class","line"+s).attr("d",e(i[s])).attr("stroke","black").attr("stroke-width",.5).attr("fill","none"),t.svg.datum(i[s]),t.svg.append("clipPath").attr("id","clip-below"+n.rand+s).append("path").attr("d",r.x0(t.width)),t.svg.append("path").attr("id","area-below"+s).attr("clip-path","url(#clip-below"+n.rand+s).attr("fill","black").style("opacity",.4).attr("d",r.x0(function(i){return t.xScale(i*n.gain+n.xMin+s*n.sampleRate)}))}return this},n.reDraw=function(i,s,a){t.xScale.domain(s),t.yScale.domain(a),t.svg.select(".x.axis").transition().duration(this.duration).call(t.xAxis).selectAll("text").style("text-anchor","start").attr("transform","rotate(-45)"),t.svg.select(".y.axis").transition().duration(this.duration).call(t.yAxis);for(var e=i.length-1;e>=0;e--)if(0===this.skip||0===e%this.skip){var r=d3.mean(i[e]);t.svg.select("#clip-below"+n.rand+e).remove();var h=d3.svg.area().interpolate("basis").x(function(i){return t.xScale(i*n.gain+n.xMin+e*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)}),o=d3.svg.area().interpolate("basis").x(function(){return t.xScale(r*n.gain+n.xMin+e*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)});t.svg.select(".line"+e).transition().duration(this.duration).attr("d",h(i[e])).ease("linear"),t.svg.datum(i[e]),t.svg.append("clipPath").attr("id","clip-below"+n.rand+e).append("path").attr("d",o.x0(t.width)),t.svg.select("#area-below"+e).attr("clip-path","url(#clip-below"+n.rand+e).transition().duration(this.duration).attr("d",o.x0(function(i){return t.xScale(i*n.gain+n.xMin+e*n.sampleRate)})).ease("linear")}return this},n}})(window);
\ No newline at end of file

From 8d38341629d3776a75529e0db78a6611d8edf4b5 Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Wed, 23 Sep 2015 11:56:20 -0300
Subject: [PATCH 04/12] fixed pesky bug where rock selection was copying other
 elements, also adding beginnings of touch wiggles

---
 static/js/app.js                |  35 +-
 static/js/controllers/2DCtrl.js |  35 +-
 static/js/g3.js                 | 850 +++++++++++++++++++++++++++++++-
 templates/model2.html           |   2 +-
 4 files changed, 910 insertions(+), 12 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index a2a3714..887851b 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -84,6 +84,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 	  	      for(var j = 0; j < $scope.images[i].colours.length; j++){
 	  	        var rand = $scope.rocks[Math.floor(Math.random() * $scope.rocks.length)];
               $scope.images[i].rocks.push(rand);
+              console.log(rand);
 	  	      }
 	  	    }
         }
@@ -101,15 +102,18 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
   $scope.loadSaved = function(){
 
-    var array = $.map($scope.savedEarthModel.mapping, function(value, index) {
+    var arr = $.map($scope.savedEarthModel.mapping, function(value, index) {
       return [value];
     });
 
     $scope.curImage.rocks = [];
-    for(var i = 0; i < array.length; i++){
-      $scope.curImage.rocks.push(array[i].rock);
+    for(var i = 0; i < arr.length; i++){
+      for(var j = 0; j < $scope.rocks.length; j++){
+        if(arr[i].rock.name === $scope.rocks[j].name){
+          $scope.curImage.rocks.push($scope.rocks[j]);
+        }
+      }
     }
-        console.log($scope.curImage.rocks);
   };
   
   $scope.slideClick = function(slider){
@@ -142,6 +146,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var payload = JSON.stringify(data);
       $http.get($scope.server + '/data.json?type=seismic&script=convolution_model.py&payload=' + payload)
         .then(function(response){
+          console.log(response.data);
           $scope.plot(response.data);
           $scope.maxTrace = String(response.data.seismic.length - 1);
           $scope.maxTWT = String(response.data.seismic[0].length - 1);
@@ -311,6 +316,17 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setX2Domain([0, data.seismic.length - 1])
         .setY2Domain([0, data.seismic[0].length - 1])
         .draw();
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+        .on('drag', vDCirRedraw);
+
+        var position = [$scope.trace, 100];
+        $scope.cir = $scope.vDPlot.svg.append('circle')
+          .attr("r", 10)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .call(drag);
+
     } else {
       $scope.vDPlot.reDraw(
         [0, data.seismic.length - 1], 
@@ -320,6 +336,13 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
       );
     }
 
+    function vDCirRedraw(){
+            console.log("HERE");
+      $scope.cir
+        .attr("cx", d3.event.x)
+        .attr("cy", d3.event.y);
+    }
+
     // Draw Seismic Image
     if(!$scope.seis){
       $scope.seis = g3.seismic($scope.vDPlot, data.seismic)
@@ -559,6 +582,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setGain(80)
         .setDuration(5)
         .draw();
+
+      console.log($scope.vDLog);
     } else {
       $scope.vDLog
         .setXMin($scope.trace)
@@ -708,7 +733,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var image = $scope.curImage;
     var mapping = {};
     for(var i=0; i < image.rocks.length; i++){
-        mapping[image.colours[i]] = image.rocks[i];
+      mapping[image.colours[i]] = image.rocks[i];
     }
     
     var data = {
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index c807630..35c31f8 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -72,6 +72,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 	  	      for(var j = 0; j < $scope.images[i].colours.length; j++){
 	  	        var rand = $scope.rocks[Math.floor(Math.random() * $scope.rocks.length)];
               $scope.images[i].rocks.push(rand);
+              console.log(rand);
 	  	      }
 	  	    }
         }
@@ -89,15 +90,18 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
   $scope.loadSaved = function(){
 
-    var array = $.map($scope.savedEarthModel.mapping, function(value, index) {
+    var arr = $.map($scope.savedEarthModel.mapping, function(value, index) {
       return [value];
     });
 
     $scope.curImage.rocks = [];
-    for(var i = 0; i < array.length; i++){
-      $scope.curImage.rocks.push(array[i].rock);
+    for(var i = 0; i < arr.length; i++){
+      for(var j = 0; j < $scope.rocks.length; j++){
+        if(arr[i].rock.name === $scope.rocks[j].name){
+          $scope.curImage.rocks.push($scope.rocks[j]);
+        }
+      }
     }
-        console.log($scope.curImage.rocks);
   };
   
   $scope.slideClick = function(slider){
@@ -130,6 +134,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var payload = JSON.stringify(data);
       $http.get($scope.server + '/data.json?type=seismic&script=convolution_model.py&payload=' + payload)
         .then(function(response){
+          console.log(response.data);
           $scope.plot(response.data);
           $scope.maxTrace = String(response.data.seismic.length - 1);
           $scope.maxTWT = String(response.data.seismic[0].length - 1);
@@ -299,6 +304,17 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setX2Domain([0, data.seismic.length - 1])
         .setY2Domain([0, data.seismic[0].length - 1])
         .draw();
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+        .on('drag', vDCirRedraw);
+
+        var position = [$scope.trace, 100];
+        $scope.cir = $scope.vDPlot.svg.append('circle')
+          .attr("r", 10)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .call(drag);
+
     } else {
       $scope.vDPlot.reDraw(
         [0, data.seismic.length - 1], 
@@ -308,6 +324,13 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
       );
     }
 
+    function vDCirRedraw(){
+            console.log("HERE");
+      $scope.cir
+        .attr("cx", d3.event.x)
+        .attr("cy", d3.event.y);
+    }
+
     // Draw Seismic Image
     if(!$scope.seis){
       $scope.seis = g3.seismic($scope.vDPlot, data.seismic)
@@ -547,6 +570,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setGain(80)
         .setDuration(5)
         .draw();
+
+      console.log($scope.vDLog);
     } else {
       $scope.vDLog
         .setXMin($scope.trace)
@@ -696,7 +721,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var image = $scope.curImage;
     var mapping = {};
     for(var i=0; i < image.rocks.length; i++){
-        mapping[image.colours[i]] = image.rocks[i];
+      mapping[image.colours[i]] = image.rocks[i];
     }
     
     var data = {
diff --git a/static/js/g3.js b/static/js/g3.js
index 53fa984..0d7e575 100644
--- a/static/js/g3.js
+++ b/static/js/g3.js
@@ -1,2 +1,850 @@
 /*! g3 - v0.0.1 - 2015-09-22 - justinkheisler */
-"use strict";(function(t){function i(){var t={};return t}function n(t,i,n,s){return d3.svg.axis().scale(t).innerTickSize(i).outerTickSize(3).tickPadding(5).orient(n).ticks(s)}"undefined"==typeof g3&&(t.g3=i()),g3.horizon=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};return n.interpolate="basis",n.xInt=1,n.xMin=t.xDomain[0],n.yInt=1,n.yMin=t.yDomain[0],n.duration=500,n.gain=1,n.setInterpolate=function(t){return this.interpolate=t,this},n.setXMin=function(t){return this.xMin=t,this},n.setDuration=function(t){return this.duration=t,this},n.setGain=function(t){return this.gain=t,this},n.draw=function(){var s=d3.svg.line().x(function(i,s){return t.xScale(s+n.xMin)}).y(function(i){return t.yScale(i*n.gain)}).interpolate(this.interpolate);return this.svg=t.svg.append("svg:path").attr("d",s(i)).attr("stroke","green").attr("stroke-width",1.5).attr("fill","none"),this},n.reDraw=function(i){var s=d3.svg.line().x(function(i,s){return t.xScale(s+n.xMin)}).y(function(i){return t.yScale(i*n.gain)}).interpolate(this.interpolate);return this.svg.transition().duration(this.duration).attr("d",s(i)),this},n},g3.log=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};n.xInt=1,n.xMin=t.xDomain[0],n.yInt=1,n.yMin=t.yDomain[0],n.color="blue",n.duration=500,n.setDuration=function(t){return this.duration=t,this},n.setYInt=function(t){return this.yInt=t,this},n.setYMin=function(t){return this.yMin=t,this},n.setXInt=function(t){return this.xInt=t,this},n.setXMin=function(t){return this.xMin=t,this},n.setData=function(t){return this.data=t,this},n.setColor=function(t){return this.color=t,this},n.draw=function(){return this.svg=t.svg.append("path").datum(i).attr("d",s).attr("stroke",this.color).attr("stroke-width",.25).attr("fill","none"),this};var s=d3.svg.line().x(function(i){return t.xScale(i)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)}).interpolate("basis");return n.reDraw=function(t){return this.svg.transition().duration(this.duration).attr("d",s(t)).ease("linear"),this},n},g3.plot=function(t){if(!t)return"Param: elem is missing. A div to attach to is required";var i={};return i.margin={top:50,right:0,bottom:30,left:0},i.width=$(t).width()-i.margin.left,i.height=800,i.xDomain=[0,0],i.yDomain=[0,0],i.elem=t,i.xAxisVisible=!0,i.yAxisVisible=!0,i.x2AxisVisible=!1,i.y2AxisVisible=!1,i.xOrient="top",i.x2Orient="bottom",i.yOrient="left",i.y2Orient="right",i.duration=500,i.setDuration=function(t){return this.duration=t,this},i.setMargin=function(t,i,n,s){return this.margin={top:t,right:i,bottom:n,left:s},this},i.setWidth=function(t){return this.width=t,this},i.setHeight=function(t){return this.height=t,this},i.setXDomain=function(t){return this.xDomain=t,this},i.setYDomain=function(t){return this.yDomain=t,this},i.setX2Domain=function(t){return this.x2Domain=t,this},i.setY2Domain=function(t){return this.y2Domain=t,this},i.toggleXAxis=function(t){return this.xAxisVisible=t,this},i.toggleX2Axis=function(t){return this.x2AxisVisible=t,this},i.toggleYAxis=function(t){return this.yAxisVisible=t,this},i.toggleY2Axis=function(t){return this.y2AxisVisible=t,this},i.setXTicks=function(t){return this.xTicks=t,this},i.setYTicks=function(t){return this.yTicks=t,this},i.setX2Ticks=function(t){return this.x2Ticks=t,this},i.setY2Ticks=function(t){return this.y2Ticks=t,this},i.setYTitle=function(t){return this.yTitle=t,this},i.setXTitle=function(t){return this.xTitle=t,this},i.setY2Title=function(t){return this.y2Title=t,this},i.setX2Title=function(t){return this.x2Title=t,this},i.setXOrient=function(t){return this.xOrient=t,this},i.setX2Orient=function(t){return this.x2Orient=t,this},i.setYOrient=function(t){return this.yOrient=t,this},i.sety2Orient=function(t){return this.y2Orient=t,this},i.setXTickFormat=function(t){return this.xTickFormat=t,this},i.setYTickFormat=function(t){return this.yTickFormat=t,this},i.setX2TickFormat=function(t){return this.x2TickFormat=t,this},i.setY2TickFormat=function(t){return this.y2TickFormat=t,this},i.draw=function(){if(this.xScale=d3.scale.linear().domain(this.xDomain).range([0,this.width]),this.yScale=d3.scale.linear().domain(this.yDomain).range([0,this.height]),this.width-this.margin.left-this.margin.right,this.height-this.margin.top-this.margin.bottom,this.svg=d3.select(t).append("svg").attr("class","log_plot").attr("width",this.width+this.margin.right+this.margin.left).attr("height",this.height+this.margin.bottom+this.margin.top).append("g").attr("height",this.height).attr("transform","translate("+this.margin.left+","+this.margin.top+")"),this.xAxisVisible&&(this.xAxis=n(this.xScale,-this.height,this.xOrient,this.xTicks),this.xAxis.tickFormat(this.xTickFormat),this.svg.append("g").attr("class","x axis").call(this.xAxis)),this.yAxisVisible&&(this.yAxis=n(this.yScale,-this.width,this.yOrient,this.yTicks),this.yAxis.tickFormat(this.yTickFormat),this.svg.append("g").attr("class","y axis").call(this.yAxis)),this.x2AxisVisible&&(this.x2Scale=d3.scale.linear().domain(this.x2Domain).range([0,this.width]),this.x2Axis=n(this.x2Scale,-this.height,this.x2Orient,this.x2Ticks),this.x2Axis.tickFormat(this.x2TickFormat),this.svg.append("g").attr("class","x2 axis").attr("transform","translate(0,"+this.height+")").call(this.x2Axis)),this.y2AxisVisible&&(this.y2Scale=d3.scale.linear().domain(this.y2Domain).range([0,this.height]),this.y2Axis=n(this.y2Scale,-this.width,this.y2Orient,this.y2Ticks),this.y2Axis.tickFormat(this.y2TickFormat),this.svg.append("g").attr("class","y2 axis").attr("transform","translate("+this.width+",0)").call(this.y2Axis)),this.xTitle){if(""===this.xTickFormat)var i=-10;else var i=-30;this.svg.append("text").attr("x",this.width/2).attr("y",i).style("text-anchor","middle").style("font-size",12).text(this.xTitle)}if(this.yTitle){if(""===this.yTickFormat)var s=-10;else var s=-40;this.svg.append("text").attr("transform","rotate(-90)").attr("y",s).attr("dy","1em").style("text-anchor","end").style("font-size",12).text(this.yTitle)}if(this.x2Title){if(""===this.x2TickFormat)var i=10;else var i=30;this.svg.append("text").attr("transform","translate(0,"+this.height+")").attr("x",this.width/2).attr("y",i).style("text-anchor","middle").style("font-size",12).text(this.x2Title)}if(this.y2Title){if(""===this.yTickFormat)var s=-10;else var s=-40;this.svg.append("text").attr("transform","translate(0,"+this.height+")").attr("y",s).attr("dy","1em").style("text-anchor","end").style("font-size",12).text(this.y2Title)}return this},i.reDraw=function(t,i,n,s){t&&(this.xScale.domain(t),this.svg.select(".x.axis").transition().duration(this.duration).call(this.xAxis).ease("linear")),i&&(this.yScale.domain(i),this.svg.select(".y.axis").transition().duration(this.duration).call(this.yAxis).ease("linear")),n&&(this.x2Scale.domain(n),this.svg.select(".x2.axis").transition().duration(this.duration).call(this.x2Axis).ease("linear")),s&&(this.y2Scale.domain(s),this.svg.select(".y2.axis").transition().duration(this.duration).call(this.y2Axis).ease("linear"))},i},g3.seismic=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};return n.max=1,n.gain=1,n.plot=t,n.data=i,n.duration=500,n.draw=function(){return n.color||(n.color=d3.scale.linear().domain([-this.max,0,this.max]).range(["#FF0000","#FFF","#0000FF"])),$(t.elem),this.canvas=d3.select(t.elem).append("canvas").attr("width",i.length).attr("height",i[0].length).style("width",t.width+"px").style("height",t.height+"px").style("opacity",.95).style("top",t.margin.top+"px").style("left",t.margin.left+"px").call(n.drawImage),this},n.reDraw=function(t){n.canvas.attr("width",t.length).attr("height",t[0].length).style("width",n.plot.width+"px").style("height",n.plot.height+"px"),n.context.clearRect(0,0,n.data.length,n.data[0].length),n.data=t;for(var i=t.length,s=t[0].length,a=n.context.createImageData(i,s),e=0,r=-1;s>e;++e)for(var h=0;i>h;++h){var o=d3.rgb(n.color(t[h][e]*n.gain));a.data[++r]=o.r,a.data[++r]=o.g,a.data[++r]=o.b,a.data[++r]=255}return n.context.putImageData(a,0,0),this},n.drawImage=function(t){n.context=t.node().getContext("2d");var i=n.data.length,s=n.data[0].length;n.image=n.context.createImageData(i,s);for(var a=0,e=-1;s>a;++a)for(var r=0;i>r;++r){var h=d3.rgb(n.color(n.data[r][a]*n.gain));n.image.data[++e]=h.r,n.image.data[++e]=h.g,n.image.data[++e]=h.b,n.image.data[++e]=255}return n.context.putImageData(n.image,0,0),this},n.setColor=function(t){return this.color=t,this},n.setDuration=function(t){return this.duration=t,this},n.setMax=function(t){return this.max=t,this},n.setGain=function(t){return this.gain=t,this},n},g3.wiggle=function(t,i){if(!i||!$.isArray(i))return"Param: data is missing, An array required";if(!t)return"Param: plot is missing, a div to attach the svg is required";var n={};return n.skip=0,n.gain=30,n.xInt=1,n.xMin=t.xDomain[0],n.yInt=1,n.yMin=t.yDomain[0],n.rand=Math.floor(100*Math.random()+1),n.sampleRate=1,n.duration=500,n.gain/n.max,n.setSkip=function(t){return this.skip=t,this},n.setGain=function(t){return this.gain=t,this},n.setMax=function(t){return this.max=t,this},n.setXMin=function(t){return this.xMin=t,this},n.setYMin=function(t){return this.yMin=t,this},n.setXInt=function(t){return this.xInt=t,this},n.setYInt=function(t){return this.yInt=t,this},n.setFillColor=function(t){return this.fillColor=t,this},n.setColor=function(t){return this.color=t,this},n.setStrokeWidth=function(t){return this.strokeWidth=t,this},n.setSampleRate=function(t){return this.sampleRate=t,this},n.setDuration=function(t){return this.duration=t,this},n.draw=function(){for(var s=i.length-1;s>=0;s--)if(0===this.skip||0===s%this.skip){var a=d3.mean(i[s]),e=d3.svg.area().interpolate("basis").x(function(i){return t.xScale(i*n.gain+n.xMin+s*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)}),r=d3.svg.area().interpolate("basis").x(function(){return t.xScale(a*n.gain+n.xMin+s*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)});t.svg.append("path").attr("class","line"+s).attr("d",e(i[s])).attr("stroke","black").attr("stroke-width",.5).attr("fill","none"),t.svg.datum(i[s]),t.svg.append("clipPath").attr("id","clip-below"+n.rand+s).append("path").attr("d",r.x0(t.width)),t.svg.append("path").attr("id","area-below"+s).attr("clip-path","url(#clip-below"+n.rand+s).attr("fill","black").style("opacity",.4).attr("d",r.x0(function(i){return t.xScale(i*n.gain+n.xMin+s*n.sampleRate)}))}return this},n.reDraw=function(i,s,a){t.xScale.domain(s),t.yScale.domain(a),t.svg.select(".x.axis").transition().duration(this.duration).call(t.xAxis).selectAll("text").style("text-anchor","start").attr("transform","rotate(-45)"),t.svg.select(".y.axis").transition().duration(this.duration).call(t.yAxis);for(var e=i.length-1;e>=0;e--)if(0===this.skip||0===e%this.skip){var r=d3.mean(i[e]);t.svg.select("#clip-below"+n.rand+e).remove();var h=d3.svg.area().interpolate("basis").x(function(i){return t.xScale(i*n.gain+n.xMin+e*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)}),o=d3.svg.area().interpolate("basis").x(function(){return t.xScale(r*n.gain+n.xMin+e*n.sampleRate)}).y(function(i,s){return t.yScale(s*n.yInt+n.yMin)});t.svg.select(".line"+e).transition().duration(this.duration).attr("d",h(i[e])).ease("linear"),t.svg.datum(i[e]),t.svg.append("clipPath").attr("id","clip-below"+n.rand+e).append("path").attr("d",o.x0(t.width)),t.svg.select("#area-below"+e).attr("clip-path","url(#clip-below"+n.rand+e).transition().duration(this.duration).attr("d",o.x0(function(i){return t.xScale(i*n.gain+n.xMin+e*n.sampleRate)})).ease("linear")}return this},n}})(window);
\ No newline at end of file
+'use strict';
+;(function (window) {
+
+function defineg3() {
+	var g3 = {};
+	return g3;
+}
+if(typeof(g3) === 'undefined') {
+	window.g3 = defineg3();
+}
+
+const DEBUG = false;
+
+function createAxis(scale, innerTickSize, orient, ticks){
+	return d3.svg.axis()
+		.scale(scale)
+		.innerTickSize(innerTickSize)
+		.outerTickSize(3)
+		.tickPadding(5)
+		.orient(orient)
+		.ticks(ticks);
+}
+g3.horizon = function(plot, data){
+
+	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
+	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+
+	var horizon = {};
+	horizon.interpolate = 'basis';
+	horizon.xInt = 1;
+	horizon.xMin = plot.xDomain[0];
+	horizon.yInt = 1;
+	horizon.yMin = plot.yDomain[0];
+	horizon.duration = 500;
+	horizon.gain = 1;
+
+	horizon.setInterpolate = function(interpolate){
+		this.interpolate = interpolate;
+		return this;
+	};
+
+	horizon.setXMin = function(xMin){
+		this.xMin = xMin; 
+		return this;
+	};
+
+	horizon.setDuration = function(duration){
+		this.duration = duration;
+		return this;
+	};
+
+	horizon.setGain = function(gain){
+		this.gain = gain;
+		return this;
+	};
+
+	horizon.draw = function(){
+		var lineFunc = d3.svg.line()
+			.x(function (d, i) {
+				return plot.xScale(i + horizon.xMin);
+			})
+			.y(function (d) {
+				return plot.yScale(d * horizon.gain);
+			})
+			.interpolate(this.interpolate);
+
+		this.svg = plot.svg.append('svg:path')
+			.attr('d', lineFunc(data))
+			.attr('stroke', 'green')
+			.attr('stroke-width', 1.5)
+			.attr('fill', 'none');
+		return this;
+	};
+
+	horizon.reDraw = function(data){
+		var lineFunc = d3.svg.line()
+			.x(function (d, i) {
+				return plot.xScale(i + horizon.xMin);
+			})
+			.y(function (d) {
+				return plot.yScale(d * horizon.gain);
+			})
+			.interpolate(this.interpolate);
+		
+		this.svg.transition()
+			.duration(this.duration)
+			.attr('d', lineFunc(data));
+		return this;
+	};
+
+	return horizon;
+};
+
+g3.log = function(plot, data){
+	
+	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
+	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+
+	var log = {};
+	log.xInt = 1;
+	log.xMin = plot.xDomain[0];
+	log.yInt = 1;
+	log.yMin = plot.yDomain[0];
+	log.color = "blue";
+	log.duration = 500;
+
+	// Setters
+	log.setDuration = function(duration){
+		this.duration = duration;
+		return this;
+	};
+
+	log.setYInt = function(yInt){
+		this.yInt = yInt;
+		return this;
+	};
+
+	log.setYMin = function(yMin){
+		this.yMin = yMin;
+		return this;
+	};
+
+	log.setXInt = function(xInt){
+		this.xInt = xInt;
+		return this;
+	};
+
+	log.setXMin = function(xMin){
+		this.xMin = xMin;
+		return this;
+	};
+
+	log.setData = function(data){
+		this.data = data;
+		return this;
+	};
+
+	log.setColor = function(color){
+		this.color = color;
+		return this;
+	};
+
+  log.draw = function(){
+    this.svg = plot.svg.append("path")  
+      .datum(data)
+      .attr("d", lineFunc)
+      .attr("stroke", this.color)
+      .attr("stroke-width", 0.25)
+      .attr("fill", "none");
+
+    // var sorted = data.sort(function(a, b) {
+    //   return a - b;
+    // });
+
+    // var focus = plot.svg.append("g")
+    //     .attr("class", "focus")
+    //     .style("display", "none");
+
+    // focus.append("circle")
+    //     .attr("r", 4.5);
+
+    // focus.append("text")
+    //     .attr("x", 9)
+    //     .attr("dy", ".35em");
+    //     var bisectDate = d3.bisector(function(d) { return d; }).left;
+    // plot.svg.append("rect")
+    //     .attr("class", "overlay")
+    //     .attr("width", plot.width)
+    //     .attr("height", plot.height)
+    //     .on("mouseover", function() { focus.style("display", null); })
+    //     .on("mouseout", function() { focus.style("display", "none"); })
+    //     .on("mousemove", mousemove);
+
+    // function mousemove() {
+    //   var x0 = plot.xScale.invert(d3.mouse(this)[0]),
+    //       i = bisectDate(data, x0, 1),
+    //       d0 = data[i - 1],
+    //       d1 = data[i],
+    //       d = x0 - d0 > d1 - x0 ? d1 : d0;
+    //   focus.attr("transform", "translate(" + plot.xScale(d) + "," + plot.yScale(d) + ")");
+    //   focus.select("text").text(d);
+    // };
+    return this;
+  };
+
+	var lineFunc = d3.svg.line()
+	.x(function (d) {
+		return plot.xScale(d);
+	})
+	.y(function (d, i){
+		return plot.yScale(i * log.yInt + log.yMin);
+	})
+	.interpolate('basis');
+
+	log.reDraw = function(data){
+
+		this.svg.transition()
+			.duration(this.duration)
+			.attr('d', lineFunc(data))
+			.ease('linear');
+		return this;
+	};
+	return log;
+};
+
+g3.plot = function(elem){
+  
+  if(!elem){ return 'Param: elem is missing. A div to attach to is required'; }
+
+	var plot = {};
+	plot.margin = {top: 50, right: 0, bottom: 30, left: 0};
+	plot.width = $(elem).width() - plot.margin.left;
+	plot.height = 800;
+	plot.xDomain = [0,0];
+	plot.yDomain = [0,0];
+	plot.elem = elem;
+	plot.xAxisVisible = true;
+	plot.yAxisVisible = true;
+	plot.x2AxisVisible = false;
+	plot.y2AxisVisible = false;
+	plot.xOrient = 'top';
+	plot.x2Orient = 'bottom';
+	plot.yOrient = 'left';
+	plot.y2Orient = 'right';
+  plot.duration = 500;
+
+  plot.setDuration = function(duration){
+    this.duration = duration;
+    return this;
+  };
+
+  plot.setMargin = function(top, right, bottom, left){
+  	this.margin = {top: top, right: right, bottom: bottom, left: left};
+  	return this;
+  };
+
+  plot.setWidth = function(width){
+  	this.width = width;
+  	return this;
+  };
+
+  plot.setHeight = function(height){
+  	this.height = height;
+  	return this;
+  };
+
+  plot.setXDomain = function(domain){
+  	this.xDomain = domain;
+  	return this;
+  };
+
+  plot.setYDomain = function(domain){
+  	this.yDomain = domain;
+  	return this;
+  };
+
+  plot.setX2Domain = function(domain){
+  	this.x2Domain = domain;
+  	return this;
+  };
+
+  plot.setY2Domain = function(domain){
+  	this.y2Domain = domain;
+  	return this;
+  };
+
+  plot.toggleXAxis = function(bool){
+  	this.xAxisVisible = bool;
+  	return this;
+  };
+
+  plot.toggleX2Axis = function(bool){
+  	this.x2AxisVisible = bool;
+  	return this;
+  };
+
+  plot.toggleYAxis = function(bool){
+  	this.yAxisVisible = bool;
+  	return this;
+  };
+
+  plot.toggleY2Axis = function(bool){
+  	this.y2AxisVisible = bool;
+  	return this;
+  };
+
+  plot.setXTicks = function(ticks){
+  	this.xTicks = ticks;
+  	return this;
+  };
+
+  plot.setYTicks = function(ticks){
+  	this.yTicks = ticks;
+  	return this;
+  };
+
+  plot.setX2Ticks = function(ticks){
+  	this.x2Ticks = ticks;
+  	return this;
+  };
+
+  plot.setY2Ticks = function(ticks){
+  	this.y2Ticks = ticks;
+  	return this;
+  };
+
+  plot.setYTitle = function(title){
+  	this.yTitle = title;
+  	return this;
+  };
+
+  plot.setXTitle = function(title){
+  	this.xTitle = title;
+  	return this;
+  };
+
+  plot.setY2Title = function(title){
+  	this.y2Title = title;
+  	return this;
+  };
+
+  plot.setX2Title = function(title){
+  	this.x2Title = title;
+  	return this;
+  };
+
+  plot.setXOrient = function(orient){
+  	this.xOrient = orient;
+  	return this;
+  };
+
+  plot.setX2Orient = function(orient){
+  	this.x2Orient = orient;
+  	return this;
+  };
+
+  plot.setYOrient = function(orient){
+  	this.yOrient = orient;
+  	return this;
+  };
+
+  plot.sety2Orient = function(orient){
+  	this.y2Orient = orient;
+  	return this;
+  };
+
+  plot.setXTickFormat = function(format){
+  	this.xTickFormat = format;
+  	return this;
+  };
+  
+  plot.setYTickFormat = function(format){
+  	this.yTickFormat = format;
+  	return this;
+  };
+  
+  plot.setX2TickFormat = function(format){
+  	this.x2TickFormat = format;
+  	return this;
+  };
+
+  plot.setY2TickFormat = function(format){
+  	this.y2TickFormat = format;
+  	return this;
+  };
+
+  plot.draw = function() {
+	  this.xScale = d3.scale.linear()
+    	.domain(this.xDomain)
+    	.range([0, this.width]);
+    this.yScale = d3.scale.linear()
+    	.domain(this.yDomain)
+    	.range([0, this.height]);
+
+    var innerWidth = this.width - this.margin.left - this.margin.right,
+    innerHeight = this.height - this.margin.top - this.margin.bottom;
+
+	  // Append svg object to dom element
+	  this.svg = d3.select(elem).append('svg')
+	    .attr('class', 'log_plot')
+	    .attr('width', this.width + this.margin.right + this.margin.left)
+	    .attr('height', this.height + this.margin.bottom + this.margin.top) 
+	    .append('g')
+	    .attr('height', this.height)
+	    .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
+
+	  // Set axis
+	  if(this.xAxisVisible){
+	  	this.xAxis = createAxis(this.xScale, -this.height, this.xOrient, this.xTicks);
+	  	this.xAxis.tickFormat(this.xTickFormat);
+	  	this.svg.append('g')
+	    	.attr('class', 'x axis')
+	    	.call(this.xAxis);
+	  }
+	  if(this.yAxisVisible){
+	  	this.yAxis = createAxis(this.yScale, -this.width, this.yOrient, this.yTicks);
+	  	this.yAxis.tickFormat(this.yTickFormat);
+	  	this.svg.append('g')
+		    .attr('class', 'y axis')
+		    .call(this.yAxis);
+	  }
+	  if(this.x2AxisVisible){
+	  	this.x2Scale = d3.scale.linear()
+	    	.domain(this.x2Domain)
+	    	.range([0, this.width]);
+	  	this.x2Axis = createAxis(this.x2Scale, -this.height, this.x2Orient, this.x2Ticks);
+	  	this.x2Axis.tickFormat(this.x2TickFormat);
+	  	this.svg.append('g')
+	    	.attr('class', 'x2 axis')
+		    .attr("transform", "translate(" + "0," + this.height + ")")
+	    	.call(this.x2Axis);
+	  }
+	 	if(this.y2AxisVisible){
+	 		this.y2Scale = d3.scale.linear()
+	    	.domain(this.y2Domain)
+	    	.range([0, this.height]);
+	  	this.y2Axis = createAxis(this.y2Scale, -this.width, this.y2Orient, this.y2Ticks);
+	  	this.y2Axis.tickFormat(this.y2TickFormat);
+	  	this.svg.append('g')
+		    .attr('class', 'y2 axis')
+		    .attr("transform", "translate(" + this.width + ",0)")
+		    .call(this.y2Axis);
+	  }
+
+    if(this.xTitle){
+      
+      if(this.xTickFormat === ""){
+        var margin = -10;
+      } else {
+        var margin = -30;
+      }
+      this.svg.append("text")
+          .attr("x", (this.width) / 2)
+          .attr("y", margin)
+          .style("text-anchor", "middle")
+          .style("font-size", 12)
+          .text(this.xTitle);
+    }
+    if(this.yTitle){
+
+      if(this.yTickFormat === ""){
+        var yMargin = -10;
+      } else {
+        var yMargin = -40;
+      }
+
+      this.svg.append("text")
+        .attr("transform", "rotate(-90)")
+        .attr("y", yMargin)
+        .attr("dy", "1em")
+        .style("text-anchor", "end")
+        .style("font-size", 12)
+        .text(this.yTitle);
+    }
+    if(this.x2Title){
+      
+      if(this.x2TickFormat === ""){
+        var margin = 10;
+      } else {
+        var margin = 30;
+      }
+      this.svg.append("text")
+          .attr("transform", "translate(" + "0," + this.height + ")")
+        .attr("x", (this.width) / 2)
+          .attr("y", margin)
+          .style("text-anchor", "middle")
+          .style("font-size", 12)
+          .text(this.x2Title);
+    }
+    if(this.y2Title){
+
+      if(this.yTickFormat === ""){
+        var yMargin = -10;
+      } else {
+        var yMargin = -40;
+      }
+
+      this.svg.append("text")
+        .attr("transform", "translate(" + "0," + this.height + ")")
+        .attr("y", yMargin)
+        .attr("dy", "1em")
+        .style("text-anchor", "end")
+        .style("font-size", 12)
+        .text(this.y2Title);
+    }
+	  return this;
+	};
+
+  plot.reDraw = function(xDomain, yDomain, x2Domain, y2Domain){    
+    if(xDomain){
+      this.xScale.domain(xDomain);
+      this.svg.select('.x.axis')
+        .transition()
+        .duration(this.duration)
+        .call(this.xAxis)
+        .ease('linear');
+    }
+
+    if(yDomain){
+      this.yScale.domain(yDomain);
+      this.svg.select('.y.axis')
+        .transition()
+        .duration(this.duration)
+        .call(this.yAxis)
+        .ease('linear');
+    }
+
+    if(x2Domain){
+      this.x2Scale.domain(x2Domain);
+      this.svg.select('.x2.axis')
+        .transition()
+        .duration(this.duration)
+        .call(this.x2Axis)
+        .ease('linear');
+    }
+
+    if(y2Domain){
+      this.y2Scale.domain(y2Domain);
+      this.svg.select('.y2.axis')
+        .transition()
+        .duration(this.duration)
+        .call(this.y2Axis)
+        .ease('linear');
+    }
+  };
+
+	return plot;
+}
+g3.seismic = function(plot, data, options){
+	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
+	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+	
+	var seismic = {};
+	seismic.max = 1;
+	seismic.gain = 1;
+	seismic.plot = plot;
+	seismic.data = data;
+	seismic.duration = 500;
+
+  seismic.draw = function(){
+
+  	if(!seismic.color){
+		seismic.color = d3.scale.linear()
+		.domain([-this.max, 0, this.max])
+		.range(['#FF0000', '#FFF', '#0000FF']);
+	}
+
+  	var elem = $(plot.elem);
+    this.canvas = d3.select(plot.elem)
+      .append('canvas')
+      .attr('width', data.length)
+      .attr('height', data[0].length)
+      .style('width', plot.width +  'px')
+      .style('height', plot.height + 'px')
+      .style('opacity', 0.95)
+      .style('top', plot.margin.top + 'px')
+      .style('left', plot.margin.left + 'px')
+      .call(seismic.drawImage);
+    return this;
+  };
+
+	seismic.reDraw = function(data){
+
+  	// Update the Canvas Attributes
+  	seismic.canvas
+      .attr('width', data.length)
+      .attr('height', data[0].length)
+      .style('width', seismic.plot.width +  'px')
+      .style('height', seismic.plot.height + 'px');
+
+    // Wipe the old canvas, the new size can be different
+  	seismic.context.clearRect(0, 0, seismic.data.length, seismic.data[0].length);
+
+  	seismic.data = data;
+		var x = data.length,
+		y = data[0].length;
+		var image = seismic.context.createImageData(x,y);
+
+		// Paint the image
+		for(var i = 0, p = -1; i < y; ++ i){
+			for(var j = 0; j < x; ++j){
+				var c = d3.rgb(seismic.color(data[j][i] * seismic.gain));
+				image.data[++p] = c.r;
+				image.data[++p] = c.g;
+				image.data[++p] = c.b;
+				image.data[++p] = 255;
+			}
+		}
+
+		// Dump image to canvas
+		seismic.context.putImageData(image, 0, 0);
+	  return this;
+  };
+
+	seismic.drawImage = function(canvas){
+		seismic.context = canvas.node().getContext('2d');
+		var x = seismic.data.length,
+		y = seismic.data[0].length;
+		seismic.image = seismic.context.createImageData(x,y);
+
+		for(var i = 0, p = -1; i < y; ++ i){
+			for(var j = 0; j < x; ++j){
+				var c = d3.rgb(seismic.color(seismic.data[j][i] * seismic.gain));
+				seismic.image.data[++p] = c.r;
+				seismic.image.data[++p] = c.g;
+				seismic.image.data[++p] = c.b;
+				seismic.image.data[++p] = 255;
+			}
+		}
+		seismic.context.putImageData(seismic.image, 0, 0);
+		return this;
+	};
+
+	seismic.setColor = function(colorScale){
+		this.color = colorScale;
+		return this;
+	};
+
+	seismic.setDuration = function(duration){
+		this.duration = duration;
+		return this;
+	};
+
+	seismic.setMax = function(max){
+		this.max = max;
+		return this;
+	};
+
+	seismic.setGain = function(gain){
+		this.gain = gain;
+		return this;
+	};
+
+	return seismic;
+}
+g3.wiggle = function(plot, data, options){
+
+	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
+	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+
+	var wiggle = {};
+	wiggle.skip = 0;
+	wiggle.gain = 30;
+	wiggle.xInt = 1;
+	wiggle.xMin = plot.xDomain[0];
+	wiggle.yInt = 1;
+	wiggle.yMin = plot.yDomain[0];
+	wiggle.rand = Math.floor((Math.random() * 100) + 1);
+	wiggle.sampleRate = 1;
+	wiggle.duration = 500;
+
+	var s = wiggle.gain / wiggle.max;
+
+	wiggle.setSkip = function(skip){
+		this.skip = skip;
+		return this;
+	};
+
+	wiggle.setGain = function(gain){
+		this.gain = gain;
+		return this;
+	};
+
+	wiggle.setMax = function(max){
+		this.max = max;
+		return this;
+	};
+
+	wiggle.setXMin = function(xMin){
+		this.xMin = xMin;
+		return this;
+	};
+
+	wiggle.setYMin = function(yMin){
+		this.yMin = yMin;
+		return this;
+	};
+
+	wiggle.setXInt = function(xInt){
+		this.xInt = xInt;
+		return this;
+	};
+
+	wiggle.setYInt = function(yInt){
+		this.yInt = yInt;
+		return this;
+	};
+
+	wiggle.setFillColor = function(color){
+		this.fillColor = color;
+		return this;
+	};
+
+	wiggle.setColor = function(color){
+		this.color = color;
+		return this;
+	};
+
+	wiggle.setStrokeWidth = function(strokeWidth){
+		this.strokeWidth = strokeWidth;
+		return this;
+	};
+
+	wiggle.setSampleRate = function(sampleRate){
+		this.sampleRate = sampleRate;
+		return this;
+	};
+
+	wiggle.setDuration = function(duration){
+		this.duration = duration;
+		return this;
+	};
+
+	wiggle.test = function(){
+		console.log(d3.event);
+		// var position = [d3.event.x, d3.event.y];
+		wiggle.cir
+			.attr("cx", d3.event.x)
+			.attr("cy", d3.event.y);
+	}
+
+	wiggle.draw = function() {
+
+		for(var k = data.length - 1; k >= 0; k--){
+	    if(this.skip === 0 || k % this.skip === 0){
+	      var mean = d3.mean(data[k]); 
+
+	      // Line function
+		    var line = d3.svg.area()
+		      .interpolate('basis')
+		      .x(function (d) {
+		        return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
+		      })
+		      .y(function (d, i){
+		        return plot.yScale(i * wiggle.yInt + wiggle.yMin);
+		      });
+
+		    // Clip path area function
+		    var area = d3.svg.area()
+		      .interpolate('basis')
+		      .x(function (d, i) {
+		        return plot.xScale(mean * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
+		      })
+		      .y(function (d, i){
+		        return plot.yScale(i * wiggle.yInt + wiggle.yMin);
+		      });
+
+        plot.svg.append('path')
+          .attr('class', 'line' + k)
+          .attr('d', line(data[k]))
+          .attr('stroke', 'black')
+          .attr('stroke-width', 0.50)
+          .attr('fill', 'none');
+
+        plot.svg.datum(data[k]);
+
+        plot.svg.append('clipPath')
+          .attr('id', 'clip-below' + wiggle.rand + k)
+          .append('path')
+          .attr('d', area.x0(plot.width));
+
+        plot.svg.append('path')
+          .attr('id', 'area-below' + k)
+          .attr('clip-path', 'url(#clip-below' + wiggle.rand + k)
+          .attr('fill', 'black')
+          .style('opacity', 0.4)
+          .attr('d', area.x0(function (d, i){ 
+            return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
+          }));
+	    }
+	  }
+	  return this;
+	};
+
+	wiggle.reDraw = function(data, xDomain, yDomain){
+
+		// Redraw the Axis
+		plot.xScale.domain(xDomain);
+		plot.yScale.domain(yDomain);
+			
+		plot.svg.select('.x.axis')
+			.transition()
+			.duration(this.duration)
+			.call(plot.xAxis)
+			.selectAll("text")  
+			.style("text-anchor", "start")
+	    	.attr("transform", "rotate(-45)" );
+
+		plot.svg.select('.y.axis')
+			.transition()
+			.duration(this.duration)
+			.call(plot.yAxis);
+
+	  for(var k = data.length - 1; k >= 0; k--){
+	    if(this.skip === 0 || k % this.skip === 0){
+				var mean = d3.mean(data[k]); 
+	      
+	      plot.svg.select("#clip-below" + wiggle.rand + k)
+	        .remove()
+
+	      // Line function
+	      var line = d3.svg.area()
+	        .interpolate('basis')
+	        .x(function (d) {
+	          return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
+	        })
+	        .y(function (d, i){
+	          return plot.yScale(i * wiggle.yInt + wiggle.yMin);
+	        });
+
+	      // Clip path area function
+	      var area = d3.svg.area()
+	        .interpolate('basis')
+	        .x(function (d, i) {
+	          return plot.xScale(mean * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
+	        })
+	        .y(function (d, i){
+	          return plot.yScale(i * wiggle.yInt + wiggle.yMin);
+	        });
+
+	      plot.svg.select(".line" + k)
+	        .transition()
+	        .duration(this.duration)
+	        .attr('d', line(data[k]))
+	        .ease("linear");
+
+	      plot.svg.datum(data[k]);
+
+	      plot.svg.append('clipPath')
+	        .attr('id', 'clip-below' + wiggle.rand + k)
+	        .append('path')
+	        .attr('d', area.x0(plot.width));
+	        
+	      plot.svg.select("#area-below" + k)
+	        .attr('clip-path', 'url(#clip-below' + wiggle.rand + k)
+	        .transition()
+	        .duration(this.duration)
+	        .attr('d', area.x0(function (d, i){ 
+	          return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
+	        }))
+	        .ease('linear');
+	    	} 
+  		}
+    return this;
+  };
+	return wiggle;
+};
+
+} (window));
diff --git a/templates/model2.html b/templates/model2.html
index 55ce9e3..65df43e 100644
--- a/templates/model2.html
+++ b/templates/model2.html
@@ -66,7 +66,7 @@ <h3 class="panel-title">
 						<div ng-repeat="item in curImage.rocks track by $index">
       				<div class="rock-color col-xs-2" ng-style="{'background-color': curImage.colours[$index]}">
       				</div>
-								<button type="button" class="btn btn-default col-xs-9 model_select" placement="bottom-right" ng-model="item.name" bs-options="rock.name as rock.name for rock in rocks" bs-select>								
+								<button type="button" class="btn btn-default col-xs-9 model_select" placement="bottom-right" ng-model="curImage.rocks[$index]" ng-change="testing()" bs-options="rock as rock.name for rock in rocks" bs-select>								
 									<span class="caret">
 									</span>
    						</button>

From 84bd9f0c85d1b1d18323342599c5ce4745f3e548 Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Wed, 23 Sep 2015 15:32:40 -0300
Subject: [PATCH 05/12] draggable handles for wiggles and twt!

---
 static/js/app.js                | 299 +++++++++++++++++++++++---------
 static/js/controllers/2DCtrl.js | 299 +++++++++++++++++++++++---------
 templates/model2.html           |   1 +
 3 files changed, 437 insertions(+), 162 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 887851b..4d8f43e 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -316,17 +316,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setX2Domain([0, data.seismic.length - 1])
         .setY2Domain([0, data.seismic[0].length - 1])
         .draw();
-
-        var drag = d3.behavior.drag()  // capture mouse drag event
-        .on('drag', vDCirRedraw);
-
-        var position = [$scope.trace, 100];
-        $scope.cir = $scope.vDPlot.svg.append('circle')
-          .attr("r", 10)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .call(drag);
-
     } else {
       $scope.vDPlot.reDraw(
         [0, data.seismic.length - 1], 
@@ -335,14 +324,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         [0, data.seismic[0].length - 1]
       );
     }
-
-    function vDCirRedraw(){
-            console.log("HERE");
-      $scope.cir
-        .attr("cx", d3.event.x)
-        .attr("cy", d3.event.y);
-    }
-
     // Draw Seismic Image
     if(!$scope.seis){
       $scope.seis = g3.seismic($scope.vDPlot, data.seismic)
@@ -357,6 +338,78 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .reDraw(data.seismic);
     }
   };
+  
+  $scope.plotVDHorizon = function(data){
+    var xScale = $scope.vDPlot.xScale;
+    var yScale = $scope.vDPlot.yScale;
+    if(!$scope.vDHor){
+      $scope.vDHor = $scope.vDPlot.svg.append("line")
+        .style("stroke", "green")
+        .style("opacity", 1.5)
+        .attr("x1", xScale(0))
+        .attr("y1", yScale($scope.twt))
+        .attr("x2", xScale(data.seismic.length - 1))
+        .attr("y2", yScale($scope.twt));
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+          .on('drag', vDCirRedraw);
+
+        var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+        $scope.vDCir = $scope.vDPlot.svg.append('circle')
+          .attr("class", "vdcir")
+          .attr("r", 5)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .style("opacity", 0.5)
+          .call(drag);
+
+        $(".vdcir").mouseup(function(e){
+          e.preventDefault();
+          $scope.update_data();
+        });
+    } else {
+      position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+      $scope.vDCir
+        .attr("cx", position[0])
+        .attr("cy", position[1]);
+
+      $scope.vDHor
+        .transition()
+        .duration(5)
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
+    }
+  };
+
+  function vDCirRedraw(){
+    var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
+    var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
+
+    // Check to make sure we are within the boundaries
+    if(x < 0){
+      x = 0;
+    } else if(x > $scope.data.seismic.length - 1) {
+      x = $scope.data.seismic.length - 1;
+    }
+
+    if(y < 0){
+      y = 0;
+    } else if(y > $scope.data.seismic[0].length - 1){
+      y = $scope.data.seismic[0].length - 1;
+    }
+
+    $scope.traceStr = x.toString();
+    $scope.twtStr = y.toString();
+    $scope.changeTraceStr();
+    $scope.changeTWTStr();
+    $scope.wGCir
+      .attr("cy", $scope.wGPlot.yScale($scope.twt));
+    $scope.oGCir
+      .attr("cy", $scope.oGPlot.yScale($scope.twt));
+    $scope.vDCir
+      .attr("cx", $scope.vDPlot.xScale($scope.trace))
+      .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  };
 
   $scope.plotOffset = function(data, height, max){
     // Offset Gather Plot
@@ -405,6 +458,79 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
+  $scope.plotOffsetHorizon = function(data){
+    // Draw Offset Horizon
+    var xScale = $scope.oGPlot.xScale;
+    var yScale = $scope.oGPlot.yScale;
+    if(!$scope.oGHor){
+      $scope.oGHor = $scope.oGPlot.svg.append("line")
+        .style("stroke", "green")
+        .style("opacity", 1.5)
+        .attr("x1", xScale(0))
+        .attr("y1", yScale($scope.twt))
+        .attr("x2", xScale(data.offset_gather.length - 1))
+        .attr("y2", yScale($scope.twt));
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+          .on('drag', oGCirRedraw);
+
+        var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+        $scope.oGCir = $scope.oGPlot.svg.append('circle')
+          .attr("class", "ogcir")
+          .attr("r", 5)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .style("opacity", 0.5)
+          .call(drag);
+
+        $(".ogcir").mouseup(function(e){
+          e.preventDefault();
+          $scope.update_data();
+        });
+    } else {
+      position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+      $scope.oGCir
+        .attr("cx", position[0])
+        .attr("cy", position[1]);
+
+      $scope.oGHor
+        .transition()
+        .duration(5)
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
+    }
+  };
+
+  function oGCirRedraw(){
+    var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
+    var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
+
+    // Check to make sure we are within the boundaries
+    if(x < 0){
+      x = 0;
+    } else if(x > $scope.data.offset_gather.length - 1) {
+      x = $scope.data.offset_gather.length - 1;
+    }
+
+    if(y < 0){
+      y = 0;
+    } else if(y > $scope.data.seismic[0].length - 1){
+      y = $scope.data.seismic[0].length - 1;
+    }
+
+    $scope.offsetStr = x.toString();
+    $scope.twtStr = y.toString();
+    $scope.changeOffsetStr();
+    $scope.changeTWTStr();
+    $scope.wGCir
+      .attr("cy", $scope.wGPlot.yScale($scope.twt));
+    $scope.vDCir
+      .attr("cy", $scope.vDPlot.yScale($scope.twt));
+    $scope.oGCir
+      .attr("cx", $scope.oGPlot.xScale($scope.offset))
+      .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  };
+
   $scope.plotWavelet = function(data, height, max){
     // Wavelet Gather Plot
     var width = $('.wg_plot').width();
@@ -452,6 +578,79 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
+  $scope.plotWaveletHorizon = function(data){
+    // Draw Wavelet Horizon
+    var xScale = $scope.wGPlot.xScale;
+    var yScale = $scope.wGPlot.yScale;
+    if(!$scope.wGHor){
+      $scope.wGHor = $scope.wGPlot.svg.append("line")
+        .style("stroke", "green")
+        .style("opacity", 1.5)
+        .attr("x1", xScale(0))
+        .attr("y1", yScale($scope.twt))
+        .attr("x2", xScale(data.wavelet_gather.length - 1))
+        .attr("y2", yScale($scope.twt));
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+          .on('drag', wGCirRedraw);
+
+        var position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
+        $scope.wGCir = $scope.wGPlot.svg.append('circle')
+          .attr("class", "wgcir")
+          .attr("r", 5)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .style("opacity", 0.5)
+          .call(drag);
+
+        $(".wgcir").mouseup(function(e){
+          e.preventDefault();
+          $scope.update_data();
+        });
+    } else {
+      position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
+      $scope.wGCir
+        .attr("cx", position[0])
+        .attr("cy", position[1]);
+
+      $scope.wGHor
+        .transition()
+        .duration(5)
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
+    }
+  };
+
+  function wGCirRedraw(){
+    var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
+    var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
+
+    // Check to make sure we are within the boundaries
+    if(x < 0){
+      x = 0;
+    } else if(x > $scope.data.wavelet_gather.length - 1) {
+      x = $scope.data.wavelet_gather.length - 1;
+    }
+
+    if(y < 0){
+      y = 0;
+    } else if(y > $scope.data.seismic[0].length - 1){
+      y = $scope.data.seismic[0].length - 1;
+    }
+
+    $scope.frequencyStr = x.toString();
+    $scope.twtStr = y.toString();
+    $scope.changeFrequencyStr();
+    $scope.changeTWTStr();
+    $scope.oGCir
+      .attr("cy", $scope.oGPlot.yScale($scope.twt));
+    $scope.vDCir
+      .attr("cy", $scope.vDPlot.yScale($scope.twt));
+    $scope.wGCir
+      .attr("cx", $scope.wGPlot.xScale($scope.frequency))
+      .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  };
+
   $scope.plotAmplitudeTrace = function(data, height){
     // Amplitude Trace
     var width = $('.at_plot').width();
@@ -595,26 +794,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  $scope.plotVDHorizon = function(data){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
-    if(!$scope.vDHor){
-      $scope.vDHor = $scope.vDPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.seismic.length - 1))
-        .attr("y2", yScale($scope.twt));
-    } else {
-      $scope.vDHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-    }
-  };
-
   $scope.plotOffsetWiggle = function(data){
     // Draw Offset Wiggle
     var arr = [data.offset_gather[$scope.offset]];
@@ -655,48 +834,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  $scope.plotOffsetHorizon = function(data){
-    // Draw Offset Horizon
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
-    if(!$scope.oGHor){
-      $scope.oGHor = $scope.oGPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.offset_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
-    } else {
-      $scope.oGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-    }
-  };
-
-  $scope.plotWaveletHorizon = function(data){
-    // Draw Wavelet Horizon
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
-    if(!$scope.wGHor){
-      $scope.wGHor = $scope.wGPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.wavelet_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
-    } else {
-      $scope.wGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-    }
-  };
-
   $scope.plot = function(data){
     $scope.data = data;
   	var height = 450;
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index 35c31f8..deadb6d 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -304,17 +304,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setX2Domain([0, data.seismic.length - 1])
         .setY2Domain([0, data.seismic[0].length - 1])
         .draw();
-
-        var drag = d3.behavior.drag()  // capture mouse drag event
-        .on('drag', vDCirRedraw);
-
-        var position = [$scope.trace, 100];
-        $scope.cir = $scope.vDPlot.svg.append('circle')
-          .attr("r", 10)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .call(drag);
-
     } else {
       $scope.vDPlot.reDraw(
         [0, data.seismic.length - 1], 
@@ -323,14 +312,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         [0, data.seismic[0].length - 1]
       );
     }
-
-    function vDCirRedraw(){
-            console.log("HERE");
-      $scope.cir
-        .attr("cx", d3.event.x)
-        .attr("cy", d3.event.y);
-    }
-
     // Draw Seismic Image
     if(!$scope.seis){
       $scope.seis = g3.seismic($scope.vDPlot, data.seismic)
@@ -345,6 +326,78 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .reDraw(data.seismic);
     }
   };
+  
+  $scope.plotVDHorizon = function(data){
+    var xScale = $scope.vDPlot.xScale;
+    var yScale = $scope.vDPlot.yScale;
+    if(!$scope.vDHor){
+      $scope.vDHor = $scope.vDPlot.svg.append("line")
+        .style("stroke", "green")
+        .style("opacity", 1.5)
+        .attr("x1", xScale(0))
+        .attr("y1", yScale($scope.twt))
+        .attr("x2", xScale(data.seismic.length - 1))
+        .attr("y2", yScale($scope.twt));
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+          .on('drag', vDCirRedraw);
+
+        var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+        $scope.vDCir = $scope.vDPlot.svg.append('circle')
+          .attr("class", "vdcir")
+          .attr("r", 5)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .style("opacity", 0.5)
+          .call(drag);
+
+        $(".vdcir").mouseup(function(e){
+          e.preventDefault();
+          $scope.update_data();
+        });
+    } else {
+      position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+      $scope.vDCir
+        .attr("cx", position[0])
+        .attr("cy", position[1]);
+
+      $scope.vDHor
+        .transition()
+        .duration(5)
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
+    }
+  };
+
+  function vDCirRedraw(){
+    var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
+    var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
+
+    // Check to make sure we are within the boundaries
+    if(x < 0){
+      x = 0;
+    } else if(x > $scope.data.seismic.length - 1) {
+      x = $scope.data.seismic.length - 1;
+    }
+
+    if(y < 0){
+      y = 0;
+    } else if(y > $scope.data.seismic[0].length - 1){
+      y = $scope.data.seismic[0].length - 1;
+    }
+
+    $scope.traceStr = x.toString();
+    $scope.twtStr = y.toString();
+    $scope.changeTraceStr();
+    $scope.changeTWTStr();
+    $scope.wGCir
+      .attr("cy", $scope.wGPlot.yScale($scope.twt));
+    $scope.oGCir
+      .attr("cy", $scope.oGPlot.yScale($scope.twt));
+    $scope.vDCir
+      .attr("cx", $scope.vDPlot.xScale($scope.trace))
+      .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  };
 
   $scope.plotOffset = function(data, height, max){
     // Offset Gather Plot
@@ -393,6 +446,79 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
+  $scope.plotOffsetHorizon = function(data){
+    // Draw Offset Horizon
+    var xScale = $scope.oGPlot.xScale;
+    var yScale = $scope.oGPlot.yScale;
+    if(!$scope.oGHor){
+      $scope.oGHor = $scope.oGPlot.svg.append("line")
+        .style("stroke", "green")
+        .style("opacity", 1.5)
+        .attr("x1", xScale(0))
+        .attr("y1", yScale($scope.twt))
+        .attr("x2", xScale(data.offset_gather.length - 1))
+        .attr("y2", yScale($scope.twt));
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+          .on('drag', oGCirRedraw);
+
+        var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+        $scope.oGCir = $scope.oGPlot.svg.append('circle')
+          .attr("class", "ogcir")
+          .attr("r", 5)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .style("opacity", 0.5)
+          .call(drag);
+
+        $(".ogcir").mouseup(function(e){
+          e.preventDefault();
+          $scope.update_data();
+        });
+    } else {
+      position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+      $scope.oGCir
+        .attr("cx", position[0])
+        .attr("cy", position[1]);
+
+      $scope.oGHor
+        .transition()
+        .duration(5)
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
+    }
+  };
+
+  function oGCirRedraw(){
+    var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
+    var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
+
+    // Check to make sure we are within the boundaries
+    if(x < 0){
+      x = 0;
+    } else if(x > $scope.data.offset_gather.length - 1) {
+      x = $scope.data.offset_gather.length - 1;
+    }
+
+    if(y < 0){
+      y = 0;
+    } else if(y > $scope.data.seismic[0].length - 1){
+      y = $scope.data.seismic[0].length - 1;
+    }
+
+    $scope.offsetStr = x.toString();
+    $scope.twtStr = y.toString();
+    $scope.changeOffsetStr();
+    $scope.changeTWTStr();
+    $scope.wGCir
+      .attr("cy", $scope.wGPlot.yScale($scope.twt));
+    $scope.vDCir
+      .attr("cy", $scope.vDPlot.yScale($scope.twt));
+    $scope.oGCir
+      .attr("cx", $scope.oGPlot.xScale($scope.offset))
+      .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  };
+
   $scope.plotWavelet = function(data, height, max){
     // Wavelet Gather Plot
     var width = $('.wg_plot').width();
@@ -440,6 +566,79 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
+  $scope.plotWaveletHorizon = function(data){
+    // Draw Wavelet Horizon
+    var xScale = $scope.wGPlot.xScale;
+    var yScale = $scope.wGPlot.yScale;
+    if(!$scope.wGHor){
+      $scope.wGHor = $scope.wGPlot.svg.append("line")
+        .style("stroke", "green")
+        .style("opacity", 1.5)
+        .attr("x1", xScale(0))
+        .attr("y1", yScale($scope.twt))
+        .attr("x2", xScale(data.wavelet_gather.length - 1))
+        .attr("y2", yScale($scope.twt));
+
+        var drag = d3.behavior.drag()  // capture mouse drag event
+          .on('drag', wGCirRedraw);
+
+        var position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
+        $scope.wGCir = $scope.wGPlot.svg.append('circle')
+          .attr("class", "wgcir")
+          .attr("r", 5)
+          .attr("cx", position[0])
+          .attr("cy", position[1])
+          .style("opacity", 0.5)
+          .call(drag);
+
+        $(".wgcir").mouseup(function(e){
+          e.preventDefault();
+          $scope.update_data();
+        });
+    } else {
+      position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
+      $scope.wGCir
+        .attr("cx", position[0])
+        .attr("cy", position[1]);
+
+      $scope.wGHor
+        .transition()
+        .duration(5)
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
+    }
+  };
+
+  function wGCirRedraw(){
+    var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
+    var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
+
+    // Check to make sure we are within the boundaries
+    if(x < 0){
+      x = 0;
+    } else if(x > $scope.data.wavelet_gather.length - 1) {
+      x = $scope.data.wavelet_gather.length - 1;
+    }
+
+    if(y < 0){
+      y = 0;
+    } else if(y > $scope.data.seismic[0].length - 1){
+      y = $scope.data.seismic[0].length - 1;
+    }
+
+    $scope.frequencyStr = x.toString();
+    $scope.twtStr = y.toString();
+    $scope.changeFrequencyStr();
+    $scope.changeTWTStr();
+    $scope.oGCir
+      .attr("cy", $scope.oGPlot.yScale($scope.twt));
+    $scope.vDCir
+      .attr("cy", $scope.vDPlot.yScale($scope.twt));
+    $scope.wGCir
+      .attr("cx", $scope.wGPlot.xScale($scope.frequency))
+      .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  };
+
   $scope.plotAmplitudeTrace = function(data, height){
     // Amplitude Trace
     var width = $('.at_plot').width();
@@ -583,26 +782,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  $scope.plotVDHorizon = function(data){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
-    if(!$scope.vDHor){
-      $scope.vDHor = $scope.vDPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.seismic.length - 1))
-        .attr("y2", yScale($scope.twt));
-    } else {
-      $scope.vDHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-    }
-  };
-
   $scope.plotOffsetWiggle = function(data){
     // Draw Offset Wiggle
     var arr = [data.offset_gather[$scope.offset]];
@@ -643,48 +822,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  $scope.plotOffsetHorizon = function(data){
-    // Draw Offset Horizon
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
-    if(!$scope.oGHor){
-      $scope.oGHor = $scope.oGPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.offset_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
-    } else {
-      $scope.oGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-    }
-  };
-
-  $scope.plotWaveletHorizon = function(data){
-    // Draw Wavelet Horizon
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
-    if(!$scope.wGHor){
-      $scope.wGHor = $scope.wGPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.wavelet_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
-    } else {
-      $scope.wGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-    }
-  };
-
   $scope.plot = function(data){
     $scope.data = data;
   	var height = 450;
diff --git a/templates/model2.html b/templates/model2.html
index 65df43e..2975e99 100644
--- a/templates/model2.html
+++ b/templates/model2.html
@@ -146,6 +146,7 @@ <h3 class="panel-title">
 				      </div>
 				      <div class="col-xs-8 col-md-5 col-xs-offset-1 remove-padding">
 								<div>
+									<p>{[traceStr]}</p>
 								  <input class="form-control" ng-mouseup="update_data()" ng-change="changeTraceStr()" ng-model="traceStr" min="0" max="{[maxTrace]}" type="range"/>
 								</div>
 				      </div>

From d7379b35c4626c5b7b8474c961447430eb6a086d Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Sat, 26 Sep 2015 22:11:25 -0300
Subject: [PATCH 06/12] adding metadata table and csv export functionality
 using angular

---
 static/css/modelr.css           |  1 +
 static/js/app.js                | 26 ++++++++++++++++++++++--
 static/js/controllers/2DCtrl.js | 26 ++++++++++++++++++++++--
 templates/model2.html           | 36 ++++++++++++++++++++++++++++++++-
 4 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/static/css/modelr.css b/static/css/modelr.css
index 47414ae..94f7181 100644
--- a/static/css/modelr.css
+++ b/static/css/modelr.css
@@ -88,6 +88,7 @@ svg {
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
 }
 
+
 /*************/
 
 /* 1D Models */
diff --git a/static/js/app.js b/static/js/app.js
index 4d8f43e..be84afb 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -78,13 +78,11 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         if($scope.images.length > 0){
           $scope.curImage = $scope.images[0];
 
-
 	  	    for(var i = 0; i < $scope.images.length; i++){
 	  	      $scope.images[i].rocks = [];
 	  	      for(var j = 0; j < $scope.images[i].colours.length; j++){
 	  	        var rand = $scope.rocks[Math.floor(Math.random() * $scope.rocks.length)];
               $scope.images[i].rocks.push(rand);
-              console.log(rand);
 	  	      }
 	  	    }
         }
@@ -925,6 +923,30 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   $( document ).ready(function(){
     $scope.setColorPickers();
   });
+
+  $scope.exportCSV = function(){
+    var csv = [];
+    $.each($scope.data.metadata.moduli, function(key, value) {
+      csv.push('"' + key + '"');
+      $.each(value, function(k, v) {
+        if(k === 'imp'){
+          v = (v / 1000000).toFixed(2);
+        } else if(k === 'pr'){
+          v = v.toFixed(2);
+        } else {
+          v = (v / 1000000000).toFixed(2);
+        }
+        csv.push(',"' + v + '"')
+      });
+      csv.push('\r\n');
+    });
+    csv = csv.join("");
+    var hiddenElement = document.createElement('a');
+    hiddenElement.href = 'data:attachment/csv,' + encodeURI(csv);
+    hiddenElement.target = '_blank';
+    hiddenElement.download = 'export.csv';
+    hiddenElement.click();
+  };
 });
 
 // <-- HELPER FUNCTIONS --> //
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index deadb6d..324b335 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -66,13 +66,11 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         if($scope.images.length > 0){
           $scope.curImage = $scope.images[0];
 
-
 	  	    for(var i = 0; i < $scope.images.length; i++){
 	  	      $scope.images[i].rocks = [];
 	  	      for(var j = 0; j < $scope.images[i].colours.length; j++){
 	  	        var rand = $scope.rocks[Math.floor(Math.random() * $scope.rocks.length)];
               $scope.images[i].rocks.push(rand);
-              console.log(rand);
 	  	      }
 	  	    }
         }
@@ -913,4 +911,28 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   $( document ).ready(function(){
     $scope.setColorPickers();
   });
+
+  $scope.exportCSV = function(){
+    var csv = [];
+    $.each($scope.data.metadata.moduli, function(key, value) {
+      csv.push('"' + key + '"');
+      $.each(value, function(k, v) {
+        if(k === 'imp'){
+          v = (v / 1000000).toFixed(2);
+        } else if(k === 'pr'){
+          v = v.toFixed(2);
+        } else {
+          v = (v / 1000000000).toFixed(2);
+        }
+        csv.push(',"' + v + '"')
+      });
+      csv.push('\r\n');
+    });
+    csv = csv.join("");
+    var hiddenElement = document.createElement('a');
+    hiddenElement.href = 'data:attachment/csv,' + encodeURI(csv);
+    hiddenElement.target = '_blank';
+    hiddenElement.download = 'export.csv';
+    hiddenElement.click();
+  };
 });
diff --git a/templates/model2.html b/templates/model2.html
index 2975e99..d51c4f9 100644
--- a/templates/model2.html
+++ b/templates/model2.html
@@ -249,9 +249,43 @@ <h3 class="panel-title col-xs-10">
 				      </div>
 						</div>
 				  </div>
-				</div>    
+				</div>
       </div>
     </div>
   </div>
+  <div class="panel panel-default">
+		<div class="panel-heading">
+		  <div ng-click="exportCSV()" style="float:right; margin-top:-2px;"><a class="btn btn-default btn-xs">Export CSV</a></div>
+			<h3 class="panel-title">Metadata</h3>
+		</div>
+		<div class="panel-body"> 
+		<table id="model_metadata" class="table table-striped">
+			<thead>
+				<tr>
+					<th></th>
+					<th class="text-right" style="padding:0 8px 0 0;">Z<br/><span style="color:lightgrey; font-weight:normal;">Pa·s·m<sup>−1</sup></span></th>
+					<th style="text-align:right; padding:0 8px 0 0;">PR<br/><span></span></th>
+					<th style="text-align:right; padding:0 8px 0 0;">E<br /><span style="color:lightgrey; font-weight:normal;">GPa</span></th>
+					<th style="text-align:right; padding:0 8px 0 0;">&lambda;<br /><span style="color:lightgrey; font-weight:normal;">GPa</span></th>
+					<th style="text-align:right; padding:0 8px 0 0;">&mu;<br /><span style="color:lightgrey; font-weight:normal;">GPa</span></th>
+					<th style="text-align:right; padding:0 8px 0 0;">K<br /><span style="color:lightgrey; font-weight:normal;">GPa</span></th>
+					<th style="text-align:right; padding:0 8px 0 0;">M<br /><span style="color:lightgrey; font-weight:normal;">GPa</span></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr class="text-right" ng-repeat="(key,value) in data.metadata.moduli track by $index">
+					<td>{[ key ]}</td>
+					<td>{[ (value.imp / 1000000).toFixed(2) ]}</td>
+					<td>{[ value.pr.toFixed(2) ]}</td>
+					<td>{[ (value.youngs / 1000000000).toFixed(2) ]}</td>
+					<td>{[ (value.lam / 1000000000).toFixed(2) ]}</td>
+					<td>{[ (value.mu / 1000000000).toFixed(2) ]}</td>
+					<td>{[ (value.bulk / 1000000000).toFixed(2) ]}</td>
+					<td>{[ (value.pmod / 1000000000).toFixed(2) ]}</td>
+				</tr>
+			</tbody>
+		</table> 
+		</div>
+	</div>
 </div>
 {% endblock %}

From 66ca9042c1c6089a729b507cc51bdda33e4d0c3d Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Mon, 28 Sep 2015 13:04:20 -0300
Subject: [PATCH 07/12] flipped the order in how wiggles are drawn, added
 invisible lines as handles for the wavelet gather wiggle and horizon

---
 static/js/app.js                | 168 +++++++++++++++++++++++++-------
 static/js/controllers/2DCtrl.js | 168 +++++++++++++++++++++++++-------
 static/js/g3.js                 |  25 ++---
 templates/model2.html           |   2 +-
 4 files changed, 271 insertions(+), 92 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index be84afb..538c2b6 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -577,40 +577,96 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.plotWaveletHorizon = function(data){
-    // Draw Wavelet Horizon
     var xScale = $scope.wGPlot.xScale;
     var yScale = $scope.wGPlot.yScale;
+
     if(!$scope.wGHor){
+      // Draw horizon line
       $scope.wGHor = $scope.wGPlot.svg.append("line")
         .style("stroke", "green")
-        .style("opacity", 1.5)
         .attr("x1", xScale(0))
         .attr("y1", yScale($scope.twt))
         .attr("x2", xScale(data.wavelet_gather.length - 1))
         .attr("y2", yScale($scope.twt));
 
-        var drag = d3.behavior.drag()  // capture mouse drag event
-          .on('drag', wGCirRedraw);
-
-        var position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
-        $scope.wGCir = $scope.wGPlot.svg.append('circle')
-          .attr("class", "wgcir")
-          .attr("r", 5)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .style("opacity", 0.5)
-          .call(drag);
-
-        $(".wgcir").mouseup(function(e){
+        // Register drag trigger for wgcir
+        // var cirDrag = d3.behavior.drag()  // capture mouse drag event
+        //   .on('drag', wGCirRedraw);
+        
+        // Register drag trigger for wGWigLine
+        var wigLineDrag = d3.behavior.drag()
+          .on('drag', wGWigLineRedraw);
+
+        // Register drag trigger for wGHorLine
+        var horLineDrag = d3.behavior.drag()
+          .on('drag', wGHorLineRedraw);
+
+        // Draw handle
+        // $scope.wGCir = $scope.wGPlot.svg.append('circle')
+        //   .attr("class", "wgcir")
+        //   .attr("r", 5)
+        //   .attr("cx", xScale($scope.frequency))
+        //   .attr("cy", yScale($scope.twt))
+        //   .style("opacity", 0.5)
+        //   .call(cirDrag);
+
+        // Draw invisible line
+        $scope.wGWigLine = $scope.wGPlot.svg.append('line')
+          .attr("class", "wgwigline")
+          .style("stroke-width", 10)
+          .style("stroke", "black")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale($scope.frequency))
+          .attr("y1", yScale(data.wavelet_gather[0].length - 1))
+          .attr("x2", xScale($scope.frequency))
+          .attr("y2", yScale(0))
+          .call(wigLineDrag);
+          console.log($scope.wGWigLine);
+
+        // Draw invisible horizon line
+        $scope.wGHorLine = $scope.wGPlot.svg.append('line')
+          .style("stroke-width", 10)
+          .style("stroke", "green")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale(0))
+          .attr("y1", yScale($scope.twt))
+          .attr("x2", xScale(data.wavelet_gather.length - 1))
+          .attr("y2", yScale($scope.twt))
+          .call(horLineDrag);
+
+        // Register mouseup trigger for wgline
+        $(".wgwigline").mouseup(function(e){
           e.preventDefault();
           $scope.update_data();
         });
+
+        // Register mouseup trigger for wgcir
+        // $(".wgcir").mouseup(function(e){
+        //   e.preventDefault();
+        //   $scope.update_data();
+        // });
     } else {
-      position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
-      $scope.wGCir
-        .attr("cx", position[0])
-        .attr("cy", position[1]);
+      
+      // Redraw the handle
+      // $scope.wGCir
+      //   .attr("cx", xScale($scope.frequency))
+      //   .attr("cy", yScale($scope.twt));
+
+      // Redraw the invisible line
+      $scope.wGWigLine
+        .attr("x1", xScale($scope.frequency))
+        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
+        .attr("x2", xScale($scope.frequency))
+        .attr("y2", yScale(0));
+
+      // Redraw invisible horizon
+      $scope.wGHorLine
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
 
+      // Redraw horizon
       $scope.wGHor
         .transition()
         .duration(5)
@@ -619,35 +675,74 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  function wGCirRedraw(){
-    var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
-    var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
+  function wGWigLineRedraw(){
+    var xScale = $scope.wGPlot.xScale;
+    var yScale = $scope.wGPlot.yScale;
+    var x = Math.floor(xScale.invert(d3.event.x));
 
-    // Check to make sure we are within the boundaries
     if(x < 0){
       x = 0;
-    } else if(x > $scope.data.wavelet_gather.length - 1) {
+    } else if(x > $scope.data.wavelet_gather.length - 1){
       x = $scope.data.wavelet_gather.length - 1;
     }
 
+    $scope.frequencyStr = x.toString();
+    $scope.changeFrequencyStr();
+    
+    $scope.wGWigLine
+      .attr("x1", xScale($scope.frequency))
+      .attr("x2", xScale($scope.frequency));
+  }
+
+  function wGHorLineRedraw(){
+    var xScale = $scope.wGPlot.xScale;
+    var yScale = $scope.wGPlot.yScale;
+    var y = Math.floor(yScale.invert(d3.event.y));
+
     if(y < 0){
       y = 0;
-    } else if(y > $scope.data.seismic[0].length - 1){
-      y = $scope.data.seismic[0].length - 1;
+    } else if(y > $scope.data.wavelet_gather[0].length - 1){
+      y = $scope.data.wavelet_gather[0].length - 1;
     }
 
-    $scope.frequencyStr = x.toString();
     $scope.twtStr = y.toString();
-    $scope.changeFrequencyStr();
     $scope.changeTWTStr();
-    $scope.oGCir
-      .attr("cy", $scope.oGPlot.yScale($scope.twt));
-    $scope.vDCir
-      .attr("cy", $scope.vDPlot.yScale($scope.twt));
-    $scope.wGCir
-      .attr("cx", $scope.wGPlot.xScale($scope.frequency))
-      .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  };
+    
+    $scope.wGHorLine
+      .attr("y1", yScale($scope.twt))
+      .attr("y2", yScale($scope.twt));
+  }
+
+  // function wGCirRedraw(){
+  //   // Set x and y, flooring them.
+  //   var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
+  //   var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
+
+  //   // Check to make sure we are within the boundaries
+  //   if(x < 0){
+  //     x = 0;
+  //   } else if(x > $scope.data.wavelet_gather.length - 1) {
+  //     x = $scope.data.wavelet_gather.length - 1;
+  //   }
+
+  //   if(y < 0){
+  //     y = 0;
+  //   } else if(y > $scope.data.seismic[0].length - 1){
+  //     y = $scope.data.seismic[0].length - 1;
+  //   }
+
+  //   $scope.frequencyStr = x.toString();
+  //   $scope.twtStr = y.toString();
+  //   $scope.changeFrequencyStr();
+  //   $scope.changeTWTStr();
+  //   $scope.oGCir
+  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  //   $scope.vDCir
+  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  //   $scope.wGCir
+  //     .attr("cx", $scope.wGPlot.xScale($scope.frequency))
+  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  // };
 
   $scope.plotAmplitudeTrace = function(data, height){
     // Amplitude Trace
@@ -780,7 +875,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setDuration(5)
         .draw();
 
-      console.log($scope.vDLog);
     } else {
       $scope.vDLog
         .setXMin($scope.trace)
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index 324b335..375ec9b 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -565,40 +565,96 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.plotWaveletHorizon = function(data){
-    // Draw Wavelet Horizon
     var xScale = $scope.wGPlot.xScale;
     var yScale = $scope.wGPlot.yScale;
+
     if(!$scope.wGHor){
+      // Draw horizon line
       $scope.wGHor = $scope.wGPlot.svg.append("line")
         .style("stroke", "green")
-        .style("opacity", 1.5)
         .attr("x1", xScale(0))
         .attr("y1", yScale($scope.twt))
         .attr("x2", xScale(data.wavelet_gather.length - 1))
         .attr("y2", yScale($scope.twt));
 
-        var drag = d3.behavior.drag()  // capture mouse drag event
-          .on('drag', wGCirRedraw);
-
-        var position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
-        $scope.wGCir = $scope.wGPlot.svg.append('circle')
-          .attr("class", "wgcir")
-          .attr("r", 5)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .style("opacity", 0.5)
-          .call(drag);
-
-        $(".wgcir").mouseup(function(e){
+        // Register drag trigger for wgcir
+        // var cirDrag = d3.behavior.drag()  // capture mouse drag event
+        //   .on('drag', wGCirRedraw);
+        
+        // Register drag trigger for wGWigLine
+        var wigLineDrag = d3.behavior.drag()
+          .on('drag', wGWigLineRedraw);
+
+        // Register drag trigger for wGHorLine
+        var horLineDrag = d3.behavior.drag()
+          .on('drag', wGHorLineRedraw);
+
+        // Draw handle
+        // $scope.wGCir = $scope.wGPlot.svg.append('circle')
+        //   .attr("class", "wgcir")
+        //   .attr("r", 5)
+        //   .attr("cx", xScale($scope.frequency))
+        //   .attr("cy", yScale($scope.twt))
+        //   .style("opacity", 0.5)
+        //   .call(cirDrag);
+
+        // Draw invisible line
+        $scope.wGWigLine = $scope.wGPlot.svg.append('line')
+          .attr("class", "wgwigline")
+          .style("stroke-width", 10)
+          .style("stroke", "black")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale($scope.frequency))
+          .attr("y1", yScale(data.wavelet_gather[0].length - 1))
+          .attr("x2", xScale($scope.frequency))
+          .attr("y2", yScale(0))
+          .call(wigLineDrag);
+          console.log($scope.wGWigLine);
+
+        // Draw invisible horizon line
+        $scope.wGHorLine = $scope.wGPlot.svg.append('line')
+          .style("stroke-width", 10)
+          .style("stroke", "green")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale(0))
+          .attr("y1", yScale($scope.twt))
+          .attr("x2", xScale(data.wavelet_gather.length - 1))
+          .attr("y2", yScale($scope.twt))
+          .call(horLineDrag);
+
+        // Register mouseup trigger for wgline
+        $(".wgwigline").mouseup(function(e){
           e.preventDefault();
           $scope.update_data();
         });
+
+        // Register mouseup trigger for wgcir
+        // $(".wgcir").mouseup(function(e){
+        //   e.preventDefault();
+        //   $scope.update_data();
+        // });
     } else {
-      position = [$scope.wGPlot.xScale($scope.frequency), $scope.wGPlot.yScale($scope.twt)];
-      $scope.wGCir
-        .attr("cx", position[0])
-        .attr("cy", position[1]);
+      
+      // Redraw the handle
+      // $scope.wGCir
+      //   .attr("cx", xScale($scope.frequency))
+      //   .attr("cy", yScale($scope.twt));
+
+      // Redraw the invisible line
+      $scope.wGWigLine
+        .attr("x1", xScale($scope.frequency))
+        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
+        .attr("x2", xScale($scope.frequency))
+        .attr("y2", yScale(0));
+
+      // Redraw invisible horizon
+      $scope.wGHorLine
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
 
+      // Redraw horizon
       $scope.wGHor
         .transition()
         .duration(5)
@@ -607,35 +663,74 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  function wGCirRedraw(){
-    var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
-    var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
+  function wGWigLineRedraw(){
+    var xScale = $scope.wGPlot.xScale;
+    var yScale = $scope.wGPlot.yScale;
+    var x = Math.floor(xScale.invert(d3.event.x));
 
-    // Check to make sure we are within the boundaries
     if(x < 0){
       x = 0;
-    } else if(x > $scope.data.wavelet_gather.length - 1) {
+    } else if(x > $scope.data.wavelet_gather.length - 1){
       x = $scope.data.wavelet_gather.length - 1;
     }
 
+    $scope.frequencyStr = x.toString();
+    $scope.changeFrequencyStr();
+    
+    $scope.wGWigLine
+      .attr("x1", xScale($scope.frequency))
+      .attr("x2", xScale($scope.frequency));
+  }
+
+  function wGHorLineRedraw(){
+    var xScale = $scope.wGPlot.xScale;
+    var yScale = $scope.wGPlot.yScale;
+    var y = Math.floor(yScale.invert(d3.event.y));
+
     if(y < 0){
       y = 0;
-    } else if(y > $scope.data.seismic[0].length - 1){
-      y = $scope.data.seismic[0].length - 1;
+    } else if(y > $scope.data.wavelet_gather[0].length - 1){
+      y = $scope.data.wavelet_gather[0].length - 1;
     }
 
-    $scope.frequencyStr = x.toString();
     $scope.twtStr = y.toString();
-    $scope.changeFrequencyStr();
     $scope.changeTWTStr();
-    $scope.oGCir
-      .attr("cy", $scope.oGPlot.yScale($scope.twt));
-    $scope.vDCir
-      .attr("cy", $scope.vDPlot.yScale($scope.twt));
-    $scope.wGCir
-      .attr("cx", $scope.wGPlot.xScale($scope.frequency))
-      .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  };
+    
+    $scope.wGHorLine
+      .attr("y1", yScale($scope.twt))
+      .attr("y2", yScale($scope.twt));
+  }
+
+  // function wGCirRedraw(){
+  //   // Set x and y, flooring them.
+  //   var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
+  //   var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
+
+  //   // Check to make sure we are within the boundaries
+  //   if(x < 0){
+  //     x = 0;
+  //   } else if(x > $scope.data.wavelet_gather.length - 1) {
+  //     x = $scope.data.wavelet_gather.length - 1;
+  //   }
+
+  //   if(y < 0){
+  //     y = 0;
+  //   } else if(y > $scope.data.seismic[0].length - 1){
+  //     y = $scope.data.seismic[0].length - 1;
+  //   }
+
+  //   $scope.frequencyStr = x.toString();
+  //   $scope.twtStr = y.toString();
+  //   $scope.changeFrequencyStr();
+  //   $scope.changeTWTStr();
+  //   $scope.oGCir
+  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  //   $scope.vDCir
+  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  //   $scope.wGCir
+  //     .attr("cx", $scope.wGPlot.xScale($scope.frequency))
+  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  // };
 
   $scope.plotAmplitudeTrace = function(data, height){
     // Amplitude Trace
@@ -768,7 +863,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .setDuration(5)
         .draw();
 
-      console.log($scope.vDLog);
     } else {
       $scope.vDLog
         .setXMin($scope.trace)
diff --git a/static/js/g3.js b/static/js/g3.js
index 0d7e575..4d72190 100644
--- a/static/js/g3.js
+++ b/static/js/g3.js
@@ -1,4 +1,4 @@
-/*! g3 - v0.0.1 - 2015-09-22 - justinkheisler */
+/*! g3 - v0.0.1 - 2015-09-28 - justinkheisler */
 'use strict';
 ;(function (window) {
 
@@ -712,16 +712,7 @@ g3.wiggle = function(plot, data, options){
 		return this;
 	};
 
-	wiggle.test = function(){
-		console.log(d3.event);
-		// var position = [d3.event.x, d3.event.y];
-		wiggle.cir
-			.attr("cx", d3.event.x)
-			.attr("cy", d3.event.y);
-	}
-
 	wiggle.draw = function() {
-
 		for(var k = data.length - 1; k >= 0; k--){
 	    if(this.skip === 0 || k % this.skip === 0){
 	      var mean = d3.mean(data[k]); 
@@ -746,13 +737,6 @@ g3.wiggle = function(plot, data, options){
 		        return plot.yScale(i * wiggle.yInt + wiggle.yMin);
 		      });
 
-        plot.svg.append('path')
-          .attr('class', 'line' + k)
-          .attr('d', line(data[k]))
-          .attr('stroke', 'black')
-          .attr('stroke-width', 0.50)
-          .attr('fill', 'none');
-
         plot.svg.datum(data[k]);
 
         plot.svg.append('clipPath')
@@ -768,6 +752,13 @@ g3.wiggle = function(plot, data, options){
           .attr('d', area.x0(function (d, i){ 
             return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
           }));
+
+        plot.svg.append('path')
+          .attr('class', 'line' + k)
+          .attr('d', line(data[k]))
+          .attr('stroke', 'black')
+          .attr('stroke-width', 0.50)
+          .attr('fill', 'none');
 	    }
 	  }
 	  return this;
diff --git a/templates/model2.html b/templates/model2.html
index d51c4f9..aeb5cf5 100644
--- a/templates/model2.html
+++ b/templates/model2.html
@@ -253,7 +253,7 @@ <h3 class="panel-title col-xs-10">
       </div>
     </div>
   </div>
-  <div class="panel panel-default">
+  <div class="panel panel-default" ng-show="updateClicked">
 		<div class="panel-heading">
 		  <div ng-click="exportCSV()" style="float:right; margin-top:-2px;"><a class="btn btn-default btn-xs">Export CSV</a></div>
 			<h3 class="panel-title">Metadata</h3>

From 1fdb758baac3d463cbced369ad54823905a682e8 Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Mon, 28 Sep 2015 13:19:24 -0300
Subject: [PATCH 08/12] new invisible handles for offset gather wiggle and
 horizon

---
 static/js/app.js                | 153 +++++++++++++++++++++++++-------
 static/js/controllers/2DCtrl.js | 153 +++++++++++++++++++++++++-------
 2 files changed, 242 insertions(+), 64 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 538c2b6..ec69c3e 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -469,65 +469,154 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("x2", xScale(data.offset_gather.length - 1))
         .attr("y2", yScale($scope.twt));
 
-        var drag = d3.behavior.drag()  // capture mouse drag event
-          .on('drag', oGCirRedraw);
+        // var drag = d3.behavior.drag()  // capture mouse drag event
+        //   .on('drag', oGCirRedraw);
 
-        var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-        $scope.oGCir = $scope.oGPlot.svg.append('circle')
-          .attr("class", "ogcir")
-          .attr("r", 5)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .style("opacity", 0.5)
-          .call(drag);
+        // Register drag trigger for wGWigLine
+        var wigLineDrag = d3.behavior.drag()
+          .on('drag', oGWigLineRedraw);
+
+        // Register drag trigger for wGHorLine
+        var horLineDrag = d3.behavior.drag()
+          .on('drag', oGHorLineRedraw);
+
+        // Draw invisible line
+        $scope.oGWigLine = $scope.oGPlot.svg.append('line')
+          .attr("class", "ogwigline")
+          .style("stroke-width", 10)
+          .style("stroke", "black")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale($scope.offset))
+          .attr("y1", yScale(data.offset_gather[0].length - 1))
+          .attr("x2", xScale($scope.offset))
+          .attr("y2", yScale(0))
+          .call(wigLineDrag);
+
+        // Draw invisible horizon line
+        $scope.oGHorLine = $scope.oGPlot.svg.append('line')
+          .style("stroke-width", 10)
+          .style("stroke", "green")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale(0))
+          .attr("y1", yScale($scope.twt))
+          .attr("x2", xScale(data.offset_gather.length - 1))
+          .attr("y2", yScale($scope.twt))
+          .call(horLineDrag);
 
-        $(".ogcir").mouseup(function(e){
+        // Register mouseup trigger for wgline
+        $(".ogwigline").mouseup(function(e){
           e.preventDefault();
           $scope.update_data();
         });
+
+        // var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+        // $scope.oGCir = $scope.oGPlot.svg.append('circle')
+        //   .attr("class", "ogcir")
+        //   .attr("r", 5)
+        //   .attr("cx", position[0])
+        //   .attr("cy", position[1])
+        //   .style("opacity", 0.5)
+        //   .call(drag);
+
+        // $(".ogcir").mouseup(function(e){
+        //   e.preventDefault();
+        //   $scope.update_data();
+        // });
     } else {
-      position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-      $scope.oGCir
-        .attr("cx", position[0])
-        .attr("cy", position[1]);
+      // position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+      // $scope.oGCir
+      //   .attr("cx", position[0])
+      //   .attr("cy", position[1]);
 
       $scope.oGHor
         .transition()
         .duration(5)
         .attr("y1", yScale($scope.twt))
         .attr("y2", yScale($scope.twt));
+
+      // Redraw the invisible line
+      $scope.oGWigLine
+        .attr("x1", xScale($scope.offset))
+        .attr("y1", yScale(data.offset_gather[0].length - 1))
+        .attr("x2", xScale($scope.offset))
+        .attr("y2", yScale(0));
+
+      // Redraw invisible horizon
+      $scope.oGHorLine
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
     }
   };
 
-  function oGCirRedraw(){
-    var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
-    var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
+    function oGWigLineRedraw(){
+    var xScale = $scope.oGPlot.xScale;
+    var yScale = $scope.oGPlot.yScale;
+    var x = Math.floor(xScale.invert(d3.event.x));
 
-    // Check to make sure we are within the boundaries
     if(x < 0){
       x = 0;
-    } else if(x > $scope.data.offset_gather.length - 1) {
+    } else if(x > $scope.data.offset_gather.length - 1){
       x = $scope.data.offset_gather.length - 1;
     }
 
+    $scope.offsetStr = x.toString();
+    $scope.changeOffsetStr();
+    
+    $scope.oGWigLine
+      .attr("x1", xScale($scope.offset))
+      .attr("x2", xScale($scope.offset));
+  }
+
+  function oGHorLineRedraw(){
+    var xScale = $scope.oGPlot.xScale;
+    var yScale = $scope.oGPlot.yScale;
+    var y = Math.floor(yScale.invert(d3.event.y));
+
     if(y < 0){
       y = 0;
-    } else if(y > $scope.data.seismic[0].length - 1){
-      y = $scope.data.seismic[0].length - 1;
+    } else if(y > $scope.data.offset_gather[0].length - 1){
+      y = $scope.data.offset_gather[0].length - 1;
     }
 
-    $scope.offsetStr = x.toString();
     $scope.twtStr = y.toString();
-    $scope.changeOffsetStr();
     $scope.changeTWTStr();
-    $scope.wGCir
-      .attr("cy", $scope.wGPlot.yScale($scope.twt));
-    $scope.vDCir
-      .attr("cy", $scope.vDPlot.yScale($scope.twt));
-    $scope.oGCir
-      .attr("cx", $scope.oGPlot.xScale($scope.offset))
-      .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  };
+    
+    $scope.oGHorLine
+      .attr("y1", yScale($scope.twt))
+      .attr("y2", yScale($scope.twt));
+  }
+
+  // function oGCirRedraw(){
+  //   var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
+  //   var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
+
+  //   // Check to make sure we are within the boundaries
+  //   if(x < 0){
+  //     x = 0;
+  //   } else if(x > $scope.data.offset_gather.length - 1) {
+  //     x = $scope.data.offset_gather.length - 1;
+  //   }
+
+  //   if(y < 0){
+  //     y = 0;
+  //   } else if(y > $scope.data.seismic[0].length - 1){
+  //     y = $scope.data.seismic[0].length - 1;
+  //   }
+
+  //   $scope.offsetStr = x.toString();
+  //   $scope.twtStr = y.toString();
+  //   $scope.changeOffsetStr();
+  //   $scope.changeTWTStr();
+  //   $scope.wGCir
+  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  //   $scope.vDCir
+  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  //   $scope.oGCir
+  //     .attr("cx", $scope.oGPlot.xScale($scope.offset))
+  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  // };
 
   $scope.plotWavelet = function(data, height, max){
     // Wavelet Gather Plot
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index 375ec9b..518c89c 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -457,65 +457,154 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("x2", xScale(data.offset_gather.length - 1))
         .attr("y2", yScale($scope.twt));
 
-        var drag = d3.behavior.drag()  // capture mouse drag event
-          .on('drag', oGCirRedraw);
+        // var drag = d3.behavior.drag()  // capture mouse drag event
+        //   .on('drag', oGCirRedraw);
 
-        var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-        $scope.oGCir = $scope.oGPlot.svg.append('circle')
-          .attr("class", "ogcir")
-          .attr("r", 5)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .style("opacity", 0.5)
-          .call(drag);
+        // Register drag trigger for wGWigLine
+        var wigLineDrag = d3.behavior.drag()
+          .on('drag', oGWigLineRedraw);
+
+        // Register drag trigger for wGHorLine
+        var horLineDrag = d3.behavior.drag()
+          .on('drag', oGHorLineRedraw);
+
+        // Draw invisible line
+        $scope.oGWigLine = $scope.oGPlot.svg.append('line')
+          .attr("class", "ogwigline")
+          .style("stroke-width", 10)
+          .style("stroke", "black")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale($scope.offset))
+          .attr("y1", yScale(data.offset_gather[0].length - 1))
+          .attr("x2", xScale($scope.offset))
+          .attr("y2", yScale(0))
+          .call(wigLineDrag);
+
+        // Draw invisible horizon line
+        $scope.oGHorLine = $scope.oGPlot.svg.append('line')
+          .style("stroke-width", 10)
+          .style("stroke", "green")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale(0))
+          .attr("y1", yScale($scope.twt))
+          .attr("x2", xScale(data.offset_gather.length - 1))
+          .attr("y2", yScale($scope.twt))
+          .call(horLineDrag);
 
-        $(".ogcir").mouseup(function(e){
+        // Register mouseup trigger for wgline
+        $(".ogwigline").mouseup(function(e){
           e.preventDefault();
           $scope.update_data();
         });
+
+        // var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+        // $scope.oGCir = $scope.oGPlot.svg.append('circle')
+        //   .attr("class", "ogcir")
+        //   .attr("r", 5)
+        //   .attr("cx", position[0])
+        //   .attr("cy", position[1])
+        //   .style("opacity", 0.5)
+        //   .call(drag);
+
+        // $(".ogcir").mouseup(function(e){
+        //   e.preventDefault();
+        //   $scope.update_data();
+        // });
     } else {
-      position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-      $scope.oGCir
-        .attr("cx", position[0])
-        .attr("cy", position[1]);
+      // position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+      // $scope.oGCir
+      //   .attr("cx", position[0])
+      //   .attr("cy", position[1]);
 
       $scope.oGHor
         .transition()
         .duration(5)
         .attr("y1", yScale($scope.twt))
         .attr("y2", yScale($scope.twt));
+
+      // Redraw the invisible line
+      $scope.oGWigLine
+        .attr("x1", xScale($scope.offset))
+        .attr("y1", yScale(data.offset_gather[0].length - 1))
+        .attr("x2", xScale($scope.offset))
+        .attr("y2", yScale(0));
+
+      // Redraw invisible horizon
+      $scope.oGHorLine
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
     }
   };
 
-  function oGCirRedraw(){
-    var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
-    var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
+    function oGWigLineRedraw(){
+    var xScale = $scope.oGPlot.xScale;
+    var yScale = $scope.oGPlot.yScale;
+    var x = Math.floor(xScale.invert(d3.event.x));
 
-    // Check to make sure we are within the boundaries
     if(x < 0){
       x = 0;
-    } else if(x > $scope.data.offset_gather.length - 1) {
+    } else if(x > $scope.data.offset_gather.length - 1){
       x = $scope.data.offset_gather.length - 1;
     }
 
+    $scope.offsetStr = x.toString();
+    $scope.changeOffsetStr();
+    
+    $scope.oGWigLine
+      .attr("x1", xScale($scope.offset))
+      .attr("x2", xScale($scope.offset));
+  }
+
+  function oGHorLineRedraw(){
+    var xScale = $scope.oGPlot.xScale;
+    var yScale = $scope.oGPlot.yScale;
+    var y = Math.floor(yScale.invert(d3.event.y));
+
     if(y < 0){
       y = 0;
-    } else if(y > $scope.data.seismic[0].length - 1){
-      y = $scope.data.seismic[0].length - 1;
+    } else if(y > $scope.data.offset_gather[0].length - 1){
+      y = $scope.data.offset_gather[0].length - 1;
     }
 
-    $scope.offsetStr = x.toString();
     $scope.twtStr = y.toString();
-    $scope.changeOffsetStr();
     $scope.changeTWTStr();
-    $scope.wGCir
-      .attr("cy", $scope.wGPlot.yScale($scope.twt));
-    $scope.vDCir
-      .attr("cy", $scope.vDPlot.yScale($scope.twt));
-    $scope.oGCir
-      .attr("cx", $scope.oGPlot.xScale($scope.offset))
-      .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  };
+    
+    $scope.oGHorLine
+      .attr("y1", yScale($scope.twt))
+      .attr("y2", yScale($scope.twt));
+  }
+
+  // function oGCirRedraw(){
+  //   var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
+  //   var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
+
+  //   // Check to make sure we are within the boundaries
+  //   if(x < 0){
+  //     x = 0;
+  //   } else if(x > $scope.data.offset_gather.length - 1) {
+  //     x = $scope.data.offset_gather.length - 1;
+  //   }
+
+  //   if(y < 0){
+  //     y = 0;
+  //   } else if(y > $scope.data.seismic[0].length - 1){
+  //     y = $scope.data.seismic[0].length - 1;
+  //   }
+
+  //   $scope.offsetStr = x.toString();
+  //   $scope.twtStr = y.toString();
+  //   $scope.changeOffsetStr();
+  //   $scope.changeTWTStr();
+  //   $scope.wGCir
+  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  //   $scope.vDCir
+  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  //   $scope.oGCir
+  //     .attr("cx", $scope.oGPlot.xScale($scope.offset))
+  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  // };
 
   $scope.plotWavelet = function(data, height, max){
     // Wavelet Gather Plot

From 3c67d5aebfd4e29bc2dae860bddee97718b77a6f Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Mon, 28 Sep 2015 15:14:55 -0300
Subject: [PATCH 09/12] plugged in invisible line for seismic wiggle and
 horizon

---
 static/js/app.js                | 154 +++++++++++++++++++++++++-------
 static/js/controllers/2DCtrl.js | 154 +++++++++++++++++++++++++-------
 2 files changed, 242 insertions(+), 66 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index ec69c3e..9336687 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -349,27 +349,78 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("x2", xScale(data.seismic.length - 1))
         .attr("y2", yScale($scope.twt));
 
-        var drag = d3.behavior.drag()  // capture mouse drag event
-          .on('drag', vDCirRedraw);
-
-        var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-        $scope.vDCir = $scope.vDPlot.svg.append('circle')
-          .attr("class", "vdcir")
-          .attr("r", 5)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .style("opacity", 0.5)
-          .call(drag);
-
-        $(".vdcir").mouseup(function(e){
+        // var drag = d3.behavior.drag()  // capture mouse drag event
+        //   .on('drag', vDCirRedraw);
+
+        // var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+        // $scope.vDCir = $scope.vDPlot.svg.append('circle')
+        //   .attr("class", "vdcir")
+        //   .attr("r", 5)
+        //   .attr("cx", position[0])
+        //   .attr("cy", position[1])
+        //   .style("opacity", 0.5)
+        //   .call(drag);
+
+        // $(".vdcir").mouseup(function(e){
+        //   e.preventDefault();
+        //   $scope.update_data();
+        // });
+
+        // Register drag trigger for wGWigLine
+        var wigLineDrag = d3.behavior.drag()
+          .on('drag', vDWigLineRedraw);
+
+        // Register drag trigger for wGHorLine
+        var horLineDrag = d3.behavior.drag()
+          .on('drag', vDHorLineRedraw);
+
+        // Draw invisible line
+        $scope.vDWigLine = $scope.vDPlot.svg.append('line')
+          .attr("class", "vdwigline")
+          .style("stroke-width", 10)
+          .style("stroke", "black")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale($scope.trace))
+          .attr("y1", yScale(data.seismic[0].length - 1))
+          .attr("x2", xScale($scope.trace))
+          .attr("y2", yScale(0))
+          .call(wigLineDrag);
+
+        // Draw invisible horizon line
+        $scope.vDHorLine = $scope.vDPlot.svg.append('line')
+          .style("stroke-width", 10)
+          .style("stroke", "green")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale(0))
+          .attr("y1", yScale($scope.twt))
+          .attr("x2", xScale(data.seismic.length - 1))
+          .attr("y2", yScale($scope.twt))
+          .call(horLineDrag);
+
+        // Register mouseup trigger for wgline
+        $(".vdwigline").mouseup(function(e){
           e.preventDefault();
           $scope.update_data();
         });
     } else {
-      position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-      $scope.vDCir
-        .attr("cx", position[0])
-        .attr("cy", position[1]);
+      // position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+      // $scope.vDCir
+      //   .attr("cx", position[0])
+      //   .attr("cy", position[1]);
+
+      // Redraw the invisible line
+      $scope.vDWigLine
+        .attr("x1", xScale($scope.trace))
+        .attr("y1", yScale(data.seismic[0].length - 1))
+        .attr("x2", xScale($scope.trace))
+        .attr("y2", yScale(0));
+
+      // Redraw invisible horizon
+      $scope.vDHorLine
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
 
       $scope.vDHor
         .transition()
@@ -379,35 +430,72 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  function vDCirRedraw(){
-    var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
-    var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
+  function vDWigLineRedraw(){
+    var xScale = $scope.vDPlot.xScale;
+    var yScale = $scope.vDPlot.yScale;
+    var x = Math.floor(xScale.invert(d3.event.x));
 
-    // Check to make sure we are within the boundaries
     if(x < 0){
       x = 0;
-    } else if(x > $scope.data.seismic.length - 1) {
+    } else if(x > $scope.data.seismic.length - 1){
       x = $scope.data.seismic.length - 1;
     }
 
+    $scope.traceStr = x.toString();
+    $scope.changeTraceStr();
+    
+    $scope.vDWigLine
+      .attr("x1", xScale($scope.trace))
+      .attr("x2", xScale($scope.trace));
+  }
+
+  function vDHorLineRedraw(){
+    var xScale = $scope.vDPlot.xScale;
+    var yScale = $scope.vDPlot.yScale;
+    var y = Math.floor(yScale.invert(d3.event.y));
+
     if(y < 0){
       y = 0;
     } else if(y > $scope.data.seismic[0].length - 1){
       y = $scope.data.seismic[0].length - 1;
     }
 
-    $scope.traceStr = x.toString();
     $scope.twtStr = y.toString();
-    $scope.changeTraceStr();
     $scope.changeTWTStr();
-    $scope.wGCir
-      .attr("cy", $scope.wGPlot.yScale($scope.twt));
-    $scope.oGCir
-      .attr("cy", $scope.oGPlot.yScale($scope.twt));
-    $scope.vDCir
-      .attr("cx", $scope.vDPlot.xScale($scope.trace))
-      .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  };
+    
+    $scope.vDHorLine
+      .attr("y1", yScale($scope.twt))
+      .attr("y2", yScale($scope.twt));
+  }
+  // function vDCirRedraw(){
+  //   var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
+  //   var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
+
+  //   // Check to make sure we are within the boundaries
+  //   if(x < 0){
+  //     x = 0;
+  //   } else if(x > $scope.data.seismic.length - 1) {
+  //     x = $scope.data.seismic.length - 1;
+  //   }
+
+  //   if(y < 0){
+  //     y = 0;
+  //   } else if(y > $scope.data.seismic[0].length - 1){
+  //     y = $scope.data.seismic[0].length - 1;
+  //   }
+
+  //   $scope.traceStr = x.toString();
+  //   $scope.twtStr = y.toString();
+  //   $scope.changeTraceStr();
+  //   $scope.changeTWTStr();
+  //   $scope.wGCir
+  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  //   $scope.oGCir
+  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  //   $scope.vDCir
+  //     .attr("cx", $scope.vDPlot.xScale($scope.trace))
+  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  // };
 
   $scope.plotOffset = function(data, height, max){
     // Offset Gather Plot
@@ -550,7 +638,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-    function oGWigLineRedraw(){
+  function oGWigLineRedraw(){
     var xScale = $scope.oGPlot.xScale;
     var yScale = $scope.oGPlot.yScale;
     var x = Math.floor(xScale.invert(d3.event.x));
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index 518c89c..cc33e0e 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -337,27 +337,78 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("x2", xScale(data.seismic.length - 1))
         .attr("y2", yScale($scope.twt));
 
-        var drag = d3.behavior.drag()  // capture mouse drag event
-          .on('drag', vDCirRedraw);
-
-        var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-        $scope.vDCir = $scope.vDPlot.svg.append('circle')
-          .attr("class", "vdcir")
-          .attr("r", 5)
-          .attr("cx", position[0])
-          .attr("cy", position[1])
-          .style("opacity", 0.5)
-          .call(drag);
-
-        $(".vdcir").mouseup(function(e){
+        // var drag = d3.behavior.drag()  // capture mouse drag event
+        //   .on('drag', vDCirRedraw);
+
+        // var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+        // $scope.vDCir = $scope.vDPlot.svg.append('circle')
+        //   .attr("class", "vdcir")
+        //   .attr("r", 5)
+        //   .attr("cx", position[0])
+        //   .attr("cy", position[1])
+        //   .style("opacity", 0.5)
+        //   .call(drag);
+
+        // $(".vdcir").mouseup(function(e){
+        //   e.preventDefault();
+        //   $scope.update_data();
+        // });
+
+        // Register drag trigger for wGWigLine
+        var wigLineDrag = d3.behavior.drag()
+          .on('drag', vDWigLineRedraw);
+
+        // Register drag trigger for wGHorLine
+        var horLineDrag = d3.behavior.drag()
+          .on('drag', vDHorLineRedraw);
+
+        // Draw invisible line
+        $scope.vDWigLine = $scope.vDPlot.svg.append('line')
+          .attr("class", "vdwigline")
+          .style("stroke-width", 10)
+          .style("stroke", "black")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale($scope.trace))
+          .attr("y1", yScale(data.seismic[0].length - 1))
+          .attr("x2", xScale($scope.trace))
+          .attr("y2", yScale(0))
+          .call(wigLineDrag);
+
+        // Draw invisible horizon line
+        $scope.vDHorLine = $scope.vDPlot.svg.append('line')
+          .style("stroke-width", 10)
+          .style("stroke", "green")
+          .style("cursor", "pointer")
+          .style("opacity", 0)
+          .attr("x1", xScale(0))
+          .attr("y1", yScale($scope.twt))
+          .attr("x2", xScale(data.seismic.length - 1))
+          .attr("y2", yScale($scope.twt))
+          .call(horLineDrag);
+
+        // Register mouseup trigger for wgline
+        $(".vdwigline").mouseup(function(e){
           e.preventDefault();
           $scope.update_data();
         });
     } else {
-      position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-      $scope.vDCir
-        .attr("cx", position[0])
-        .attr("cy", position[1]);
+      // position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
+      // $scope.vDCir
+      //   .attr("cx", position[0])
+      //   .attr("cy", position[1]);
+
+      // Redraw the invisible line
+      $scope.vDWigLine
+        .attr("x1", xScale($scope.trace))
+        .attr("y1", yScale(data.seismic[0].length - 1))
+        .attr("x2", xScale($scope.trace))
+        .attr("y2", yScale(0));
+
+      // Redraw invisible horizon
+      $scope.vDHorLine
+        .attr("y1", yScale($scope.twt))
+        .attr("y2", yScale($scope.twt));
 
       $scope.vDHor
         .transition()
@@ -367,35 +418,72 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-  function vDCirRedraw(){
-    var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
-    var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
+  function vDWigLineRedraw(){
+    var xScale = $scope.vDPlot.xScale;
+    var yScale = $scope.vDPlot.yScale;
+    var x = Math.floor(xScale.invert(d3.event.x));
 
-    // Check to make sure we are within the boundaries
     if(x < 0){
       x = 0;
-    } else if(x > $scope.data.seismic.length - 1) {
+    } else if(x > $scope.data.seismic.length - 1){
       x = $scope.data.seismic.length - 1;
     }
 
+    $scope.traceStr = x.toString();
+    $scope.changeTraceStr();
+    
+    $scope.vDWigLine
+      .attr("x1", xScale($scope.trace))
+      .attr("x2", xScale($scope.trace));
+  }
+
+  function vDHorLineRedraw(){
+    var xScale = $scope.vDPlot.xScale;
+    var yScale = $scope.vDPlot.yScale;
+    var y = Math.floor(yScale.invert(d3.event.y));
+
     if(y < 0){
       y = 0;
     } else if(y > $scope.data.seismic[0].length - 1){
       y = $scope.data.seismic[0].length - 1;
     }
 
-    $scope.traceStr = x.toString();
     $scope.twtStr = y.toString();
-    $scope.changeTraceStr();
     $scope.changeTWTStr();
-    $scope.wGCir
-      .attr("cy", $scope.wGPlot.yScale($scope.twt));
-    $scope.oGCir
-      .attr("cy", $scope.oGPlot.yScale($scope.twt));
-    $scope.vDCir
-      .attr("cx", $scope.vDPlot.xScale($scope.trace))
-      .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  };
+    
+    $scope.vDHorLine
+      .attr("y1", yScale($scope.twt))
+      .attr("y2", yScale($scope.twt));
+  }
+  // function vDCirRedraw(){
+  //   var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
+  //   var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
+
+  //   // Check to make sure we are within the boundaries
+  //   if(x < 0){
+  //     x = 0;
+  //   } else if(x > $scope.data.seismic.length - 1) {
+  //     x = $scope.data.seismic.length - 1;
+  //   }
+
+  //   if(y < 0){
+  //     y = 0;
+  //   } else if(y > $scope.data.seismic[0].length - 1){
+  //     y = $scope.data.seismic[0].length - 1;
+  //   }
+
+  //   $scope.traceStr = x.toString();
+  //   $scope.twtStr = y.toString();
+  //   $scope.changeTraceStr();
+  //   $scope.changeTWTStr();
+  //   $scope.wGCir
+  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  //   $scope.oGCir
+  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  //   $scope.vDCir
+  //     .attr("cx", $scope.vDPlot.xScale($scope.trace))
+  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  // };
 
   $scope.plotOffset = function(data, height, max){
     // Offset Gather Plot
@@ -538,7 +626,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
   };
 
-    function oGWigLineRedraw(){
+  function oGWigLineRedraw(){
     var xScale = $scope.oGPlot.xScale;
     var yScale = $scope.oGPlot.yScale;
     var x = Math.floor(xScale.invert(d3.event.x));

From 5847e12a6e0871256c561ecb6e0c676b9694a07b Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Tue, 29 Sep 2015 16:53:10 -0300
Subject: [PATCH 10/12] updated to latest g3, converted 2D code to handle the
 latest g3

---
 static/js/app.js                |  13 +--
 static/js/controllers/2DCtrl.js |  13 +--
 static/js/g3.js                 | 158 ++++++++++++++++++++------------
 3 files changed, 113 insertions(+), 71 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 9336687..13a5754 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -217,15 +217,15 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
 
     $scope.aTHor
-      .setGain($scope.gain)
+      .gain($scope.gain)
       .reDraw($scope.aTArr);
 
     $scope.aOHor
-      .setGain($scope.gain)
+      .gain($scope.gain)
       .reDraw($scope.aOArr);
 
     $scope.aFHor
-      .setGain($scope.gain)
+      .gain($scope.gain)
       .reDraw($scope.aFArr);
   };
 
@@ -950,8 +950,9 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aTHor){
       $scope.aTHor = g3.horizon($scope.aTPlot, $scope.aTArr)
-        .setDuration(5)
+        .duration(5)
         .draw();
+      console.log($scope.aTHor);
     } else {
       $scope.aTHor.reDraw($scope.aTArr);
     }
@@ -994,7 +995,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aOHor){
       $scope.aOHor = g3.horizon($scope.aOPlot, $scope.aOArr)
-        .setDuration(5)
+        .duration(5)
         .draw();
     } else {
       $scope.aOHor.reDraw($scope.aOArr);
@@ -1035,7 +1036,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aFHor){
       $scope.aFHor = g3.horizon($scope.aFPlot, $scope.aFArr)
-        .setDuration(5)
+        .duration(5)
         .draw();
     } else {
       $scope.aFHor.reDraw($scope.aFArr);
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index cc33e0e..ba9f9f7 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -205,15 +205,15 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     }
 
     $scope.aTHor
-      .setGain($scope.gain)
+      .gain($scope.gain)
       .reDraw($scope.aTArr);
 
     $scope.aOHor
-      .setGain($scope.gain)
+      .gain($scope.gain)
       .reDraw($scope.aOArr);
 
     $scope.aFHor
-      .setGain($scope.gain)
+      .gain($scope.gain)
       .reDraw($scope.aFArr);
   };
 
@@ -938,8 +938,9 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aTHor){
       $scope.aTHor = g3.horizon($scope.aTPlot, $scope.aTArr)
-        .setDuration(5)
+        .duration(5)
         .draw();
+      console.log($scope.aTHor);
     } else {
       $scope.aTHor.reDraw($scope.aTArr);
     }
@@ -982,7 +983,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aOHor){
       $scope.aOHor = g3.horizon($scope.aOPlot, $scope.aOArr)
-        .setDuration(5)
+        .duration(5)
         .draw();
     } else {
       $scope.aOHor.reDraw($scope.aOArr);
@@ -1023,7 +1024,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aFHor){
       $scope.aFHor = g3.horizon($scope.aFPlot, $scope.aFArr)
-        .setDuration(5)
+        .duration(5)
         .draw();
     } else {
       $scope.aFHor.reDraw($scope.aFArr);
diff --git a/static/js/g3.js b/static/js/g3.js
index 4d72190..4826862 100644
--- a/static/js/g3.js
+++ b/static/js/g3.js
@@ -1,4 +1,4 @@
-/*! g3 - v0.0.1 - 2015-09-28 - justinkheisler */
+/*! g3 - v0.0.1 - 2015-09-29 - justinkheisler */
 'use strict';
 ;(function (window) {
 
@@ -21,77 +21,117 @@ function createAxis(scale, innerTickSize, orient, ticks){
 		.orient(orient)
 		.ticks(ticks);
 }
+
+// Attach horizon creation function to g3
 g3.horizon = function(plot, data){
+  return new horizon(plot, data);
+}
 
+// Constructor
+// Only set variables that are set by items passed in, otherwise set using prototype
+var horizon = function horizon(plot, data){
 	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
 	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+  this._data = data;
+  this._plot = plot;
+  this._xMin = plot.xDomain[0];
+  this._yMin = plot.yDomain[0];
+  return this;
+};
 
-	var horizon = {};
-	horizon.interpolate = 'basis';
-	horizon.xInt = 1;
-	horizon.xMin = plot.xDomain[0];
-	horizon.yInt = 1;
-	horizon.yMin = plot.yDomain[0];
-	horizon.duration = 500;
-	horizon.gain = 1;
-
-	horizon.setInterpolate = function(interpolate){
-		this.interpolate = interpolate;
-		return this;
-	};
+// Set remaining variables
+horizon.prototype._xInt = 1;
+horizon.prototype._yInt = 1;
+horizon.prototype._duration = 500;
+horizon.prototype._gain = 1;
+horizon.prototype._interpolate = 'basis';
+horizon.prototype._color = 'green';
+horizon.prototype._strokeWidth = 1.5;
+
+// Horizon Setting functions
+horizon.prototype.interpolate = function(interpolate){
+	this._interpolate = interpolate;
+	return this;
+};
 
-	horizon.setXMin = function(xMin){
-		this.xMin = xMin; 
-		return this;
-	};
+horizon.prototype.xMin = function(xMin){
+	this._xMin = xMin;
+	return this;
+};
 
-	horizon.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	};
+horizon.prototype.yMin = function(yMin){
+	this._yMin = yMin;
+	return this;
+};
 
-	horizon.setGain = function(gain){
-		this.gain = gain;
-		return this;
-	};
+horizon.prototype.xInt = function(xInt){
+	this._xInt = xInt;
+	return this;
+};
 
-	horizon.draw = function(){
-		var lineFunc = d3.svg.line()
-			.x(function (d, i) {
-				return plot.xScale(i + horizon.xMin);
-			})
-			.y(function (d) {
-				return plot.yScale(d * horizon.gain);
-			})
-			.interpolate(this.interpolate);
-
-		this.svg = plot.svg.append('svg:path')
-			.attr('d', lineFunc(data))
-			.attr('stroke', 'green')
-			.attr('stroke-width', 1.5)
-			.attr('fill', 'none');
-		return this;
-	};
+horizon.prototype.yInt = function(yInt){
+	this._yInt = yInt;
+	return this;
+};
 
-	horizon.reDraw = function(data){
-		var lineFunc = d3.svg.line()
-			.x(function (d, i) {
-				return plot.xScale(i + horizon.xMin);
-			})
-			.y(function (d) {
-				return plot.yScale(d * horizon.gain);
-			})
-			.interpolate(this.interpolate);
-		
-		this.svg.transition()
-			.duration(this.duration)
-			.attr('d', lineFunc(data));
-		return this;
-	};
+horizon.prototype.duration = function(duration){
+	this._duration = duration;
+	return this;
+};
+
+horizon.prototype.gain = function(gain){
+	this._gain = gain;
+	return this;
+};
+
+horizon.prototype.color = function(color){
+	this._color = color;
+	return this;
+};
 
-	return horizon;
+horizon.prototype.strokeWidth = function(strokeWidth){
+	this._strokeWidth = strokeWidth;
+	return this;
 };
 
+horizon.prototype.lineFunc = function(){
+	var plot = this._plot,
+	xMin = this._xMin,
+	gain = this._gain,
+	interpolate = this._interpolate;
+
+	var lineFunc = d3.svg.line()
+		.x(function (d, i){
+			return plot.xScale(i + xMin);
+		})
+		.y( function (d) {
+			return plot.yScale(d * gain);
+		})
+		.interpolate(interpolate);
+
+	return lineFunc;
+};
+
+// Horizon Drawing functions
+horizon.prototype.draw = function() {
+	var lineFunc = this.lineFunc();
+	this._svg = this._plot.svg.append('path')
+		.attr('d', lineFunc(this._data))
+		.attr('stroke', this._color)
+		.attr('stroke-width', this._strokeWidth)
+		.attr('fill', 'none');
+
+	return this;
+};
+
+horizon.prototype.reDraw = function(data){
+	var lineFunc = this.lineFunc();
+	
+	this._svg.transition()
+		.duration(this._duration)
+		.attr('d', lineFunc(data));
+	return this;
+};
 g3.log = function(plot, data){
 	
 	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }

From 06ea931a83d0901b2e659ff5ad52cb05aacf23f5 Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Fri, 2 Oct 2015 12:09:24 -0300
Subject: [PATCH 11/12] fixing issues, reducing code, removing gain from
 amplitude plots

---
 static/js/app.js                |  552 ++++-------
 static/js/controllers/2DCtrl.js |  552 ++++-------
 static/js/g3.js                 | 1632 +++++++++++++++++--------------
 3 files changed, 1349 insertions(+), 1387 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 13a5754..de4f930 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -54,7 +54,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
             var index = event.currentTarget.attributes["data-index"].value;
             $(event.currentTarget).css('background-color', $scope.colorRange[index]);
             $scope.colorRange[index] = event.color.toHex();
-            console.log($scope.colorRange);
         });
       }
   };
@@ -159,7 +158,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.trace = Number($scope.traceStr);
     var arr = [$scope.data.seismic[$scope.trace]];
     $scope.vDLog
-      .setXMin($scope.trace)
+      .xMin($scope.trace)
       .reDraw(
         arr, 
         [0, $scope.data.seismic.length - 1], 
@@ -172,86 +171,27 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.updateTWT();
   };
 
-  $scope.getMaxAll = function(){
-    var max = [];
-    var maxT = getMax(d3.max($scope.aTArr) * $scope.gain, d3.min($scope.aTArr) * $scope.gain);
-    max.push(maxT);
-    var maxO = getMax(d3.max($scope.aOArr) * $scope.gain, d3.min($scope.aOArr) * $scope.gain);
-    max.push(maxO);
-    var maxF = getMax(d3.max($scope.aFArr) * $scope.gain, d3.min($scope.aFArr) * $scope.gain);
-    max.push(maxF);
-    return d3.max(max);
-  };
-
   $scope.updateTWT = function(){
     // Update Horizons
-    var yScale = $scope.vDPlot.yScale;
-    $scope.vDHor
-      .transition()
-      .duration(5)
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    var arr = [];
+    for(var i = 0; i < $scope.data.seismic.length; i++){ arr.push($scope.twt); }
+    $scope.vDHor.reDraw(arr);
 
-    yScale = $scope.oGPlot.yScale;
-    $scope.oGHor
-      .transition()
-      .duration(5)
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    arr = [];
+    for(var i = 0; i < $scope.data.offset_gather.length; i++){ arr.push($scope.twt); }
+    $scope.oGHor.reDraw(arr);
 
-    yScale = $scope.wGPlot.yScale;
-    $scope.wGHor
-      .transition()
-      .duration(5)
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    arr = [];
+    for(var i = 0; i < $scope.data.wavelet_gather.length; i++){ arr.push($scope.twt); }
+    $scope.wGHor.reDraw(arr);
 
     $scope.aTArr = getCrossSection($scope.data.seismic, $scope.twt);
     $scope.aOArr = getCrossSection($scope.data.offset_gather, $scope.twt);
     $scope.aFArr = getCrossSection($scope.data.wavelet_gather, $scope.twt);
-    
-    var maxAll = $scope.getMaxAll();
-
-    if(maxAll > 1){
-      $scope.updateAmpPlots(maxAll);
-    }
 
-    $scope.aTHor
-      .gain($scope.gain)
-      .reDraw($scope.aTArr);
-
-    $scope.aOHor
-      .gain($scope.gain)
-      .reDraw($scope.aOArr);
-
-    $scope.aFHor
-      .gain($scope.gain)
-      .reDraw($scope.aFArr);
-  };
-
-  $scope.updateAmpPlots = function(maxAll){
-    $scope.aTPlot
-      .reDraw(
-        [0, $scope.data.seismic.length - 1], 
-        [maxAll,-maxAll], 
-        [0, $scope.data.seismic.length - 1], 
-        [maxAll,-maxAll]
-      );
-    $scope.aOPlot
-      .reDraw(
-        [0, $scope.data.offset_gather.length - 1], 
-        [maxAll,-maxAll], 
-        [0, $scope.data.offset_gather.length - 1], 
-        [maxAll,-maxAll]
-      );
-
-    $scope.aFPlot
-      .reDraw(
-        [0, $scope.data.wavelet_gather.length - 1], 
-        [maxAll,-maxAll], 
-        [0, $scope.data.wavelet_gather.length - 1], 
-        [maxAll,-maxAll]
-      );
+    $scope.aTHor.reDraw($scope.aTArr);
+    $scope.aOHor.reDraw($scope.aOArr);
+    $scope.aFHor.reDraw($scope.aFArr);
   };
 
   $scope.changeGainStr = function(){
@@ -264,7 +204,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.offsetNum = $scope.offset * 3;
     var arr = [$scope.data.offset_gather[$scope.offset]];
     $scope.oGLog
-      .setXMin($scope.offset)
+      .xMin($scope.offset)
       .reDraw(
         arr, 
         [0, $scope.data.offset_gather.length - 1], 
@@ -277,7 +217,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.frequencyNum = $scope.data.f[$scope.frequency];
     var arr = [$scope.data.wavelet_gather[$scope.frequency]];
     $scope.wGLog
-      .setXMin($scope.frequency)
+      .xMin($scope.frequency)
       .reDraw(
         arr, 
         [0, $scope.data.wavelet_gather.length - 1], 
@@ -298,26 +238,19 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.vd_plot').width();
     if(!$scope.vDPlot){
       $scope.vDPlot = g3.plot('.vd_plot')
-        .setHeight(height)
-        .setXTitle("spatial cross-section")
-        .setYTitle("time [ms]")
-        .setWidth(width - 30)
-        .toggleX2Axis(true)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setX2TickFormat("")
-        .setY2TickFormat("")
-        .setDuration(5)
-        .setMargin(20,10,5,40)
-        .setXDomain([0, data.seismic.length - 1])
-        .setYDomain([0, data.seismic[0].length - 1])
-        .setX2Domain([0, data.seismic.length - 1])
-        .setY2Domain([0, data.seismic[0].length - 1])
+        .height(height)
+        .xTitle("spatial cross-section")
+        .yTitle("time [ms]")
+        .width(width - 30)
+        .xTickFormat("")
+        .x2TickFormat("")
+        .y2TickFormat("")
+        .margin(20,10,5,40)
+        .xDomain([0, data.seismic.length - 1])
+        .yDomain([0, data.seismic[0].length - 1])
         .draw();
     } else {
       $scope.vDPlot.reDraw(
-        [0, data.seismic.length - 1], 
-        [0, data.seismic[0].length - 1], 
         [0, data.seismic.length - 1], 
         [0, data.seismic[0].length - 1]
       );
@@ -325,29 +258,27 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     // Draw Seismic Image
     if(!$scope.seis){
       $scope.seis = g3.seismic($scope.vDPlot, data.seismic)
-        .setMax(max)
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .max(max)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .draw();
     } else {
       $scope.seis
-        .setGain($scope.gain)
-        .setColor($scope.colorScale)
+        .gain($scope.gain)
+        .colorScale($scope.colorScale)
         .reDraw(data.seismic);
     }
   };
   
   $scope.plotVDHorizon = function(data){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
-    if(!$scope.vDHor){
-      $scope.vDHor = $scope.vDPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.seismic.length - 1))
-        .attr("y2", yScale($scope.twt));
+    var xScale = $scope.vDPlot.xScale();
+    var yScale = $scope.vDPlot.yScale();
+    var arr = [];
+    for(var i = 0; i < data.seismic.length; i++){
+      arr.push($scope.twt);
+    }
+    if(!$scope.vDHor){ 
+      $scope.vDHor = g3.horizon($scope.vDPlot, arr).draw();
 
         // var drag = d3.behavior.drag()  // capture mouse drag event
         //   .on('drag', vDCirRedraw);
@@ -375,7 +306,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .on('drag', vDHorLineRedraw);
 
         // Draw invisible line
-        $scope.vDWigLine = $scope.vDPlot.svg.append('line')
+        $scope.vDWigLine = $scope.vDPlot.svg().append('line')
           .attr("class", "vdwigline")
           .style("stroke-width", 10)
           .style("stroke", "black")
@@ -388,7 +319,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .call(wigLineDrag);
 
         // Draw invisible horizon line
-        $scope.vDHorLine = $scope.vDPlot.svg.append('line')
+        $scope.vDHorLine = $scope.vDPlot.svg().append('line')
           .style("stroke-width", 10)
           .style("stroke", "green")
           .style("cursor", "pointer")
@@ -422,17 +353,13 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("y1", yScale($scope.twt))
         .attr("y2", yScale($scope.twt));
 
-      $scope.vDHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.vDHor.reDraw(arr);
     }
   };
 
   function vDWigLineRedraw(){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
+    var xScale = $scope.vDPlot.xScale();
+    var yScale = $scope.vDPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
     if(x < 0){
@@ -450,8 +377,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   }
 
   function vDHorLineRedraw(){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
+    var xScale = $scope.vDPlot.xScale();
+    var yScale = $scope.vDPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
     if(y < 0){
@@ -502,28 +429,21 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.og_plot').width();
     if(!$scope.oGPlot){
       $scope.oGPlot = g3.plot('.og_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .setXTitle("angle gather")
-        .toggleX2Axis(true)
-        .setX2Ticks(6)
-        .setXTicks(6)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setX2TickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(20,10,5,30)
-        .setXDomain([0, data.offset_gather.length - 1])
-        .setYDomain([0, data.offset_gather[0].length - 1])
-        .setX2Domain([0, data.offset_gather.length - 1])
-        .setY2Domain([0, data.offset_gather[0].length - 1])
+        .height(height)
+        .width(width - 30)
+        .xTitle("angle gather")
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .x2TickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .margin(20,10,5,30)
+        .xDomain([0, data.offset_gather.length - 1])
+        .yDomain([0, data.offset_gather[0].length - 1])
         .draw();
     } else {
       $scope.oGPlot.reDraw(
-        [0, data.offset_gather.length - 1], 
-        [0, data.offset_gather[0].length - 1], 
         [0, data.offset_gather.length - 1], 
         [0, data.offset_gather[0].length - 1]
       );
@@ -532,30 +452,30 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     // Draw Offset Gather Image
     if(!$scope.og){
       $scope.og = g3.seismic($scope.oGPlot, data.offset_gather)
-        .setMax(max)
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .max(max)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .draw();
     } else {
       $scope.og
-        .setGain($scope.gain)
-        .setColor($scope.colorScale)
+        .gain($scope.gain)
+        .colorScale($scope.colorScale)
         .reDraw(data.offset_gather);
     }
   };
 
   $scope.plotOffsetHorizon = function(data){
     // Draw Offset Horizon
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
+    var xScale = $scope.oGPlot.xScale();
+    var yScale = $scope.oGPlot.yScale();
+
+    var arr = [];
+    for(var i = 0; i < data.offset_gather.length; i++){
+      arr.push($scope.twt);
+    }
+
     if(!$scope.oGHor){
-      $scope.oGHor = $scope.oGPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.offset_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
+      $scope.oGHor = g3.horizon($scope.oGPlot, arr).draw();
 
         // var drag = d3.behavior.drag()  // capture mouse drag event
         //   .on('drag', oGCirRedraw);
@@ -569,7 +489,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .on('drag', oGHorLineRedraw);
 
         // Draw invisible line
-        $scope.oGWigLine = $scope.oGPlot.svg.append('line')
+        $scope.oGWigLine = $scope.oGPlot.svg().append('line')
           .attr("class", "ogwigline")
           .style("stroke-width", 10)
           .style("stroke", "black")
@@ -582,7 +502,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .call(wigLineDrag);
 
         // Draw invisible horizon line
-        $scope.oGHorLine = $scope.oGPlot.svg.append('line')
+        $scope.oGHorLine = $scope.oGPlot.svg().append('line')
           .style("stroke-width", 10)
           .style("stroke", "green")
           .style("cursor", "pointer")
@@ -618,11 +538,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
       //   .attr("cx", position[0])
       //   .attr("cy", position[1]);
 
-      $scope.oGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.oGHor.reDraw(arr);
 
       // Redraw the invisible line
       $scope.oGWigLine
@@ -639,8 +555,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   function oGWigLineRedraw(){
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
+    var xScale = $scope.oGPlot.xScale();
+    var yScale = $scope.oGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
     if(x < 0){
@@ -658,8 +574,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   }
 
   function oGHorLineRedraw(){
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
+    var xScale = $scope.oGPlot.xScale();
+    var yScale = $scope.oGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
     if(y < 0){
@@ -711,28 +627,21 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.wg_plot').width();
     if(!$scope.wGPlot){
       $scope.wGPlot = g3.plot('.wg_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .setXTitle("wavelet gather")
-        .toggleX2Axis(true)
-        .setX2Ticks(6)
-        .setXTicks(6)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setX2TickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(20,10,5,20)
-        .setXDomain([0, data.wavelet_gather.length - 1])
-        .setYDomain([0, data.wavelet_gather[0].length - 1])
-        .setX2Domain([0, data.wavelet_gather.length - 1])
-        .setY2Domain([0, data.wavelet_gather[0].length - 1])
+        .height(height)
+        .width(width - 30)
+        .xTitle("wavelet gather")
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .x2TickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .margin(20,10,5,20)
+        .xDomain([0, data.wavelet_gather.length - 1])
+        .yDomain([0, data.wavelet_gather[0].length - 1])
         .draw();
     } else {
       $scope.wGPlot.reDraw(
-        [0, data.wavelet_gather.length - 1], 
-        [0, data.wavelet_gather[0].length - 1], 
         [0, data.wavelet_gather.length - 1], 
         [0, data.wavelet_gather[0].length - 1]
       );
@@ -741,89 +650,88 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     // Draw Wavelet Gather Image
     if(!$scope.wg){
       $scope.wg = g3.seismic($scope.wGPlot, data.wavelet_gather)
-        .setMax(max)
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .max(max)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .draw();
     } else {
       $scope.wg
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .reDraw(data.wavelet_gather);
     }
   };
 
   $scope.plotWaveletHorizon = function(data){
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
+    var xScale = $scope.wGPlot.xScale();
+    var yScale = $scope.wGPlot.yScale();
+
+    var arr = [];
+    for(var i = 0; i < data.wavelet_gather.length; i++){
+      arr.push($scope.twt);
+    }
 
     if(!$scope.wGHor){
       // Draw horizon line
-      $scope.wGHor = $scope.wGPlot.svg.append("line")
+      $scope.wGHor = g3.horizon($scope.wGPlot, arr).draw();
+
+      // Register drag trigger for wgcir
+      // var cirDrag = d3.behavior.drag()  // capture mouse drag event
+      //   .on('drag', wGCirRedraw);
+      
+      // Register drag trigger for wGWigLine
+      var wigLineDrag = d3.behavior.drag()
+        .on('drag', wGWigLineRedraw);
+
+      // Register drag trigger for wGHorLine
+      var horLineDrag = d3.behavior.drag()
+        .on('drag', wGHorLineRedraw);
+
+      // Draw handle
+      // $scope.wGCir = $scope.wGPlot.svg.append('circle')
+      //   .attr("class", "wgcir")
+      //   .attr("r", 5)
+      //   .attr("cx", xScale($scope.frequency))
+      //   .attr("cy", yScale($scope.twt))
+      //   .style("opacity", 0.5)
+      //   .call(cirDrag);
+
+      // Draw invisible line
+      $scope.wGWigLine = $scope.wGPlot.svg().append('line')
+        .attr("class", "wgwigline")
+        .style("stroke-width", 10)
+        .style("stroke", "black")
+        .style("cursor", "pointer")
+        .style("opacity", 0)
+        .attr("x1", xScale($scope.frequency))
+        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
+        .attr("x2", xScale($scope.frequency))
+        .attr("y2", yScale(0))
+        .call(wigLineDrag);
+
+      // Draw invisible horizon line
+      $scope.wGHorLine = $scope.wGPlot.svg().append('line')
+        .style("stroke-width", 10)
         .style("stroke", "green")
+        .style("cursor", "pointer")
+        .style("opacity", 0)
         .attr("x1", xScale(0))
         .attr("y1", yScale($scope.twt))
         .attr("x2", xScale(data.wavelet_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
-
-        // Register drag trigger for wgcir
-        // var cirDrag = d3.behavior.drag()  // capture mouse drag event
-        //   .on('drag', wGCirRedraw);
-        
-        // Register drag trigger for wGWigLine
-        var wigLineDrag = d3.behavior.drag()
-          .on('drag', wGWigLineRedraw);
-
-        // Register drag trigger for wGHorLine
-        var horLineDrag = d3.behavior.drag()
-          .on('drag', wGHorLineRedraw);
-
-        // Draw handle
-        // $scope.wGCir = $scope.wGPlot.svg.append('circle')
-        //   .attr("class", "wgcir")
-        //   .attr("r", 5)
-        //   .attr("cx", xScale($scope.frequency))
-        //   .attr("cy", yScale($scope.twt))
-        //   .style("opacity", 0.5)
-        //   .call(cirDrag);
+        .attr("y2", yScale($scope.twt))
+        .call(horLineDrag);
 
-        // Draw invisible line
-        $scope.wGWigLine = $scope.wGPlot.svg.append('line')
-          .attr("class", "wgwigline")
-          .style("stroke-width", 10)
-          .style("stroke", "black")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale($scope.frequency))
-          .attr("y1", yScale(data.wavelet_gather[0].length - 1))
-          .attr("x2", xScale($scope.frequency))
-          .attr("y2", yScale(0))
-          .call(wigLineDrag);
-          console.log($scope.wGWigLine);
-
-        // Draw invisible horizon line
-        $scope.wGHorLine = $scope.wGPlot.svg.append('line')
-          .style("stroke-width", 10)
-          .style("stroke", "green")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale(0))
-          .attr("y1", yScale($scope.twt))
-          .attr("x2", xScale(data.wavelet_gather.length - 1))
-          .attr("y2", yScale($scope.twt))
-          .call(horLineDrag);
-
-        // Register mouseup trigger for wgline
-        $(".wgwigline").mouseup(function(e){
-          e.preventDefault();
-          $scope.update_data();
-        });
+      // Register mouseup trigger for wgline
+      $(".wgwigline").mouseup(function(e){
+        e.preventDefault();
+        $scope.update_data();
+      });
 
-        // Register mouseup trigger for wgcir
-        // $(".wgcir").mouseup(function(e){
-        //   e.preventDefault();
-        //   $scope.update_data();
-        // });
+      // Register mouseup trigger for wgcir
+      // $(".wgcir").mouseup(function(e){
+      //   e.preventDefault();
+      //   $scope.update_data();
+      // });
     } else {
       
       // Redraw the handle
@@ -844,17 +752,13 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("y2", yScale($scope.twt));
 
       // Redraw horizon
-      $scope.wGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.wGHor.reDraw(arr);
     }
   };
 
   function wGWigLineRedraw(){
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
+    var xScale = $scope.wGPlot.xScale();
+    var yScale = $scope.wGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
     if(x < 0){
@@ -872,8 +776,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   }
 
   function wGHorLineRedraw(){
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
+    var xScale = $scope.wGPlot.xScale();
+    var yScale = $scope.wGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
     if(y < 0){
@@ -927,32 +831,25 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aTPlot){
       $scope.aTPlot = g3.plot('.at_plot')
-        .setHeight(height)
-        .setYTitle("amplitude")
-        .setDuration(5)
-        .setWidth(width - 30)
-        .setYTicks(6)
-        .setY2Ticks(6)
-        .setX2Title("trace")
-        .toggleX2Axis(true)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(5,10,40,40)
-        .setXDomain([0, $scope.data.seismic.length - 1])
-        .setYDomain([1, -1])
-        .setX2Domain([0, $scope.data.seismic.length - 1])
-        .setY2Domain([1, -1])
+        .height(height)
+        .yTitle("amplitude")
+        .width(width - 30)
+        .yTicks(6)
+        .y2Ticks(6)
+        .xTickFormat("")
+        .y2TickFormat("")
+        .x2Title("trace")
+        .margin(5,10,40,40)
+        .xDomain([0, data.seismic.length - 1])
+        .yDomain([1, -1])
         .draw();
+        console.log($scope.aTPlot);
     }
 
-    $scope.aTArr = getCrossSection($scope.data.seismic, $scope.twt);
+    $scope.aTArr = getCrossSection(data.seismic, $scope.twt);
 
     if(!$scope.aTHor){
-      $scope.aTHor = g3.horizon($scope.aTPlot, $scope.aTArr)
-        .duration(5)
-        .draw();
-      console.log($scope.aTHor);
+      $scope.aTHor = g3.horizon($scope.aTPlot, $scope.aTArr).draw();
     } else {
       $scope.aTHor.reDraw($scope.aTArr);
     }
@@ -967,36 +864,29 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.ao_plot').width();
     if(!$scope.aOPlot){
       $scope.aOPlot = g3.plot('.ao_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .toggleX2Axis(true)
-        .setX2Title("\u03B8" + "\u00B0")
-        .setY2Ticks(6)
-        .setYTicks(6)
-        .setXTicks(6)
-        .setX2Ticks(6)
-        .toggleY2Axis(true)
-        .setX2TickFormat(function(d, i){
+        .height(height)
+        .width(width - 30)
+        .x2Title("\u03B8" + "\u00B0")
+        .yTicks(6)
+        .y2Ticks(6)
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .x2TickFormat(function(d, i){
           return $scope.data.theta[d];
         })
-        .setXTickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(5,10,40,30)
-        .setXDomain([0, data.offset_gather.length - 1])
-        .setYDomain([1, -1])
-        .setX2Domain([0, data.offset_gather.length - 1])
-        .setY2Domain([1, -1])
+        .margin(5,10,40,30)
+        .xDomain([0, data.offset_gather.length - 1])
+        .yDomain([1, -1])
         .draw();
     } 
 
     $scope.aOArr = getCrossSection($scope.data.offset_gather, $scope.twt);
 
     if(!$scope.aOHor){
-      $scope.aOHor = g3.horizon($scope.aOPlot, $scope.aOArr)
-        .duration(5)
-        .draw();
+      $scope.aOHor = g3.horizon($scope.aOPlot, $scope.aOArr).draw();
     } else {
       $scope.aOHor.reDraw($scope.aOArr);
     }
@@ -1008,36 +898,29 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.af_plot').width();
     if(!$scope.aFPlot){
       $scope.aFPlot = g3.plot('.af_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .setX2Title("centre frequency Hz")
-        .toggleX2Axis(true)
-        .setY2Ticks(6)
-        .setYTicks(6)
-        .setXTicks(6)
-        .setX2Ticks(6)
-        .toggleY2Axis(true)
-          .setX2TickFormat(function(d, i){
+        .height(height)
+        .width(width - 30)
+        .x2Title("centre frequency Hz")
+        .yTicks(6)
+        .y2Ticks(6)
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .x2TickFormat(function(d, i){
           return Math.floor($scope.data.f[d]);
         })
-        .setXTickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(5,10,40,20)
-        .setXDomain([0, $scope.data.wavelet_gather.length - 1])
-        .setYDomain([1, -1])
-        .setX2Domain([0, $scope.data.wavelet_gather.length - 1])
-        .setY2Domain([1, -1])
+        .margin(5,10,40,20)
+        .xDomain([0, $scope.data.wavelet_gather.length - 1])
+        .yDomain([1, -1])
         .draw();
     }
 
     $scope.aFArr = getCrossSection($scope.data.wavelet_gather, $scope.twt);
 
     if(!$scope.aFHor){
-      $scope.aFHor = g3.horizon($scope.aFPlot, $scope.aFArr)
-        .duration(5)
-        .draw();
+      $scope.aFHor = g3.horizon($scope.aFPlot, $scope.aFArr).draw();
     } else {
       $scope.aFHor.reDraw($scope.aFArr);
     }
@@ -1048,14 +931,14 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var arr = [data.seismic[$scope.trace]];
     if(!$scope.vDLog){
       $scope.vDLog = g3.wiggle($scope.vDPlot, arr)
-        .setXMin($scope.trace)
-        .setGain(80)
-        .setDuration(5)
+        .xMin($scope.trace)
+        .gain(80)
+        .duration(5)
         .draw();
 
     } else {
       $scope.vDLog
-        .setXMin($scope.trace)
+        .xMin($scope.trace)
         .reDraw(
           arr, 
           [0, data.seismic.length - 1], 
@@ -1069,13 +952,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var arr = [data.offset_gather[$scope.offset]];
     if(!$scope.oGLog){
       $scope.oGLog = g3.wiggle($scope.oGPlot, arr)
-        .setXMin($scope.offset)
-        .setGain(5)
-        .setDuration(5)
+        .xMin($scope.offset)
+        .gain(5)
         .draw();
     } else {
       $scope.oGLog
-        .setXMin($scope.offset)
+        .xMin($scope.offset)
         .reDraw(
           arr, 
           [0, data.offset_gather.length - 1], 
@@ -1089,13 +971,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var arr = [data.wavelet_gather[$scope.frequency]];
     if(!$scope.wGLog){
       $scope.wGLog = g3.wiggle($scope.wGPlot, arr)
-        .setXMin($scope.frequency)
-        .setGain(22.7)
-        .setDuration(5)
+        .xMin($scope.frequency)
+        .gain(22.7)
         .draw();
     } else {
       $scope.wGLog
-        .setXMin($scope.frequency)
+        .xMin($scope.frequency)
         .reDraw(
           arr, 
           [0, data.wavelet_gather.length - 1], 
@@ -1129,11 +1010,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.plotVDHorizon(data);
     $scope.plotOffsetHorizon(data);
     $scope.plotWaveletHorizon(data);
-    var maxAll = $scope.getMaxAll();
-
-    if(maxAll > 1){
-      $scope.updateAmpPlots(maxAll);
-    }
   };
 
   $scope.makeEarthModelStruct = function(){
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index ba9f9f7..6330982 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -42,7 +42,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
             var index = event.currentTarget.attributes["data-index"].value;
             $(event.currentTarget).css('background-color', $scope.colorRange[index]);
             $scope.colorRange[index] = event.color.toHex();
-            console.log($scope.colorRange);
         });
       }
   };
@@ -147,7 +146,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.trace = Number($scope.traceStr);
     var arr = [$scope.data.seismic[$scope.trace]];
     $scope.vDLog
-      .setXMin($scope.trace)
+      .xMin($scope.trace)
       .reDraw(
         arr, 
         [0, $scope.data.seismic.length - 1], 
@@ -160,86 +159,27 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.updateTWT();
   };
 
-  $scope.getMaxAll = function(){
-    var max = [];
-    var maxT = getMax(d3.max($scope.aTArr) * $scope.gain, d3.min($scope.aTArr) * $scope.gain);
-    max.push(maxT);
-    var maxO = getMax(d3.max($scope.aOArr) * $scope.gain, d3.min($scope.aOArr) * $scope.gain);
-    max.push(maxO);
-    var maxF = getMax(d3.max($scope.aFArr) * $scope.gain, d3.min($scope.aFArr) * $scope.gain);
-    max.push(maxF);
-    return d3.max(max);
-  };
-
   $scope.updateTWT = function(){
     // Update Horizons
-    var yScale = $scope.vDPlot.yScale;
-    $scope.vDHor
-      .transition()
-      .duration(5)
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    var arr = [];
+    for(var i = 0; i < $scope.data.seismic.length; i++){ arr.push($scope.twt); }
+    $scope.vDHor.reDraw(arr);
 
-    yScale = $scope.oGPlot.yScale;
-    $scope.oGHor
-      .transition()
-      .duration(5)
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    arr = [];
+    for(var i = 0; i < $scope.data.offset_gather.length; i++){ arr.push($scope.twt); }
+    $scope.oGHor.reDraw(arr);
 
-    yScale = $scope.wGPlot.yScale;
-    $scope.wGHor
-      .transition()
-      .duration(5)
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    arr = [];
+    for(var i = 0; i < $scope.data.wavelet_gather.length; i++){ arr.push($scope.twt); }
+    $scope.wGHor.reDraw(arr);
 
     $scope.aTArr = getCrossSection($scope.data.seismic, $scope.twt);
     $scope.aOArr = getCrossSection($scope.data.offset_gather, $scope.twt);
     $scope.aFArr = getCrossSection($scope.data.wavelet_gather, $scope.twt);
-    
-    var maxAll = $scope.getMaxAll();
-
-    if(maxAll > 1){
-      $scope.updateAmpPlots(maxAll);
-    }
 
-    $scope.aTHor
-      .gain($scope.gain)
-      .reDraw($scope.aTArr);
-
-    $scope.aOHor
-      .gain($scope.gain)
-      .reDraw($scope.aOArr);
-
-    $scope.aFHor
-      .gain($scope.gain)
-      .reDraw($scope.aFArr);
-  };
-
-  $scope.updateAmpPlots = function(maxAll){
-    $scope.aTPlot
-      .reDraw(
-        [0, $scope.data.seismic.length - 1], 
-        [maxAll,-maxAll], 
-        [0, $scope.data.seismic.length - 1], 
-        [maxAll,-maxAll]
-      );
-    $scope.aOPlot
-      .reDraw(
-        [0, $scope.data.offset_gather.length - 1], 
-        [maxAll,-maxAll], 
-        [0, $scope.data.offset_gather.length - 1], 
-        [maxAll,-maxAll]
-      );
-
-    $scope.aFPlot
-      .reDraw(
-        [0, $scope.data.wavelet_gather.length - 1], 
-        [maxAll,-maxAll], 
-        [0, $scope.data.wavelet_gather.length - 1], 
-        [maxAll,-maxAll]
-      );
+    $scope.aTHor.reDraw($scope.aTArr);
+    $scope.aOHor.reDraw($scope.aOArr);
+    $scope.aFHor.reDraw($scope.aFArr);
   };
 
   $scope.changeGainStr = function(){
@@ -252,7 +192,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.offsetNum = $scope.offset * 3;
     var arr = [$scope.data.offset_gather[$scope.offset]];
     $scope.oGLog
-      .setXMin($scope.offset)
+      .xMin($scope.offset)
       .reDraw(
         arr, 
         [0, $scope.data.offset_gather.length - 1], 
@@ -265,7 +205,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.frequencyNum = $scope.data.f[$scope.frequency];
     var arr = [$scope.data.wavelet_gather[$scope.frequency]];
     $scope.wGLog
-      .setXMin($scope.frequency)
+      .xMin($scope.frequency)
       .reDraw(
         arr, 
         [0, $scope.data.wavelet_gather.length - 1], 
@@ -286,26 +226,19 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.vd_plot').width();
     if(!$scope.vDPlot){
       $scope.vDPlot = g3.plot('.vd_plot')
-        .setHeight(height)
-        .setXTitle("spatial cross-section")
-        .setYTitle("time [ms]")
-        .setWidth(width - 30)
-        .toggleX2Axis(true)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setX2TickFormat("")
-        .setY2TickFormat("")
-        .setDuration(5)
-        .setMargin(20,10,5,40)
-        .setXDomain([0, data.seismic.length - 1])
-        .setYDomain([0, data.seismic[0].length - 1])
-        .setX2Domain([0, data.seismic.length - 1])
-        .setY2Domain([0, data.seismic[0].length - 1])
+        .height(height)
+        .xTitle("spatial cross-section")
+        .yTitle("time [ms]")
+        .width(width - 30)
+        .xTickFormat("")
+        .x2TickFormat("")
+        .y2TickFormat("")
+        .margin(20,10,5,40)
+        .xDomain([0, data.seismic.length - 1])
+        .yDomain([0, data.seismic[0].length - 1])
         .draw();
     } else {
       $scope.vDPlot.reDraw(
-        [0, data.seismic.length - 1], 
-        [0, data.seismic[0].length - 1], 
         [0, data.seismic.length - 1], 
         [0, data.seismic[0].length - 1]
       );
@@ -313,29 +246,27 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     // Draw Seismic Image
     if(!$scope.seis){
       $scope.seis = g3.seismic($scope.vDPlot, data.seismic)
-        .setMax(max)
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .max(max)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .draw();
     } else {
       $scope.seis
-        .setGain($scope.gain)
-        .setColor($scope.colorScale)
+        .gain($scope.gain)
+        .colorScale($scope.colorScale)
         .reDraw(data.seismic);
     }
   };
   
   $scope.plotVDHorizon = function(data){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
-    if(!$scope.vDHor){
-      $scope.vDHor = $scope.vDPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.seismic.length - 1))
-        .attr("y2", yScale($scope.twt));
+    var xScale = $scope.vDPlot.xScale();
+    var yScale = $scope.vDPlot.yScale();
+    var arr = [];
+    for(var i = 0; i < data.seismic.length; i++){
+      arr.push($scope.twt);
+    }
+    if(!$scope.vDHor){ 
+      $scope.vDHor = g3.horizon($scope.vDPlot, arr).draw();
 
         // var drag = d3.behavior.drag()  // capture mouse drag event
         //   .on('drag', vDCirRedraw);
@@ -363,7 +294,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .on('drag', vDHorLineRedraw);
 
         // Draw invisible line
-        $scope.vDWigLine = $scope.vDPlot.svg.append('line')
+        $scope.vDWigLine = $scope.vDPlot.svg().append('line')
           .attr("class", "vdwigline")
           .style("stroke-width", 10)
           .style("stroke", "black")
@@ -376,7 +307,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .call(wigLineDrag);
 
         // Draw invisible horizon line
-        $scope.vDHorLine = $scope.vDPlot.svg.append('line')
+        $scope.vDHorLine = $scope.vDPlot.svg().append('line')
           .style("stroke-width", 10)
           .style("stroke", "green")
           .style("cursor", "pointer")
@@ -410,17 +341,13 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("y1", yScale($scope.twt))
         .attr("y2", yScale($scope.twt));
 
-      $scope.vDHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.vDHor.reDraw(arr);
     }
   };
 
   function vDWigLineRedraw(){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
+    var xScale = $scope.vDPlot.xScale();
+    var yScale = $scope.vDPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
     if(x < 0){
@@ -438,8 +365,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   }
 
   function vDHorLineRedraw(){
-    var xScale = $scope.vDPlot.xScale;
-    var yScale = $scope.vDPlot.yScale;
+    var xScale = $scope.vDPlot.xScale();
+    var yScale = $scope.vDPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
     if(y < 0){
@@ -490,28 +417,21 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.og_plot').width();
     if(!$scope.oGPlot){
       $scope.oGPlot = g3.plot('.og_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .setXTitle("angle gather")
-        .toggleX2Axis(true)
-        .setX2Ticks(6)
-        .setXTicks(6)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setX2TickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(20,10,5,30)
-        .setXDomain([0, data.offset_gather.length - 1])
-        .setYDomain([0, data.offset_gather[0].length - 1])
-        .setX2Domain([0, data.offset_gather.length - 1])
-        .setY2Domain([0, data.offset_gather[0].length - 1])
+        .height(height)
+        .width(width - 30)
+        .xTitle("angle gather")
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .x2TickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .margin(20,10,5,30)
+        .xDomain([0, data.offset_gather.length - 1])
+        .yDomain([0, data.offset_gather[0].length - 1])
         .draw();
     } else {
       $scope.oGPlot.reDraw(
-        [0, data.offset_gather.length - 1], 
-        [0, data.offset_gather[0].length - 1], 
         [0, data.offset_gather.length - 1], 
         [0, data.offset_gather[0].length - 1]
       );
@@ -520,30 +440,30 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     // Draw Offset Gather Image
     if(!$scope.og){
       $scope.og = g3.seismic($scope.oGPlot, data.offset_gather)
-        .setMax(max)
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .max(max)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .draw();
     } else {
       $scope.og
-        .setGain($scope.gain)
-        .setColor($scope.colorScale)
+        .gain($scope.gain)
+        .colorScale($scope.colorScale)
         .reDraw(data.offset_gather);
     }
   };
 
   $scope.plotOffsetHorizon = function(data){
     // Draw Offset Horizon
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
+    var xScale = $scope.oGPlot.xScale();
+    var yScale = $scope.oGPlot.yScale();
+
+    var arr = [];
+    for(var i = 0; i < data.offset_gather.length; i++){
+      arr.push($scope.twt);
+    }
+
     if(!$scope.oGHor){
-      $scope.oGHor = $scope.oGPlot.svg.append("line")
-        .style("stroke", "green")
-        .style("opacity", 1.5)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.offset_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
+      $scope.oGHor = g3.horizon($scope.oGPlot, arr).draw();
 
         // var drag = d3.behavior.drag()  // capture mouse drag event
         //   .on('drag', oGCirRedraw);
@@ -557,7 +477,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .on('drag', oGHorLineRedraw);
 
         // Draw invisible line
-        $scope.oGWigLine = $scope.oGPlot.svg.append('line')
+        $scope.oGWigLine = $scope.oGPlot.svg().append('line')
           .attr("class", "ogwigline")
           .style("stroke-width", 10)
           .style("stroke", "black")
@@ -570,7 +490,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .call(wigLineDrag);
 
         // Draw invisible horizon line
-        $scope.oGHorLine = $scope.oGPlot.svg.append('line')
+        $scope.oGHorLine = $scope.oGPlot.svg().append('line')
           .style("stroke-width", 10)
           .style("stroke", "green")
           .style("cursor", "pointer")
@@ -606,11 +526,7 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
       //   .attr("cx", position[0])
       //   .attr("cy", position[1]);
 
-      $scope.oGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.oGHor.reDraw(arr);
 
       // Redraw the invisible line
       $scope.oGWigLine
@@ -627,8 +543,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   function oGWigLineRedraw(){
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
+    var xScale = $scope.oGPlot.xScale();
+    var yScale = $scope.oGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
     if(x < 0){
@@ -646,8 +562,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   }
 
   function oGHorLineRedraw(){
-    var xScale = $scope.oGPlot.xScale;
-    var yScale = $scope.oGPlot.yScale;
+    var xScale = $scope.oGPlot.xScale();
+    var yScale = $scope.oGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
     if(y < 0){
@@ -699,28 +615,21 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.wg_plot').width();
     if(!$scope.wGPlot){
       $scope.wGPlot = g3.plot('.wg_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .setXTitle("wavelet gather")
-        .toggleX2Axis(true)
-        .setX2Ticks(6)
-        .setXTicks(6)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setX2TickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(20,10,5,20)
-        .setXDomain([0, data.wavelet_gather.length - 1])
-        .setYDomain([0, data.wavelet_gather[0].length - 1])
-        .setX2Domain([0, data.wavelet_gather.length - 1])
-        .setY2Domain([0, data.wavelet_gather[0].length - 1])
+        .height(height)
+        .width(width - 30)
+        .xTitle("wavelet gather")
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .x2TickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .margin(20,10,5,20)
+        .xDomain([0, data.wavelet_gather.length - 1])
+        .yDomain([0, data.wavelet_gather[0].length - 1])
         .draw();
     } else {
       $scope.wGPlot.reDraw(
-        [0, data.wavelet_gather.length - 1], 
-        [0, data.wavelet_gather[0].length - 1], 
         [0, data.wavelet_gather.length - 1], 
         [0, data.wavelet_gather[0].length - 1]
       );
@@ -729,89 +638,88 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     // Draw Wavelet Gather Image
     if(!$scope.wg){
       $scope.wg = g3.seismic($scope.wGPlot, data.wavelet_gather)
-        .setMax(max)
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .max(max)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .draw();
     } else {
       $scope.wg
-        .setColor($scope.colorScale)
-        .setGain($scope.gain)
+        .colorScale($scope.colorScale)
+        .gain($scope.gain)
         .reDraw(data.wavelet_gather);
     }
   };
 
   $scope.plotWaveletHorizon = function(data){
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
+    var xScale = $scope.wGPlot.xScale();
+    var yScale = $scope.wGPlot.yScale();
+
+    var arr = [];
+    for(var i = 0; i < data.wavelet_gather.length; i++){
+      arr.push($scope.twt);
+    }
 
     if(!$scope.wGHor){
       // Draw horizon line
-      $scope.wGHor = $scope.wGPlot.svg.append("line")
+      $scope.wGHor = g3.horizon($scope.wGPlot, arr).draw();
+
+      // Register drag trigger for wgcir
+      // var cirDrag = d3.behavior.drag()  // capture mouse drag event
+      //   .on('drag', wGCirRedraw);
+      
+      // Register drag trigger for wGWigLine
+      var wigLineDrag = d3.behavior.drag()
+        .on('drag', wGWigLineRedraw);
+
+      // Register drag trigger for wGHorLine
+      var horLineDrag = d3.behavior.drag()
+        .on('drag', wGHorLineRedraw);
+
+      // Draw handle
+      // $scope.wGCir = $scope.wGPlot.svg.append('circle')
+      //   .attr("class", "wgcir")
+      //   .attr("r", 5)
+      //   .attr("cx", xScale($scope.frequency))
+      //   .attr("cy", yScale($scope.twt))
+      //   .style("opacity", 0.5)
+      //   .call(cirDrag);
+
+      // Draw invisible line
+      $scope.wGWigLine = $scope.wGPlot.svg().append('line')
+        .attr("class", "wgwigline")
+        .style("stroke-width", 10)
+        .style("stroke", "black")
+        .style("cursor", "pointer")
+        .style("opacity", 0)
+        .attr("x1", xScale($scope.frequency))
+        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
+        .attr("x2", xScale($scope.frequency))
+        .attr("y2", yScale(0))
+        .call(wigLineDrag);
+
+      // Draw invisible horizon line
+      $scope.wGHorLine = $scope.wGPlot.svg().append('line')
+        .style("stroke-width", 10)
         .style("stroke", "green")
+        .style("cursor", "pointer")
+        .style("opacity", 0)
         .attr("x1", xScale(0))
         .attr("y1", yScale($scope.twt))
         .attr("x2", xScale(data.wavelet_gather.length - 1))
-        .attr("y2", yScale($scope.twt));
-
-        // Register drag trigger for wgcir
-        // var cirDrag = d3.behavior.drag()  // capture mouse drag event
-        //   .on('drag', wGCirRedraw);
-        
-        // Register drag trigger for wGWigLine
-        var wigLineDrag = d3.behavior.drag()
-          .on('drag', wGWigLineRedraw);
-
-        // Register drag trigger for wGHorLine
-        var horLineDrag = d3.behavior.drag()
-          .on('drag', wGHorLineRedraw);
-
-        // Draw handle
-        // $scope.wGCir = $scope.wGPlot.svg.append('circle')
-        //   .attr("class", "wgcir")
-        //   .attr("r", 5)
-        //   .attr("cx", xScale($scope.frequency))
-        //   .attr("cy", yScale($scope.twt))
-        //   .style("opacity", 0.5)
-        //   .call(cirDrag);
+        .attr("y2", yScale($scope.twt))
+        .call(horLineDrag);
 
-        // Draw invisible line
-        $scope.wGWigLine = $scope.wGPlot.svg.append('line')
-          .attr("class", "wgwigline")
-          .style("stroke-width", 10)
-          .style("stroke", "black")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale($scope.frequency))
-          .attr("y1", yScale(data.wavelet_gather[0].length - 1))
-          .attr("x2", xScale($scope.frequency))
-          .attr("y2", yScale(0))
-          .call(wigLineDrag);
-          console.log($scope.wGWigLine);
-
-        // Draw invisible horizon line
-        $scope.wGHorLine = $scope.wGPlot.svg.append('line')
-          .style("stroke-width", 10)
-          .style("stroke", "green")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale(0))
-          .attr("y1", yScale($scope.twt))
-          .attr("x2", xScale(data.wavelet_gather.length - 1))
-          .attr("y2", yScale($scope.twt))
-          .call(horLineDrag);
-
-        // Register mouseup trigger for wgline
-        $(".wgwigline").mouseup(function(e){
-          e.preventDefault();
-          $scope.update_data();
-        });
+      // Register mouseup trigger for wgline
+      $(".wgwigline").mouseup(function(e){
+        e.preventDefault();
+        $scope.update_data();
+      });
 
-        // Register mouseup trigger for wgcir
-        // $(".wgcir").mouseup(function(e){
-        //   e.preventDefault();
-        //   $scope.update_data();
-        // });
+      // Register mouseup trigger for wgcir
+      // $(".wgcir").mouseup(function(e){
+      //   e.preventDefault();
+      //   $scope.update_data();
+      // });
     } else {
       
       // Redraw the handle
@@ -832,17 +740,13 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         .attr("y2", yScale($scope.twt));
 
       // Redraw horizon
-      $scope.wGHor
-        .transition()
-        .duration(5)
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.wGHor.reDraw(arr);
     }
   };
 
   function wGWigLineRedraw(){
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
+    var xScale = $scope.wGPlot.xScale();
+    var yScale = $scope.wGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
     if(x < 0){
@@ -860,8 +764,8 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   }
 
   function wGHorLineRedraw(){
-    var xScale = $scope.wGPlot.xScale;
-    var yScale = $scope.wGPlot.yScale;
+    var xScale = $scope.wGPlot.xScale();
+    var yScale = $scope.wGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
     if(y < 0){
@@ -915,32 +819,25 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
     if(!$scope.aTPlot){
       $scope.aTPlot = g3.plot('.at_plot')
-        .setHeight(height)
-        .setYTitle("amplitude")
-        .setDuration(5)
-        .setWidth(width - 30)
-        .setYTicks(6)
-        .setY2Ticks(6)
-        .setX2Title("trace")
-        .toggleX2Axis(true)
-        .toggleY2Axis(true)
-        .setXTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(5,10,40,40)
-        .setXDomain([0, $scope.data.seismic.length - 1])
-        .setYDomain([1, -1])
-        .setX2Domain([0, $scope.data.seismic.length - 1])
-        .setY2Domain([1, -1])
+        .height(height)
+        .yTitle("amplitude")
+        .width(width - 30)
+        .yTicks(6)
+        .y2Ticks(6)
+        .xTickFormat("")
+        .y2TickFormat("")
+        .x2Title("trace")
+        .margin(5,10,40,40)
+        .xDomain([0, data.seismic.length - 1])
+        .yDomain([1, -1])
         .draw();
+        console.log($scope.aTPlot);
     }
 
-    $scope.aTArr = getCrossSection($scope.data.seismic, $scope.twt);
+    $scope.aTArr = getCrossSection(data.seismic, $scope.twt);
 
     if(!$scope.aTHor){
-      $scope.aTHor = g3.horizon($scope.aTPlot, $scope.aTArr)
-        .duration(5)
-        .draw();
-      console.log($scope.aTHor);
+      $scope.aTHor = g3.horizon($scope.aTPlot, $scope.aTArr).draw();
     } else {
       $scope.aTHor.reDraw($scope.aTArr);
     }
@@ -955,36 +852,29 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.ao_plot').width();
     if(!$scope.aOPlot){
       $scope.aOPlot = g3.plot('.ao_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .toggleX2Axis(true)
-        .setX2Title("\u03B8" + "\u00B0")
-        .setY2Ticks(6)
-        .setYTicks(6)
-        .setXTicks(6)
-        .setX2Ticks(6)
-        .toggleY2Axis(true)
-        .setX2TickFormat(function(d, i){
+        .height(height)
+        .width(width - 30)
+        .x2Title("\u03B8" + "\u00B0")
+        .yTicks(6)
+        .y2Ticks(6)
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .x2TickFormat(function(d, i){
           return $scope.data.theta[d];
         })
-        .setXTickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(5,10,40,30)
-        .setXDomain([0, data.offset_gather.length - 1])
-        .setYDomain([1, -1])
-        .setX2Domain([0, data.offset_gather.length - 1])
-        .setY2Domain([1, -1])
+        .margin(5,10,40,30)
+        .xDomain([0, data.offset_gather.length - 1])
+        .yDomain([1, -1])
         .draw();
     } 
 
     $scope.aOArr = getCrossSection($scope.data.offset_gather, $scope.twt);
 
     if(!$scope.aOHor){
-      $scope.aOHor = g3.horizon($scope.aOPlot, $scope.aOArr)
-        .duration(5)
-        .draw();
+      $scope.aOHor = g3.horizon($scope.aOPlot, $scope.aOArr).draw();
     } else {
       $scope.aOHor.reDraw($scope.aOArr);
     }
@@ -996,36 +886,29 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var width = $('.af_plot').width();
     if(!$scope.aFPlot){
       $scope.aFPlot = g3.plot('.af_plot')
-        .setHeight(height)
-        .setWidth(width - 30)
-        .setDuration(5)
-        .setX2Title("centre frequency Hz")
-        .toggleX2Axis(true)
-        .setY2Ticks(6)
-        .setYTicks(6)
-        .setXTicks(6)
-        .setX2Ticks(6)
-        .toggleY2Axis(true)
-          .setX2TickFormat(function(d, i){
+        .height(height)
+        .width(width - 30)
+        .x2Title("centre frequency Hz")
+        .yTicks(6)
+        .y2Ticks(6)
+        .xTicks(6)
+        .x2Ticks(6)
+        .xTickFormat("")
+        .yTickFormat("")
+        .y2TickFormat("")
+        .x2TickFormat(function(d, i){
           return Math.floor($scope.data.f[d]);
         })
-        .setXTickFormat("")
-        .setYTickFormat("")
-        .setY2TickFormat("")
-        .setMargin(5,10,40,20)
-        .setXDomain([0, $scope.data.wavelet_gather.length - 1])
-        .setYDomain([1, -1])
-        .setX2Domain([0, $scope.data.wavelet_gather.length - 1])
-        .setY2Domain([1, -1])
+        .margin(5,10,40,20)
+        .xDomain([0, $scope.data.wavelet_gather.length - 1])
+        .yDomain([1, -1])
         .draw();
     }
 
     $scope.aFArr = getCrossSection($scope.data.wavelet_gather, $scope.twt);
 
     if(!$scope.aFHor){
-      $scope.aFHor = g3.horizon($scope.aFPlot, $scope.aFArr)
-        .duration(5)
-        .draw();
+      $scope.aFHor = g3.horizon($scope.aFPlot, $scope.aFArr).draw();
     } else {
       $scope.aFHor.reDraw($scope.aFArr);
     }
@@ -1036,14 +919,14 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var arr = [data.seismic[$scope.trace]];
     if(!$scope.vDLog){
       $scope.vDLog = g3.wiggle($scope.vDPlot, arr)
-        .setXMin($scope.trace)
-        .setGain(80)
-        .setDuration(5)
+        .xMin($scope.trace)
+        .gain(80)
+        .duration(5)
         .draw();
 
     } else {
       $scope.vDLog
-        .setXMin($scope.trace)
+        .xMin($scope.trace)
         .reDraw(
           arr, 
           [0, data.seismic.length - 1], 
@@ -1057,13 +940,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var arr = [data.offset_gather[$scope.offset]];
     if(!$scope.oGLog){
       $scope.oGLog = g3.wiggle($scope.oGPlot, arr)
-        .setXMin($scope.offset)
-        .setGain(5)
-        .setDuration(5)
+        .xMin($scope.offset)
+        .gain(5)
         .draw();
     } else {
       $scope.oGLog
-        .setXMin($scope.offset)
+        .xMin($scope.offset)
         .reDraw(
           arr, 
           [0, data.offset_gather.length - 1], 
@@ -1077,13 +959,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var arr = [data.wavelet_gather[$scope.frequency]];
     if(!$scope.wGLog){
       $scope.wGLog = g3.wiggle($scope.wGPlot, arr)
-        .setXMin($scope.frequency)
-        .setGain(22.7)
-        .setDuration(5)
+        .xMin($scope.frequency)
+        .gain(22.7)
         .draw();
     } else {
       $scope.wGLog
-        .setXMin($scope.frequency)
+        .xMin($scope.frequency)
         .reDraw(
           arr, 
           [0, data.wavelet_gather.length - 1], 
@@ -1117,11 +998,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.plotVDHorizon(data);
     $scope.plotOffsetHorizon(data);
     $scope.plotWaveletHorizon(data);
-    var maxAll = $scope.getMaxAll();
-
-    if(maxAll > 1){
-      $scope.updateAmpPlots(maxAll);
-    }
   };
 
   $scope.makeEarthModelStruct = function(){
diff --git a/static/js/g3.js b/static/js/g3.js
index 4826862..90afae0 100644
--- a/static/js/g3.js
+++ b/static/js/g3.js
@@ -1,4 +1,4 @@
-/*! g3 - v0.0.1 - 2015-09-29 - justinkheisler */
+/*! g3 - v0.0.1 - 2015-10-02 - justinkheisler */
 'use strict';
 ;(function (window) {
 
@@ -12,20 +12,91 @@ if(typeof(g3) === 'undefined') {
 
 const DEBUG = false;
 
-function createAxis(scale, innerTickSize, orient, ticks){
-	return d3.svg.axis()
-		.scale(scale)
-		.innerTickSize(innerTickSize)
-		.outerTickSize(3)
-		.tickPadding(5)
-		.orient(orient)
-		.ticks(ticks);
+
+
+// Attach canvas creation function to g3
+g3.canvas = function(plot, data){
+  return new canvas(plot, data);
 }
 
+// Constructor
+// Only set variables that are set by items passed in, otherwise set using prototype
+var canvas = function canvas(plot, data){
+	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
+	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+  this._data = data;
+  this._plot = plot;
+  this._canvas = d3.select(this._plot._elem)
+		.append('canvas')
+    .attr('width', this._data.length)
+    .attr('height', this._data[0].length)
+    .style('width', this._plot._width +  'px')
+    .style('height', this._plot._height + 'px')
+    .style('opacity', 0.95)
+    .style('top', this._plot._margin.top + 'px')
+    .style('left', this._plot._margin.left + 'px');
+  return this;
+};
+
+canvas.prototype.style = {};
+
+canvas.prototype.style.opacity = function(opacity){
+	if(opacity === undefined){ return this._style._opacity; }
+	this._style._opacity = opacity;
+	this._canvas.style('opacity', opacity);
+	return this;
+};
+
+canvas.prototype.gain = function(gain){
+	if(gain === undefined){ return this._gain; }
+	this._gain = gain;
+	return this;
+};
+
+canvas.prototype.colorScale = function(colorScale){
+	if(colorScale === undefined){ return this._colorScale; }
+	this._colorScale = colorScale;
+	return this;
+};
+
+canvas.prototype.draw = function(){
+	this._context = this._canvas.node().getContext('2d');
+	this.drawImage();
+	return this;
+};
+
+canvas.prototype.reDraw = function(data){
+	this._context.clearRect(0, 0, this._data.length, this._data[0].length);
+	this._canvas
+    .attr('width', data.length)
+    .attr('height', data[0].length);
+  this._data = data;
+  this.drawImage();
+  return this;
+};
+
+canvas.prototype.drawImage = function(){
+	var x = this._data.length,
+			y = this._data[0].length;
+	this._image = this._context.createImageData(x,y);
+	
+	for(var i = 0, p = -1; i < y; ++ i){
+		for(var j = 0; j < x; ++j){
+			var c = d3.rgb(this._colorScale(this._data[j][i] * this._gain));
+			this._image.data[++p] = c.r;
+			this._image.data[++p] = c.g;
+			this._image.data[++p] = c.b;
+			this._image.data[++p] = 255;
+		}
+	}
+	this._context.putImageData(this._image, 0, 0);
+
+	return this;
+};
 // Attach horizon creation function to g3
 g3.horizon = function(plot, data){
   return new horizon(plot, data);
-}
+};
 
 // Constructor
 // Only set variables that are set by items passed in, otherwise set using prototype
@@ -34,78 +105,94 @@ var horizon = function horizon(plot, data){
 	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
   this._data = data;
   this._plot = plot;
-  this._xMin = plot.xDomain[0];
-  this._yMin = plot.yDomain[0];
+  this._xMin = plot._xDomain[0];
+  this._yMin = plot._yDomain[0];
   return this;
 };
 
 // Set remaining variables
 horizon.prototype._xInt = 1;
 horizon.prototype._yInt = 1;
-horizon.prototype._duration = 500;
+horizon.prototype._duration = 5;
 horizon.prototype._gain = 1;
 horizon.prototype._interpolate = 'basis';
 horizon.prototype._color = 'green';
 horizon.prototype._strokeWidth = 1.5;
+horizon.prototype._opacity = 1;
 
 // Horizon Setting functions
 horizon.prototype.interpolate = function(interpolate){
+	if(interpolate === undefined){ return this._interpolate; }
 	this._interpolate = interpolate;
 	return this;
 };
 
 horizon.prototype.xMin = function(xMin){
+	if(xMin === undefined){ return this._xMin; }
 	this._xMin = xMin;
 	return this;
 };
 
 horizon.prototype.yMin = function(yMin){
+	if(yMin === undefined){ return this._yMin; }
 	this._yMin = yMin;
 	return this;
 };
 
 horizon.prototype.xInt = function(xInt){
+	if(xInt === undefined){ return this._xInt; }
 	this._xInt = xInt;
 	return this;
 };
 
 horizon.prototype.yInt = function(yInt){
+	if(yInt === undefined){ return this._yInt; }
 	this._yInt = yInt;
 	return this;
 };
 
 horizon.prototype.duration = function(duration){
+	if(duration === undefined){ return this._duration; }
 	this._duration = duration;
 	return this;
 };
 
 horizon.prototype.gain = function(gain){
+	if(gain === undefined){ return this._gain; }
 	this._gain = gain;
 	return this;
 };
 
 horizon.prototype.color = function(color){
+	if(color === undefined){ return this._color; }
 	this._color = color;
 	return this;
 };
 
 horizon.prototype.strokeWidth = function(strokeWidth){
+	if(strokeWidth === undefined){ return this._strokeWidth; }
 	this._strokeWidth = strokeWidth;
 	return this;
 };
 
+horizon.prototype.opacity = function(opacity){
+	if(opacity === undefined){ return this._opacity; }
+	this._opacity = opacity;
+	return this;
+};
+
 horizon.prototype.lineFunc = function(){
 	var plot = this._plot,
-	xMin = this._xMin,
-	gain = this._gain,
-	interpolate = this._interpolate;
+			xMin = this._xMin,
+			gain = this._gain,
+			interpolate = this._interpolate;
 
 	var lineFunc = d3.svg.line()
 		.x(function (d, i){
-			return plot.xScale(i + xMin);
+			return plot._xScale(i + xMin);
 		})
 		.y( function (d) {
-			return plot.yScale(d * gain);
+			return plot._yScale(d * gain);
 		})
 		.interpolate(interpolate);
 
@@ -115,10 +202,11 @@ horizon.prototype.lineFunc = function(){
 // Horizon Drawing functions
 horizon.prototype.draw = function() {
 	var lineFunc = this.lineFunc();
-	this._svg = this._plot.svg.append('path')
+	this._svg = this._plot._svg.append('path')
 		.attr('d', lineFunc(this._data))
 		.attr('stroke', this._color)
 		.attr('stroke-width', this._strokeWidth)
+		.style('opacity', this._opacity)
 		.attr('fill', 'none');
 
 	return this;
@@ -132,750 +220,872 @@ horizon.prototype.reDraw = function(data){
 		.attr('d', lineFunc(data));
 	return this;
 };
+
+// Attach canvas creation function to g3
 g3.log = function(plot, data){
-	
+  return new log(plot, data);
+};
+
+// Constructor
+// Only set variables that are set by items passed in, otherwise set using prototype
+var log = function log(plot, data){
 	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
 	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+  this._data = data;
+  this._plot = plot;
+  this._xMin = plot._xDomain[0];
+  this._yMin = plot._yDomain[0];
+  return this;
+};
 
-	var log = {};
-	log.xInt = 1;
-	log.xMin = plot.xDomain[0];
-	log.yInt = 1;
-	log.yMin = plot.yDomain[0];
-	log.color = "blue";
-	log.duration = 500;
-
-	// Setters
-	log.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	};
+// Set remaining variables
+log.prototype._xInt = 1;
+log.prototype._yInt = 1;
+log.prototype._color = "blue";
+log.prototype._duration = 5;
+log.prototype._strokeWidth = 0.25;
+
+// Setters 
+log.prototype.duration = function(duration){
+	if(duration === undefined){ return this._duration; }
+	this._duration = duration;
+	return this;
+};
 
-	log.setYInt = function(yInt){
-		this.yInt = yInt;
-		return this;
-	};
+log.prototype.xMin = function(xMin){
+	if(xMin === undefined){ return this._xMin; }
+	this._xMin = xMin;
+	return this;
+};
 
-	log.setYMin = function(yMin){
-		this.yMin = yMin;
-		return this;
-	};
+log.prototype.xInt = function(xInt){
+	if(xInt === undefined){ return this._xInt; }
+	this._xInt = xInt;
+	return this;
+};
 
-	log.setXInt = function(xInt){
-		this.xInt = xInt;
-		return this;
-	};
+log.prototype.yMin = function(yMin){
+	if(yMin === undefined){ return this._yMin; }
+	this._yMin = yMin;
+	return this;
+};
 
-	log.setXMin = function(xMin){
-		this.xMin = xMin;
-		return this;
-	};
+log.prototype.yInt = function(yInt){
+	if(yInt === undefined){ return this._yInt; }
+	this._yInt = yInt;
+	return this;
+};
 
-	log.setData = function(data){
-		this.data = data;
-		return this;
-	};
+log.prototype.color = function(color){
+	if(color === undefined){ return this._color; }
+	this._color = color;
+	return this;
+};
 
-	log.setColor = function(color){
-		this.color = color;
-		return this;
-	};
+log.prototype.strokeWidth = function(strokeWidth){
+	if(strokeWidth === undefined){ return this._strokeWidth; }
+	this._strokeWidth = strokeWidth;
+	return this;
+};
 
-  log.draw = function(){
-    this.svg = plot.svg.append("path")  
-      .datum(data)
-      .attr("d", lineFunc)
-      .attr("stroke", this.color)
-      .attr("stroke-width", 0.25)
-      .attr("fill", "none");
-
-    // var sorted = data.sort(function(a, b) {
-    //   return a - b;
-    // });
-
-    // var focus = plot.svg.append("g")
-    //     .attr("class", "focus")
-    //     .style("display", "none");
-
-    // focus.append("circle")
-    //     .attr("r", 4.5);
-
-    // focus.append("text")
-    //     .attr("x", 9)
-    //     .attr("dy", ".35em");
-    //     var bisectDate = d3.bisector(function(d) { return d; }).left;
-    // plot.svg.append("rect")
-    //     .attr("class", "overlay")
-    //     .attr("width", plot.width)
-    //     .attr("height", plot.height)
-    //     .on("mouseover", function() { focus.style("display", null); })
-    //     .on("mouseout", function() { focus.style("display", "none"); })
-    //     .on("mousemove", mousemove);
-
-    // function mousemove() {
-    //   var x0 = plot.xScale.invert(d3.mouse(this)[0]),
-    //       i = bisectDate(data, x0, 1),
-    //       d0 = data[i - 1],
-    //       d1 = data[i],
-    //       d = x0 - d0 > d1 - x0 ? d1 : d0;
-    //   focus.attr("transform", "translate(" + plot.xScale(d) + "," + plot.yScale(d) + ")");
-    //   focus.select("text").text(d);
-    // };
-    return this;
-  };
+log.prototype.draw = function(){
+	var lineFunc = this.lineFunc();
+	this._svg = this._plot._svg.append('path')
+		.datum(this._data)
+		.attr('d', lineFunc)
+		.attr('stroke', this._color)
+		.attr('stroke-width', this._strokeWidth)
+		.attr('fill', 'none');
+	return this;
+};
 
-	var lineFunc = d3.svg.line()
-	.x(function (d) {
-		return plot.xScale(d);
-	})
-	.y(function (d, i){
-		return plot.yScale(i * log.yInt + log.yMin);
-	})
-	.interpolate('basis');
-
-	log.reDraw = function(data){
-
-		this.svg.transition()
-			.duration(this.duration)
-			.attr('d', lineFunc(data))
-			.ease('linear');
-		return this;
-	};
-	return log;
+log.prototype.reDraw = function(data){
+	var lineFunc = this.lineFunc();
+	this._svg.transition()
+		.duration(this._duration)
+		.attr('d', lineFunc(data))
+		.ease('linear');
+	return this;
+};
+
+log.prototype.lineFunc = function(){
+	var plot = this._plot,
+			yInt = this._yInt,
+			yMin = this._yMin,
+			interpolate = this._interpolate;
+
+	return d3.svg.line()
+		.x(function (d) {
+			return plot.xScale(d);
+		})
+		.y(function (d, i){
+			return plot.yScale(i * yInt + yMin);
+		})
+		.interpolate(interpolate);
 };
 
+// var sorted = data.sort(function(a, b) {
+//   return a - b;
+// });
+
+// var focus = plot.svg.append("g")
+//     .attr("class", "focus")
+//     .style("display", "none");
+
+// focus.append("circle")
+//     .attr("r", 4.5);
+
+// focus.append("text")
+//     .attr("x", 9)
+//     .attr("dy", ".35em");
+//     var bisectDate = d3.bisector(function(d) { return d; }).left;
+// plot.svg.append("rect")
+//     .attr("class", "overlay")
+//     .attr("width", plot.width)
+//     .attr("height", plot.height)
+//     .on("mouseover", function() { focus.style("display", null); })
+//     .on("mouseout", function() { focus.style("display", "none"); })
+//     .on("mousemove", mousemove);
+
+// function mousemove() {
+//   var x0 = plot.xScale.invert(d3.mouse(this)[0]),
+//       i = bisectDate(data, x0, 1),
+//       d0 = data[i - 1],
+//       d1 = data[i],
+//       d = x0 - d0 > d1 - x0 ? d1 : d0;
+//   focus.attr("transform", "translate(" + plot.xScale(d) + "," + plot.yScale(d) + ")");
+//   focus.select("text").text(d);
+// };
+
+// Attach horizon creation function to g3
 g3.plot = function(elem){
-  
+  return new plot(elem);
+};
+
+// Constructor
+// Only  variables that are  by items passed in, otherwise  using prototype
+var plot = function plot(elem){
   if(!elem){ return 'Param: elem is missing. A div to attach to is required'; }
+  this._elem = elem;
+  this._margin = {top: 50, right: 0, bottom: 30, left: 0};
+  this._width = $(this._elem).width() - this._margin.left;
+  return this;
+};
 
-	var plot = {};
-	plot.margin = {top: 50, right: 0, bottom: 30, left: 0};
-	plot.width = $(elem).width() - plot.margin.left;
-	plot.height = 800;
-	plot.xDomain = [0,0];
-	plot.yDomain = [0,0];
-	plot.elem = elem;
-	plot.xAxisVisible = true;
-	plot.yAxisVisible = true;
-	plot.x2AxisVisible = false;
-	plot.y2AxisVisible = false;
-	plot.xOrient = 'top';
-	plot.x2Orient = 'bottom';
-	plot.yOrient = 'left';
-	plot.y2Orient = 'right';
-  plot.duration = 500;
-
-  plot.setDuration = function(duration){
-    this.duration = duration;
-    return this;
-  };
-
-  plot.setMargin = function(top, right, bottom, left){
-  	this.margin = {top: top, right: right, bottom: bottom, left: left};
-  	return this;
-  };
-
-  plot.setWidth = function(width){
-  	this.width = width;
-  	return this;
-  };
-
-  plot.setHeight = function(height){
-  	this.height = height;
-  	return this;
-  };
-
-  plot.setXDomain = function(domain){
-  	this.xDomain = domain;
-  	return this;
-  };
-
-  plot.setYDomain = function(domain){
-  	this.yDomain = domain;
-  	return this;
-  };
-
-  plot.setX2Domain = function(domain){
-  	this.x2Domain = domain;
-  	return this;
-  };
-
-  plot.setY2Domain = function(domain){
-  	this.y2Domain = domain;
-  	return this;
-  };
-
-  plot.toggleXAxis = function(bool){
-  	this.xAxisVisible = bool;
-  	return this;
-  };
-
-  plot.toggleX2Axis = function(bool){
-  	this.x2AxisVisible = bool;
-  	return this;
-  };
-
-  plot.toggleYAxis = function(bool){
-  	this.yAxisVisible = bool;
-  	return this;
-  };
-
-  plot.toggleY2Axis = function(bool){
-  	this.y2AxisVisible = bool;
-  	return this;
-  };
-
-  plot.setXTicks = function(ticks){
-  	this.xTicks = ticks;
-  	return this;
-  };
-
-  plot.setYTicks = function(ticks){
-  	this.yTicks = ticks;
-  	return this;
-  };
-
-  plot.setX2Ticks = function(ticks){
-  	this.x2Ticks = ticks;
-  	return this;
-  };
-
-  plot.setY2Ticks = function(ticks){
-  	this.y2Ticks = ticks;
-  	return this;
-  };
-
-  plot.setYTitle = function(title){
-  	this.yTitle = title;
-  	return this;
-  };
-
-  plot.setXTitle = function(title){
-  	this.xTitle = title;
-  	return this;
-  };
-
-  plot.setY2Title = function(title){
-  	this.y2Title = title;
-  	return this;
-  };
-
-  plot.setX2Title = function(title){
-  	this.x2Title = title;
-  	return this;
-  };
-
-  plot.setXOrient = function(orient){
-  	this.xOrient = orient;
-  	return this;
-  };
-
-  plot.setX2Orient = function(orient){
-  	this.x2Orient = orient;
-  	return this;
-  };
-
-  plot.setYOrient = function(orient){
-  	this.yOrient = orient;
-  	return this;
-  };
-
-  plot.sety2Orient = function(orient){
-  	this.y2Orient = orient;
-  	return this;
-  };
-
-  plot.setXTickFormat = function(format){
-  	this.xTickFormat = format;
-  	return this;
-  };
-  
-  plot.setYTickFormat = function(format){
-  	this.yTickFormat = format;
-  	return this;
-  };
-  
-  plot.setX2TickFormat = function(format){
-  	this.x2TickFormat = format;
-  	return this;
-  };
-
-  plot.setY2TickFormat = function(format){
-  	this.y2TickFormat = format;
-  	return this;
-  };
-
-  plot.draw = function() {
-	  this.xScale = d3.scale.linear()
-    	.domain(this.xDomain)
-    	.range([0, this.width]);
-    this.yScale = d3.scale.linear()
-    	.domain(this.yDomain)
-    	.range([0, this.height]);
-
-    var innerWidth = this.width - this.margin.left - this.margin.right,
-    innerHeight = this.height - this.margin.top - this.margin.bottom;
-
-	  // Append svg object to dom element
-	  this.svg = d3.select(elem).append('svg')
-	    .attr('class', 'log_plot')
-	    .attr('width', this.width + this.margin.right + this.margin.left)
-	    .attr('height', this.height + this.margin.bottom + this.margin.top) 
-	    .append('g')
-	    .attr('height', this.height)
-	    .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
-
-	  // Set axis
-	  if(this.xAxisVisible){
-	  	this.xAxis = createAxis(this.xScale, -this.height, this.xOrient, this.xTicks);
-	  	this.xAxis.tickFormat(this.xTickFormat);
-	  	this.svg.append('g')
-	    	.attr('class', 'x axis')
-	    	.call(this.xAxis);
-	  }
-	  if(this.yAxisVisible){
-	  	this.yAxis = createAxis(this.yScale, -this.width, this.yOrient, this.yTicks);
-	  	this.yAxis.tickFormat(this.yTickFormat);
-	  	this.svg.append('g')
-		    .attr('class', 'y axis')
-		    .call(this.yAxis);
-	  }
-	  if(this.x2AxisVisible){
-	  	this.x2Scale = d3.scale.linear()
-	    	.domain(this.x2Domain)
-	    	.range([0, this.width]);
-	  	this.x2Axis = createAxis(this.x2Scale, -this.height, this.x2Orient, this.x2Ticks);
-	  	this.x2Axis.tickFormat(this.x2TickFormat);
-	  	this.svg.append('g')
-	    	.attr('class', 'x2 axis')
-		    .attr("transform", "translate(" + "0," + this.height + ")")
-	    	.call(this.x2Axis);
-	  }
-	 	if(this.y2AxisVisible){
-	 		this.y2Scale = d3.scale.linear()
-	    	.domain(this.y2Domain)
-	    	.range([0, this.height]);
-	  	this.y2Axis = createAxis(this.y2Scale, -this.width, this.y2Orient, this.y2Ticks);
-	  	this.y2Axis.tickFormat(this.y2TickFormat);
-	  	this.svg.append('g')
-		    .attr('class', 'y2 axis')
-		    .attr("transform", "translate(" + this.width + ",0)")
-		    .call(this.y2Axis);
-	  }
-
-    if(this.xTitle){
-      
-      if(this.xTickFormat === ""){
-        var margin = -10;
-      } else {
-        var margin = -30;
-      }
-      this.svg.append("text")
-          .attr("x", (this.width) / 2)
-          .attr("y", margin)
-          .style("text-anchor", "middle")
-          .style("font-size", 12)
-          .text(this.xTitle);
-    }
-    if(this.yTitle){
-
-      if(this.yTickFormat === ""){
-        var yMargin = -10;
-      } else {
-        var yMargin = -40;
-      }
-
-      this.svg.append("text")
-        .attr("transform", "rotate(-90)")
-        .attr("y", yMargin)
-        .attr("dy", "1em")
-        .style("text-anchor", "end")
-        .style("font-size", 12)
-        .text(this.yTitle);
-    }
-    if(this.x2Title){
-      
-      if(this.x2TickFormat === ""){
-        var margin = 10;
-      } else {
-        var margin = 30;
-      }
-      this.svg.append("text")
-          .attr("transform", "translate(" + "0," + this.height + ")")
-        .attr("x", (this.width) / 2)
-          .attr("y", margin)
-          .style("text-anchor", "middle")
-          .style("font-size", 12)
-          .text(this.x2Title);
+//  Defaults
+plot.prototype._height = 800;
+plot.prototype._xDomain = [0,0];
+plot.prototype._yDomain = [0,0];
+plot.prototype._xAxisVisible = true;
+plot.prototype._yAxisVisible = true;
+plot.prototype._x2AxisVisible = true;
+plot.prototype._y2AxisVisible = true;
+plot.prototype._xOrient = 'top';
+plot.prototype._x2Orient = 'bottom';
+plot.prototype._yOrient = 'left';
+plot.prototype._y2Orient = 'right';
+plot.prototype._duration = 5;
+
+// Setters
+plot.prototype.duration = function(duration){
+  if(duration === undefined){ return this._duration; }
+  this._duration = duration;
+  return this;
+};
+
+plot.prototype.margin = function(top, right, bottom, left){
+  if(top === undefined){ return this._margin; }
+  this._margin = {top: top, right: right, bottom: bottom, left: left};
+  return this;
+};
+
+plot.prototype.width = function(width){
+  if(width === undefined){ return this._width; }
+  this._width = width;
+  return this;
+};
+
+plot.prototype.height = function(height){
+  if(height === undefined){ return this._height; }
+  this._height = height;
+  return this;
+};
+
+plot.prototype.xDomain = function(domain){
+  if(domain === undefined){ return this._xDomain; }
+  this._xDomain = domain;
+  return this;
+};
+
+plot.prototype.yDomain = function(domain){
+  if(domain === undefined){ return this._yDomain; }
+  this._yDomain = domain;
+  return this;
+};
+
+plot.prototype.y2Domain = function(domain){
+  if(domain === undefined){ return this._y2Domain; }
+  this._x2Domain = domain;
+  return this;
+};
+
+plot.prototype.y2Domain = function(domain){
+  if(domain === undefined){ return this._y2Domain; }
+  this._y2Domain = domain;
+  return this;
+};
+
+plot.prototype.toggleXAxis = function(bool){
+  if(bool === undefined){ return this._xAxisVisible; }
+  this._xAxisVisible = bool;
+  return this;
+};
+
+plot.prototype.toggleX2Axis = function(bool){
+  if(bool === undefined){ return this._x2AxisVisible; }
+  this._x2AxisVisible = bool;
+  return this;
+};
+
+plot.prototype.toggleYAxis = function(bool){
+  if(bool === undefined){ return this._yAxisVisible; }
+  this._yAxisVisible = bool;
+  return this;
+};
+
+plot.prototype.toggleY2Axis = function(bool){
+  if(bool === undefined){ return this._y2AxisVisible; }
+  this._y2AxisVisible = bool;
+  return this;
+};
+
+plot.prototype.xTicks = function(ticks){
+  if(ticks === undefined){ return this._xTicks; }
+  this._xTicks = ticks;
+  return this;
+};
+
+plot.prototype.yTicks = function(ticks){
+  if(ticks === undefined){ return this._yTicks; }
+  this._yTicks = ticks;
+  return this;
+};
+
+plot.prototype.x2Ticks = function(ticks){
+  if(ticks === undefined){ return this._x2Ticks; }
+  this._x2Ticks = ticks;
+  return this;
+};
+
+plot.prototype.y2Ticks = function(ticks){
+  if(ticks === undefined){ return this._y2Ticks; }
+  this._y2Ticks = ticks;
+  return this;
+};
+
+plot.prototype.xTitle = function(title){
+  if(title === undefined){ return this._yTitle; }
+  this._xTitle = title;
+  return this;
+};
+
+plot.prototype.yTitle = function(title){
+  if(title === undefined){ return this._yTitle; }
+  this._yTitle = title;
+  return this;
+};
+
+plot.prototype.y2Title = function(title){
+  if(title === undefined){ return this._y2Title; }
+  this._y2Title = title;
+  return this;
+};
+
+plot.prototype.x2Title = function(title){
+  if(title === undefined){ return this._x2Title; }
+  this._x2Title = title;
+  return this;
+};
+
+plot.prototype.xOrient = function(orient){
+  if(orient === undefined){ return this._xOrient; }
+  this._xOrient = orient;
+  return this;
+};
+
+plot.prototype.x2Orient = function(orient){
+  if(orient === undefined){ return this._x2Orient; }
+  this._x2Orient = orient;
+  return this;
+};
+
+plot.prototype.yOrient = function(orient){
+  if(orient === undefined){ return this._yOrient; }
+  this._yOrient = orient;
+  return this;
+};
+
+plot.prototype.y2Orient = function(orient){
+  if(orient === undefined){ return this._y2Orient; }
+  this._y2Orient = orient;
+  return this;
+};
+
+plot.prototype.xTickFormat = function(format){
+  if(format === undefined){ return this._xTickFormat; }
+  this._xTickFormat = format;
+  return this;
+};
+
+plot.prototype.yTickFormat = function(format){
+  if(format === undefined){ return this._yTickFormat; }
+  this._yTickFormat = format;
+  return this;
+};
+
+plot.prototype.x2TickFormat = function(format){
+  if(format === undefined){ return this._x2TickFormat; }
+  this._x2TickFormat = format;
+  return this;
+};
+
+plot.prototype.y2TickFormat = function(format){
+  if(format === undefined){ return this._y2TickFormat; }
+  this._y2TickFormat = format;
+  return this;
+};
+
+plot.prototype.xScale = function(scale){
+  if(scale === undefined){ return this._xScale; }
+  this._xScale = scale;
+  return this;
+};
+
+plot.prototype.x2Scale = function(scale){
+  if(scale === undefined){ return this._x2Scale; }
+  this._x2Scale = scale;
+  return this;
+};
+
+plot.prototype.yScale = function(scale){
+  if(scale === undefined){ return this._yScale; }
+  this._yScale = scale;
+  return this;
+};
+
+plot.prototype.y2Scale = function(scale){
+  if(scale === undefined){ return this._y2Scale; }
+  this._y2Scale = scale;
+  return this;
+};
+
+plot.prototype.svg = function(svg){
+  if(svg === undefined){ return this._svg; }
+  this._svg = svg;
+  return this;
+};
+
+plot.prototype.createSVG = function(){
+  // Append svg object to dom element
+  return d3.select(this._elem).append('svg')
+    .attr('class', 'log_plot')
+    .attr('width', this._width + this._margin.right + this._margin.left)
+    .attr('height', this._height + this._margin.bottom + this._margin.top) 
+    .append('g')
+    .attr('height', this.height)
+    .attr('transform', 'translate(' + this._margin.left + ',' + this._margin.top + ')');
+};
+
+plot.prototype.setScales = function(){
+  this._xScale = d3.scale.linear()
+    .domain(this._xDomain)
+    .range([0, this._width]);
+
+  this._yScale = d3.scale.linear()
+    .domain(this._yDomain)
+    .range([0, this._height]);
+
+  if(this._x2Domain === undefined){ 
+    this._x2Domain = this._xDomain;
+  }
+  this._x2Scale = d3.scale.linear()
+    .domain(this._x2Domain)
+    .range([0, this._width]);
+
+  if(this._y2Domain === undefined){
+    this._y2Domain = this._yDomain;
+  }
+  this._y2Scale = d3.scale.linear()
+    .domain(this._y2Domain)
+    .range([0, this._height]);
+};
+
+plot.prototype.createAxis = function(scale, innerTickSize, orient, ticks){
+  return d3.svg.axis()
+    .scale(scale)
+    .innerTickSize(innerTickSize)
+    .outerTickSize(3)
+    .tickPadding(5)
+    .orient(orient)
+    .ticks(ticks);
+};
+
+plot.prototype.setAxis = function(){
+  if(this._xAxisVisible){
+    this._xAxis = this.createAxis(this._xScale, -this._height, this._xOrient, this._xTicks);
+    this._xAxis.tickFormat(this._xTickFormat);
+    this._svg.append('g')
+      .attr('class', 'x axis')
+      .call(this._xAxis);
+  }
+  if(this._yAxisVisible){
+    this._yAxis = this.createAxis(this._yScale, -this._width, this._yOrient, this._yTicks);
+    this._yAxis.tickFormat(this._yTickFormat);
+    this._svg.append('g')
+      .attr('class', 'y axis')
+      .call(this._yAxis);
+  }
+  if(this._x2AxisVisible){
+    this._x2Axis = this.createAxis(this._x2Scale, -this._height, this._x2Orient, this._x2Ticks);
+    this._x2Axis.tickFormat(this._x2TickFormat);
+    this._svg.append('g')
+      .attr('class', 'x2 axis')
+      .attr("transform", "translate(" + "0," + this._height + ")")
+      .call(this._x2Axis);
+  }
+  if(this._y2AxisVisible){
+    this._y2Axis = this.createAxis(this._y2Scale, -this._width, this._y2Orient, this._y2Ticks);
+    this._y2Axis.tickFormat(this._y2TickFormat);
+    this._svg.append('g')
+      .attr('class', 'y2 axis')
+      .attr("transform", "translate(" + this._width + ",0)")
+      .call(this._y2Axis);
+  }
+};
+
+plot.prototype.setTitles = function(){
+  if(this._xTitle){
+    if(this._xTickFormat === ""){
+      var margin = -10;
+    } else {
+      var margin = -30;
     }
-    if(this.y2Title){
-
-      if(this.yTickFormat === ""){
-        var yMargin = -10;
-      } else {
-        var yMargin = -40;
-      }
-
-      this.svg.append("text")
-        .attr("transform", "translate(" + "0," + this.height + ")")
-        .attr("y", yMargin)
-        .attr("dy", "1em")
-        .style("text-anchor", "end")
-        .style("font-size", 12)
-        .text(this.y2Title);
+    this._svg.append("text")
+      .attr("x", (this._width) / 2)
+      .attr("y", margin)
+      .style("text-anchor", "middle")
+      .style("font-size", 12)
+      .text(this._xTitle);
+  }
+
+  if(this._yTitle){
+    if(this._yTickFormat === ""){
+      var yMargin = -10;
+    } else {
+      var yMargin = -40;
     }
-	  return this;
-	};
 
-  plot.reDraw = function(xDomain, yDomain, x2Domain, y2Domain){    
-    if(xDomain){
-      this.xScale.domain(xDomain);
-      this.svg.select('.x.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.xAxis)
-        .ease('linear');
+    this._svg.append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("y", yMargin)
+      .attr("dy", "1em")
+      .style("text-anchor", "end")
+      .style("font-size", 12)
+      .text(this._yTitle);
+  }
+
+  if(this._x2Title){
+    if(this._x2TickFormat === ""){
+      var margin = 10;
+    } else {
+      var margin = 30;
     }
 
-    if(yDomain){
-      this.yScale.domain(yDomain);
-      this.svg.select('.y.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.yAxis)
-        .ease('linear');
+    this._svg.append("text")
+      .attr("transform", "translate(" + "0," + this._height + ")")
+      .attr("x", (this._width) / 2)
+      .attr("y", margin)
+      .style("text-anchor", "middle")
+      .style("font-size", 12)
+      .text(this._x2Title);
+  }
+
+  if(this._y2Title){
+    if(this._yTickFormat === ""){
+      var yMargin = -10;
+    } else {
+      var yMargin = -40;
     }
 
-    if(x2Domain){
-      this.x2Scale.domain(x2Domain);
-      this.svg.select('.x2.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.x2Axis)
-        .ease('linear');
-    }
+    this._svg.append("text")
+      .attr("transform", "translate(" + "0," + this._height + ")")
+      .attr("y", yMargin)
+      .attr("dy", "1em")
+      .style("text-anchor", "end")
+      .style("font-size", 12)
+      .text(this._y2Title);
+  }
+};
 
-    if(y2Domain){
-      this.y2Scale.domain(y2Domain);
-      this.svg.select('.y2.axis')
-        .transition()
-        .duration(this.duration)
-        .call(this.y2Axis)
-        .ease('linear');
-    }
-  };
+plot.prototype.draw = function() {
+  this.setScales();
+  this._svg = this.createSVG();
+  this.setAxis();
+  this.setTitles();
+  return this;
+};
 
-	return plot;
-}
-g3.seismic = function(plot, data, options){
+plot.prototype.reDraw = function(xDomain, yDomain, x2Domain, y2Domain){    
+  if(xDomain){
+    this._xScale.domain(xDomain);
+    this._svg.select('.x.axis')
+      .transition()
+      .duration(this._duration)
+      .call(this._xAxis)
+      .ease('linear');
+  }
+
+  if(yDomain){
+    this._yScale.domain(yDomain);
+    this._svg.select('.y.axis')
+      .transition()
+      .duration(this._duration)
+      .call(this._yAxis)
+      .ease('linear');
+  }
+
+  if(x2Domain === undefined){
+      x2Domain = xDomain;
+  }
+  this._x2Scale.domain(x2Domain);
+  this._svg.select('.x2.axis')
+    .transition()
+    .duration(this._duration)
+    .call(this._x2Axis)
+    .ease('linear');
+
+  if(y2Domain === undefined){
+    y2Domain = yDomain;
+  }
+  this._y2Scale.domain(y2Domain);
+  this._svg.select('.y2.axis')
+    .transition()
+    .duration(this._duration)
+    .call(this._y2Axis)
+    .ease('linear');
+};
+
+// Attach seismic creation function to g3
+g3.seismic = function(plot, data){
+  return new seismic(plot, data);
+};
+
+// Constructor
+// Only set variables that are set by items passed in, otherwise set using prototype
+var seismic = function seismic(plot, data){
 	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
 	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
-	
-	var seismic = {};
-	seismic.max = 1;
-	seismic.gain = 1;
-	seismic.plot = plot;
-	seismic.data = data;
-	seismic.duration = 500;
-
-  seismic.draw = function(){
-
-  	if(!seismic.color){
-		seismic.color = d3.scale.linear()
-		.domain([-this.max, 0, this.max])
-		.range(['#FF0000', '#FFF', '#0000FF']);
-	}
-
-  	var elem = $(plot.elem);
-    this.canvas = d3.select(plot.elem)
-      .append('canvas')
-      .attr('width', data.length)
-      .attr('height', data[0].length)
-      .style('width', plot.width +  'px')
-      .style('height', plot.height + 'px')
-      .style('opacity', 0.95)
-      .style('top', plot.margin.top + 'px')
-      .style('left', plot.margin.left + 'px')
-      .call(seismic.drawImage);
-    return this;
-  };
-
-	seismic.reDraw = function(data){
-
-  	// Update the Canvas Attributes
-  	seismic.canvas
-      .attr('width', data.length)
-      .attr('height', data[0].length)
-      .style('width', seismic.plot.width +  'px')
-      .style('height', seismic.plot.height + 'px');
-
-    // Wipe the old canvas, the new size can be different
-  	seismic.context.clearRect(0, 0, seismic.data.length, seismic.data[0].length);
-
-  	seismic.data = data;
-		var x = data.length,
-		y = data[0].length;
-		var image = seismic.context.createImageData(x,y);
-
-		// Paint the image
-		for(var i = 0, p = -1; i < y; ++ i){
-			for(var j = 0; j < x; ++j){
-				var c = d3.rgb(seismic.color(data[j][i] * seismic.gain));
-				image.data[++p] = c.r;
-				image.data[++p] = c.g;
-				image.data[++p] = c.b;
-				image.data[++p] = 255;
-			}
-		}
+  this._data = data;
+  this._plot = plot;
+  return this;
+};
 
-		// Dump image to canvas
-		seismic.context.putImageData(image, 0, 0);
-	  return this;
-  };
-
-	seismic.drawImage = function(canvas){
-		seismic.context = canvas.node().getContext('2d');
-		var x = seismic.data.length,
-		y = seismic.data[0].length;
-		seismic.image = seismic.context.createImageData(x,y);
-
-		for(var i = 0, p = -1; i < y; ++ i){
-			for(var j = 0; j < x; ++j){
-				var c = d3.rgb(seismic.color(seismic.data[j][i] * seismic.gain));
-				seismic.image.data[++p] = c.r;
-				seismic.image.data[++p] = c.g;
-				seismic.image.data[++p] = c.b;
-				seismic.image.data[++p] = 255;
-			}
-		}
-		seismic.context.putImageData(seismic.image, 0, 0);
-		return this;
+// Set remaining variables
+seismic.prototype._max = 1;
+seismic.prototype._gain = 1;
+seismic.prototype._duration = 5;
+
+// Default Color Scale
+if(seismic._colorScale === undefined){
+	seismic.prototype._colorScale = function(){
+		return d3.scale.linear()
+			.domain([-this._max, 0, this._max])
+			.range(['#FF0000', '#FFFFFF', '#0000FF']);
 	};
+}
 
-	seismic.setColor = function(colorScale){
-		this.color = colorScale;
-		return this;
-	};
+// Setters
+seismic.prototype.colorScale = function(colorScale){
+	if(colorScale === undefined){ return this._colorScale; }
+	this._colorScale = colorScale;
+	return this;
+};
 
-	seismic.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	};
+seismic.prototype.duration = function(duration){
+	if(duration === undefined){ return this._duration; }
+	this._duration = duration;
+	return this;
+};
 
-	seismic.setMax = function(max){
-		this.max = max;
-		return this;
-	};
+seismic.prototype.gain = function(gain){
+	if(gain === undefined){ return this._gain; }
+	this._gain = gain;
+	return this;
+};
 
-	seismic.setGain = function(gain){
-		this.gain = gain;
-		return this;
-	};
+seismic.prototype.max = function(max){
+	if(max === undefined){ return this._max; }
+	this._max = max;
+	return this;
+};
 
-	return seismic;
-}
-g3.wiggle = function(plot, data, options){
+// Draw method
+seismic.prototype.draw = function(){
+	this._canvas = g3.canvas(this._plot, this._data)
+		.gain(this._gain)
+		.colorScale(this._colorScale)
+		.draw();
+  return this;
+};
+
+seismic.prototype.reDraw = function(data){
+	this._canvas.reDraw(data);
+};
+
+// Attach horizon creation function to g3
+g3.wiggle = function(plot, data){
+  return new wiggle(plot, data);
+};
 
+// Constructor
+// Only set variables that are set by items passed in, otherwise set using prototype
+var wiggle = function wiggle(plot, data){
 	if(!data || !$.isArray(data)){ return 'Param: data is missing, An array required'; }
 	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+  this._data = data;
+  this._plot = plot;
+  this._xMin = plot._xDomain[0];
+  this._yMin = plot._yDomain[0];
+  this._rand = Math.floor((Math.random() * 100) + 100);
+  return this;
+};
 
-	var wiggle = {};
-	wiggle.skip = 0;
-	wiggle.gain = 30;
-	wiggle.xInt = 1;
-	wiggle.xMin = plot.xDomain[0];
-	wiggle.yInt = 1;
-	wiggle.yMin = plot.yDomain[0];
-	wiggle.rand = Math.floor((Math.random() * 100) + 1);
-	wiggle.sampleRate = 1;
-	wiggle.duration = 500;
-
-	var s = wiggle.gain / wiggle.max;
-
-	wiggle.setSkip = function(skip){
-		this.skip = skip;
-		return this;
-	};
+// Set defaults
+wiggle.prototype._skip = 0;
+wiggle.prototype._gain = 30;
+wiggle.prototype._xInt = 1;
+wiggle.prototype._yInt = 1;
+wiggle.prototype._duration = 5;
+wiggle.prototype._sampleRate = 1;
+wiggle.prototype._strokeWidth = 0.5;
+wiggle.prototype._color = 'black';
+wiggle.prototype._fillColor = 'black';
+wiggle.prototype._opacity = 0.4;
+
+//var s = wiggle.gain / wiggle.max;
+
+wiggle.prototype.skip = function(skip){
+	if(skip === undefined){ return this._skip; }
+	this._skip = skip;
+	return this;
+};
 
-	wiggle.setGain = function(gain){
-		this.gain = gain;
-		return this;
-	};
+wiggle.prototype.gain = function(gain){
+	if(gain === undefined){ return this._gain; }
+	this._gain = gain;
+	return this;
+};
 
-	wiggle.setMax = function(max){
-		this.max = max;
-		return this;
-	};
+wiggle.prototype.max = function(max){
+	if(max === undefined){ return this._max; }
+	this._max = max;
+	return this;
+};
 
-	wiggle.setXMin = function(xMin){
-		this.xMin = xMin;
-		return this;
-	};
+wiggle.prototype.xMin = function(xMin){
+	if(xMin === undefined){ return this._xMin; }
+	this._xMin = xMin;
+	return this;
+};
 
-	wiggle.setYMin = function(yMin){
-		this.yMin = yMin;
-		return this;
-	};
+wiggle.prototype.yMin = function(yMin){
+	if(yMin === undefined){ return this._yMin; }
+	this._yMin = yMin;
+	return this;
+};
 
-	wiggle.setXInt = function(xInt){
-		this.xInt = xInt;
-		return this;
-	};
+wiggle.prototype.xInt = function(xInt){
+	if(xInt === undefined){ return this._xInt; }
+	this._xInt = xInt;
+	return this;
+};
 
-	wiggle.setYInt = function(yInt){
-		this.yInt = yInt;
-		return this;
-	};
+wiggle.prototype.yInt = function(yInt){
+	if(yInt === undefined){ return this._yInt; }
+	this._yInt = yInt;
+	return this;
+};
 
-	wiggle.setFillColor = function(color){
-		this.fillColor = color;
-		return this;
-	};
+wiggle.prototype.fillColor = function(color){
+	if(color === undefined){ return this._fillColor; }
+	this._fillColor = color;
+	return this;
+};
 
-	wiggle.setColor = function(color){
-		this.color = color;
-		return this;
-	};
+wiggle.prototype.color = function(color){
+	if(color === undefined){ return this._color; }
+	this._color = color;
+	return this;
+};
 
-	wiggle.setStrokeWidth = function(strokeWidth){
-		this.strokeWidth = strokeWidth;
-		return this;
-	};
+wiggle.prototype.strokeWidth = function(strokeWidth){
+	if(strokeWidth === undefined){ return this._strokeWidth; }
+	this._strokeWidth = strokeWidth;
+	return this;
+};
 
-	wiggle.setSampleRate = function(sampleRate){
-		this.sampleRate = sampleRate;
-		return this;
-	};
+wiggle.prototype.sampleRate = function(sampleRate){
+	if(sampleRate === undefined){ return this._sampleRate; }
+	this._sampleRate = sampleRate;
+	return this;
+};
 
-	wiggle.setDuration = function(duration){
-		this.duration = duration;
-		return this;
-	};
+wiggle.prototype.duration = function(duration){
+	if(duration === undefined){ return this._duration; }
+	this._duration = duration;
+	return this;
+};
 
-	wiggle.draw = function() {
-		for(var k = data.length - 1; k >= 0; k--){
-	    if(this.skip === 0 || k % this.skip === 0){
-	      var mean = d3.mean(data[k]); 
-
-	      // Line function
-		    var line = d3.svg.area()
-		      .interpolate('basis')
-		      .x(function (d) {
-		        return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-		      })
-		      .y(function (d, i){
-		        return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-		      });
-
-		    // Clip path area function
-		    var area = d3.svg.area()
-		      .interpolate('basis')
-		      .x(function (d, i) {
-		        return plot.xScale(mean * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-		      })
-		      .y(function (d, i){
-		        return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-		      });
-
-        plot.svg.datum(data[k]);
-
-        plot.svg.append('clipPath')
-          .attr('id', 'clip-below' + wiggle.rand + k)
-          .append('path')
-          .attr('d', area.x0(plot.width));
-
-        plot.svg.append('path')
-          .attr('id', 'area-below' + k)
-          .attr('clip-path', 'url(#clip-below' + wiggle.rand + k)
-          .attr('fill', 'black')
-          .style('opacity', 0.4)
-          .attr('d', area.x0(function (d, i){ 
-            return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-          }));
-
-        plot.svg.append('path')
-          .attr('class', 'line' + k)
-          .attr('d', line(data[k]))
-          .attr('stroke', 'black')
-          .attr('stroke-width', 0.50)
-          .attr('fill', 'none');
-	    }
-	  }
-	  return this;
-	};
+wiggle.prototype.opacity = function(opacity){
+	if(opacity === undefined){ return this._opacity; }
+	this._opacity = opacity;
+	return this;
+};
 
-	wiggle.reDraw = function(data, xDomain, yDomain){
-
-		// Redraw the Axis
-		plot.xScale.domain(xDomain);
-		plot.yScale.domain(yDomain);
-			
-		plot.svg.select('.x.axis')
-			.transition()
-			.duration(this.duration)
-			.call(plot.xAxis)
-			.selectAll("text")  
-			.style("text-anchor", "start")
-	    	.attr("transform", "rotate(-45)" );
-
-		plot.svg.select('.y.axis')
-			.transition()
-			.duration(this.duration)
-			.call(plot.yAxis);
-
-	  for(var k = data.length - 1; k >= 0; k--){
-	    if(this.skip === 0 || k % this.skip === 0){
-				var mean = d3.mean(data[k]); 
-	      
-	      plot.svg.select("#clip-below" + wiggle.rand + k)
-	        .remove()
-
-	      // Line function
-	      var line = d3.svg.area()
-	        .interpolate('basis')
-	        .x(function (d) {
-	          return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-	        })
-	        .y(function (d, i){
-	          return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-	        });
-
-	      // Clip path area function
-	      var area = d3.svg.area()
-	        .interpolate('basis')
-	        .x(function (d, i) {
-	          return plot.xScale(mean * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-	        })
-	        .y(function (d, i){
-	          return plot.yScale(i * wiggle.yInt + wiggle.yMin);
-	        });
-
-	      plot.svg.select(".line" + k)
-	        .transition()
-	        .duration(this.duration)
-	        .attr('d', line(data[k]))
-	        .ease("linear");
-
-	      plot.svg.datum(data[k]);
-
-	      plot.svg.append('clipPath')
-	        .attr('id', 'clip-below' + wiggle.rand + k)
-	        .append('path')
-	        .attr('d', area.x0(plot.width));
-	        
-	      plot.svg.select("#area-below" + k)
-	        .attr('clip-path', 'url(#clip-below' + wiggle.rand + k)
-	        .transition()
-	        .duration(this.duration)
-	        .attr('d', area.x0(function (d, i){ 
-	          return plot.xScale(d * wiggle.gain + wiggle.xMin + k * wiggle.sampleRate);
-	        }))
-	        .ease('linear');
-	    	} 
-  		}
-    return this;
-  };
-	return wiggle;
+wiggle.prototype.lineFunc = function(k){
+	var plot = this._plot,
+			gain = this._gain,
+			xMin = this._xMin,
+			sampleRate = this._sampleRate,
+			yInt = this._yInt,
+			yMin = this._yMin;
+
+	return d3.svg.area()
+    .x(function (d) {
+      return plot._xScale(d * gain + xMin + k * sampleRate);
+    })
+    .y(function (d, i){
+      return plot._yScale(i * yInt + yMin);
+    })
+   	.interpolate('basis');
 };
 
+wiggle.prototype.areaFunc = function(k, mean){
+	var plot = this._plot,
+			gain = this._gain,
+			xMin = this._xMin,
+			sampleRate = this._sampleRate,
+			yMin = this._yMin,
+			yInt = this._yInt;
+
+	return d3.svg.area()
+	  .x(function (d, i) {
+	    return plot._xScale(mean * gain + xMin + k * sampleRate);
+	  })
+	  .y(function (d, i){
+	    return plot._yScale(i * yInt + yMin);
+	  })
+	 	.interpolate('basis');
+};
+
+wiggle.prototype.draw = function() {
+	for(var k = this._data.length - 1; k >= 0; k--){
+    if(this._skip === 0 || k % this._skip === 0){
+      var mean = d3.mean(this._data[k]); 
+
+      // Line function
+	    var line = this.lineFunc(k);
+	    var area = this.areaFunc(k, mean);
+
+      this._plot._svg.datum(this._data[k]);
+
+      this._plot._svg.append('clipPath')
+        .attr('id', 'clip-below' + this._rand + k)
+        .append('path')
+        .attr('d', area.x0(this._plot._width));
+
+      var plot = this._plot,
+      		gain = this._gain,
+      		xMin = this._xMin,
+      		sampleRate = this._sampleRate;
+
+      this._plot._svg.append('path')
+        .attr('id', 'area-below' + k)
+        .attr('clip-path', 'url(#clip-below' + this._rand + k)
+        .attr('fill', this._fillColor)
+        .style('opacity', this._opacity)
+        .attr('d', area.x0(function (d, i){ 
+          return plot._xScale(d * gain + xMin + k * sampleRate);
+        }));
+
+      this._plot._svg.append('path')
+        .attr('class', 'line' + k)
+        .attr('d', line(this._data[k]))
+        .attr('stroke', this._color)
+        .attr('stroke-width', this._strokeWidth)
+        .attr('fill', 'none');
+    }
+  }
+  return this;
+};
+
+wiggle.prototype.reDraw = function(data, xDomain, yDomain){
+
+	// Redraw the Axis
+	this._plot._xScale.domain(xDomain);
+	this._plot._yScale.domain(yDomain);
+		
+	this._plot._svg.select('.x.axis')
+		.transition()
+		.duration(this._duration)
+		.call(this._plot._xAxis)
+		.selectAll("text")  
+		.style("text-anchor", "start")
+    	.attr("transform", "rotate(-45)" );
+
+	this._plot._svg.select('.y.axis')
+		.transition()
+		.duration(this._duration)
+		.call(this._plot._yAxis);
+
+  for(var k = data.length - 1; k >= 0; k--){
+    if(this._skip === 0 || k % this._skip === 0){
+			var mean = d3.mean(data[k]); 
+      
+      this._plot._svg.select("#clip-below" + this._rand + k)
+        .remove()
+
+      var line = this.lineFunc(k);
+      var area = this.areaFunc(k, mean);
+
+      this._plot._svg.select(".line" + k)
+        .transition()
+        .duration(this._duration)
+        .attr('d', line(data[k]))
+        .ease("linear");
+
+      this._plot._svg.datum(data[k]);
+
+      this._plot._svg.append('clipPath')
+        .attr('id', 'clip-below' + this._rand + k)
+        .append('path')
+        .attr('d', area.x0(this._plot._width));
+        
+      var plot = this._plot,
+      		gain = this._gain,
+      		xMin = this._xMin,
+      		sampleRate = this._sampleRate;
+
+      this._plot._svg.select("#area-below" + k)
+        .attr('clip-path', 'url(#clip-below' + this._rand + k)
+        .transition()
+        .duration(this._duration)
+        .attr('d', area.x0(function (d, i){ 
+          return plot._xScale(d * gain + xMin + k * sampleRate);
+        }))
+        .ease('linear');
+    	} 
+		}
+  return this;
+};
 } (window));

From 3552892d9016869234612bf6311a0c96a65a257d Mon Sep 17 00:00:00 2001
From: System Administrator <justinkheisler@gmail.com>
Date: Fri, 2 Oct 2015 15:49:30 -0300
Subject: [PATCH 12/12] reducing code, converting to use new handle module from
 g3

---
 static/js/app.js                | 419 ++++++++------------------------
 static/js/controllers/2DCtrl.js | 417 ++++++++-----------------------
 static/js/controllers/start.js  |   3 +-
 static/js/g3.js                 | 168 +++++++++++++
 4 files changed, 361 insertions(+), 646 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index de4f930..3b9dcc8 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -4,13 +4,11 @@ var app = angular.module('modelr',
 	'ngAnimate',
 	'angular-flexslider']);
 
- 
 app.config(['$interpolateProvider', function($interpolateProvider) {
   $interpolateProvider.startSymbol('{[');
   $interpolateProvider.endSymbol(']}');
 }]);
 
-
 app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
   $scope.setDefaults = function(){
@@ -280,149 +278,69 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     if(!$scope.vDHor){ 
       $scope.vDHor = g3.horizon($scope.vDPlot, arr).draw();
 
-        // var drag = d3.behavior.drag()  // capture mouse drag event
-        //   .on('drag', vDCirRedraw);
-
-        // var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-        // $scope.vDCir = $scope.vDPlot.svg.append('circle')
-        //   .attr("class", "vdcir")
-        //   .attr("r", 5)
-        //   .attr("cx", position[0])
-        //   .attr("cy", position[1])
-        //   .style("opacity", 0.5)
-        //   .call(drag);
-
-        // $(".vdcir").mouseup(function(e){
-        //   e.preventDefault();
-        //   $scope.update_data();
-        // });
-
-        // Register drag trigger for wGWigLine
-        var wigLineDrag = d3.behavior.drag()
-          .on('drag', vDWigLineRedraw);
+      // Register drag trigger for wGWigLine
+      var wigLineDrag = d3.behavior.drag()
+        .on('drag', vDWigLineRedraw);
 
-        // Register drag trigger for wGHorLine
-        var horLineDrag = d3.behavior.drag()
-          .on('drag', vDHorLineRedraw);
+      // Register drag trigger for wGHorLine
+      var horLineDrag = d3.behavior.drag()
+      .on('drag', vDHorLineRedraw);
 
-        // Draw invisible line
-        $scope.vDWigLine = $scope.vDPlot.svg().append('line')
-          .attr("class", "vdwigline")
-          .style("stroke-width", 10)
-          .style("stroke", "black")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale($scope.trace))
-          .attr("y1", yScale(data.seismic[0].length - 1))
-          .attr("x2", xScale($scope.trace))
-          .attr("y2", yScale(0))
-          .call(wigLineDrag);
+      // Draw invisible line
+      $scope.vDWigLine = g3.handle.line(
+        $scope.vDPlot, 
+        $scope.trace, 
+        data.seismic[0].length - 1,
+        $scope.trace,
+        0)
+        .class('vdwigline')
+        .draw();
+      $scope.vDWigLine.line().call(wigLineDrag);
 
-        // Draw invisible horizon line
-        $scope.vDHorLine = $scope.vDPlot.svg().append('line')
-          .style("stroke-width", 10)
-          .style("stroke", "green")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale(0))
-          .attr("y1", yScale($scope.twt))
-          .attr("x2", xScale(data.seismic.length - 1))
-          .attr("y2", yScale($scope.twt))
-          .call(horLineDrag);
+      // Draw invisible horizon line
+      $scope.vDHorLine = g3.handle.line($scope.vDPlot, 0, 
+        $scope.twt, data.seismic.length - 1, $scope.twt).draw();
+      $scope.vDHorLine.line().call(horLineDrag);
 
-        // Register mouseup trigger for wgline
-        $(".vdwigline").mouseup(function(e){
-          e.preventDefault();
-          $scope.update_data();
-        });
+      // Register mouseup trigger for wgline
+      $(".vdwigline").mouseup(function(e){
+        e.preventDefault();
+        $scope.update_data();
+      });
     } else {
-      // position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-      // $scope.vDCir
-      //   .attr("cx", position[0])
-      //   .attr("cy", position[1]);
-
       // Redraw the invisible line
-      $scope.vDWigLine
-        .attr("x1", xScale($scope.trace))
-        .attr("y1", yScale(data.seismic[0].length - 1))
-        .attr("x2", xScale($scope.trace))
-        .attr("y2", yScale(0));
-
+      $scope.vDWigLine.reDraw($scope.trace, data.seismic[0].length - 1, $scope.trace, 0);
       // Redraw invisible horizon
-      $scope.vDHorLine
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-
+      $scope.vDHorLine.reDraw(0, $scope.twt, data.seismic.length - 1, $scope.twt);
       $scope.vDHor.reDraw(arr);
     }
   };
 
   function vDWigLineRedraw(){
     var xScale = $scope.vDPlot.xScale();
-    var yScale = $scope.vDPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
-    if(x < 0){
-      x = 0;
-    } else if(x > $scope.data.seismic.length - 1){
-      x = $scope.data.seismic.length - 1;
-    }
+    if(x < 0){ x = 0; } 
+    else if(x > $scope.data.seismic.length - 1){ x = $scope.data.seismic.length - 1; }
 
     $scope.traceStr = x.toString();
     $scope.changeTraceStr();
-    
-    $scope.vDWigLine
-      .attr("x1", xScale($scope.trace))
-      .attr("x2", xScale($scope.trace));
+    $scope.vDWigLine.reDraw($scope.trace, $scope.data.seismic[0].length - 1, $scope.trace, 0);
   }
 
   function vDHorLineRedraw(){
-    var xScale = $scope.vDPlot.xScale();
     var yScale = $scope.vDPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
-    if(y < 0){
-      y = 0;
-    } else if(y > $scope.data.seismic[0].length - 1){
-      y = $scope.data.seismic[0].length - 1;
-    }
+    if(y < 0){ y = 0; } 
+    else if(y > $scope.data.seismic[0].length - 1){ y = $scope.data.seismic[0].length - 1; }
 
     $scope.twtStr = y.toString();
     $scope.changeTWTStr();
-    
-    $scope.vDHorLine
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
-  }
-  // function vDCirRedraw(){
-  //   var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
-  //   var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
-
-  //   // Check to make sure we are within the boundaries
-  //   if(x < 0){
-  //     x = 0;
-  //   } else if(x > $scope.data.seismic.length - 1) {
-  //     x = $scope.data.seismic.length - 1;
-  //   }
-
-  //   if(y < 0){
-  //     y = 0;
-  //   } else if(y > $scope.data.seismic[0].length - 1){
-  //     y = $scope.data.seismic[0].length - 1;
-  //   }
-
-  //   $scope.traceStr = x.toString();
-  //   $scope.twtStr = y.toString();
-  //   $scope.changeTraceStr();
-  //   $scope.changeTWTStr();
-  //   $scope.wGCir
-  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  //   $scope.oGCir
-  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  //   $scope.vDCir
-  //     .attr("cx", $scope.vDPlot.xScale($scope.trace))
-  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  // };
+    $scope.wGHorLine.reDraw(0, $scope.twt, $scope.data.wavelet_gather.length - 1, $scope.twt);
+    $scope.oGHorLine.reDraw(0, $scope.twt, $scope.data.offset_gather.length - 1, $scope.twt);
+    $scope.vDHorLine.reDraw(0, $scope.twt, $scope.data.seismic.length - 1, $scope.twt);
+  };
 
   $scope.plotOffset = function(data, height, max){
     // Offset Gather Plot
@@ -477,9 +395,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     if(!$scope.oGHor){
       $scope.oGHor = g3.horizon($scope.oGPlot, arr).draw();
 
-        // var drag = d3.behavior.drag()  // capture mouse drag event
-        //   .on('drag', oGCirRedraw);
-
         // Register drag trigger for wGWigLine
         var wigLineDrag = d3.behavior.drag()
           .on('drag', oGWigLineRedraw);
@@ -489,29 +404,26 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .on('drag', oGHorLineRedraw);
 
         // Draw invisible line
-        $scope.oGWigLine = $scope.oGPlot.svg().append('line')
-          .attr("class", "ogwigline")
-          .style("stroke-width", 10)
-          .style("stroke", "black")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale($scope.offset))
-          .attr("y1", yScale(data.offset_gather[0].length - 1))
-          .attr("x2", xScale($scope.offset))
-          .attr("y2", yScale(0))
-          .call(wigLineDrag);
+        $scope.oGWigLine = g3.handle.line(
+          $scope.oGPlot, 
+          $scope.offset, 
+          data.offset_gather[0].length - 1,
+          $scope.offset,
+          0)
+          .class('ogwigline')
+          .draw();
+        $scope.oGWigLine.line().call(wigLineDrag);
 
         // Draw invisible horizon line
-        $scope.oGHorLine = $scope.oGPlot.svg().append('line')
-          .style("stroke-width", 10)
-          .style("stroke", "green")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale(0))
-          .attr("y1", yScale($scope.twt))
-          .attr("x2", xScale(data.offset_gather.length - 1))
-          .attr("y2", yScale($scope.twt))
-          .call(horLineDrag);
+        $scope.oGHorLine = g3.handle.line(
+          $scope.oGPlot, 
+          0, 
+          $scope.twt,
+          data.offset_gather.length - 1,
+          $scope.twt)
+          .draw();
+
+        $scope.oGHorLine.line().call(horLineDrag);
 
         // Register mouseup trigger for wgline
         $(".ogwigline").mouseup(function(e){
@@ -519,38 +431,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           $scope.update_data();
         });
 
-        // var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-        // $scope.oGCir = $scope.oGPlot.svg.append('circle')
-        //   .attr("class", "ogcir")
-        //   .attr("r", 5)
-        //   .attr("cx", position[0])
-        //   .attr("cy", position[1])
-        //   .style("opacity", 0.5)
-        //   .call(drag);
-
-        // $(".ogcir").mouseup(function(e){
-        //   e.preventDefault();
-        //   $scope.update_data();
-        // });
     } else {
-      // position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-      // $scope.oGCir
-      //   .attr("cx", position[0])
-      //   .attr("cy", position[1]);
-
       $scope.oGHor.reDraw(arr);
-
       // Redraw the invisible line
-      $scope.oGWigLine
-        .attr("x1", xScale($scope.offset))
-        .attr("y1", yScale(data.offset_gather[0].length - 1))
-        .attr("x2", xScale($scope.offset))
-        .attr("y2", yScale(0));
-
+      $scope.oGWigLine.reDraw($scope.offset, data.offset_gather[0].length - 1, $scope.offset, 0);
       // Redraw invisible horizon
-      $scope.oGHorLine
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.oGHorLine.reDraw(0, $scope.twt, data.offset_gather.length - 1, $scope.twt);
     }
   };
 
@@ -559,18 +445,15 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var yScale = $scope.oGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
-    if(x < 0){
-      x = 0;
-    } else if(x > $scope.data.offset_gather.length - 1){
+    if(x < 0){ x = 0; } 
+    else if(x > $scope.data.offset_gather.length - 1){
       x = $scope.data.offset_gather.length - 1;
     }
 
     $scope.offsetStr = x.toString();
     $scope.changeOffsetStr();
-    
-    $scope.oGWigLine
-      .attr("x1", xScale($scope.offset))
-      .attr("x2", xScale($scope.offset));
+    $scope.oGWigLine.reDraw($scope.offset, $scope.data.offset_gather[0].length - 1,
+      $scope.offset,0);
   }
 
   function oGHorLineRedraw(){
@@ -578,49 +461,17 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var yScale = $scope.oGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
-    if(y < 0){
-      y = 0;
-    } else if(y > $scope.data.offset_gather[0].length - 1){
+    if(y < 0){ y = 0; } 
+    else if(y > $scope.data.offset_gather[0].length - 1){ 
       y = $scope.data.offset_gather[0].length - 1;
     }
 
     $scope.twtStr = y.toString();
     $scope.changeTWTStr();
-    
-    $scope.oGHorLine
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
-  }
-
-  // function oGCirRedraw(){
-  //   var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
-  //   var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
-
-  //   // Check to make sure we are within the boundaries
-  //   if(x < 0){
-  //     x = 0;
-  //   } else if(x > $scope.data.offset_gather.length - 1) {
-  //     x = $scope.data.offset_gather.length - 1;
-  //   }
-
-  //   if(y < 0){
-  //     y = 0;
-  //   } else if(y > $scope.data.seismic[0].length - 1){
-  //     y = $scope.data.seismic[0].length - 1;
-  //   }
-
-  //   $scope.offsetStr = x.toString();
-  //   $scope.twtStr = y.toString();
-  //   $scope.changeOffsetStr();
-  //   $scope.changeTWTStr();
-  //   $scope.wGCir
-  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  //   $scope.vDCir
-  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  //   $scope.oGCir
-  //     .attr("cx", $scope.oGPlot.xScale($scope.offset))
-  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  // };
+    $scope.wGHorLine.reDraw(0, $scope.twt, $scope.data.wavelet_gather.length - 1, $scope.twt);
+    $scope.oGHorLine.reDraw(0, $scope.twt, $scope.data.offset_gather.length - 1, $scope.twt);
+    $scope.vDHorLine.reDraw(0, $scope.twt, $scope.data.seismic.length - 1, $scope.twt);
+  };
 
   $scope.plotWavelet = function(data, height, max){
     // Wavelet Gather Plot
@@ -663,9 +514,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.plotWaveletHorizon = function(data){
-    var xScale = $scope.wGPlot.xScale();
-    var yScale = $scope.wGPlot.yScale();
-
     var arr = [];
     for(var i = 0; i < data.wavelet_gather.length; i++){
       arr.push($scope.twt);
@@ -674,10 +522,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     if(!$scope.wGHor){
       // Draw horizon line
       $scope.wGHor = g3.horizon($scope.wGPlot, arr).draw();
-
-      // Register drag trigger for wgcir
-      // var cirDrag = d3.behavior.drag()  // capture mouse drag event
-      //   .on('drag', wGCirRedraw);
       
       // Register drag trigger for wGWigLine
       var wigLineDrag = d3.behavior.drag()
@@ -687,39 +531,25 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
       var horLineDrag = d3.behavior.drag()
         .on('drag', wGHorLineRedraw);
 
-      // Draw handle
-      // $scope.wGCir = $scope.wGPlot.svg.append('circle')
-      //   .attr("class", "wgcir")
-      //   .attr("r", 5)
-      //   .attr("cx", xScale($scope.frequency))
-      //   .attr("cy", yScale($scope.twt))
-      //   .style("opacity", 0.5)
-      //   .call(cirDrag);
-
       // Draw invisible line
-      $scope.wGWigLine = $scope.wGPlot.svg().append('line')
-        .attr("class", "wgwigline")
-        .style("stroke-width", 10)
-        .style("stroke", "black")
-        .style("cursor", "pointer")
-        .style("opacity", 0)
-        .attr("x1", xScale($scope.frequency))
-        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
-        .attr("x2", xScale($scope.frequency))
-        .attr("y2", yScale(0))
-        .call(wigLineDrag);
-
-      // Draw invisible horizon line
-      $scope.wGHorLine = $scope.wGPlot.svg().append('line')
-        .style("stroke-width", 10)
-        .style("stroke", "green")
-        .style("cursor", "pointer")
-        .style("opacity", 0)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.wavelet_gather.length - 1))
-        .attr("y2", yScale($scope.twt))
-        .call(horLineDrag);
+      $scope.wGWigLine = g3.handle.line(
+        $scope.wGPlot, 
+        $scope.frequency, 
+        data.wavelet_gather[0].length - 1,
+        $scope.frequency,
+        0)
+        .class('wgwigline')
+        .draw();
+      $scope.wGWigLine.line().call(wigLineDrag);
+
+      $scope.wGHorLine = g3.handle.line(
+        $scope.wGPlot, 
+        0, 
+        $scope.twt,
+        data.wavelet_gather.length - 1,
+        $scope.twt)
+        .draw();
+      $scope.wGHorLine.line().call(horLineDrag);
 
       // Register mouseup trigger for wgline
       $(".wgwigline").mouseup(function(e){
@@ -727,30 +557,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         $scope.update_data();
       });
 
-      // Register mouseup trigger for wgcir
-      // $(".wgcir").mouseup(function(e){
-      //   e.preventDefault();
-      //   $scope.update_data();
-      // });
     } else {
-      
-      // Redraw the handle
-      // $scope.wGCir
-      //   .attr("cx", xScale($scope.frequency))
-      //   .attr("cy", yScale($scope.twt));
-
       // Redraw the invisible line
-      $scope.wGWigLine
-        .attr("x1", xScale($scope.frequency))
-        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
-        .attr("x2", xScale($scope.frequency))
-        .attr("y2", yScale(0));
-
+      $scope.wGWigLine.reDraw($scope.frequency, data.wavelet_gather[0].length - 1, 
+        $scope.frequency, 0);
       // Redraw invisible horizon
-      $scope.wGHorLine
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-
+      $scope.wGHorLine.reDraw(0, $scope.twt, data.wavelet_gather.length - 1, $scope.twt);
       // Redraw horizon
       $scope.wGHor.reDraw(arr);
     }
@@ -758,73 +570,35 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
   function wGWigLineRedraw(){
     var xScale = $scope.wGPlot.xScale();
-    var yScale = $scope.wGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
-    if(x < 0){
-      x = 0;
-    } else if(x > $scope.data.wavelet_gather.length - 1){
+    if(x < 0){ x = 0; } 
+    else if(x > $scope.data.wavelet_gather.length - 1){
       x = $scope.data.wavelet_gather.length - 1;
     }
 
     $scope.frequencyStr = x.toString();
     $scope.changeFrequencyStr();
-    
-    $scope.wGWigLine
-      .attr("x1", xScale($scope.frequency))
-      .attr("x2", xScale($scope.frequency));
+    $scope.wGWigLine.reDraw($scope.frequency, $scope.data.wavelet_gather[0].length - 1, 
+        $scope.frequency, 0);
   }
 
   function wGHorLineRedraw(){
-    var xScale = $scope.wGPlot.xScale();
     var yScale = $scope.wGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
-    if(y < 0){
-      y = 0;
-    } else if(y > $scope.data.wavelet_gather[0].length - 1){
+    if(y < 0){ y = 0; } 
+    else if(y > $scope.data.wavelet_gather[0].length - 1){
       y = $scope.data.wavelet_gather[0].length - 1;
     }
 
     $scope.twtStr = y.toString();
     $scope.changeTWTStr();
-    
-    $scope.wGHorLine
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    $scope.wGHorLine.reDraw(0, $scope.twt, $scope.data.wavelet_gather.length - 1, $scope.twt);
+    $scope.oGHorLine.reDraw(0, $scope.twt, $scope.data.offset_gather.length - 1, $scope.twt);
+    $scope.vDHorLine.reDraw(0, $scope.twt, $scope.data.seismic.length - 1, $scope.twt);
   }
 
-  // function wGCirRedraw(){
-  //   // Set x and y, flooring them.
-  //   var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
-  //   var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
-
-  //   // Check to make sure we are within the boundaries
-  //   if(x < 0){
-  //     x = 0;
-  //   } else if(x > $scope.data.wavelet_gather.length - 1) {
-  //     x = $scope.data.wavelet_gather.length - 1;
-  //   }
-
-  //   if(y < 0){
-  //     y = 0;
-  //   } else if(y > $scope.data.seismic[0].length - 1){
-  //     y = $scope.data.seismic[0].length - 1;
-  //   }
-
-  //   $scope.frequencyStr = x.toString();
-  //   $scope.twtStr = y.toString();
-  //   $scope.changeFrequencyStr();
-  //   $scope.changeTWTStr();
-  //   $scope.oGCir
-  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  //   $scope.vDCir
-  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  //   $scope.wGCir
-  //     .attr("cx", $scope.wGPlot.xScale($scope.frequency))
-  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  // };
-
   $scope.plotAmplitudeTrace = function(data, height){
     // Amplitude Trace
     var width = $('.at_plot').width();
@@ -999,7 +773,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.plotSeismic(data, height, max);
     $scope.plotOffset(data, height, max);
     $scope.plotWavelet(data, height, max);
-
     height = 150;
     $scope.plotAmplitudeTrace(data, height);
     $scope.plotAmplitudeOffset(data, height);
diff --git a/static/js/controllers/2DCtrl.js b/static/js/controllers/2DCtrl.js
index 6330982..db3cabd 100644
--- a/static/js/controllers/2DCtrl.js
+++ b/static/js/controllers/2DCtrl.js
@@ -268,149 +268,69 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     if(!$scope.vDHor){ 
       $scope.vDHor = g3.horizon($scope.vDPlot, arr).draw();
 
-        // var drag = d3.behavior.drag()  // capture mouse drag event
-        //   .on('drag', vDCirRedraw);
-
-        // var position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-        // $scope.vDCir = $scope.vDPlot.svg.append('circle')
-        //   .attr("class", "vdcir")
-        //   .attr("r", 5)
-        //   .attr("cx", position[0])
-        //   .attr("cy", position[1])
-        //   .style("opacity", 0.5)
-        //   .call(drag);
-
-        // $(".vdcir").mouseup(function(e){
-        //   e.preventDefault();
-        //   $scope.update_data();
-        // });
-
-        // Register drag trigger for wGWigLine
-        var wigLineDrag = d3.behavior.drag()
-          .on('drag', vDWigLineRedraw);
+      // Register drag trigger for wGWigLine
+      var wigLineDrag = d3.behavior.drag()
+        .on('drag', vDWigLineRedraw);
 
-        // Register drag trigger for wGHorLine
-        var horLineDrag = d3.behavior.drag()
-          .on('drag', vDHorLineRedraw);
+      // Register drag trigger for wGHorLine
+      var horLineDrag = d3.behavior.drag()
+      .on('drag', vDHorLineRedraw);
 
-        // Draw invisible line
-        $scope.vDWigLine = $scope.vDPlot.svg().append('line')
-          .attr("class", "vdwigline")
-          .style("stroke-width", 10)
-          .style("stroke", "black")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale($scope.trace))
-          .attr("y1", yScale(data.seismic[0].length - 1))
-          .attr("x2", xScale($scope.trace))
-          .attr("y2", yScale(0))
-          .call(wigLineDrag);
+      // Draw invisible line
+      $scope.vDWigLine = g3.handle.line(
+        $scope.vDPlot, 
+        $scope.trace, 
+        data.seismic[0].length - 1,
+        $scope.trace,
+        0)
+        .class('vdwigline')
+        .draw();
+      $scope.vDWigLine.line().call(wigLineDrag);
 
-        // Draw invisible horizon line
-        $scope.vDHorLine = $scope.vDPlot.svg().append('line')
-          .style("stroke-width", 10)
-          .style("stroke", "green")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale(0))
-          .attr("y1", yScale($scope.twt))
-          .attr("x2", xScale(data.seismic.length - 1))
-          .attr("y2", yScale($scope.twt))
-          .call(horLineDrag);
+      // Draw invisible horizon line
+      $scope.vDHorLine = g3.handle.line($scope.vDPlot, 0, 
+        $scope.twt, data.seismic.length - 1, $scope.twt).draw();
+      $scope.vDHorLine.line().call(horLineDrag);
 
-        // Register mouseup trigger for wgline
-        $(".vdwigline").mouseup(function(e){
-          e.preventDefault();
-          $scope.update_data();
-        });
+      // Register mouseup trigger for wgline
+      $(".vdwigline").mouseup(function(e){
+        e.preventDefault();
+        $scope.update_data();
+      });
     } else {
-      // position = [$scope.vDPlot.xScale($scope.trace), $scope.vDPlot.yScale($scope.twt)];
-      // $scope.vDCir
-      //   .attr("cx", position[0])
-      //   .attr("cy", position[1]);
-
       // Redraw the invisible line
-      $scope.vDWigLine
-        .attr("x1", xScale($scope.trace))
-        .attr("y1", yScale(data.seismic[0].length - 1))
-        .attr("x2", xScale($scope.trace))
-        .attr("y2", yScale(0));
-
+      $scope.vDWigLine.reDraw($scope.trace, data.seismic[0].length - 1, $scope.trace, 0);
       // Redraw invisible horizon
-      $scope.vDHorLine
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-
+      $scope.vDHorLine.reDraw(0, $scope.twt, data.seismic.length - 1, $scope.twt);
       $scope.vDHor.reDraw(arr);
     }
   };
 
   function vDWigLineRedraw(){
     var xScale = $scope.vDPlot.xScale();
-    var yScale = $scope.vDPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
-    if(x < 0){
-      x = 0;
-    } else if(x > $scope.data.seismic.length - 1){
-      x = $scope.data.seismic.length - 1;
-    }
+    if(x < 0){ x = 0; } 
+    else if(x > $scope.data.seismic.length - 1){ x = $scope.data.seismic.length - 1; }
 
     $scope.traceStr = x.toString();
     $scope.changeTraceStr();
-    
-    $scope.vDWigLine
-      .attr("x1", xScale($scope.trace))
-      .attr("x2", xScale($scope.trace));
+    $scope.vDWigLine.reDraw($scope.trace, $scope.data.seismic[0].length - 1, $scope.trace, 0);
   }
 
   function vDHorLineRedraw(){
-    var xScale = $scope.vDPlot.xScale();
     var yScale = $scope.vDPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
-    if(y < 0){
-      y = 0;
-    } else if(y > $scope.data.seismic[0].length - 1){
-      y = $scope.data.seismic[0].length - 1;
-    }
+    if(y < 0){ y = 0; } 
+    else if(y > $scope.data.seismic[0].length - 1){ y = $scope.data.seismic[0].length - 1; }
 
     $scope.twtStr = y.toString();
     $scope.changeTWTStr();
-    
-    $scope.vDHorLine
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
-  }
-  // function vDCirRedraw(){
-  //   var x = Math.floor($scope.vDPlot.xScale.invert(d3.event.x));
-  //   var y = Math.floor($scope.vDPlot.yScale.invert(d3.event.y));
-
-  //   // Check to make sure we are within the boundaries
-  //   if(x < 0){
-  //     x = 0;
-  //   } else if(x > $scope.data.seismic.length - 1) {
-  //     x = $scope.data.seismic.length - 1;
-  //   }
-
-  //   if(y < 0){
-  //     y = 0;
-  //   } else if(y > $scope.data.seismic[0].length - 1){
-  //     y = $scope.data.seismic[0].length - 1;
-  //   }
-
-  //   $scope.traceStr = x.toString();
-  //   $scope.twtStr = y.toString();
-  //   $scope.changeTraceStr();
-  //   $scope.changeTWTStr();
-  //   $scope.wGCir
-  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  //   $scope.oGCir
-  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  //   $scope.vDCir
-  //     .attr("cx", $scope.vDPlot.xScale($scope.trace))
-  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  // };
+    $scope.wGHorLine.reDraw(0, $scope.twt, $scope.data.wavelet_gather.length - 1, $scope.twt);
+    $scope.oGHorLine.reDraw(0, $scope.twt, $scope.data.offset_gather.length - 1, $scope.twt);
+    $scope.vDHorLine.reDraw(0, $scope.twt, $scope.data.seismic.length - 1, $scope.twt);
+  };
 
   $scope.plotOffset = function(data, height, max){
     // Offset Gather Plot
@@ -465,9 +385,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     if(!$scope.oGHor){
       $scope.oGHor = g3.horizon($scope.oGPlot, arr).draw();
 
-        // var drag = d3.behavior.drag()  // capture mouse drag event
-        //   .on('drag', oGCirRedraw);
-
         // Register drag trigger for wGWigLine
         var wigLineDrag = d3.behavior.drag()
           .on('drag', oGWigLineRedraw);
@@ -477,29 +394,26 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           .on('drag', oGHorLineRedraw);
 
         // Draw invisible line
-        $scope.oGWigLine = $scope.oGPlot.svg().append('line')
-          .attr("class", "ogwigline")
-          .style("stroke-width", 10)
-          .style("stroke", "black")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale($scope.offset))
-          .attr("y1", yScale(data.offset_gather[0].length - 1))
-          .attr("x2", xScale($scope.offset))
-          .attr("y2", yScale(0))
-          .call(wigLineDrag);
+        $scope.oGWigLine = g3.handle.line(
+          $scope.oGPlot, 
+          $scope.offset, 
+          data.offset_gather[0].length - 1,
+          $scope.offset,
+          0)
+          .class('ogwigline')
+          .draw();
+        $scope.oGWigLine.line().call(wigLineDrag);
 
         // Draw invisible horizon line
-        $scope.oGHorLine = $scope.oGPlot.svg().append('line')
-          .style("stroke-width", 10)
-          .style("stroke", "green")
-          .style("cursor", "pointer")
-          .style("opacity", 0)
-          .attr("x1", xScale(0))
-          .attr("y1", yScale($scope.twt))
-          .attr("x2", xScale(data.offset_gather.length - 1))
-          .attr("y2", yScale($scope.twt))
-          .call(horLineDrag);
+        $scope.oGHorLine = g3.handle.line(
+          $scope.oGPlot, 
+          0, 
+          $scope.twt,
+          data.offset_gather.length - 1,
+          $scope.twt)
+          .draw();
+
+        $scope.oGHorLine.line().call(horLineDrag);
 
         // Register mouseup trigger for wgline
         $(".ogwigline").mouseup(function(e){
@@ -507,38 +421,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
           $scope.update_data();
         });
 
-        // var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-        // $scope.oGCir = $scope.oGPlot.svg.append('circle')
-        //   .attr("class", "ogcir")
-        //   .attr("r", 5)
-        //   .attr("cx", position[0])
-        //   .attr("cy", position[1])
-        //   .style("opacity", 0.5)
-        //   .call(drag);
-
-        // $(".ogcir").mouseup(function(e){
-        //   e.preventDefault();
-        //   $scope.update_data();
-        // });
     } else {
-      // position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
-      // $scope.oGCir
-      //   .attr("cx", position[0])
-      //   .attr("cy", position[1]);
-
       $scope.oGHor.reDraw(arr);
-
       // Redraw the invisible line
-      $scope.oGWigLine
-        .attr("x1", xScale($scope.offset))
-        .attr("y1", yScale(data.offset_gather[0].length - 1))
-        .attr("x2", xScale($scope.offset))
-        .attr("y2", yScale(0));
-
+      $scope.oGWigLine.reDraw($scope.offset, data.offset_gather[0].length - 1, $scope.offset, 0);
       // Redraw invisible horizon
-      $scope.oGHorLine
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
+      $scope.oGHorLine.reDraw(0, $scope.twt, data.offset_gather.length - 1, $scope.twt);
     }
   };
 
@@ -547,18 +435,15 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var yScale = $scope.oGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
-    if(x < 0){
-      x = 0;
-    } else if(x > $scope.data.offset_gather.length - 1){
+    if(x < 0){ x = 0; } 
+    else if(x > $scope.data.offset_gather.length - 1){
       x = $scope.data.offset_gather.length - 1;
     }
 
     $scope.offsetStr = x.toString();
     $scope.changeOffsetStr();
-    
-    $scope.oGWigLine
-      .attr("x1", xScale($scope.offset))
-      .attr("x2", xScale($scope.offset));
+    $scope.oGWigLine.reDraw($scope.offset, $scope.data.offset_gather[0].length - 1,
+      $scope.offset,0);
   }
 
   function oGHorLineRedraw(){
@@ -566,49 +451,17 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     var yScale = $scope.oGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
-    if(y < 0){
-      y = 0;
-    } else if(y > $scope.data.offset_gather[0].length - 1){
+    if(y < 0){ y = 0; } 
+    else if(y > $scope.data.offset_gather[0].length - 1){ 
       y = $scope.data.offset_gather[0].length - 1;
     }
 
     $scope.twtStr = y.toString();
     $scope.changeTWTStr();
-    
-    $scope.oGHorLine
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
-  }
-
-  // function oGCirRedraw(){
-  //   var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
-  //   var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
-
-  //   // Check to make sure we are within the boundaries
-  //   if(x < 0){
-  //     x = 0;
-  //   } else if(x > $scope.data.offset_gather.length - 1) {
-  //     x = $scope.data.offset_gather.length - 1;
-  //   }
-
-  //   if(y < 0){
-  //     y = 0;
-  //   } else if(y > $scope.data.seismic[0].length - 1){
-  //     y = $scope.data.seismic[0].length - 1;
-  //   }
-
-  //   $scope.offsetStr = x.toString();
-  //   $scope.twtStr = y.toString();
-  //   $scope.changeOffsetStr();
-  //   $scope.changeTWTStr();
-  //   $scope.wGCir
-  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  //   $scope.vDCir
-  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  //   $scope.oGCir
-  //     .attr("cx", $scope.oGPlot.xScale($scope.offset))
-  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  // };
+    $scope.wGHorLine.reDraw(0, $scope.twt, $scope.data.wavelet_gather.length - 1, $scope.twt);
+    $scope.oGHorLine.reDraw(0, $scope.twt, $scope.data.offset_gather.length - 1, $scope.twt);
+    $scope.vDHorLine.reDraw(0, $scope.twt, $scope.data.seismic.length - 1, $scope.twt);
+  };
 
   $scope.plotWavelet = function(data, height, max){
     // Wavelet Gather Plot
@@ -651,9 +504,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
   };
 
   $scope.plotWaveletHorizon = function(data){
-    var xScale = $scope.wGPlot.xScale();
-    var yScale = $scope.wGPlot.yScale();
-
     var arr = [];
     for(var i = 0; i < data.wavelet_gather.length; i++){
       arr.push($scope.twt);
@@ -662,10 +512,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     if(!$scope.wGHor){
       // Draw horizon line
       $scope.wGHor = g3.horizon($scope.wGPlot, arr).draw();
-
-      // Register drag trigger for wgcir
-      // var cirDrag = d3.behavior.drag()  // capture mouse drag event
-      //   .on('drag', wGCirRedraw);
       
       // Register drag trigger for wGWigLine
       var wigLineDrag = d3.behavior.drag()
@@ -675,39 +521,25 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
       var horLineDrag = d3.behavior.drag()
         .on('drag', wGHorLineRedraw);
 
-      // Draw handle
-      // $scope.wGCir = $scope.wGPlot.svg.append('circle')
-      //   .attr("class", "wgcir")
-      //   .attr("r", 5)
-      //   .attr("cx", xScale($scope.frequency))
-      //   .attr("cy", yScale($scope.twt))
-      //   .style("opacity", 0.5)
-      //   .call(cirDrag);
-
       // Draw invisible line
-      $scope.wGWigLine = $scope.wGPlot.svg().append('line')
-        .attr("class", "wgwigline")
-        .style("stroke-width", 10)
-        .style("stroke", "black")
-        .style("cursor", "pointer")
-        .style("opacity", 0)
-        .attr("x1", xScale($scope.frequency))
-        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
-        .attr("x2", xScale($scope.frequency))
-        .attr("y2", yScale(0))
-        .call(wigLineDrag);
-
-      // Draw invisible horizon line
-      $scope.wGHorLine = $scope.wGPlot.svg().append('line')
-        .style("stroke-width", 10)
-        .style("stroke", "green")
-        .style("cursor", "pointer")
-        .style("opacity", 0)
-        .attr("x1", xScale(0))
-        .attr("y1", yScale($scope.twt))
-        .attr("x2", xScale(data.wavelet_gather.length - 1))
-        .attr("y2", yScale($scope.twt))
-        .call(horLineDrag);
+      $scope.wGWigLine = g3.handle.line(
+        $scope.wGPlot, 
+        $scope.frequency, 
+        data.wavelet_gather[0].length - 1,
+        $scope.frequency,
+        0)
+        .class('wgwigline')
+        .draw();
+      $scope.wGWigLine.line().call(wigLineDrag);
+
+      $scope.wGHorLine = g3.handle.line(
+        $scope.wGPlot, 
+        0, 
+        $scope.twt,
+        data.wavelet_gather.length - 1,
+        $scope.twt)
+        .draw();
+      $scope.wGHorLine.line().call(horLineDrag);
 
       // Register mouseup trigger for wgline
       $(".wgwigline").mouseup(function(e){
@@ -715,30 +547,12 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
         $scope.update_data();
       });
 
-      // Register mouseup trigger for wgcir
-      // $(".wgcir").mouseup(function(e){
-      //   e.preventDefault();
-      //   $scope.update_data();
-      // });
     } else {
-      
-      // Redraw the handle
-      // $scope.wGCir
-      //   .attr("cx", xScale($scope.frequency))
-      //   .attr("cy", yScale($scope.twt));
-
       // Redraw the invisible line
-      $scope.wGWigLine
-        .attr("x1", xScale($scope.frequency))
-        .attr("y1", yScale(data.wavelet_gather[0].length - 1))
-        .attr("x2", xScale($scope.frequency))
-        .attr("y2", yScale(0));
-
+      $scope.wGWigLine.reDraw($scope.frequency, data.wavelet_gather[0].length - 1, 
+        $scope.frequency, 0);
       // Redraw invisible horizon
-      $scope.wGHorLine
-        .attr("y1", yScale($scope.twt))
-        .attr("y2", yScale($scope.twt));
-
+      $scope.wGHorLine.reDraw(0, $scope.twt, data.wavelet_gather.length - 1, $scope.twt);
       // Redraw horizon
       $scope.wGHor.reDraw(arr);
     }
@@ -746,73 +560,35 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
 
   function wGWigLineRedraw(){
     var xScale = $scope.wGPlot.xScale();
-    var yScale = $scope.wGPlot.yScale();
     var x = Math.floor(xScale.invert(d3.event.x));
 
-    if(x < 0){
-      x = 0;
-    } else if(x > $scope.data.wavelet_gather.length - 1){
+    if(x < 0){ x = 0; } 
+    else if(x > $scope.data.wavelet_gather.length - 1){
       x = $scope.data.wavelet_gather.length - 1;
     }
 
     $scope.frequencyStr = x.toString();
     $scope.changeFrequencyStr();
-    
-    $scope.wGWigLine
-      .attr("x1", xScale($scope.frequency))
-      .attr("x2", xScale($scope.frequency));
+    $scope.wGWigLine.reDraw($scope.frequency, $scope.data.wavelet_gather[0].length - 1, 
+        $scope.frequency, 0);
   }
 
   function wGHorLineRedraw(){
-    var xScale = $scope.wGPlot.xScale();
     var yScale = $scope.wGPlot.yScale();
     var y = Math.floor(yScale.invert(d3.event.y));
 
-    if(y < 0){
-      y = 0;
-    } else if(y > $scope.data.wavelet_gather[0].length - 1){
+    if(y < 0){ y = 0; } 
+    else if(y > $scope.data.wavelet_gather[0].length - 1){
       y = $scope.data.wavelet_gather[0].length - 1;
     }
 
     $scope.twtStr = y.toString();
     $scope.changeTWTStr();
-    
-    $scope.wGHorLine
-      .attr("y1", yScale($scope.twt))
-      .attr("y2", yScale($scope.twt));
+    $scope.wGHorLine.reDraw(0, $scope.twt, $scope.data.wavelet_gather.length - 1, $scope.twt);
+    $scope.oGHorLine.reDraw(0, $scope.twt, $scope.data.offset_gather.length - 1, $scope.twt);
+    $scope.vDHorLine.reDraw(0, $scope.twt, $scope.data.seismic.length - 1, $scope.twt);
   }
 
-  // function wGCirRedraw(){
-  //   // Set x and y, flooring them.
-  //   var x = Math.floor($scope.wGPlot.xScale.invert(d3.event.x));
-  //   var y = Math.floor($scope.wGPlot.yScale.invert(d3.event.y));
-
-  //   // Check to make sure we are within the boundaries
-  //   if(x < 0){
-  //     x = 0;
-  //   } else if(x > $scope.data.wavelet_gather.length - 1) {
-  //     x = $scope.data.wavelet_gather.length - 1;
-  //   }
-
-  //   if(y < 0){
-  //     y = 0;
-  //   } else if(y > $scope.data.seismic[0].length - 1){
-  //     y = $scope.data.seismic[0].length - 1;
-  //   }
-
-  //   $scope.frequencyStr = x.toString();
-  //   $scope.twtStr = y.toString();
-  //   $scope.changeFrequencyStr();
-  //   $scope.changeTWTStr();
-  //   $scope.oGCir
-  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
-  //   $scope.vDCir
-  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
-  //   $scope.wGCir
-  //     .attr("cx", $scope.wGPlot.xScale($scope.frequency))
-  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
-  // };
-
   $scope.plotAmplitudeTrace = function(data, height){
     // Amplitude Trace
     var width = $('.at_plot').width();
@@ -987,7 +763,6 @@ app.controller('2DCtrl', function ($scope, $http, $alert, $timeout) {
     $scope.plotSeismic(data, height, max);
     $scope.plotOffset(data, height, max);
     $scope.plotWavelet(data, height, max);
-
     height = 150;
     $scope.plotAmplitudeTrace(data, height);
     $scope.plotAmplitudeOffset(data, height);
diff --git a/static/js/controllers/start.js b/static/js/controllers/start.js
index dba2adb..9593ad7 100644
--- a/static/js/controllers/start.js
+++ b/static/js/controllers/start.js
@@ -4,8 +4,7 @@ var app = angular.module('modelr',
 	'ngAnimate',
 	'angular-flexslider']);
 
- 
 app.config(['$interpolateProvider', function($interpolateProvider) {
   $interpolateProvider.startSymbol('{[');
   $interpolateProvider.endSymbol(']}');
-}]);
+}]);
\ No newline at end of file
diff --git a/static/js/g3.js b/static/js/g3.js
index 90afae0..aa0f6ad 100644
--- a/static/js/g3.js
+++ b/static/js/g3.js
@@ -93,6 +93,164 @@ canvas.prototype.drawImage = function(){
 
 	return this;
 };
+
+g3.handle = {};
+
+g3.handle.line = function(plot, x, y, x2, y2){
+  return new line(plot, x, y, x2, y2);
+};
+
+// Constructor
+// Only set variables that are set by items passed in, otherwise set using prototype
+var line = function line(plot, x, y, x2, y2){
+	if(!plot){ return 'Param: plot is missing, a div to attach the svg is required'; }
+  this._plot = plot;
+  this._x = x;
+  this._y = y;
+
+  if(x2 === undefined){
+  	this._x2 = x;
+  } else {
+  	this._x2 = x2;
+  }
+
+  if(y2 === undefined){
+  	this._y2 = y;
+  } else {
+  	this._y2 = y2;
+  }
+  return this;
+};
+
+line.prototype._strokeWidth = 30;
+line.prototype._stroke = "black";
+line.prototype._cursor = "pointer";
+line.prototype._opacity = 0;
+line.prototype._duration = 5;
+
+line.prototype.class = function(cl){
+	if(cl === undefined){ return this._class; }
+	this._class = cl;
+	return this;
+};
+
+line.prototype.strokeWidth = function(strokeWidth){
+	if(strokeWidth === undefined){ return this._strokeWidth; }
+	this._strokeWidth = strokeWidth;
+	return this;
+};
+
+line.prototype.stroke = function(color){
+	if(color === undefined){ return this._color; }
+	this._color = color;
+	return this;
+};
+
+line.prototype.cursor = function(cursor){
+	if(cursor === undefined){ return this._cursor; }
+	this._cursor = cursor;
+	return this;
+};
+
+line.prototype.opacity = function(opacity){
+	if(opacity === undefined){ return this._opacity; }
+	this._opacity = opacity;
+	return this;
+};
+
+line.prototype.line = function(line){
+	if(line === undefined){ return this._line; }
+	this._line = line;
+	return this;
+};
+
+line.prototype.draw = function(){
+	this._line = this._plot._svg.append('line')
+		.attr('class', this._class)
+		.style('stroke-width', this._strokeWidth)
+		.style('stroke', this._stroke)
+		.style('cursor', this._cursor)
+		.style('opacity', this._opacity)
+		.attr('x1', this._plot._xScale(this._x))
+		.attr('y1', this._plot._yScale(this._y))
+		.attr('x2', this._plot._xScale(this._x2))
+		.attr('y2', this._plot._yScale(this._y2));
+	return this;
+};
+
+line.prototype.reDraw = function(x, y, x2, y2){
+	this._line
+		.transition()
+		.duration(this._duration)
+		.attr('x1', this._plot._xScale(x))
+		.attr('y1', this._plot._yScale(y))
+		.attr('x2', this._plot._xScale(x2))
+		.attr('y2', this._plot._yScale(y2));
+	return this;
+};
+
+
+
+
+// handle.circle code
+// var drag = d3.behavior.drag()  // capture mouse drag event
+//   .on('drag', oGCirRedraw);
+
+        // var position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+        // $scope.oGCir = $scope.oGPlot.svg.append('circle')
+        //   .attr("class", "ogcir")
+        //   .attr("r", 5)
+        //   .attr("cx", position[0])
+        //   .attr("cy", position[1])
+        //   .style("opacity", 0.5)
+        //   .call(drag);
+
+        // $(".ogcir").mouseup(function(e){
+        //   e.preventDefault();
+        //   $scope.update_data();
+        // });
+   // } else {
+      // position = [$scope.oGPlot.xScale($scope.offset), $scope.oGPlot.yScale($scope.twt)];
+      // $scope.oGCir
+      //   .attr("cx", position[0])
+      //   .attr("cy", position[1]);
+
+
+  // function oGCirRedraw(){
+  //   var x = Math.floor($scope.oGPlot.xScale.invert(d3.event.x));
+  //   var y = Math.floor($scope.oGPlot.yScale.invert(d3.event.y));
+
+  //   // Check to make sure we are within the boundaries
+  //   if(x < 0){
+  //     x = 0;
+  //   } else if(x > $scope.data.offset_gather.length - 1) {
+  //     x = $scope.data.offset_gather.length - 1;
+  //   }
+
+  //   if(y < 0){
+  //     y = 0;
+  //   } else if(y > $scope.data.seismic[0].length - 1){
+  //     y = $scope.data.seismic[0].length - 1;
+  //   }
+
+  //   $scope.offsetStr = x.toString();
+  //   $scope.twtStr = y.toString();
+  //   $scope.changeOffsetStr();
+  //   $scope.changeTWTStr();
+  //   $scope.wGCir
+  //     .attr("cy", $scope.wGPlot.yScale($scope.twt));
+  //   $scope.vDCir
+  //     .attr("cy", $scope.vDPlot.yScale($scope.twt));
+  //   $scope.oGCir
+  //     .attr("cx", $scope.oGPlot.xScale($scope.offset))
+  //     .attr("cy", $scope.oGPlot.yScale($scope.twt));
+  // };
+
+  // Register mouseup trigger for wgcir
+// $(".wgcir").mouseup(function(e){
+//   e.preventDefault();
+//   $scope.update_data();
+// });
 // Attach horizon creation function to g3
 g3.horizon = function(plot, data){
   return new horizon(plot, data);
@@ -181,6 +339,12 @@ horizon.prototype.opacity = function(opacity){
 	return this;
 };
 
+horizon.prototype.cursor = function(cursor){
+	if(cursor === undefined){ return this_cursor; }
+	this._cursor = cursor;
+	return this;
+};
+
 horizon.prototype.lineFunc = function(){
 	var plot = this._plot,
 			xMin = this._xMin,
@@ -209,6 +373,10 @@ horizon.prototype.draw = function() {
 		.style('opacity', this._opacity)
 		.attr('fill', 'none');
 
+	if(this._cursor){
+		this._svg.style('cursor', this._cursor);
+	}
+
 	return this;
 };