From e052dc78c85e828000ba555410bc761e0a3ae831 Mon Sep 17 00:00:00 2001
From: John Kiernander <jkiernander@pmsi-consulting.com>
Date: Tue, 28 Jan 2014 16:51:10 +0000
Subject: [PATCH] Update example dimple version

---
 examples/advanced_bar_labels.html             |   2 +-
 examples/advanced_bullet.html                 |   2 +-
 examples/advanced_christmas_tree.html         |   2 +-
 examples/advanced_dynamic_line_color.html     |   2 +-
 examples/advanced_grouped_mekko.html          |   2 +-
 examples/advanced_interactive_legends.html    |   2 +-
 examples/advanced_lollipop_with_hover.html    |   2 +-
 examples/advanced_matrix.html                 |   2 +-
 examples/advanced_pong.html                   |   2 +-
 examples/advanced_price_range_lollipop.html   |   2 +-
 examples/advanced_responsive_sizing.html      |   2 +-
 examples/advanced_storyboard_control.html     | 222 +++++++++---------
 examples/advanced_time_axis.html              |   2 +-
 examples/advanced_trellis_bar.html            |   2 +-
 examples/advanced_waterfall.html              |   2 +-
 examples/areas_horizontal.html                |   2 +-
 examples/areas_horizontal_grouped.html        |   2 +-
 examples/areas_horizontal_grouped_100pct.html |   2 +-
 .../areas_horizontal_grouped_stacked.html     |   2 +-
 examples/areas_horizontal_stacked.html        |   2 +-
 examples/areas_horizontal_stacked_100pct.html |   2 +-
 examples/areas_vertical.html                  |   2 +-
 examples/areas_vertical_grouped.html          |   2 +-
 examples/areas_vertical_grouped_100pct.html   |   2 +-
 examples/areas_vertical_grouped_stacked.html  |   2 +-
 examples/areas_vertical_stacked.html          |   2 +-
 examples/areas_vertical_stacked_100pct.html   |   2 +-
 examples/bars_horizontal.html                 |   7 +-
 examples/bars_horizontal_grouped.html         |   2 +-
 examples/bars_horizontal_grouped_stacked.html |   2 +-
 ...ars_horizontal_grouped_stacked_100pct.html |   2 +-
 examples/bars_horizontal_mekko.html           |   2 +-
 examples/bars_horizontal_stacked.html         |   2 +-
 examples/bars_horizontal_stacked_100pct.html  |   2 +-
 examples/bars_matrix.html                     |   2 +-
 examples/bars_vertical.html                   |   2 +-
 examples/bars_vertical_grouped.html           |   2 +-
 examples/bars_vertical_grouped_stacked.html   |   2 +-
 .../bars_vertical_grouped_stacked_100pct.html |   2 +-
 examples/bars_vertical_mekko.html             |   2 +-
 examples/bars_vertical_stacked.html           |   2 +-
 examples/bars_vertical_stacked_100pct.html    |   2 +-
 examples/bubbles_horizontal_grouped.html      |   2 +-
 examples/bubbles_horizontal_lollipop.html     |   2 +-
 examples/bubbles_matrix.html                  |   2 +-
 examples/bubbles_standard.html                |   2 +-
 examples/bubbles_vertical_grouped.html        |   2 +-
 examples/bubbles_vertical_lollipop.html       |   2 +-
 examples/lines_horizontal.html                |   2 +-
 examples/lines_horizontal_grouped.html        |   2 +-
 .../lines_horizontal_grouped_stacked.html     |   2 +-
 examples/lines_horizontal_stacked.html        |   2 +-
 examples/lines_vertical.html                  |   2 +-
 examples/lines_vertical_grouped.html          |   2 +-
 examples/lines_vertical_grouped_stacked.html  |   2 +-
 examples/lines_vertical_stacked.html          |   2 +-
 examples/scatter_horizontal_grouped.html      |   2 +-
 examples/scatter_horizontal_lollipop.html     |   2 +-
 examples/scatter_matrix.html                  |   2 +-
 examples/scatter_standard.html                |   2 +-
 examples/scatter_vertical_grouped.html        |   2 +-
 examples/scatter_vertical_lollipop.html       |   2 +-
 .../templates/advanced_christmas_tree.html    |   2 +-
 .../advanced_storyboard_control.html          | 220 ++++++++---------
 examples/templates/bars_horizontal.html       |   5 +-
 65 files changed, 295 insertions(+), 281 deletions(-)

diff --git a/examples/advanced_bar_labels.html b/examples/advanced_bar_labels.html
index fbe11c7..2f20662 100644
--- a/examples/advanced_bar_labels.html
+++ b/examples/advanced_bar_labels.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     // This is the simple vertical grouped stacked 100% bar example
     var svg = dimple.newSvg("#chartContainer", 590, 400);
diff --git a/examples/advanced_bullet.html b/examples/advanced_bullet.html
index a0762a0..6fee896 100644
--- a/examples/advanced_bullet.html
+++ b/examples/advanced_bullet.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
 
     // Create the svg and set the dimensions
diff --git a/examples/advanced_christmas_tree.html b/examples/advanced_christmas_tree.html
index bf15725..9ca7298 100644
--- a/examples/advanced_christmas_tree.html
+++ b/examples/advanced_christmas_tree.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
     <script src="/lib/d3.v3.min.js"></script>
-    <script src="/dist/dimple.v1.1.2.js"></script>
+    <script src="/dist/dimple.v1.1.4.js"></script>
     <script type="text/javascript">
         var svg = dimple.newSvg("#chartContainer", 590, 400);
 
diff --git a/examples/advanced_dynamic_line_color.html b/examples/advanced_dynamic_line_color.html
index 82f57e7..c046cd3 100644
--- a/examples/advanced_dynamic_line_color.html
+++ b/examples/advanced_dynamic_line_color.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/advanced_grouped_mekko.html b/examples/advanced_grouped_mekko.html
index 1eebb7d..81ce4b1 100644
--- a/examples/advanced_grouped_mekko.html
+++ b/examples/advanced_grouped_mekko.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/advanced_interactive_legends.html b/examples/advanced_interactive_legends.html
index 18038b0..c3721fb 100644
--- a/examples/advanced_interactive_legends.html
+++ b/examples/advanced_interactive_legends.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/advanced_lollipop_with_hover.html b/examples/advanced_lollipop_with_hover.html
index 7e2d06c..69b4da4 100644
--- a/examples/advanced_lollipop_with_hover.html
+++ b/examples/advanced_lollipop_with_hover.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     
     var svg = dimple.newSvg("#chartContainer", 590, 400);
diff --git a/examples/advanced_matrix.html b/examples/advanced_matrix.html
index d91a8c6..43fb7b4 100644
--- a/examples/advanced_matrix.html
+++ b/examples/advanced_matrix.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
 
     // Create the svg and set the dimensions
diff --git a/examples/advanced_pong.html b/examples/advanced_pong.html
index 08ab313..c32b9a2 100644
--- a/examples/advanced_pong.html
+++ b/examples/advanced_pong.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     var data = [
diff --git a/examples/advanced_price_range_lollipop.html b/examples/advanced_price_range_lollipop.html
index 46ad19e..7fd614a 100644
--- a/examples/advanced_price_range_lollipop.html
+++ b/examples/advanced_price_range_lollipop.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/advanced_responsive_sizing.html b/examples/advanced_responsive_sizing.html
index 54faf65..3fc9226 100644
--- a/examples/advanced_responsive_sizing.html
+++ b/examples/advanced_responsive_sizing.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer" style="height: 100%">
     <script src="/lib/d3.v3.min.js"></script>
-    <script src="/dist/dimple.v1.1.2.js"></script>
+    <script src="/dist/dimple.v1.1.4.js"></script>
     <script type="text/javascript">
         // In version 1.1.0 it's possible to initialise any size parameter with a
         // % value as well as pixels
diff --git a/examples/advanced_storyboard_control.html b/examples/advanced_storyboard_control.html
index 5733a25..cce4193 100644
--- a/examples/advanced_storyboard_control.html
+++ b/examples/advanced_storyboard_control.html
@@ -3,133 +3,137 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
-      var svg = dimple.newSvg("#chartContainer", 590, 400);
-      d3.tsv("/data/example_data.tsv", function (data) {
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
 
-          // Filter for 1 year
-          data = dimple.filterData(data, "Month", [
-              "Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
-              "Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
-          ]);
+      // Filter for 1 year
+      data = dimple.filterData(data, "Month", [
+        "Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
+        "Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
+      ]);
 
-          // Create the indicator chart on the right of the main chart
-          var indicator = new dimple.chart(svg, data);
+      // Create the indicator chart on the right of the main chart
+      var indicator = new dimple.chart(svg, data);
 
-          // Pick blue as the default and orange for the selected month
-          var defaultColor = indicator.defaultColors[0];
-          var indicatorColor = indicator.defaultColors[2];
+      // Pick blue as the default and orange for the selected month
+      var defaultColor = indicator.defaultColors[0];
+      var indicatorColor = indicator.defaultColors[2];
 
-          // The frame duration for the animation in milliseconds
-          var frame = 2000;
+      // The frame duration for the animation in milliseconds
+      var frame = 750;
 
-          var firstTick = true;
+      // Place the indicator bar chart to the right
+      indicator.setBounds(434, 49, 153, 311);
 
-          // Place the indicator bar chart to the right
-          indicator.setBounds(434, 49, 153, 311);
+      // Add dates along the y axis
+      var y = indicator.addCategoryAxis("y", "Month");
+      y.addOrderRule("Date", "Desc");
 
-          // Add dates along the y axis
-          var y = indicator.addCategoryAxis("y", "Month");
-          y.addOrderRule("Date", "Desc");
+      // Use sales for bar size and hide the axis
+      var x = indicator.addMeasureAxis("x", "Unit Sales");
+      x.hidden = true;
 
-          // Use sales for bar size and hide the axis
-          var x = indicator.addMeasureAxis("x", "Unit Sales");
-          x.hidden = true;
+      // Add the bars to the indicator and add event handlers
+      var s = indicator.addSeries(null, dimple.plot.bar);
+      s.addEventHandler("click", onClick);
+      // Draw the side chart
+      indicator.draw();
 
-          // Add the bars to the indicator and add event handlers
-          var s = indicator.addSeries(null, dimple.plot.bar);
-          s.addEventHandler("click", onClick);
-          // Draw the side chart
-          indicator.draw();
+      // Remove the title from the y axis
+      y.titleShape.remove();
 
-          // Remove the title from the y axis
-          y.titleShape.remove();
+      // Remove the lines from the y axis
+      y.shapes.selectAll("line,path").remove();
 
-          // Remove the lines from the y axis
-          y.shapes.selectAll("line,path").remove();
+      // Move the y axis text inside the plot area
+      y.shapes.selectAll("text")
+        .style("text-anchor", "start")
+        .style("font-size", "11px")
+        .attr("transform", "translate(18, 0.5)");
 
-          // Move the y axis text inside the plot area
-          y.shapes.selectAll("text")
-                  .style("text-anchor", "start")
-                  .style("font-size", "11px")
-                  .attr("transform", "translate(18, 0.5)");
+      // This block simply adds the legend title. I put it into a d3 data
+      // object to split it onto 2 lines.  This technique works with any
+      // number of lines, it isn't dimple specific.
+      svg.selectAll("title_text")
+        .data(["Click bar to select",
+          "and pause. Click again",
+          "to resume animation"])
+        .enter()
+        .append("text")
+          .attr("x", 435)
+          .attr("y", function (d, i) { return 15 + i * 12; })
+          .style("font-family", "sans-serif")
+          .style("font-size", "10px")
+          .style("color", "Black")
+          .text(function (d) { return d; });
 
-          // This block simply adds the legend title. I put it into a d3 data
-          // object to split it onto 2 lines.  This technique works with any
-          // number of lines, it isn't dimple specific.
-          svg.selectAll("title_text")
-                  .data(["Click bar to select",
-                      "and pause. Click again",
-                      "to resume animation"])
-                  .enter()
-                  .append("text")
-                  .attr("x", 435)
-                  .attr("y", function (d, i) { return 15 + i * 12; })
-                  .style("font-family", "sans-serif")
-                  .style("font-size", "10px")
-                  .style("color", "Black")
-                  .text(function (d) { return d; });
+      // Manually set the bar colors
+      s.shapes
+          .attr("rx", 10)
+          .attr("ry", 10)
+          .style("fill", defaultColor.fill)
+          .style("stroke", defaultColor.stroke)
+          .style("opacity", 0.4);
+      svg.selectAll("rect.Jan-12")
+          .style("fill", indicatorColor.fill)
+          .style("stroke", indicatorColor.stroke);
 
-          // Manually set the bar colors
-          s.shapes
-                  .attr("rx", 10)
-                  .attr("ry", 10)
-                  .style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
-                  .style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
-                  .style("opacity", 0.4);
+      // Draw the main chart
+      var bubbles = new dimple.chart(svg, data);
+      bubbles.setBounds(60, 50, 355, 310)
+      bubbles.addMeasureAxis("x", "Distribution");
+      bubbles.addMeasureAxis("y", "Price");
+      bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
+      bubbles.addLegend(60, 10, 410, 60);
 
-          // Draw the main chart
-          var bubbles = new dimple.chart(svg, data);
-          bubbles.setBounds(60, 50, 355, 310)
-          bubbles.addMeasureAxis("x", "Distribution");
-          bubbles.addMeasureAxis("y", "Price");
-          bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
-          bubbles.addLegend(60, 10, 410, 60);
+      // Add a storyboard to the main chart and set the tick event
+      var story = bubbles.setStoryboard("Month", onTick);
+      // Change the frame duration
+      story.frameDuration = frame;
+      // Order the storyboard by date
+      story.addOrderRule("Date");
 
-          // Add a storyboard to the main chart and set the tick event
-          var story = bubbles.setStoryboard("Month", onTick);
-          // Change the frame duration
-          story.frameDuration = frame;
-          // Order the storyboard by date
-          story.addOrderRule("Date");
+      // Draw the bubble chart
+      bubbles.draw();
 
-          // Draw the bubble chart
-          bubbles.draw();
+      // Orphan the legends as they are consistent but by default they
+      // will refresh on tick
+      bubbles.legends = [];
+      // Remove the storyboard label because the chart will indicate the
+      // current month instead of the label
+      story.storyLabel.remove();
+    
+      // On click of the side chart
+      function onClick(e) {
+        // Pause the animation
+        story.pauseAnimation();
+        // If it is already selected resume the animation
+        // otherwise pause and move to the selected month
+        if (e.yValue === story.getFrameValue()) {
+          story.startAnimation();
+        } else {
+          story.goToFrame(e.yValue);
+          story.pauseAnimation();
+        }
+      }
 
-          // Orphan the legends as they are consistent but by default they
-          // will refresh on tick
-          bubbles.legends = [];
-          // Remove the storyboard label because the chart will indicate the
-          // current month instead of the label
-          story.storyLabel.remove();
-
-          // On click of the side chart
-          function onClick(e) {
-              // Pause the animation
-              story.pauseAnimation();
-              // If it is already selected resume the animation
-              // otherwise pause and move to the selected month
-              if (e.yValue === story.getFrameValue()) {
-                  story.startAnimation();
-              } else {
-                  story.goToFrame(e.yValue);
-                  story.pauseAnimation();
-              }
-          }
-
-          // On tick of the main charts storyboard
-          function onTick(e) {
-              if (!firstTick) {
-                  // Color all shapes the same
-                  s.shapes
-                          .transition()
-                          .duration(frame / 2)
-                          .style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
-                          .style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
-              }
-              firstTick = false;
-          }
-      });
+      // On tick of the main charts storyboard
+      function onTick(e) {
+        // Color all shapes the same
+        s.shapes
+          .transition()
+            .duration(frame / 2)
+            .style("fill", defaultColor.fill)
+            .style("stroke", defaultColor.stroke);
+        // Then color the selected shape differently
+        svg.selectAll("rect." + e)
+          .transition()
+            .duration(frame / 2)
+            .style("fill", indicatorColor.fill)
+            .style("stroke", indicatorColor.stroke);
+      }
+    });
   </script>
 </div>
\ No newline at end of file
diff --git a/examples/advanced_time_axis.html b/examples/advanced_time_axis.html
index 0eefee3..be9f6f9 100644
--- a/examples/advanced_time_axis.html
+++ b/examples/advanced_time_axis.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
 
diff --git a/examples/advanced_trellis_bar.html b/examples/advanced_trellis_bar.html
index 80d58b7..6f114dd 100644
--- a/examples/advanced_trellis_bar.html
+++ b/examples/advanced_trellis_bar.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/advanced_waterfall.html b/examples/advanced_waterfall.html
index b25c604..24b83e1 100644
--- a/examples/advanced_waterfall.html
+++ b/examples/advanced_waterfall.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
 
     // This code should support any data in this structure changing the data here
diff --git a/examples/areas_horizontal.html b/examples/areas_horizontal.html
index 9641a57..3792495 100644
--- a/examples/areas_horizontal.html
+++ b/examples/areas_horizontal.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_horizontal_grouped.html b/examples/areas_horizontal_grouped.html
index 24be565..23e09d8 100644
--- a/examples/areas_horizontal_grouped.html
+++ b/examples/areas_horizontal_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_horizontal_grouped_100pct.html b/examples/areas_horizontal_grouped_100pct.html
index 2fc0750..a377487 100644
--- a/examples/areas_horizontal_grouped_100pct.html
+++ b/examples/areas_horizontal_grouped_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_horizontal_grouped_stacked.html b/examples/areas_horizontal_grouped_stacked.html
index 5a03079..e24c039 100644
--- a/examples/areas_horizontal_grouped_stacked.html
+++ b/examples/areas_horizontal_grouped_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_horizontal_stacked.html b/examples/areas_horizontal_stacked.html
index 75ac191..0a16d81 100644
--- a/examples/areas_horizontal_stacked.html
+++ b/examples/areas_horizontal_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_horizontal_stacked_100pct.html b/examples/areas_horizontal_stacked_100pct.html
index 8a1e552..f49ee7a 100644
--- a/examples/areas_horizontal_stacked_100pct.html
+++ b/examples/areas_horizontal_stacked_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_vertical.html b/examples/areas_vertical.html
index 2782180..c8cda20 100644
--- a/examples/areas_vertical.html
+++ b/examples/areas_vertical.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_vertical_grouped.html b/examples/areas_vertical_grouped.html
index 7de6e13..94bbfe8 100644
--- a/examples/areas_vertical_grouped.html
+++ b/examples/areas_vertical_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_vertical_grouped_100pct.html b/examples/areas_vertical_grouped_100pct.html
index 0dca34c..0bd4370 100644
--- a/examples/areas_vertical_grouped_100pct.html
+++ b/examples/areas_vertical_grouped_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_vertical_grouped_stacked.html b/examples/areas_vertical_grouped_stacked.html
index f510666..e45089a 100644
--- a/examples/areas_vertical_grouped_stacked.html
+++ b/examples/areas_vertical_grouped_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_vertical_stacked.html b/examples/areas_vertical_stacked.html
index 259cc3c..1ed8444 100644
--- a/examples/areas_vertical_stacked.html
+++ b/examples/areas_vertical_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/areas_vertical_stacked_100pct.html b/examples/areas_vertical_stacked_100pct.html
index ce8e30f..8f87360 100644
--- a/examples/areas_vertical_stacked_100pct.html
+++ b/examples/areas_vertical_stacked_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_horizontal.html b/examples/bars_horizontal.html
index 5ee4a54..a65d2d5 100644
--- a/examples/bars_horizontal.html
+++ b/examples/bars_horizontal.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -12,7 +12,10 @@
       myChart.addMeasureAxis("x", "Unit Sales");
       var y = myChart.addCategoryAxis("y", "Month");
       y.addOrderRule("Date");
-      myChart.addSeries(null, dimple.plot.bar);
+      var s1 = myChart.addSeries(null, dimple.plot.bar);
+      s1.data = data;
+      var s2 = myChart.addSeries("Test", dimple.plot.bubble);
+      s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
       myChart.draw();
     });
   </script>
diff --git a/examples/bars_horizontal_grouped.html b/examples/bars_horizontal_grouped.html
index a86763e..9ed64d6 100644
--- a/examples/bars_horizontal_grouped.html
+++ b/examples/bars_horizontal_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_horizontal_grouped_stacked.html b/examples/bars_horizontal_grouped_stacked.html
index 04525b3..11e20f0 100644
--- a/examples/bars_horizontal_grouped_stacked.html
+++ b/examples/bars_horizontal_grouped_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_horizontal_grouped_stacked_100pct.html b/examples/bars_horizontal_grouped_stacked_100pct.html
index aacdc18..6870a93 100644
--- a/examples/bars_horizontal_grouped_stacked_100pct.html
+++ b/examples/bars_horizontal_grouped_stacked_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_horizontal_mekko.html b/examples/bars_horizontal_mekko.html
index 7957696..d367164 100644
--- a/examples/bars_horizontal_mekko.html
+++ b/examples/bars_horizontal_mekko.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_horizontal_stacked.html b/examples/bars_horizontal_stacked.html
index 9aae57b..0b6150c 100644
--- a/examples/bars_horizontal_stacked.html
+++ b/examples/bars_horizontal_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_horizontal_stacked_100pct.html b/examples/bars_horizontal_stacked_100pct.html
index 7e8cfa1..9b761a0 100644
--- a/examples/bars_horizontal_stacked_100pct.html
+++ b/examples/bars_horizontal_stacked_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_matrix.html b/examples/bars_matrix.html
index 0220564..030acfe 100644
--- a/examples/bars_matrix.html
+++ b/examples/bars_matrix.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_vertical.html b/examples/bars_vertical.html
index 28df754..cca4f1f 100644
--- a/examples/bars_vertical.html
+++ b/examples/bars_vertical.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_vertical_grouped.html b/examples/bars_vertical_grouped.html
index 9a2e5e7..59300a3 100644
--- a/examples/bars_vertical_grouped.html
+++ b/examples/bars_vertical_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_vertical_grouped_stacked.html b/examples/bars_vertical_grouped_stacked.html
index f7909d9..bbdb31b 100644
--- a/examples/bars_vertical_grouped_stacked.html
+++ b/examples/bars_vertical_grouped_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_vertical_grouped_stacked_100pct.html b/examples/bars_vertical_grouped_stacked_100pct.html
index 5a678cc..57e7a10 100644
--- a/examples/bars_vertical_grouped_stacked_100pct.html
+++ b/examples/bars_vertical_grouped_stacked_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_vertical_mekko.html b/examples/bars_vertical_mekko.html
index 150d3c6..0fd0b9f 100644
--- a/examples/bars_vertical_mekko.html
+++ b/examples/bars_vertical_mekko.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_vertical_stacked.html b/examples/bars_vertical_stacked.html
index bad3672..ec4c9a2 100644
--- a/examples/bars_vertical_stacked.html
+++ b/examples/bars_vertical_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bars_vertical_stacked_100pct.html b/examples/bars_vertical_stacked_100pct.html
index 296f94e..15c2cce 100644
--- a/examples/bars_vertical_stacked_100pct.html
+++ b/examples/bars_vertical_stacked_100pct.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bubbles_horizontal_grouped.html b/examples/bubbles_horizontal_grouped.html
index a25c1e2..20ef25f 100644
--- a/examples/bubbles_horizontal_grouped.html
+++ b/examples/bubbles_horizontal_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bubbles_horizontal_lollipop.html b/examples/bubbles_horizontal_lollipop.html
index 44a001f..ca5cbc8 100644
--- a/examples/bubbles_horizontal_lollipop.html
+++ b/examples/bubbles_horizontal_lollipop.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bubbles_matrix.html b/examples/bubbles_matrix.html
index 7ab8010..2c7cda8 100644
--- a/examples/bubbles_matrix.html
+++ b/examples/bubbles_matrix.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bubbles_standard.html b/examples/bubbles_standard.html
index b6ce26d..23a1054 100644
--- a/examples/bubbles_standard.html
+++ b/examples/bubbles_standard.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bubbles_vertical_grouped.html b/examples/bubbles_vertical_grouped.html
index ccb0fda..3c672ab 100644
--- a/examples/bubbles_vertical_grouped.html
+++ b/examples/bubbles_vertical_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/bubbles_vertical_lollipop.html b/examples/bubbles_vertical_lollipop.html
index e5a33af..06c0e57 100644
--- a/examples/bubbles_vertical_lollipop.html
+++ b/examples/bubbles_vertical_lollipop.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_horizontal.html b/examples/lines_horizontal.html
index 10894ad..81653c6 100644
--- a/examples/lines_horizontal.html
+++ b/examples/lines_horizontal.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_horizontal_grouped.html b/examples/lines_horizontal_grouped.html
index ae568b7..11c2669 100644
--- a/examples/lines_horizontal_grouped.html
+++ b/examples/lines_horizontal_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_horizontal_grouped_stacked.html b/examples/lines_horizontal_grouped_stacked.html
index b01ec28..60b0f0a 100644
--- a/examples/lines_horizontal_grouped_stacked.html
+++ b/examples/lines_horizontal_grouped_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_horizontal_stacked.html b/examples/lines_horizontal_stacked.html
index 1890d84..2debacb 100644
--- a/examples/lines_horizontal_stacked.html
+++ b/examples/lines_horizontal_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_vertical.html b/examples/lines_vertical.html
index f74b42b..b68b946 100644
--- a/examples/lines_vertical.html
+++ b/examples/lines_vertical.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_vertical_grouped.html b/examples/lines_vertical_grouped.html
index a547a3f..8588632 100644
--- a/examples/lines_vertical_grouped.html
+++ b/examples/lines_vertical_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_vertical_grouped_stacked.html b/examples/lines_vertical_grouped_stacked.html
index d7d6323..4e87d05 100644
--- a/examples/lines_vertical_grouped_stacked.html
+++ b/examples/lines_vertical_grouped_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/lines_vertical_stacked.html b/examples/lines_vertical_stacked.html
index a1ba70c..e2b55e8 100644
--- a/examples/lines_vertical_stacked.html
+++ b/examples/lines_vertical_stacked.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/scatter_horizontal_grouped.html b/examples/scatter_horizontal_grouped.html
index b710923..f5ad56c 100644
--- a/examples/scatter_horizontal_grouped.html
+++ b/examples/scatter_horizontal_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/scatter_horizontal_lollipop.html b/examples/scatter_horizontal_lollipop.html
index f645ce2..d50ed0a 100644
--- a/examples/scatter_horizontal_lollipop.html
+++ b/examples/scatter_horizontal_lollipop.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/scatter_matrix.html b/examples/scatter_matrix.html
index b9ad449..6166d77 100644
--- a/examples/scatter_matrix.html
+++ b/examples/scatter_matrix.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/scatter_standard.html b/examples/scatter_standard.html
index b9e0d93..c4aab52 100644
--- a/examples/scatter_standard.html
+++ b/examples/scatter_standard.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/scatter_vertical_grouped.html b/examples/scatter_vertical_grouped.html
index 81f7db4..1f88ba7 100644
--- a/examples/scatter_vertical_grouped.html
+++ b/examples/scatter_vertical_grouped.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/scatter_vertical_lollipop.html b/examples/scatter_vertical_lollipop.html
index 58bd69c..34b363a 100644
--- a/examples/scatter_vertical_lollipop.html
+++ b/examples/scatter_vertical_lollipop.html
@@ -3,7 +3,7 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/dist/dimple.v1.1.4.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
diff --git a/examples/templates/advanced_christmas_tree.html b/examples/templates/advanced_christmas_tree.html
index 91064f1..a6c0742 100644
--- a/examples/templates/advanced_christmas_tree.html
+++ b/examples/templates/advanced_christmas_tree.html
@@ -1,6 +1,6 @@
 <div id="chartContainer">
     <script src="/lib/d3.v3.min.js"></script>
-    <script src="/dist/dimple.v1.1.2.js"></script>
+    <script src="/dist/dimple.{version}.js"></script>
     <script type="text/javascript">
         var svg = dimple.newSvg("#chartContainer", 590, 400);
 
diff --git a/examples/templates/advanced_storyboard_control.html b/examples/templates/advanced_storyboard_control.html
index 4775f22..fea8f62 100644
--- a/examples/templates/advanced_storyboard_control.html
+++ b/examples/templates/advanced_storyboard_control.html
@@ -2,131 +2,135 @@
   <script src="/lib/d3.v3.min.js"></script>
   <script src="/dist/dimple.{version}.js"></script>
   <script type="text/javascript">
-      var svg = dimple.newSvg("#chartContainer", 590, 400);
-      d3.tsv("/data/example_data.tsv", function (data) {
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
 
-          // Filter for 1 year
-          data = dimple.filterData(data, "Month", [
-              "Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
-              "Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
-          ]);
+      // Filter for 1 year
+      data = dimple.filterData(data, "Month", [
+        "Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
+        "Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
+      ]);
 
-          // Create the indicator chart on the right of the main chart
-          var indicator = new dimple.chart(svg, data);
+      // Create the indicator chart on the right of the main chart
+      var indicator = new dimple.chart(svg, data);
 
-          // Pick blue as the default and orange for the selected month
-          var defaultColor = indicator.defaultColors[0];
-          var indicatorColor = indicator.defaultColors[2];
+      // Pick blue as the default and orange for the selected month
+      var defaultColor = indicator.defaultColors[0];
+      var indicatorColor = indicator.defaultColors[2];
 
-          // The frame duration for the animation in milliseconds
-          var frame = 2000;
+      // The frame duration for the animation in milliseconds
+      var frame = 750;
 
-          var firstTick = true;
+      // Place the indicator bar chart to the right
+      indicator.setBounds(434, 49, 153, 311);
 
-          // Place the indicator bar chart to the right
-          indicator.setBounds(434, 49, 153, 311);
+      // Add dates along the y axis
+      var y = indicator.addCategoryAxis("y", "Month");
+      y.addOrderRule("Date", "Desc");
 
-          // Add dates along the y axis
-          var y = indicator.addCategoryAxis("y", "Month");
-          y.addOrderRule("Date", "Desc");
+      // Use sales for bar size and hide the axis
+      var x = indicator.addMeasureAxis("x", "Unit Sales");
+      x.hidden = true;
 
-          // Use sales for bar size and hide the axis
-          var x = indicator.addMeasureAxis("x", "Unit Sales");
-          x.hidden = true;
+      // Add the bars to the indicator and add event handlers
+      var s = indicator.addSeries(null, dimple.plot.bar);
+      s.addEventHandler("click", onClick);
+      // Draw the side chart
+      indicator.draw();
 
-          // Add the bars to the indicator and add event handlers
-          var s = indicator.addSeries(null, dimple.plot.bar);
-          s.addEventHandler("click", onClick);
-          // Draw the side chart
-          indicator.draw();
+      // Remove the title from the y axis
+      y.titleShape.remove();
 
-          // Remove the title from the y axis
-          y.titleShape.remove();
+      // Remove the lines from the y axis
+      y.shapes.selectAll("line,path").remove();
 
-          // Remove the lines from the y axis
-          y.shapes.selectAll("line,path").remove();
+      // Move the y axis text inside the plot area
+      y.shapes.selectAll("text")
+        .style("text-anchor", "start")
+        .style("font-size", "11px")
+        .attr("transform", "translate(18, 0.5)");
 
-          // Move the y axis text inside the plot area
-          y.shapes.selectAll("text")
-                  .style("text-anchor", "start")
-                  .style("font-size", "11px")
-                  .attr("transform", "translate(18, 0.5)");
+      // This block simply adds the legend title. I put it into a d3 data
+      // object to split it onto 2 lines.  This technique works with any
+      // number of lines, it isn't dimple specific.
+      svg.selectAll("title_text")
+        .data(["Click bar to select",
+          "and pause. Click again",
+          "to resume animation"])
+        .enter()
+        .append("text")
+          .attr("x", 435)
+          .attr("y", function (d, i) { return 15 + i * 12; })
+          .style("font-family", "sans-serif")
+          .style("font-size", "10px")
+          .style("color", "Black")
+          .text(function (d) { return d; });
 
-          // This block simply adds the legend title. I put it into a d3 data
-          // object to split it onto 2 lines.  This technique works with any
-          // number of lines, it isn't dimple specific.
-          svg.selectAll("title_text")
-                  .data(["Click bar to select",
-                      "and pause. Click again",
-                      "to resume animation"])
-                  .enter()
-                  .append("text")
-                  .attr("x", 435)
-                  .attr("y", function (d, i) { return 15 + i * 12; })
-                  .style("font-family", "sans-serif")
-                  .style("font-size", "10px")
-                  .style("color", "Black")
-                  .text(function (d) { return d; });
+      // Manually set the bar colors
+      s.shapes
+          .attr("rx", 10)
+          .attr("ry", 10)
+          .style("fill", defaultColor.fill)
+          .style("stroke", defaultColor.stroke)
+          .style("opacity", 0.4);
+      svg.selectAll("rect.Jan-12")
+          .style("fill", indicatorColor.fill)
+          .style("stroke", indicatorColor.stroke);
 
-          // Manually set the bar colors
-          s.shapes
-                  .attr("rx", 10)
-                  .attr("ry", 10)
-                  .style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
-                  .style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
-                  .style("opacity", 0.4);
+      // Draw the main chart
+      var bubbles = new dimple.chart(svg, data);
+      bubbles.setBounds(60, 50, 355, 310)
+      bubbles.addMeasureAxis("x", "Distribution");
+      bubbles.addMeasureAxis("y", "Price");
+      bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
+      bubbles.addLegend(60, 10, 410, 60);
 
-          // Draw the main chart
-          var bubbles = new dimple.chart(svg, data);
-          bubbles.setBounds(60, 50, 355, 310)
-          bubbles.addMeasureAxis("x", "Distribution");
-          bubbles.addMeasureAxis("y", "Price");
-          bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
-          bubbles.addLegend(60, 10, 410, 60);
+      // Add a storyboard to the main chart and set the tick event
+      var story = bubbles.setStoryboard("Month", onTick);
+      // Change the frame duration
+      story.frameDuration = frame;
+      // Order the storyboard by date
+      story.addOrderRule("Date");
 
-          // Add a storyboard to the main chart and set the tick event
-          var story = bubbles.setStoryboard("Month", onTick);
-          // Change the frame duration
-          story.frameDuration = frame;
-          // Order the storyboard by date
-          story.addOrderRule("Date");
+      // Draw the bubble chart
+      bubbles.draw();
 
-          // Draw the bubble chart
-          bubbles.draw();
+      // Orphan the legends as they are consistent but by default they
+      // will refresh on tick
+      bubbles.legends = [];
+      // Remove the storyboard label because the chart will indicate the
+      // current month instead of the label
+      story.storyLabel.remove();
+    
+      // On click of the side chart
+      function onClick(e) {
+        // Pause the animation
+        story.pauseAnimation();
+        // If it is already selected resume the animation
+        // otherwise pause and move to the selected month
+        if (e.yValue === story.getFrameValue()) {
+          story.startAnimation();
+        } else {
+          story.goToFrame(e.yValue);
+          story.pauseAnimation();
+        }
+      }
 
-          // Orphan the legends as they are consistent but by default they
-          // will refresh on tick
-          bubbles.legends = [];
-          // Remove the storyboard label because the chart will indicate the
-          // current month instead of the label
-          story.storyLabel.remove();
-
-          // On click of the side chart
-          function onClick(e) {
-              // Pause the animation
-              story.pauseAnimation();
-              // If it is already selected resume the animation
-              // otherwise pause and move to the selected month
-              if (e.yValue === story.getFrameValue()) {
-                  story.startAnimation();
-              } else {
-                  story.goToFrame(e.yValue);
-                  story.pauseAnimation();
-              }
-          }
-
-          // On tick of the main charts storyboard
-          function onTick(e) {
-              if (!firstTick) {
-                  // Color all shapes the same
-                  s.shapes
-                          .transition()
-                          .duration(frame / 2)
-                          .style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
-                          .style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
-              }
-              firstTick = false;
-          }
-      });
+      // On tick of the main charts storyboard
+      function onTick(e) {
+        // Color all shapes the same
+        s.shapes
+          .transition()
+            .duration(frame / 2)
+            .style("fill", defaultColor.fill)
+            .style("stroke", defaultColor.stroke);
+        // Then color the selected shape differently
+        svg.selectAll("rect." + e)
+          .transition()
+            .duration(frame / 2)
+            .style("fill", indicatorColor.fill)
+            .style("stroke", indicatorColor.stroke);
+      }
+    });
   </script>
 </div>
\ No newline at end of file
diff --git a/examples/templates/bars_horizontal.html b/examples/templates/bars_horizontal.html
index 004c502..cffed7b 100644
--- a/examples/templates/bars_horizontal.html
+++ b/examples/templates/bars_horizontal.html
@@ -9,7 +9,10 @@
       myChart.addMeasureAxis("x", "Unit Sales");
       var y = myChart.addCategoryAxis("y", "Month");
       y.addOrderRule("Date");
-      myChart.addSeries(null, dimple.plot.bar);
+      var s1 = myChart.addSeries(null, dimple.plot.bar);
+      s1.data = data;
+      var s2 = myChart.addSeries("Test", dimple.plot.bubble);
+      s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
       myChart.draw();
     });
   </script>