Updates to New Visualization components

Author: pschaldenbrand

BarChart/program/BarChart.html

@@ -93,16 +93,15 @@
         padding: 5px;
     }
 
-    .allOptions td {}
+    .advancedOptions {
+        position: absolute;
+        background: white;
+    }
 
     .advancedOptions,
     .advancedOptions input {
         font-size: 0.8em;
     }
-
-    .allOptions {
-        min-height:
-    }
     </style>
 </head>
 
@@ -129,7 +128,7 @@
                     </div>
                 </div>
             </td>
-            <td>
+            <td style="display:inline">
                 <a id="toggleAdvOpt" href="#">Show Advanced Options</a>
                 <div class="advancedOptions" style="display:none"></div>
                 </div>
@@ -280,7 +279,7 @@
             .attr('class', 'd3-tip')
             .offset([-10, 0])
             .html(function(d) {
-                return "<strong>Value:</strong> <span style='color:red'>" + d.string + "</span><br/>" +
+                return "<strong>" + variable + ": </strong> <span style='color:red'>" + d.string + "</span><br/>" +
                     "<strong>Count:</strong> <span style='color:red'>" + d.count + "</span>";
             })
         svg.call(tip);
@@ -551,6 +550,7 @@
     }
 
     function wrap(text, width) {
+    	width = parseInt(width*0.2);
         text.each(function() {
 
             var text = d3.select(this),

Histogram/program/Histogram.html

@@ -104,15 +104,15 @@
         padding: 5px;
     }
 
-    .allOptions td {}
 
     .advancedOptions,
     .advancedOptions input {
         font-size: 0.8em;
     }
 
-    .allOptions {
-        min-height:
+    .advancedOptions {
+        position: absolute;
+        background: white;
     }
     </style>
 </head>
@@ -135,7 +135,7 @@
                     </div>
                 </div>
             </td>
-            <td>
+            <td style="display:inline">
                 <a id="toggleAdvOpt" href="#">Show Advanced Options</a>
                 <div class="advancedOptions" style="display:none"></div>
                 </div>
@@ -630,9 +630,10 @@
     }
 
     function zoomed() {
+    	console.log(d3.event);
         d3.select("#svgContainer g").attr("transform",
-            "translate(" + margin.left + "," + margin.top + ")" +
-            "scale(" + d3.event.transform.k + ",1)");
+            "translate(" + (margin.left + d3.event.transform.x) + "," + (margin.top + d3.event.transform.y) + ")" +
+            "scale(" + d3.event.transform.k + "," + d3.event.transform.k + ")");
     }
 
     function addMessage(message) {

LineGraph/program/LineGraph.html

@@ -49,6 +49,11 @@
         padding: 5px;
     }
 
+    .advancedOptions {
+        position: absolute;
+        background: white;
+    }
+
     .advancedOptions,
     .advancedOptions input {
         font-size: 0.8em;
@@ -73,7 +78,7 @@
                     </div>
                 </div>
             </td>
-            <td>
+            <td style="display:inline">
                 <a id="toggleAdvOpt" href="#">Show Advanced Options</a>
                 <div class="advancedOptions" style="display:none"></div>
             </td>

ScatterPlot/program/ScatterPlot.html

@@ -70,16 +70,15 @@
         padding: 5px;
     }
 
-    .allOptions td {}
+    .advancedOptions {
+        position: absolute;
+        background: white;
+    }
 
     .advancedOptions,
     .advancedOptions input {
         font-size: 0.8em;
     }
-
-    .allOptions {
-        min-height:
-    }
     </style>
 </head>
 
@@ -104,7 +103,7 @@
                     </div>
                 </div>
             </td>
-            <td>
+            <td style="display:inline">
                 <a id="toggleAdvOpt" href="#">Show Advanced Options</a>
                 <div class="advancedOptions" style="display:none"></div>
             </td>