all but one test passing and seeing that I need a how separate y scale

app/assets/javascripts/graphs/bar_group.js

@@ -15,7 +15,7 @@ BarGroup.prototype.render = function(root){
 
   var data = this._data;
   var bars = this._data.bars;
-  var xScale = new GraphScale(data, 'x').render();
+  var xScale = new GraphScale(data, 'width').render();
   return root.append('g')
     .attr("class", "bar")
     .selectAll("rect")

app/assets/javascripts/graphs/graph_scale.js

@@ -13,11 +13,12 @@
   GraphScale.prototype.render = function() {
     var data = this._data;
     var axisName = this._axisName;
-    var scaleType = data.axis[axisName].scale + '';
-
+    var scaleType = data[axisName].scale;
+    var axisSize = data[axisName].size;
+    console.log(axisSize);
     return d3.scale[scaleType]()
     .domain([0, d3.max(this.getBarValues())])
-      .range([0, data.axis.attr_name]);
+      .range([0, axisSize]);
 
   };
 

app/assets/javascripts/graphs/horizontal_bar_graph.js

@@ -25,7 +25,7 @@
     var barLabelGroup = new BarLabelGroup(this._data);
     var margin = this._data.margin;
 
-    var xScale = new GraphScale(this._data,'x');
+    var xScale = new GraphScale(this._data, 'width');
     var yScale = new GraphScale(this._data, 'y');
 
     var barGroup = new BarGroup(this._data);

spec/javascripts/graphs/bar_group_spec.js

@@ -13,13 +13,11 @@
       {name: 'Shade', value: 0.2},
       {name: 'Half Shade', value: 0.5}
     ];
-    var axis = {
-      x: {attr_name: 'width', scale: 'linear'},
-      y: {attr_name: 'height', scale: 'ordinal'}
-    };
+
     var data = {
       bars: bars,
-      axis: axis
+      width: {size: 300, scale: 'linear'},
+      height: {size: 400, scale: 'ordinal'}
     };
 
 

spec/javascripts/graphs/graph_scale_spec.js

@@ -10,17 +10,14 @@
         {name: 'Shade', value: 0.2},
         {name: 'Half Shade', value: 0.5}
       ];
-      var axis = {
-        x: {attr_name: 'width', scale: 'linear'},
-        y: {attr_name: 'height', scale: 'ordinal'}
-      };
       var data = {
         bars: bars,
-        axis: axis
+        width: {size: 300, scale: 'linear'},
+        height: {size: 400, scale: 'ordinal'}
       };
 
 
-      subject = new GraphScale(data, 'x');
+      subject = new GraphScale(data, 'width');
       subject.render(d3.select('#jasmine_content').append('svg'));
     });
 

spec/javascripts/graphs/horizontal_bar_graph_spec.js

@@ -11,19 +11,13 @@
           {name: 'Shade', value: 0.2},
           {name: 'Half Shade', value: 0.5}
         ];
-        var axis = {
-          x: {attr_name: 'width', scale: 'linear'},
-          y: {attr_name: 'height', scale: 'ordinal'}
-        };
-
         data = {
           bars: bars,
-          width: 300,
-          height: 400,
+          width: {size: 300, scale: 'linear'},
+          height: {size: 400, scale: 'ordinal'},
           //left is used to shift the bars over so that there is
           //room for the labels
-          margin: {top: 0, right: 0, bottom: 0, left: 100},
-          axis: axis
+          margin: {top: 0, right: 0, bottom: 0, left: 100}
         };
 
         subject = new HorizontalBarGraph(data);