Update to 1.1.5

advanced_examples_index.html

@@ -39,10 +39,10 @@
         </table>
         <h3>Libraries</h3>
         <p>
-          <a href="/dist/dimple.v1.1.4.js">
+          <a href="/dist/dimple.v1.1.5.js">
               Full Javascript Library With Comments
           </a><br/>
-          <a href="/dist/dimple.v1.1.4.min.js">
+          <a href="/dist/dimple.v1.1.5.min.js">
               Minified Javascript Library
           </a><br/>
           <a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">

advanced_examples_viewer.html

@@ -8,7 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <title id="title"></title>
     <script type="application/javascript" src="/lib/d3.v3.min.js"></script>
-    <script type="application/javascript" src="/dist/dimple.v1.1.4.min.js"></script>
+    <script type="application/javascript" src="/dist/dimple.v1.1.5.min.js"></script>
     <link rel="stylesheet" href="/stylesheets/styles.css">
     <link rel="stylesheet" href="/stylesheets/pygment_trac.css">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@@ -43,10 +43,10 @@
         </p>
         <h3>Libraries</h3>
         <p>
-          <a href="/dist/dimple.v1.1.4.js">
+          <a href="/dist/dimple.v1.1.5.js">
               Full Javascript Library With Comments
           </a><br/>
-          <a href="/dist/dimple.v1.1.4.min.js">
+          <a href="/dist/dimple.v1.1.5.min.js">
               Minified Javascript Library
           </a><br/>
           <a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
@@ -115,12 +115,12 @@
             $.get("examples/" + spec.id + ".html", function (page) {
                 $("#codeContainer").text(
                         page.slice(page.indexOf("<div"))
-                                .replace("src=\"/dist/dimple.v1.1.4.js\"", "src=\"http://dimplejs.org/dist/dimple.v1.1.4.min.js\"")
+                                .replace("src=\"/dist/dimple.v1.1.5.js\"", "src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"")
                                 .replace("src=\"/lib/d3.v3.min.js\"", "src=\"http://d3js.org/d3.v3.min.js\"")
                 );
                 $("#chartBox").html(
                         page.slice(page.indexOf("<div"))
-                                .replace("src=\"/dist/dimple.v1.1.4.js\"", "")
+                                .replace("src=\"/dist/dimple.v1.1.5.js\"", "")
                                 .replace("src=\"/lib/d3.v3.min.js\"", "")
                 );
             });

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     // This is the simple vertical grouped stacked 100% bar example
     var svg = dimple.newSvg("#chartContainer", 590, 400);

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
 
     // Create the svg and set the dimensions

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.4.js"></script>
+    <script src="/dist/dimple.v1.1.5.js"></script>
     <script type="text/javascript">
         var svg = dimple.newSvg("#chartContainer", 590, 400);
 

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     
     var svg = dimple.newSvg("#chartContainer", 590, 400);

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
 
     // Create the svg and set the dimensions

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     var data = [

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+    <script src="/dist/dimple.v1.1.5.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

examples/advanced_storyboard_control.html

@@ -3,137 +3,133 @@
 <!----------------------------------------------------------------->
 <div id="chartContainer">
   <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.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 = 750;
+          // The frame duration for the animation in milliseconds
+          var frame = 2000;
 
-      // Place the indicator bar chart to the right
-      indicator.setBounds(434, 49, 153, 311);
+          var firstTick = true;
 
-      // Add dates along the y axis
-      var y = indicator.addCategoryAxis("y", "Month");
-      y.addOrderRule("Date", "Desc");
+          // Place the indicator bar chart to the right
+          indicator.setBounds(434, 49, 153, 311);
 
-      // Use sales for bar size and hide the axis
-      var x = indicator.addMeasureAxis("x", "Unit Sales");
-      x.hidden = true;
+          // Add dates along the y axis
+          var y = indicator.addCategoryAxis("y", "Month");
+          y.addOrderRule("Date", "Desc");
 
-      // 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();
+          // Use sales for bar size and hide the axis
+          var x = indicator.addMeasureAxis("x", "Unit Sales");
+          x.hidden = true;
 
-      // Remove the title from the y axis
-      y.titleShape.remove();
+          // 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 lines from the y axis
-      y.shapes.selectAll("line,path").remove();
+          // Remove the title from the y axis
+          y.titleShape.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)");
+          // Remove the lines from the y axis
+          y.shapes.selectAll("line,path").remove();
 
-      // 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; });
+          // 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)");
 
-      // 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);
+          // 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; });
 
-      // 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);
+          // 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);
 
-      // 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 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 bubble chart
-      bubbles.draw();
+          // 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");
 
-      // 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();
-        }
-      }
+          // Draw the bubble chart
+          bubbles.draw();
 
-      // 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);
-      }
-    });
+          // 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;
+          }
+      });
   </script>
 </div>

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
 

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
 
     // This code should support any data in this structure changing the data here

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {

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.4.js"></script>
+  <script src="/dist/dimple.v1.1.5.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {

examples/templates/advanced_storyboard_control.html

@@ -2,135 +2,131 @@
   <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 = 750;
+          // The frame duration for the animation in milliseconds
+          var frame = 2000;
 
-      // Place the indicator bar chart to the right
-      indicator.setBounds(434, 49, 153, 311);
+          var firstTick = true;
 
-      // Add dates along the y axis
-      var y = indicator.addCategoryAxis("y", "Month");
-      y.addOrderRule("Date", "Desc");
+          // Place the indicator bar chart to the right
+          indicator.setBounds(434, 49, 153, 311);
 
-      // Use sales for bar size and hide the axis
-      var x = indicator.addMeasureAxis("x", "Unit Sales");
-      x.hidden = true;
+          // Add dates along the y axis
+          var y = indicator.addCategoryAxis("y", "Month");
+          y.addOrderRule("Date", "Desc");
 
-      // 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();
+          // Use sales for bar size and hide the axis
+          var x = indicator.addMeasureAxis("x", "Unit Sales");
+          x.hidden = true;
 
-      // Remove the title from the y axis
-      y.titleShape.remove();
+          // 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 lines from the y axis
-      y.shapes.selectAll("line,path").remove();
+          // Remove the title from the y axis
+          y.titleShape.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)");
+          // Remove the lines from the y axis
+          y.shapes.selectAll("line,path").remove();
 
-      // 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; });
+          // 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)");
 
-      // 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);
+          // 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; });
 
-      // 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);
+          // 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);
 
-      // 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 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 bubble chart
-      bubbles.draw();
+          // 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");
 
-      // 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();
-        }
-      }
+          // Draw the bubble chart
+          bubbles.draw();
 
-      // 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);
-      }
-    });
+          // 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;
+          }
+      });
   </script>
 </div>

examples_index.html

@@ -39,10 +39,10 @@
         </table>
         <h3>Libraries</h3>
         <p>
-          <a href="/dist/dimple.v1.1.4.js">
+          <a href="/dist/dimple.v1.1.5.js">
               Full Javascript Library With Comments
           </a><br/>
-          <a href="/dist/dimple.v1.1.4.min.js">
+          <a href="/dist/dimple.v1.1.5.min.js">
               Minified Javascript Library
           </a><br/>
           <a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">

examples_viewer.html

@@ -8,7 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <title id="title"></title>
     <script type="application/javascript" src="/lib/d3.v3.min.js"></script>
-    <script type="application/javascript" src="/dist/dimple.v1.1.4.min.js"></script>
+    <script type="application/javascript" src="/dist/dimple.v1.1.5.min.js"></script>
     <link rel="stylesheet" href="/stylesheets/styles.css">
     <link rel="stylesheet" href="/stylesheets/pygment_trac.css">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@@ -43,10 +43,10 @@
         </p>
         <h3>Libraries</h3>
         <p>
-          <a href="/dist/dimple.v1.1.4.js">
+          <a href="/dist/dimple.v1.1.5.js">
               Full Javascript Library With Comments
           </a><br/>
-          <a href="/dist/dimple.v1.1.4.min.js">
+          <a href="/dist/dimple.v1.1.5.min.js">
               Minified Javascript Library
           </a><br/>
           <a href="https://github.com/PMSI-AlignAlytics/dimple/zipball/master">
@@ -115,12 +115,12 @@
             $.get("examples/" + spec.id + ".html", function (page) {
                 $("#codeContainer").text(
                     page.slice(page.indexOf("<div"))
-                        .replace("src=\"/dist/dimple.v1.1.4.js\"", "src=\"http://dimplejs.org/dist/dimple.v1.1.4.min.js\"")
+                        .replace("src=\"/dist/dimple.v1.1.5.js\"", "src=\"http://dimplejs.org/dist/dimple.v1.1.5.min.js\"")
                         .replace("src=\"/lib/d3.v3.min.js\"", "src=\"http://d3js.org/d3.v3.min.js\"")
                 );
                 $("#chartBox").html(
                     page.slice(page.indexOf("<div"))
-                        .replace("src=\"/dist/dimple.v1.1.4.js\"", "")
+                        .replace("src=\"/dist/dimple.v1.1.5.js\"", "")
                         .replace("src=\"/lib/d3.v3.min.js\"", "")
                 );
             });