diff --git a/packages/oncoprintjs/src/img/menudots.svg b/packages/oncoprintjs/src/img/menudots.svg
deleted file mode 100644
index 6cc0544bfa8..00000000000
--- a/packages/oncoprintjs/src/img/menudots.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="4px" height="16px" viewBox="-0.031 0 4 16" enable-background="new -0.031 0 4 16" xml:space="preserve">
-<circle fill="#B2B3B3" cx="1.969" cy="4" r="1.5"/>
-<circle fill="#B2B3B3" cx="1.969" cy="8" r="1.5"/>
-<circle fill="#B2B3B3" cx="1.969" cy="12" r="1.5"/>
-</svg>
diff --git a/packages/oncoprintjs/src/js/main.js b/packages/oncoprintjs/src/js/main.js
index 34028bea245..bf1b4f9e3e4 100644
--- a/packages/oncoprintjs/src/js/main.js
+++ b/packages/oncoprintjs/src/js/main.js
@@ -1,5 +1 @@
-var Oncoprint = require('./oncoprint.js');
-if (window) {
-	window.Oncoprint = Oncoprint;
-}
-module.exports = Oncoprint;
\ No newline at end of file
+window.Oncoprint = require('./oncoprint.js');
\ No newline at end of file
diff --git a/packages/oncoprintjs/src/js/oncoprint.js b/packages/oncoprintjs/src/js/oncoprint.js
index 5400f6570f2..d9c4d29c05b 100644
--- a/packages/oncoprintjs/src/js/oncoprint.js
+++ b/packages/oncoprintjs/src/js/oncoprint.js
@@ -11,7 +11,6 @@ var OncoprintTrackInfoView = require('./oncoprinttrackinfoview.js');
 var OncoprintMinimapView = require('./oncoprintminimapview.js');
 
 var svgfactory = require('./svgfactory.js');
-var $ = require('jquery');
 
 var clamp = function(val, lower, upper) {
     return Math.min(Math.max(val, lower), upper);
diff --git a/packages/oncoprintjs/src/js/oncoprintlabelview.js b/packages/oncoprintjs/src/js/oncoprintlabelview.js
index 53856745ded..6c0a6c5ed78 100644
--- a/packages/oncoprintjs/src/js/oncoprintlabelview.js
+++ b/packages/oncoprintjs/src/js/oncoprintlabelview.js
@@ -1,5 +1,4 @@
 var svgfactory = require('./svgfactory.js');
-var $ = require('jquery');
 
 var OncoprintLabelView = (function () {
     function OncoprintLabelView($canvas, model, tooltip) {
diff --git a/packages/oncoprintjs/src/js/oncoprintlegendrenderer.js b/packages/oncoprintjs/src/js/oncoprintlegendrenderer.js
index c4df1320517..7ef23266b8b 100644
--- a/packages/oncoprintjs/src/js/oncoprintlegendrenderer.js
+++ b/packages/oncoprintjs/src/js/oncoprintlegendrenderer.js
@@ -1,5 +1,4 @@
 var svgfactory = require('./svgfactory.js');
-var $ = require('jquery');
 
 var nodeIsVisible = function(node) {
     var ret = true;
@@ -128,6 +127,17 @@ var OncoprintLegendView = (function() {
 	    root.appendChild(svgfactory.text(display_range[1], 50, 0, 12, 'Arial', 'normal'));
 	    var mesh = 100;
 	    var points = [];
+        var linear_gradient = svgfactory.linearGradient();
+        if (config.range_type === 'NON_POSITIVE') {
+            linear_gradient.appendChild(svgfactory.stop(100, config.negative_color));
+        } else if (config.range_type === 'NON_NEGATIVE') {
+            linear_gradient.appendChild(svgfactory.stop(100, config.positive_color));
+        } else if (config.range_type === 'ALL') {
+        	var offset = Math.abs(display_range[0]) / (Math.abs(display_range[0]) + display_range[1]) * 100;
+            linear_gradient.appendChild(svgfactory.stop(offset, config.negative_color));
+            linear_gradient.appendChild(svgfactory.stop(offset, config.positive_color));
+        }
+        root.appendChild(linear_gradient);
 	    points.push([5, 20]);
 	    for (var i=0; i<mesh; i++) {
 		var t = i/mesh;
@@ -136,7 +146,7 @@ var OncoprintLegendView = (function() {
 		points.push([5 + 40*i/mesh, 20-height]);
 	    }
 	    points.push([45, 20]);
-	    root.appendChild(svgfactory.path(points, config.color, config.color));
+        root.appendChild(svgfactory.path(points, null, null, linear_gradient));
 	} else if (config.type === 'gradient') {
 	    var num_decimal_digits = 2;
 	    var display_range = config.range.map(function(x) {
diff --git a/packages/oncoprintjs/src/js/oncoprintminimapview.js b/packages/oncoprintjs/src/js/oncoprintminimapview.js
index f3ed27566cc..3f06dbdd869 100644
--- a/packages/oncoprintjs/src/js/oncoprintminimapview.js
+++ b/packages/oncoprintjs/src/js/oncoprintminimapview.js
@@ -1,4 +1,3 @@
-var $ = require('jquery');
 var gl_matrix = require('gl-matrix');
 var OncoprintZoomSlider = require('./oncoprintzoomslider.js');
 
diff --git a/packages/oncoprintjs/src/js/oncoprintruleset.js b/packages/oncoprintjs/src/js/oncoprintruleset.js
index 9eada7aff38..b7854ba02ce 100644
--- a/packages/oncoprintjs/src/js/oncoprintruleset.js
+++ b/packages/oncoprintjs/src/js/oncoprintruleset.js
@@ -472,11 +472,17 @@ var LinearInterpRuleSet = (function () {
 	this.value_key = params.value_key;
 	this.value_range = params.value_range;
 	this.log_scale = params.log_scale; // boolean
-	this.inferred_value_range;
+
+	this.rangeTypes = {
+		'ALL': 'ALL',                   // all values positive, negative and zero
+		'NON_NEGATIVE': 'NON_NEGATIVE', // value range all positive values inclusive zero (0)
+		'NON_POSITIVE': 'NON_POSITIVE'  // value range all negative values inclusive zero (0)
+	};
 
 	this.makeInterpFn = function () {
 	    var range = this.getEffectiveValueRange();
-
+	    var rangeType = this.getValueRangeType();
+	    var rangeTypes = this.rangeTypes;
 	    if (this.log_scale) {
 		var shift_to_make_pos = Math.abs(range[0]) + 1;
 		var log_range = Math.log(range[1] + shift_to_make_pos) - Math.log(range[0] + shift_to_make_pos);
@@ -486,16 +492,20 @@ var LinearInterpRuleSet = (function () {
 		    return (Math.log(val + shift_to_make_pos) - log_range_lower) / log_range;
 		};
 	    } else {
-		var range_spread = range[1] - range[0];
-		var range_lower = range[0];
 		return function (val) {
-		    val = parseFloat(val);
-		    if (val <= range[0]) {
-			return 0;
-		    } else if (val >= range[1]) {
-			return 1;
-		    } else {
-			return (val - range_lower) / range_spread;
+                var range_spread = range[1] - range[0],
+					range_lower = range[0],
+					range_higher = range[1];
+
+                if (rangeType === rangeTypes.NON_POSITIVE) {
+                    // when data only contains non positive values
+                    return (val - range_higher) / range_spread;
+				} else if (rangeType === rangeTypes.NON_NEGATIVE) {
+                    // when data only contains non negative values
+			        return (val - range_lower) / range_spread;
+				} else if (rangeType === rangeTypes.ALL) {
+                    range_spread = Math.abs(range[0]) > range[1] ? Math.abs(range[0]) : range[1];
+                    return val / range_spread;
 		    }
 		};
 	    }
@@ -518,6 +528,16 @@ var LinearInterpRuleSet = (function () {
 	}
 	return ret;
     };
+    LinearInterpRuleSet.prototype.getValueRangeType = function () {
+    	var range = this.getEffectiveValueRange();
+        if (range[0] < 0 && range[1] <=0) {
+        	return this.rangeTypes.NON_POSITIVE;
+        } else if (range[0] >= 0 && range[1] > 0) {
+            return this.rangeTypes.NON_NEGATIVE;
+        } else {
+            return this.rangeTypes.ALL;
+        }
+    };
 
     LinearInterpRuleSet.prototype.apply = function (data, cell_width, cell_height, out_active_rules) {
 	// First find value range
@@ -651,8 +671,8 @@ var GradientRuleSet = (function () {
 var BarRuleSet = (function () {
     function BarRuleSet(params) {
 	LinearInterpRuleSet.call(this, params);
-	this.bar_rule;
-	this.fill = params.fill || 'rgba(156,123,135,1)';
+		this.fill = params.fill || 'rgba(0,128,0,1)'; // green
+		this.negative_fill = params.negative_fill || 'rgba(255,0,0,1)'; //red
     }
     BarRuleSet.prototype = Object.create(LinearInterpRuleSet.prototype);
 
@@ -662,6 +682,10 @@ var BarRuleSet = (function () {
 	}
 	var interpFn = this.makeInterpFn();
 	var value_key = this.value_key;
+        var positive_color = this.fill;
+        var negative_color = this.negative_fill;
+        var yPosFn = this.getYPosPercentagesFn();
+        var cellHeightFn = this.getCellHeightPercentagesFn();
 	this.bar_rule = this.addRule(function (d) {
 	    return d[NA_STRING] !== true;
 	},
@@ -669,21 +693,49 @@ var BarRuleSet = (function () {
 			    type: 'rectangle',
 			    y: function (d) {
 				var t = interpFn(d[value_key]);
-				return (1 - t) * 100 + "%";
+                    return yPosFn(t);
 			    },
 			    height: function (d) {
 				var t = interpFn(d[value_key]);
-				return t * 100 + "%";
+                    return cellHeightFn(t);
 			    },
-			    fill: this.fill,
+                fill: function (d) {
+					return d[value_key] < 0 ? negative_color : positive_color;
+                }
 			}],
 		    exclude_from_legend: false,
-		    legend_config: {'type': 'number', 
+                legend_config: {
+            		'type': 'number',
 				    'range': this.getEffectiveValueRange(), 
-				    'color': this.fill,
+					'range_type': this.getValueRangeType(),
+                    'positive_color': positive_color,
+                    'negative_color': negative_color,
 				    'interpFn': interpFn}
 		});
     };
+    BarRuleSet.prototype.getYPosPercentagesFn = function () {
+    	return function (t) {
+        if (this.getValueRangeType() === this.rangeTypes.NON_POSITIVE) {
+                return 0 + "%";
+		} else if (this.getValueRangeType() === this.rangeTypes.NON_NEGATIVE) {
+                return (1 - t) * 100 + "%";
+        } else if (this.getValueRangeType() === this.rangeTypes.ALL) {
+                return 50 + "%";
+            }
+		}.bind(this);
+	};
+
+    BarRuleSet.prototype.getCellHeightPercentagesFn = function () {
+    	return function (t) {
+            if (this.getValueRangeType() === this.rangeTypes.NON_POSITIVE) {
+                return -t * 100 + "%";
+            } else if (this.getValueRangeType() === this.rangeTypes.NON_NEGATIVE) {
+                return t * 100 + "%";
+            } else if (this.getValueRangeType() === this.rangeTypes.ALL) {
+                return -t * 50 + "%";
+		}
+		}.bind(this);
+    };
 
     return BarRuleSet;
 })();
diff --git a/packages/oncoprintjs/src/js/oncoprinttooltip.js b/packages/oncoprintjs/src/js/oncoprinttooltip.js
index 979799b5d58..5f12bca787e 100644
--- a/packages/oncoprintjs/src/js/oncoprinttooltip.js
+++ b/packages/oncoprintjs/src/js/oncoprinttooltip.js
@@ -1,5 +1,3 @@
-var $ = require('jquery');
-
 var OncoprintToolTip = (function() {
     function OncoprintToolTip($container, params) {
 	params = params || {};
diff --git a/packages/oncoprintjs/src/js/oncoprinttrackinfoview.js b/packages/oncoprintjs/src/js/oncoprinttrackinfoview.js
index a5e9c124453..8c6b74bee4a 100644
--- a/packages/oncoprintjs/src/js/oncoprinttrackinfoview.js
+++ b/packages/oncoprintjs/src/js/oncoprinttrackinfoview.js
@@ -1,5 +1,4 @@
 var svgfactory = require('./svgfactory.js');
-var $ = require('jquery');
 
 var OncoprintTrackInfoView = (function () {
     function OncoprintTrackInfoView($div) {
diff --git a/packages/oncoprintjs/src/js/oncoprinttrackoptionsview.js b/packages/oncoprintjs/src/js/oncoprinttrackoptionsview.js
index e5fbeae4a8a..18d921fb775 100644
--- a/packages/oncoprintjs/src/js/oncoprinttrackoptionsview.js
+++ b/packages/oncoprintjs/src/js/oncoprinttrackoptionsview.js
@@ -1,4 +1,3 @@
-var $ = require('jquery');
 var OncoprintTrackOptionsView = (function () {
     function OncoprintTrackOptionsView($div, moveUpCallback, moveDownCallback, removeCallback, sortChangeCallback) {
 	// removeCallback: function(track_id)
@@ -125,7 +124,7 @@ var OncoprintTrackOptionsView = (function () {
 	var $div, $img, $dropdown;
 	var top = model.getZoomedTrackTops(track_id);
 	$div = $('<div>').appendTo(view.$buttons_ctr).css({'position': 'absolute', 'left': '0px', 'top': top + 'px'});
-	$img = $('<img/>').appendTo($div).attr({'src': 'img/menudots.svg', 'width': view.img_size, 'height': view.img_size}).css({'float': 'left', 'cursor': 'pointer', 'border': '1px solid rgba(125,125,125,0)'});
+	$img = $('<img/>').appendTo($div).attr({'src': 'images/menudots.svg', 'width': view.img_size, 'height': view.img_size}).css({'float': 'left', 'cursor': 'pointer', 'border': '1px solid rgba(125,125,125,0)'});
 	$dropdown = $('<ul>').appendTo(view.$dropdown_ctr).css({'position':'absolute', 'width': 120, 'display': 'none', 'list-style-type': 'none', 'padding-left': '6', 'padding-right': '6', 'float': 'right', 'background-color': 'rgb(255,255,255)',
 								'left':'0px', 'top': top + view.img_size + 'px'});
 	view.track_options_$elts[track_id] = {'$div': $div, '$img': $img, '$dropdown': $dropdown};
diff --git a/packages/oncoprintjs/src/js/oncoprintwebglcellview.js b/packages/oncoprintjs/src/js/oncoprintwebglcellview.js
index 09058266824..adc9dce4729 100644
--- a/packages/oncoprintjs/src/js/oncoprintwebglcellview.js
+++ b/packages/oncoprintjs/src/js/oncoprintwebglcellview.js
@@ -3,7 +3,6 @@ var svgfactory = require('./svgfactory.js');
 var shapeToVertexes = require('./oncoprintshapetovertexes.js');
 var CachedProperty = require('./CachedProperty.js');
 var Shape = require('./oncoprintshape.js');
-var $ = require('jquery');
 
 var sgndiff = function(a,b) {
     if (a < b) {
diff --git a/packages/oncoprintjs/src/js/oncoprintzoomslider.js b/packages/oncoprintjs/src/js/oncoprintzoomslider.js
index 306569ba50f..8bf71dee2f2 100644
--- a/packages/oncoprintjs/src/js/oncoprintzoomslider.js
+++ b/packages/oncoprintjs/src/js/oncoprintzoomslider.js
@@ -1,5 +1,3 @@
-var $ = require('jquery');
-
 var OncoprintZoomSlider = (function() {
     var VERTICAL = "v";
     var HORIZONTAL = "h";
diff --git a/packages/oncoprintjs/src/js/svgfactory.js b/packages/oncoprintjs/src/js/svgfactory.js
index 2b29c0cad40..79f1035909d 100644
--- a/packages/oncoprintjs/src/js/svgfactory.js
+++ b/packages/oncoprintjs/src/js/svgfactory.js
@@ -96,21 +96,33 @@ module.exports = {
     bgrect: function(width, height, fill) {
 	return makeSVGElement('rect', {'width':width, 'height':height, 'fill':fill});
     },
-    path: function(points, stroke, fill) {
+    path: function(points, stroke, fill, linearGradient) {
 	points = points.map(function(pt) { return pt.join(","); });
 	points[0] = 'M'+points[0];
 	for (var i=1; i<points.length; i++) {
 	    points[i] = 'L'+points[i];
 	}
+	if (!linearGradient) {
 	stroke = extractColor(stroke);
 	fill = extractColor(fill);
+	}
 	return makeSVGElement('path', {
 	    'd': points.join(" "),
-	    'stroke': stroke.rgb,
-	    'stroke-opacity': stroke.opacity,
-	    'fill': fill.rgb,
-	    'fill-opacity': fill.opacity
+	    'stroke': linearGradient ? 'url(#'+linearGradient.getAttribute('id')+')' : stroke.rgb,
+	    'stroke-opacity': linearGradient ? 0 : stroke.opacity,
+	    'fill': linearGradient ? 'url(#'+linearGradient.getAttribute('id')+')' : fill.rgb,
+	    'fill-opacity': linearGradient ? 1 : fill.opacity
+	});
+    },
+    stop: function (offset, stop_color, stop_opacity) {
+		return makeSVGElement('stop', {
+			'offset': offset + '%',
+			'stop-color': stop_color,
+			'stop-opacity': stop_opacity
 	});
+	},
+	linearGradient: function () {
+        return makeSVGElement('linearGradient', {'id': 'linearGradient'+gradientId()});
     },
     defs: function() {
 	return makeSVGElement('defs');
@@ -125,11 +137,9 @@ module.exports = {
 	});
 	for (var i=0; i<=100; i++) {
 	    var color = extractColor(colorFn(i/100));
-	    gradient.appendChild(makeSVGElement('stop', {
-		'offset': i + '%',
-		'stop-color':color.rgb,
-		'stop-opacity': color.opacity
-	    }));
+	    gradient.appendChild(
+	    	this.stop(i + '%', color.rgb, color.opacity)
+		);
 	}
 	return gradient;
     }