should solve most of w3c#177 - you can actually add rug plots on any …

…quantitative graphic now. I haven't put together an example of this quite yet, and the difference in buffer sizes in point and line charts means the rug is smaller on line charts.
shikhar-scs · Nov 11, 2014 · 0603e54 · 0603e54
1 parent d723ab9
commit 0603e54
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 39 deletions.
diff --git a/js/main.js b/js/main.js
@@ -220,6 +220,7 @@ $(document).ready(function() {
             right: torso.right,
             target: '#missing1',
             linked: true,
+            y_rug:true,
             y_extended_ticks: true,
             x_accessor: 'date',
             y_accessor: ['value', 'value2', 'value3']

diff --git a/src/charts/point.js b/src/charts/point.js
@@ -1,3 +1,6 @@
+
+
+
 charts.point = function(args) {
     this.args = args;
 
@@ -50,44 +53,6 @@ charts.point = function(args) {
             pts.attr('r', args.point_size);
         }
 
-        //are we adding rug plots?
-        var rug;
-        if (args.x_rug) {
-            rug = g.selectAll('line.x_rug').data(args.data[0])
-                .enter().append('svg:line')
-                    .attr('x1', args.scalefns.xf)
-                    .attr('x2', args.scalefns.xf)
-                    .attr('y1', args.height-args.top+args.buffer/2)
-                    .attr('y2', args.height-args.top)
-                    .attr('class', 'x-rug')
-                    .attr('opacity', 0.3);
-
-            if (args.color_accessor) {
-                rug.attr('stroke', args.scalefns.color);
-            }
-            else {
-                rug.classed('x-rug-mono', true);
-            }
-        }
-
-        if (args.y_rug) {
-            rug = g.selectAll('line.y_rug').data(args.data[0])
-                .enter().append('svg:line')
-                    .attr('x1', args.left+1)
-                    .attr('x2', args.left+args.buffer/2)
-                    .attr('y1', args.scalefns.yf)
-                    .attr('y2', args.scalefns.yf)
-                    .attr('class', 'y-rug')
-                    .attr('opacity', 0.3);
-
-            if (args.color_accessor) {
-                rug.attr('stroke', args.scalefns.color);
-            }
-            else {
-                rug.classed('y-rug-mono', true);
-            }
-        }
-
         return this;
     }
 

diff --git a/src/common/x_axis.js b/src/common/x_axis.js
@@ -1,3 +1,29 @@
+function x_rug(args){
+    var svg = d3.select(args.target + ' svg');
+    var all_data=[];
+    for (var i=0; i<args.data.length;i++){
+        for (var j=0;j<args.data[i].length;j++){
+            all_data.push(args.data[i][j]);
+        }
+    }
+    var rug = svg.selectAll('line.x_rug').data(all_data)
+        .enter().append('svg:line')
+            .attr('x1', args.scalefns.xf)
+            .attr('x2', args.scalefns.xf)
+            .attr('y1', args.height-args.top+args.buffer/2)
+            .attr('y2', args.height-args.top)
+            .attr('class', 'x-rug')
+            .attr('opacity', 0.3);
+
+    if (args.color_accessor) {
+        rug.attr('stroke', args.scalefns.color);
+    }
+    else {
+        rug.classed('x-rug-mono', true);
+    }
+}
+
+
 function x_axis(args) {
     var svg = d3.select(args.target + ' svg');
     var g;
@@ -290,7 +316,11 @@ function x_axis(args) {
                     .text(function(d) {
                         return yformat(d);
                     });
-    };    
+    };  
+
+    if (args.x_rug){
+        x_rug(args);
+    }
 
     return this;
 }
diff --git a/src/common/y_axis.js b/src/common/y_axis.js
@@ -1,3 +1,29 @@
+function y_rug(args){
+    var svg = d3.select(args.target + ' svg');
+    var all_data = [];
+    for (var i=0; i<args.data.length;i++){
+        for (var j=0;j<args.data[i].length;j++){
+            all_data.push(args.data[i][j]);
+        }
+    }
+    var rug = svg.selectAll('line.y_rug').data(all_data)
+        .enter().append('svg:line')
+            .attr('x1', args.left+1)
+            .attr('x2', args.left+args.buffer/2)
+            .attr('y1', args.scalefns.yf)
+            .attr('y2', args.scalefns.yf)
+            .attr('class', 'y-rug')
+            .attr('opacity', 0.3);
+
+    if (args.color_accessor) {
+        rug.attr('stroke', args.scalefns.color);
+    }
+    else {
+        rug.classed('y-rug-mono', true);
+    }
+}
+
+
 function y_axis(args) {
     var svg = d3.select(args.target + ' svg');
     var g;
@@ -206,6 +232,10 @@ function y_axis(args) {
                     return o;
                 })
 
+    if (args.y_rug){
+        y_rug(args);
+    }
+
     return this;
 }