Support tickFormat callback

The firefox issue (https://bugzilla.mozilla.org/show_bug.cgi?id=649285) was closed as invalid.
Chrome is also deprecating offsetWidth and offsetHeight in April 2016.
parent.getBoundingClientRect().width is a more explicit call to get the outer object width

.gitignore

@@ -3,4 +3,6 @@ node_modules
 .idea
 *.komodo*
 help
-image_creator
+image_creator
+tmp
+notes

Gruntfile.js

@@ -32,6 +32,10 @@ module.exports = function(grunt) {
                     "src/end.js"
                 ],
                 dest: 'dist/<%= pkg.name %>.v<%= pkg.version %>.js'
+            },
+            test: {
+                src: '<%= concat.dist.src %>',
+                dest: 'tmp/<%= pkg.name %>.js'
             }
         },
         uglify: {
@@ -41,6 +45,14 @@ module.exports = function(grunt) {
                 }
             }
         },
+        copy: {
+            main: {
+                files: [
+                    { src: 'dist/<%= pkg.name %>.v<%= pkg.version %>.min.js', dest: 'dist/<%= pkg.name %>.latest.min.js'},
+                    { src: 'dist/<%= pkg.name %>.v<%= pkg.version %>.js', dest: 'dist/<%= pkg.name %>.latest.js'}
+                ]
+            }
+        },
         connect: {
             server: {
                 options: {
@@ -49,29 +61,32 @@ module.exports = function(grunt) {
                 }
             }
         },
-        qunit: {
-            all: {
-                options: {
-                    urls: [
-                        'http://localhost:3001/test/methods/_getOrderedList.html',
-                        'http://localhost:3001/test/methods/_rollUp.html',
-                        'http://localhost:3001/test/methods/newSvg.html'
-                    ]
-                }
-            }
-        },
         jslint: {
             files: [
                 'Gruntfile.js',
+                'test/**/*.spec.js',
                 'dist/<%= pkg.name %>.v<%= pkg.version %>.js'
             ],
             directives: {
                 browser: true,
                 nomen: true,
+                plusplus: true,
                 predef: [
                     'd3',
                     'module',
-                    'console'
+                    'console',
+                    'jasmine',
+                    'dimple',
+                    'module',
+                    'define',
+                    'require',
+                    'exports',
+                    'describe',
+                    'it',
+                    'xdescribe',
+                    'xit',
+                    'beforeEach',
+                    'afterEach'
                 ]
             }
         },
@@ -82,13 +97,53 @@ module.exports = function(grunt) {
                 ]
             },
             options: {
-                dest: 'examples/',
-                tag: '{version}',
+                exampleOutputPath: 'examples/',
+                libPath: '/lib/',
+                distPath: '/dist/',
                 version: 'v<%= pkg.version %>',
+                d3version: 'v<%= pkg.buildDependencies.d3 %>',
+                scriptTag: '{scriptDependencies}',
                 header: "<!----------------------------------------------------------------->\n" +
                         "<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->\n" +
                         "<!----------------------------------------------------------------->\n"
             }
+        },
+        karma: {
+            options: {
+                basepath: '',
+                frameworks: ['jasmine', 'requirejs'],
+                files: [
+                    'test/test-main.js',
+                    { pattern: 'lib/*.min.js', included: false },
+                    { pattern: 'tmp/*.js', included: false },
+                    { pattern: 'test/**/*.spec.js', included: false }
+                ],
+                reporters: ['progress'],
+                port: 9876,
+                colors: true,
+                browsers: ['PhantomJS']
+            },
+            unit: {
+                singleRun: true
+            },
+            continuous: {
+                background: true
+            }
+        },
+        watch: {
+            src: {
+                files: [
+                    '<%= concat.test.src %>'
+                ],
+                tasks: ['concat:test', 'karma:continuous:run']
+            },
+            test: {
+                files: [
+                    'test/**/*.spec.js',
+                    'test/*.spec.js'
+                ],
+                tasks: ['karma:continuous:run']
+            }
         }
     });
 
@@ -96,32 +151,66 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-connect');
-    grunt.loadNpmTasks('grunt-contrib-qunit');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-jslint');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-karma');
 
     // Propogate version into relevant files
-    grunt.registerMultiTask('prop', 'Propagate Versions.', function() {
+    grunt.registerMultiTask('prop', 'Propagate Versions.', function () {
+        function generateScriptElements(options, indent) {
+            var d3Path = "{libFolder}d3.{d3version}.js",
+                dimplePath = "{distFolder}dimple.{version}.js",
+                createScriptElement = function (path) {
+                    var scriptElement = '<script src="{path}"></script>';
+                    return scriptElement.split("{path}").join(path);
+                },
+                libPath = options.libPath,
+                distPath = options.distPath,
+                version = options.version,
+                d3version = options.d3version,
+                tab = "",
+                i;
+
+            // default indentation to two spaces
+            indent = indent || 2;
+
+            for (i = 0; i < indent; i++) {
+                tab += " ";
+            }
+
+            d3Path = d3Path.split("{libFolder}").join(libPath);
+            d3Path = d3Path.split("{d3version}").join(d3version);
+            dimplePath = dimplePath.split("{distFolder}").join(distPath);
+            dimplePath = dimplePath.split("{version}").join(version);
+
+            grunt.log.writeln("\nUsing d3: " + d3Path + " with " + d3version);
+            grunt.log.writeln("\nUsing dimple: " + dimplePath + " with " + version + "\n");
+
+            return createScriptElement(d3Path) + "\n" + tab + createScriptElement(dimplePath);
+        }
+
         var options = this.options(),
-            outPath = options.dest,
-            tag = options.tag,
-            version = options.version,
-            header = options.header;
-        grunt.log.writeln("");
-        grunt.log.writeln("Replacing " + tag + " with " + version);
-        grunt.log.writeln("------------------------------------------------------");
-        this.files.forEach(function(f) {
-            f.src.filter(function(filepath) {
+            outPath = options.exampleOutputPath,
+            header = options.header,
+            scriptTag = options.scriptTag,
+            scripts = generateScriptElements(options);
+
+        this.files.forEach(function (f) {
+            f.src.filter(function (filepath) {
                 var result = true;
                 if (!grunt.file.exists(filepath)) {
                     grunt.log.warn('File "' + filepath + '" not found.');
                     result = false;
                 }
                 return result;
-            }).map(function(filepath) {
+            }).map(function (filepath) {
                 // Read file source.
                 var src = grunt.file.read(filepath);
-                // Replace the version
-                src = src.split(tag).join(version);
+
+                // Replace the script placeholder tag with script html elements
+                src = src.split(scriptTag).join(scripts);
+
                 // Write the new file
                 grunt.log.writeln("Creating " + outPath + filepath.substring(filepath.lastIndexOf("/") + 1));
                 grunt.file.write(outPath + filepath.substring(filepath.lastIndexOf("/") + 1), header + src);
@@ -130,6 +219,8 @@ module.exports = function(grunt) {
     });
 
     // Default tasks
-    grunt.registerTask('default', ['concat', 'jslint', 'uglify', 'connect', 'qunit', 'prop']);
+    grunt.registerTask('default', ['concat', 'jslint', 'uglify', 'copy', 'connect', 'prop']);
+    grunt.registerTask('test:unit', ['concat:test', 'karma:unit']);
+    grunt.registerTask('test', ['karma:continuous:start', 'watch']);
 
 };

MIT-LICENSE.txt

@@ -1,5 +1,5 @@
-Copyright 2013 PMSI-AlignAlytics
-www.pmsi-consulting.com
+Copyright 2015 AlignAlytics
+www.align-alytics.com
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

README.md

@@ -1,7 +1,9 @@
 ### dimple ###
 
-An object-oriented API allowing you to create flexible axis-based charts using [d3.js](http://d3js.org "d3.js"). The intention of this project is to allow analysts who are not necessarily expert JavaScript programmers to create standard (and some not-so-standard) business analytics.
+Dimple is an object-oriented API allowing you to create flexible axis-based charts using [d3.js](http://d3js.org "d3.js").
+
+The intention of this project is to allow analysts who are not necessarily expert JavaScript programmers to create standard (and some not-so-standard) business analytics.
 
 The API will also expose the core d3 objects where possible so that as users gain confidence they can extend the base functionality in whatever way they wish.
 
-For full details and documentation the wiki is available [here](http://github.com/PMSI-AlignAlytics/dimple/wiki "Wiki").
+Please visit the main website [dimplejs.org](http://dimplejs.org "dimple.js") for more information and examples.

adhoc/adhoc_bar_custom_tooltips.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+    <script src="/lib/d3.v3.min.js"></script>
+    <script src="/dist/dimple.v2.0.0.js"></script>
+    <script type="text/javascript">
+        var svg = dimple.newSvg("#chartContainer", 590, 400);
+        d3.tsv("/data/example_data.tsv", function (data) {
+            var myChart = new dimple.chart(svg, data);
+            myChart.setBounds(75, 30, 480, 330)
+            myChart.addMeasureAxis("x", "Unit Sales");
+            myChart.addCategoryAxis("y", "Brand");
+            var mySeries = myChart.addSeries("Channel", dimple.plot.bar);
+            mySeries.getTooltipText = function (e) {
+                return [
+                    "Hey you hovered over " + e.aggField[0] + "!",
+                    "Each element in the array becomes a new line."
+                ];
+            };
+            myChart.addLegend(60, 10, 510, 20, "right");
+            myChart.draw();
+        });
+    </script>
+</div>
+</html>

adhoc/adhoc_bar_labels.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    // This is the simple vertical grouped stacked 100% bar example
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(65, 45, 505, 315)
+      var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
+      var y = myChart.addPctAxis("y", "Unit Sales");
+      var s = myChart.addSeries("Owner", dimple.plot.bar);
+      // Using the afterDraw callback means this code still works with animated
+      // draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
+      // also be used to clear the text from the previous frame)
+      s.afterDraw = function (shape, data) {
+        // Get the shape as a d3 selection
+        var s = d3.select(shape),
+          rect = {
+            x: parseFloat(s.attr("x")),
+            y: parseFloat(s.attr("y")),
+            width: parseFloat(s.attr("width")),
+            height: parseFloat(s.attr("height"))
+          };
+        // Only label bars where the text can fit
+        if (rect.height >= 8) {
+          // Add a text label for the value
+          svg.append("text")
+            // Position in the centre of the shape (vertical position is
+            // manually set due to cross-browser problems with baseline)
+            .attr("x", rect.x + rect.width / 2)
+            .attr("y", rect.y + rect.height / 2 + 3.5)
+            // Centre align
+            .style("text-anchor", "middle")
+            .style("font-size", "10px")
+            .style("font-family", "sans-serif")
+            // Make it a little transparent to tone down the black
+            .style("opacity", 0.6)
+            // Format the number
+            .text(d3.format(",.1f")(data.yValue / 1000) + "k");
+        }
+      };
+      myChart.addLegend(200, 10, 380, 20, "right");
+      myChart.draw(2000);
+    });
+  </script>
+</div>
+</html>

adhoc/adhoc_bar_scroll.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    // Start off with a couple of rows of data
+    var data = [
+      { "Date": Date.now(), "Value": 2000000 * Math.random() }
+    ];
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    var myChart = new dimple.chart(svg, [].concat(data));
+    myChart.setBounds(60, 50, 480, 250)
+    x = myChart.addTimeAxis("x", "Date", null, "%d/%m/%Y");
+    myChart.addMeasureAxis("y", "Value");
+    myChart.addSeries("Sales",  dimple.plot.bar);
+    myChart.ease = "linear";
+    window.setInterval(function () {
+      // Let 60 bars accumulate and then start slicing them off the front
+      if (data.length > 60) { data = data.slice(1); }
+      // Keep a day's gap at each end of the axis
+      x.overrideMin = data[0]["Date"] - 86400000;
+      x.overrideMax = data[data.length - 1]["Date"] + 86400000;
+      data.push({
+          "Date": data[data.length - 1]["Date"] + 86400000,
+          "Value": 2000000 * Math.random() });
+      // Update the data, using a clone to maintain order
+      myChart.data = [].concat(data);
+      // Draw with an animation. Each bar will take 1 second to draw and a new
+      // one is added every 500ms so there will be a few animating at once
+      myChart.draw(1000);
+    }, 500);
+  </script>
+</div>
+</html>

adhoc/adhoc_bounce_stagger.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 50, 480, 280)
+      var x = myChart.addCategoryAxis("x", "Month");
+      x.addOrderRule("Date");
+      myChart.addMeasureAxis("y", "Unit Sales");
+      myChart.addSeries("Owner",  dimple.plot.bar);
+      myChart.setStoryboard("Price Tier");
+      myChart.ease = "bounce"
+      myChart.staggerDraw = true;
+      myChart.addLegend(200, 10, 380, 20, "right");
+      myChart.draw(800);
+    });
+  </script>
+</div>
+</html>

adhoc/adhoc_composite_axis_category.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 50, 480, 280);
+      var priceTierAxis = myChart.addCategoryAxis("x", "Price Tier");
+      var monthAxis = myChart.addCategoryAxis(priceTierAxis, "Month");
+      monthAxis.addOrderRule("Date");
+      var packTypeAxis = myChart.addCategoryAxis(priceTierAxis, "Pack Type");
+      var volumeAxis = myChart.addPctAxis("y", "Unit Sales");
+      myChart.addSeries("Owner",  dimple.plot.bar, [priceTierAxis, volumeAxis]);
+      myChart.addSeries("Owner",  dimple.plot.area, [monthAxis, volumeAxis]);
+      myChart.addSeries("Owner",  dimple.plot.bar, [packTypeAxis, volumeAxis]);
+      myChart.addLegend(200, 10, 380, 20, "right");
+      priceTierAxis.title = null;
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

adhoc/adhoc_composite_axis_measure.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.min.js"></script>
+  <script src="/dist/dimple.v2.0.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 50, 480, 280);
+      var monthAxis = myChart.addCategoryAxis("x", "Month");
+      monthAxis.addOrderRule("Date");
+      var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
+      var profitAxis = myChart.addMeasureAxis(volumeAxis, "Operating Profit");
+      myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
+      myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);
+      myChart.addLegend(200, 10, 380, 20, "right");
+      volumeAxis.title = "£";
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

adhoc/adhoc_dual_axis.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+    <script src="/lib/d3.v3.min.js"></script>
+    <script src="/dist/dimple.v2.0.0.js"></script>
+    <script type="text/javascript">
+        var svg = dimple.newSvg("#chartContainer", 590, 400);
+        d3.tsv("/data/example_data.tsv", function (data) {
+            var myChart = new dimple.chart(svg, data);
+            myChart.setBounds(60, 50, 460, 280);
+            var monthAxis = myChart.addCategoryAxis("x", "Month");
+            monthAxis.addOrderRule("Date");
+            var volumeAxis = myChart.addMeasureAxis("y", "Unit Sales");
+            var profitAxis = myChart.addMeasureAxis("y", "Operating Profit");
+            myChart.addSeries("Quantity",  dimple.plot.line, [monthAxis, volumeAxis]);
+            myChart.addSeries("Op. Profit",  dimple.plot.line, [monthAxis, profitAxis]);
+            myChart.addLegend(200, 10, 380, 20, "right");
+            myChart.draw();
+        });
+    </script>
+</div>
+</html>

adhoc/adhoc_playground.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <script src="/lib/d3.v3.4.8.min.js"></script>
+    <script src="/tmp/dimple.js"></script>
+</head>
+<body>
+<div id="chartContainer">
+    <script type="text/javascript">
+        var svg = dimple.newSvg("#chartContainer", 590, 400);
+        d3.tsv("/data/example_data.tsv", function (data) {
+            data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+            var myChart = new dimple.chart(svg, data);
+            myChart.setBounds(60, 30, 505, 305);
+            var x = myChart.addCategoryAxis("x", "Month");
+            x.addOrderRule("Date");
+            myChart.addMeasureAxis("y", "Unit Sales");
+            var s = myChart.addSeries(null, dimple.plot.area);
+            myChart.draw();
+        });
+    </script>
+</div>
+</body>
+</html>

bower.json

@@ -0,0 +1,42 @@
+{
+    "name": "dimple",
+    "description": "An object-oriented charting API for d3",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PMSI-AlignAlytics/dimple.git"
+    },
+    "dependencies": {
+        "d3": ">=3.5.2"
+    },
+    "version": "2.2.0",
+    "homepage": "dimplejs.org",
+    "authors": [
+        "johnkiernander <jkiernander@pmsi-consulting.com>"
+    ],
+    "main": "dist/dimple.latest.min.js",
+    "moduleType": [
+        "amd"
+    ],
+    "keywords": [
+        "dimple",
+        "d3",
+        "charting"
+    ],
+    "ignore": [
+        "**/.*",
+        "app.js",
+        "Gruntfile.js",
+        "package.json",
+        "node_modules",
+        "bower_components",
+        "test",
+        "adhoc",
+        "data",
+        "example",
+        "image_creator",
+        "lib",
+        "src",
+        "tmp"
+    ]
+}

bower_components/d3/.bower.json

@@ -0,0 +1,36 @@
+{
+  "name": "d3",
+  "main": "d3.js",
+  "scripts": [
+    "d3.js"
+  ],
+  "ignore": [
+    ".DS_Store",
+    ".git",
+    ".gitignore",
+    ".npmignore",
+    ".spmignore",
+    ".travis.yml",
+    "Makefile",
+    "bin",
+    "component.json",
+    "composer.json",
+    "index.js",
+    "lib",
+    "node_modules",
+    "package.json",
+    "src",
+    "test"
+  ],
+  "homepage": "https://github.com/mbostock/d3",
+  "version": "3.5.6",
+  "_release": "3.5.6",
+  "_resolution": {
+    "type": "version",
+    "tag": "v3.5.6",
+    "commit": "0e88ef5aacbc565b7282790c829ea51dd86c978d"
+  },
+  "_source": "git://github.com/mbostock/d3.git",
+  "_target": ">=3.5.2",
+  "_originalSource": "d3"
+}

bower_components/d3/.gitattributes

@@ -0,0 +1,5 @@
+bower.json -diff merge=ours
+component.json -diff merge=ours
+d3.js -diff merge=ours
+d3.min.js -diff merge=ours
+package.js -diff merge=ours

bower_components/d3/CONTRIBUTING.md

@@ -0,0 +1,27 @@
+# Contributing
+
+**Important:** these GitHub issues are for *bug reports and feature requests only*. Please use [StackOverflow](http://stackoverflow.com/questions/tagged/d3.js) or the [d3-js Google group](https://groups.google.com/d/forum/d3-js) for general help.
+
+If you’re looking for ways to contribute, please [peruse open issues](https://github.com/mbostock/d3/issues?milestone=&page=1&state=open). The icebox is a good place to find ideas that are not currently in development. If you already have an idea, please check past issues to see whether your idea or a similar one was previously discussed.
+
+Before submitting a pull request, consider implementing a live example first, say using [bl.ocks.org](http://bl.ocks.org). Real-world use cases go a long way to demonstrating the usefulness of a proposed feature. The more complex a feature’s implementation, the more usefulness it should provide. Share your demo using the #d3js tag on Twitter or by sending it to the [d3-js Google group](https://groups.google.com/d/forum/d3-js).
+
+If your proposed feature does not involve changing core functionality, consider submitting it instead as a [D3 plugin](https://github.com/d3/d3-plugins). New core features should be for general use, whereas plugins are suitable for more specialized use cases. When in doubt, it’s easier to start with a plugin before “graduating” to core.
+
+To contribute new documentation or add examples to the gallery, just [edit the Wiki](https://github.com/mbostock/d3/wiki)!
+
+## How to Submit a Pull Request
+
+1. Click the “Fork” button to create your personal fork of the D3 repository.
+
+2. After cloning your fork of the D3 repository in the terminal, run `npm install` to install D3’s dependencies.
+
+3. Create a new branch for your new feature. For example: `git checkout -b my-awesome-feature`. A dedicated branch for your pull request means you can develop multiple features at the same time, and ensures that your pull request is stable even if you later decide to develop an unrelated feature.
+
+4. The `d3.js` and `d3.min.js` files are built from source files in the `src` directory. _Do not edit `d3.js` directly._ Instead, edit the source files, and then run `make` to build the generated files.
+
+5. Use `make test` to run tests and verify your changes. If you are adding a new feature, you should add new tests! If you are changing existing functionality, make sure the existing tests run, or update them as appropriate.
+
+6. Sign D3’s [Individual Contributor License Agreement](https://docs.google.com/forms/d/1CzjdBKtDuA8WeuFJinadx956xLQ4Xriv7-oDvXnZMaI/viewform). Unless you are submitting a trivial patch (such as fixing a typo), this form is needed to verify that you are able to contribute.
+
+7. Submit your pull request, and good luck!

bower_components/d3/LICENSE

@@ -0,0 +1,26 @@
+Copyright (c) 2010-2015, Michael Bostock
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* The name Michael Bostock may not be used to endorse or promote products
+  derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT,
+INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

bower_components/d3/README.md

@@ -0,0 +1,9 @@
+# Data-Driven Documents
+
+<a href="http://d3js.org"><img src="http://d3js.org/logo.svg" align="left" hspace="10" vspace="6"></a>
+
+**D3.js** is a JavaScript library for manipulating documents based on data. **D3** helps you bring data to life using HTML, SVG, and CSS. **D3** emphasizes web standards and combines powerful visualization components with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers without tying yourself to a proprietary framework.
+
+Want to learn more? [See the wiki.](https://github.com/mbostock/d3/wiki)
+
+For examples, [see the gallery](https://github.com/mbostock/d3/wiki/Gallery) and [mbostock’s bl.ocks](http://bl.ocks.org/mbostock).

bower_components/d3/bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "d3",
+  "main": "d3.js",
+  "scripts": [
+    "d3.js"
+  ],
+  "ignore": [
+    ".DS_Store",
+    ".git",
+    ".gitignore",
+    ".npmignore",
+    ".spmignore",
+    ".travis.yml",
+    "Makefile",
+    "bin",
+    "component.json",
+    "composer.json",
+    "index.js",
+    "lib",
+    "node_modules",
+    "package.json",
+    "src",
+    "test"
+  ]
+}

bower_components/d3/package.js

@@ -0,0 +1,13 @@
+// Package metadata for Meteor.js.
+
+Package.describe({
+  name: "d3js:d3", // http://atmospherejs.com/d3js/d3
+  summary: "D3 (official): A JavaScript visualization library for HTML and SVG.",
+  version: "3.5.6",
+  git: "https://github.com/mbostock/d3.git"
+});
+
+Package.onUse(function(api) {
+  api.versionsFrom(["METEOR@1.0"]);
+  api.addFiles("d3.js", "client");
+});

data/christmas_data.tsv

@@ -1,63 +0,0 @@
-Festivity	Countdown	Tree	Tinsel	Baubles	Cheer	Sparkle	Magic
--10	09/12/2013 00:00	left trunk	none	none	0	0	0
-10	09/12/2013 00:00	right trunk	none	none	0	0	0
--10	11/12/2013 02:00	left trunk	none	none	0	0	0
-10	11/12/2013 02:00	right trunk	none	none	0	0	0
--100	11/12/2013 03:00	left	none	none	0	0	0
-100	11/12/2013 03:00	right	none	none	0	0	0
--60	13/12/2013 00:00	left	none	none	0	0	0
-60	13/12/2013 00:00	right	none	none	0	0	0
--90	13/12/2013 03:00	left	none	none	0	0	0
-90	13/12/2013 03:00	right	none	none	0	0	0
--50	15/12/2013 00:00	left	none	none	0	0	0
-50	15/12/2013 00:00	right	none	none	0	0	0
--80	15/12/2013 03:00	left	none	none	0	0	0
-80	15/12/2013 03:00	right	none	none	0	0	0
--40	17/12/2013 00:00	left	none	none	0	0	0
-40	17/12/2013 00:00	right	none	none	0	0	0
--70	17/12/2013 03:00	left	none	none	0	0	0
-70	17/12/2013 03:00	right	none	none	0	0	0
--30	19/12/2013 00:00	left	none	none	0	0	0
-30	19/12/2013 00:00	right	none	none	0	0	0
--60	19/12/2013 03:00	left	none	none	0	0	0
-60	19/12/2013 03:00	right	none	none	0	0	0
--20	21/12/2013 00:00	left	none	none	0	0	0
-20	21/12/2013 00:00	right	none	none	0	0	0
--50	21/12/2013 03:00	left	none	none	0	0	0
-50	21/12/2013 03:00	right	none	none	0	0	0
--10	23/12/2013 00:00	left	none	none	0	0	0
-10	23/12/2013 00:00	right	none	none	0	0	0
--40	23/12/2013 03:00	left	none	none	0	0	0
-40	23/12/2013 03:00	right	none	none	0	0	0
-0	25/12/2013 00:00	left	none	none	0	0	0
-0	25/12/2013 00:00	right	none	none	0	0	0
-0	24/12/2013 00:00	none	tinsel 1	none	55	-50	0
-0	25/12/2013 00:00	none	tinsel 1	none	-65	-100	0
-0	24/12/2013 00:00	none	tinsel 2	none	45	-5	0
-0	25/12/2013 00:00	none	tinsel 2	none	-60	-50	0
-0	24/12/2013 00:00	none	tinsel 3	none	38	42	0
-0	25/12/2013 00:00	none	tinsel 3	none	-50	0	0
-0	24/12/2013 00:00	none	tinsel 4	none	30	90	0
-0	25/12/2013 00:00	none	tinsel 4	none	-45	50	0
-0	24/12/2013 00:00	none	tinsel 5	none	25	135	0
-0	25/12/2013 00:00	none	tinsel 5	none	-40	100	0
-0	18/12/2013 00:00	none	none	bauble 1	-100	-150	15
-0	19/12/2013 00:00	none	none	bauble 1	75	-50	14
-0	20/12/2013 00:00	none	none	bauble 1	0	0	15
-0	21/12/2013 00:00	none	none	bauble 1	50	50	13
-0	22/12/2013 00:00	none	none	bauble 1	-40	150	15
-0	18/12/2013 00:00	none	none	bauble 2	-100	-150	15
-0	19/12/2013 00:00	none	none	bauble 2	-25	75	14
-0	20/12/2013 00:00	none	none	bauble 2	-70	5	15
-0	21/12/2013 00:00	none	none	bauble 2	40	-50	13
-0	22/12/2013 00:00	none	none	bauble 2	-25	-125	15
-0	18/12/2013 00:00	none	none	bauble 3	40	150	15
-0	19/12/2013 00:00	none	none	bauble 3	5	120	14
-0	20/12/2013 00:00	none	none	bauble 3	20	50	15
-0	21/12/2013 00:00	none	none	bauble 3	-25	-50	13
-0	22/12/2013 00:00	none	none	bauble 3	100	-150	15
-0	18/12/2013 00:00	none	none	bauble 4	40	-100	15
-0	19/12/2013 00:00	none	none	bauble 4	-50	-75	14
-0	20/12/2013 00:00	none	none	bauble 4	40	-10	15
-0	21/12/2013 00:00	none	none	bauble 4	-10	45	13
-0	22/12/2013 00:00	none	none	bauble 4	0	175	15

examples/advanced_animated_multiple_pie_bubbles.html

@@ -0,0 +1,49 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 495, 330);
+        
+      // Define all the axes
+      var xAxis = myChart.addMeasureAxis("x", "Distribution");
+      var yAxis = myChart.addMeasureAxis("y", "Price");
+      var segments = myChart.addMeasureAxis("p", "Unit Sales");
+      var size = myChart.addMeasureAxis("z", "Sales Value");
+      var ring = myChart.addSeries(["Price Tier", "Channel"], dimple.plot.pie);
+      var pie = myChart.addSeries(["Price Tier", "Owner"], dimple.plot.pie);
+
+      // Zoom in the axis bounds
+      xAxis.overrideMin = 40;
+      xAxis.overrideMax = 70;
+      yAxis.overrideMax = 150;
+
+      // Set the maximum radius for the bubbles
+      ring.radius = 75;
+      pie.radius = 75;
+
+      // Create fixed 10px ring with a 5px
+      // margin (negative sizes are calculated inwards)
+      ring.innerRadius = "-10px";
+      pie.outerRadius = "-15px";
+
+      // Draw averages for the pie and ring
+      ring.aggregate = dimple.aggregateMethod.avg;
+      pie.aggregate = dimple.aggregateMethod.avg;
+
+      // Animate by date
+      myChart.setStoryboard("Date");
+
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/advanced_bar_labels.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     // This is the simple vertical grouped stacked 100% bar example
     var svg = dimple.newSvg("#chartContainer", 590, 400);
@@ -13,24 +16,26 @@
       var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
       var y = myChart.addPctAxis("y", "Unit Sales");
       var s = myChart.addSeries("Owner", dimple.plot.bar);
-      myChart.addLegend(200, 10, 380, 20, "right");
-      myChart.draw();
-      // After drawing we can access the shapes and their associated data
-      // to add labels.
-      s.shapes.each(function(d) {
+      // Using the afterDraw callback means this code still works with animated
+      // draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
+      // also be used to clear the text from the previous frame)
+      s.afterDraw = function (shape, data) {
         // Get the shape as a d3 selection
-        var shape = d3.select(this),
-          // Get the height and width from the scales
-          height = myChart.y + myChart.height - y._scale(d.height);
-          width = x._scale(d.width);
+        var s = d3.select(shape),
+          rect = {
+            x: parseFloat(s.attr("x")),
+            y: parseFloat(s.attr("y")),
+            width: parseFloat(s.attr("width")),
+            height: parseFloat(s.attr("height"))
+          };
         // Only label bars where the text can fit
-        if (height >= 8) {
+        if (rect.height >= 8) {
           // Add a text label for the value
           svg.append("text")
             // Position in the centre of the shape (vertical position is
             // manually set due to cross-browser problems with baseline)
-            .attr("x", parseFloat(shape.attr("x")) + width / 2)
-            .attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
+            .attr("x", rect.x + rect.width / 2)
+            .attr("y", rect.y + rect.height / 2 + 3.5)
             // Centre align
             .style("text-anchor", "middle")
             .style("font-size", "10px")
@@ -38,9 +43,12 @@
             // Make it a little transparent to tone down the black
             .style("opacity", 0.6)
             // Format the number
-            .text(d3.format(",.1f")(d.yValue / 1000) + "k");
+            .text(d3.format(",.1f")(data.yValue / 1000) + "k");
         }
-      });
+      };
+      myChart.addLegend(200, 10, 380, 20, "right");
+      myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/advanced_bars_sketchy.html

@@ -0,0 +1,107 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<head>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <!-- Props to Kimerly Geswein for her font Shadows Into Light */ -->
+  <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
+  <style>
+    .line {
+      fill: none;
+    }
+    .box,.line {
+      stroke: black;
+      stroke-width: 2px;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .writing {
+      font-family: 'Shadows Into Light', cursive;
+      font-size: 24px;
+      font-weight: 700;
+    }
+    .hatch-1 {
+      fill: url(#down-hatch);
+    }
+    .hatch-2 {
+      fill: url(#up-hatch);
+    }
+    .hatch-3 {
+      fill: url(#cross-hatch);
+    }
+  </style>
+</head>
+<body>
+  <div id="chartContainer">
+    <svg height="0" width="0">
+      <defs>
+        <pattern id="down-hatch" width="20" height="20" patternUnits="userSpaceOnUse">
+          <line x1="0" x2="20" y1="0" y2="20" class="line"/>
+          <line x1="-2" x2="2" y1="18" y2="22" class="line"/>
+          <line x1="18" x2="22" y1="-2" y2="2" class="line"/>
+        </pattern>
+        <pattern id="up-hatch" width="20" height="20" patternUnits="userSpaceOnUse">
+          <line x1="0" x2="20" y1="20" y2="0" class="line"/>
+          <line x1="-2" x2="2" y1="2" y2="-2" class="line"/>
+          <line x1="18" x2="22" y1="22" y2="18" class="line"/>
+        </pattern>
+        <pattern id="cross-hatch" width="14" height="20" patternUnits="userSpaceOnUse">
+          <line x1="2" x2="2" y1="0" y2="20" class="line"/>
+        </pattern>
+      </defs>
+    </svg>
+    <script type="text/javascript">
+      var svg = dimple.newSvg("#chartContainer", 590, 400);
+      d3.tsv("/data/example_data.tsv", function (data) {
+        var myChart = new dimple.chart(svg, data);
+        myChart.setMargins(110, 60, 20, 80);
+        myChart.noFormats = true;
+        var x = myChart.addCategoryAxis("x", "Price Tier");
+        myChart.addMeasureAxis("y", "Unit Sales");
+        var mySeries = myChart.addSeries("Price Tier", dimple.plot.bar);
+        mySeries.barGap = 0.5;
+        myChart.customClassList = {
+          axisLine: 'line',
+          barSeries: 'box',
+          axisLabel: 'writing',
+          axisTitle: 'writing',
+          colorClasses: [
+            'hatch-1',
+            'hatch-2',
+            'hatch-3'
+          ]
+        };
+
+        // Override the standard tooltip behaviour
+        mySeries.addEventHandler("mouseover", function (e){
+          var labelX = parseFloat(e.selectedShape.attr("x")) + parseFloat(e.selectedShape.attr("width") / 2),
+                  labelY = parseFloat(e.selectedShape.attr("y")) - 70;
+          // Draw the text information in the top left corner
+          svg.append("text")
+                  .attr("class", "tooltip writing")
+                  .attr("x", labelX)
+                  .attr("y", labelY)
+                  .style("pointer-events", "none")
+                  .style("text-anchor", "middle")
+                  .text(e.xValue + " (" + d3.format(",.f")(e.yValue) + ")");
+          svg.append("path")
+                  .attr("class", "tooltip line")
+                  .attr("transform", "translate(" + labelX + "," + labelY + ")")
+                  .attr("d", "M 2 5 L 0 65 L -5 55 L 8 56 L 3 62")
+        });
+
+        // Clear the text on exit
+        mySeries.addEventHandler("mouseleave", function (e) {
+          svg.selectAll(".tooltip").remove();
+        });
+
+        myChart.draw();
+      });
+    </script>
+  </div>
+</body>
+</html>

examples/advanced_bullet.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
 
     // Create the svg and set the dimensions
@@ -13,7 +16,7 @@
 
       // Add a bullet chart to the svg
       function addBullet(x, y, height, width, measure, lowMark,
-                        highMark, axisMax, compareField, keyVal,
+                        highMark, compareField, keyVal,
                         compareVal, color) {
         
         // This is a custom algorithm to lighten the passed color, I find I can't
@@ -62,22 +65,12 @@
         var bX = bullet.addMeasureAxis("x", "Value");
 
         // Add a separate x axis for each measure, this is required
-        // where we want to do a series for each measure
-        var lX = bullet.addMeasureAxis("x", "Low Value");
-        var hX = bullet.addMeasureAxis("x", "High Value");
-        var cX = bullet.addMeasureAxis("x", "Compare Value");
-
-        // Fix all max values so that a single x axis will read correctly
-        // for all 4.  Without this all axes would scale differently
-        bX.overrideMax = axisMax;
-        lX.overrideMax = axisMax;
-        hX.overrideMax = axisMax;
-        cX.overrideMax = axisMax;
-
-        // Hide the additional axes
-        lX.hidden = true;
-        hX.hidden = true;
-        cX.hidden = true;
+        // where we want to do a series for each measure.  By passing
+        // another axis in place of the position we combine them to create
+        // a 4 measure composite.
+        var lX = bullet.addMeasureAxis(bX, "Low Value");
+        var hX = bullet.addMeasureAxis(bX, "High Value");
+        var cX = bullet.addMeasureAxis(bX, "Compare Value");
 
         // Add a series for the marks first (the order defines)
         // document z position - first at back, last on top
@@ -88,8 +81,12 @@
         // Add the main series - keyVal is for color and tooltip
         var b = bullet.addSeries(keyVal, dimple.plot.bar, [bY, bX]);
         // Add the comparison series - compareVal is for color and tooltip
-        var m = bullet.addSeries(compareVal, dimple.plot.bubble, [bY, cX]);
-        
+        var m = bullet.addSeries(compareVal, dimple.plot.bar, [bY, cX]);
+
+        // Configure the markers as floating bars
+        m.stacked = false;
+        cX.floatingBarWidth = 2;
+
         // Set the gaps for the bar series with a narrow main series and full
         // width for the markers
         hm.barGap = 0;
@@ -119,18 +116,19 @@
       // means to determine axis bounds would be better but I don't want to
       // bloat this example.
       addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000, 
-        3000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
+        "Owner", "Aperture", "Black Mesa", "#80B1D3");
       addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000, 
-        180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
+        "Owner", "Aperture", "Black Mesa", "#80B1D3");
       addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000, 
-        500000, "Owner", "Aperture", "Black Mesa", "#FB8072");
+        "Owner", "Aperture", "Black Mesa", "#FB8072");
       addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000, 
-        180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
+        "Owner", "Aperture", "Black Mesa", "#80B1D3");
       addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000, 
-        160000000, "Owner", "Aperture", "Black Mesa", "#FB8072");
+        "Owner", "Aperture", "Black Mesa", "#FB8072");
       addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000, 
-        18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
+        "Owner", "Aperture", "Black Mesa", "#80B1D3");
 
     });
   </script>
-</div>
+</div>
+</html>

examples/advanced_change_bubbles.html

@@ -0,0 +1,104 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+
+      // Reduce the number of owners as this chart can get a bit busy
+      data = dimple.filterData(data, "Owner", [
+        "Stark Ind",
+        "MomCorp",
+        "Rekall",
+        "Wayne Ent"]);
+
+      var series,
+        // Set a background and foreground chart
+        charts = [
+          new dimple.chart(svg, null),
+          new dimple.chart(svg, data)
+        ],
+        lastDate = null,
+        owners = dimple.getUniqueValues(data, "Owner");
+
+        // Define 2 nearly identical charts.  It's essential
+        // for this that the max and minimum values are fixed
+        // and unmoving otherwise the background chart will get
+        // out of sync with the foreground the background chart's
+        // axes are hidden and it's colors are faded.  Both have
+        // their borders set to white, which looks better on this chart
+        charts.forEach(function (chart, i) {
+          var x, y, z;
+          chart.setBounds(60, 30, 510, 330);
+          x = chart.addMeasureAxis("x", "Unit Sales");
+          x.overrideMax = 5000;
+          x.hidden = (i === 0);
+          y = chart.addMeasureAxis("y", "Price");
+          y.overrideMax = 120;
+          y.hidden = (i === 0);
+          z = chart.addMeasureAxis("z", "Distribution");
+          z.overrideMax = 120;
+          // Ensure the same colors for every owner in both charts
+          // differing by opacity
+          owners.forEach(function (owner, k) {
+            chart.assignColor(
+              owner,
+              charts[0].defaultColors[k].fill,
+              "white",
+              (i === 0 ? 0.3 : 1));
+            }, this);
+          }, this);
+
+          // Define a storyboard on the main chart, this will iterate
+          // all dates and redraw for each, the callback will build the
+          // the background chart
+          charts[1].setStoryboard("Date", function (d) {
+            // Use the last date variable to manage the previous tick's data
+            if (lastDate !== null) {
+              // Pull the previous data
+              var lastData = dimple.filterData(data, "Date", lastDate);
+              // Add a series to the background chart to display old position
+              var lastSeries = charts[0].addSeries("Owner", dimple.plot.bubble);
+              // Average suits these measures better
+              lastSeries.aggregate = dimple.aggregateMethod.avg;
+              // Give each series its own data at different periods
+              lastSeries.data = lastData;
+              // Draw the background chart
+              charts[0].draw();
+              // Class all shapes as .historic
+              lastSeries.shapes.attr("class", "historic");
+                // Reduce all opacity and remove once opacity drops below 5%
+                d3.selectAll(".historic")
+                  .each(function () {
+                    var shape = d3.select(this),
+                      opacity = shape.style("opacity") - 0.02;
+                    if (opacity < 0.1) {
+                      shape.remove();
+                    } else {
+                      shape.style("opacity", opacity);
+                    }
+                  });
+                }
+                lastDate = d;
+            });
+
+            // Add the primary series to the main chart
+            series = charts[1].addSeries("Owner", dimple.plot.bubble)
+            series.aggregate = dimple.aggregateMethod.avg;
+            // Draw the main chart
+            charts[1].draw();
+
+            // Add some border weight to the main series so it separates a bit from
+            // the former period shadows
+            d3.selectAll("circle").style("stroke-width", 2);
+
+        });
+    </script>
+</div>
+</html>

examples/advanced_christmas_tree.html

@@ -1,74 +0,0 @@
-<!----------------------------------------------------------------->
-<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
-<!----------------------------------------------------------------->
-<div id="chartContainer">
-    <script src="/lib/d3.v3.min.js"></script>
-    <script src="/dist/dimple.v1.1.2.js"></script>
-    <script type="text/javascript">
-        var svg = dimple.newSvg("#chartContainer", 590, 400);
-
-        // Unlike other dimple charts this relies on some special Christmas
-        // data collated from Santa's Naughty:Nice data store
-        d3.tsv("/data/christmas_data.tsv", function (data) {
-
-            // Create the chart as usual
-            var chart = new dimple.chart(svg, data);
-            chart.setMargins(80, 50, 60, 40);
-
-            // Add a measure axis on x for Festivity
-            var festivity = chart.addMeasureAxis("x", "Festivity");
-            festivity.overrideMin = -200;
-            festivity.overrideMax = 200;
-
-            // Add a secondary x axis for Good Cheer
-            var cheer = chart.addMeasureAxis("x", "Cheer");
-            cheer.overrideMin = -200;
-            cheer.overrideMax = 200;
-
-            // We need to view these metrics against the Countdown to Christmas,
-            // this is visualised with the dimple time axis
-            var countdown = chart.addTimeAxis("y", "Countdown", "%d/%m/%Y %H:%M", "%d %b");
-
-            // Add a final Y axis for sparkle
-            var sparkle = chart.addMeasureAxis("y", "Sparkle");
-            sparkle.overrideMin = -200;
-            sparkle.overrideMax = 200;
-
-            // Bauble size will be based on Magic (everyone knows that)
-            var magic = chart.addMeasureAxis("z", "Magic");
-            magic.overrideMax = 100;
-
-            // Add the three series for this visualisation
-            // First, a vertical area chart plotting festivity through December
-            // (I knew I'd find an application for that chart type eventually!)
-            chart.addSeries("Tree", dimple.plot.area, [countdown, festivity]);
-
-            // Add a two measure line chart of Tinsel's impact on Cheer and Sparkle
-            var tinsel = chart.addSeries(["Countdown", "Tinsel"], dimple.plot.line, [cheer, sparkle]);
-            tinsel.lineWeight = 5;
-
-            // Add a bubble chart showing how Cheer and Sparkle are affected by Magic
-            chart.addSeries(["Countdown", "Baubles"], dimple.plot.bubble, [cheer, sparkle, magic]);
-
-            // Map colors to different series values
-            chart.assignColor("none", "#FFFFFF", "#FFFFFF", 0);
-            chart.assignColor("left", "Green", "DarkGreen");
-            chart.assignColor("right", "Green", "DarkGreen");
-            chart.assignColor("left trunk", "Sienna", "SaddleBrown");
-            chart.assignColor("right trunk", "Sienna", "SaddleBrown");
-            chart.assignColor("tinsel 1", "Gold", "Gold", 1);
-            chart.assignColor("tinsel 2", "Red", "Red", 1);
-            chart.assignColor("tinsel 3", "Gold", "Gold", 1);
-            chart.assignColor("tinsel 4", "Red", "Red", 1);
-            chart.assignColor("tinsel 5", "Gold", "Gold", 1);
-            chart.assignColor("bauble 1", "Gold", "Gold", 1);
-            chart.assignColor("bauble 2", "Fuchsia ", "MediumVioletRed", 1);
-            chart.assignColor("bauble 3", "Red", "Crimson", 1);
-            chart.assignColor("bauble 4", "DeepSkyBlue", "DodgerBlue", 1);
-
-            // Sprinkle the magic dust
-            chart.draw();
-
-        });
-    </script>
-</div>

examples/advanced_custom_styling.html

@@ -0,0 +1,127 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+
+    // Fill the SVG background
+    svg.append("rect")
+      .attr("x", "8px")
+      .attr("y", "8px")
+      .attr("width", "100%")
+      .attr("height", "100%")
+      .style("fill", "#2c3e50");
+
+      // Configure a simple bar chart
+      var myChart = new dimple.chart(svg, data),
+          xAxis = myChart.addCategoryAxis("x", "Owner"),
+          yAxis = myChart.addMeasureAxis("y", "Unit Sales"),
+          mySeries = myChart.addSeries("Owner", dimple.plot.bar);
+
+      // Draw without any axes
+      xAxis.hidden = true;
+      yAxis.hidden = true;
+
+      // Set small margins as there is going to be no axes displayed
+      myChart.setMargins(14, 18, 6, 10);
+
+      // Define a custom color palette.  These colours are based on the excellent
+      // set at http://flatuicolors.com/
+      myChart.defaultColors = [
+          new dimple.color("#3498db", "#2980b9", 1), // blue
+          new dimple.color("#e74c3c", "#c0392b", 1), // red
+          new dimple.color("#2ecc71", "#27ae60", 1), // green
+          new dimple.color("#9b59b6", "#8e44ad", 1), // purple
+          new dimple.color("#e67e22", "#d35400", 1), // orange
+          new dimple.color("#f1c40f", "#f39c12", 1), // yellow
+          new dimple.color("#1abc9c", "#16a085", 1), // turquoise
+          new dimple.color("#95a5a6", "#7f8c8d", 1)  // gray
+      ];
+
+      // Set some custom display elements for each series shape
+      mySeries.afterDraw = function (s, d) {
+
+        // I've defined the width in terms of the golden ratio as it seems like the sort
+        // of thing a designer would do.
+        var shape = d3.select(s),
+            goldenRatio = 1.61803398875;
+
+        // Add a rectangle to the bar giving a nice style.  The idea was borrowed
+        // from sirocco's question here:
+        // http://stackoverflow.com/questions/25044608/dimplejs-barchart-styling-columns
+        svg.append("rect")
+          .attr("x", shape.attr("x"))
+          .attr("y", shape.attr("y"))
+          .attr("height", shape.attr("height"))
+          .attr("width", (0.5 * shape.attr("width")) / goldenRatio)
+          .style("fill", shape.style("stroke"))
+          .style("opacity", 1)
+          .style("pointer-events", "none");
+
+        // Add some bar labels for the yValue
+        svg.append("text")
+          .attr("x", parseFloat(shape.attr("x")) + shape.attr("width") / 2)
+          .attr("y", parseFloat(shape.attr("y")) + (shape.attr("height") > 30 ? (shape.attr("height") / 2 + 8) : - 10))
+          .style("font-family", "courier new")
+          .style("text-anchor", "middle")
+          .style("font-size", "16px")
+          .style("fill", "#ecf0f1")
+          .style("pointer-events", "none")
+          .text(yAxis._getFormat()(d.yValue));
+
+        // Draw without a border
+        shape.attr("stroke", shape.attr("fill"));
+
+      };
+
+      // Override the standard tooltip behaviour
+      mySeries.addEventHandler("mouseover", function (e){
+
+        // Draw the text information in the top left corner
+        svg.selectAll(".dimple-hover-text")
+          .data([e.xValue, d3.format(",.f")(e.yValue)])
+            .enter()
+            .append("text")
+            .attr("class", "dimple-hover-text")
+            .attr("x", myChart._xPixels()  + myChart._widthPixels() - 25)
+            .attr("y", function (d, i) { return myChart._yPixels() + 20 + i * 25; })
+            .style("font-family", "courier new")
+            .style("text-anchor", "end")
+            .style("font-size", "20px")
+            .style("fill", "#ecf0f1")
+            .style("pointer-events", "none")
+            .text(function (d) { return d; });
+
+        // Put a coloured bar next to the text for no good reason
+        svg.append("rect")
+          .attr("class", "dimple-hover-text")
+          .attr("x", myChart._xPixels() + myChart._widthPixels() - 15)
+          .attr("y", myChart._yPixels())
+          .attr("height", 60)
+          .attr("width", 10)
+          .style("fill", myChart.getColor(e.xValue).fill)
+          .style("opacity", 1)
+          .style("pointer-events", "none");
+
+      });
+
+      // Clear the text on exit
+      mySeries.addEventHandler("mouseleave", function (e) {
+        svg.selectAll(".dimple-hover-text").remove();
+      });
+
+      // Render everything
+      myChart.draw();
+
+    });
+
+  </script>
+</div>
+</html>

examples/advanced_dynamic_line_color.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -34,4 +37,5 @@
 
     });
   </script>
-</div>
+</div>
+</html>

examples/advanced_grouped_mekko.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -48,4 +51,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/advanced_interactive_legends.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
@@ -75,4 +78,5 @@
           });
       });
   </script>
-</div>
+</div>
+</html>

examples/advanced_lollipop_with_hover.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     
     var svg = dimple.newSvg("#chartContainer", 590, 400);
@@ -130,4 +133,5 @@
     
     });
   </script>
-</div>
+</div>
+</html>

examples/advanced_matrix.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
 
     // Create the svg and set the dimensions
@@ -67,14 +70,14 @@
 
         // Draw a new chart which will go in the current shape
         var subChart = new dimple.chart(svg, filteredData);
-        
+
         // Get the shape from the main chart on which this chart is based
         var shape = d3.select(this);
 
         // Position the chart inside the shape
         subChart.setBounds(
             parseFloat(shape.attr("x")),
-            parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
+            parseFloat(shape.attr("y")),
             parseFloat(shape.attr("width")),
             parseFloat(shape.attr("height")));
 
@@ -95,4 +98,5 @@
       });
     });
   </script>
-</div>
+</div>
+</html>

examples/advanced_pong.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     var data = [
@@ -71,4 +74,5 @@
     sb.storyLabel.remove();
         
   </script>
-</div>
+</div>
+</html>

examples/advanced_price_range_lollipop.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
       d3.tsv("/data/example_data.tsv", function (data) {
@@ -45,4 +48,5 @@
         myChart.draw();
       });
   </script>
-</div>
+</div>
+</html>

examples/advanced_responsive_sizing.html

@@ -1,13 +1,16 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <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="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.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
-        var svg = dimple.newSvg("#chartContainer", "100%", "98%");
+        var svg = dimple.newSvg("#chartContainer", "100%", "100%");
 
         // Decide whether to draw the button or the graph
         if (window.opener !== null && window.opener !== undefined) {
@@ -17,14 +20,15 @@
             d3.tsv("/data/example_data.tsv", function (data) {
                 myChart = new dimple.chart(svg, data);
 
-                // Use the new set margins method to set partially fixed and
-                // partially proportional to the svg
-                myChart.setMargins("10%", "30px", "40px", "15%");
+                // Fix the margins
+                myChart.setMargins("60px", "30px", "110px", "70px");
 
                 // Continue to set up a standard chart
                 myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
                 myChart.addMeasureAxis("y", "Unit Sales");
                 myChart.addSeries("Channel", dimple.plot.bar);
+                // Set the legend using negative values to set the co-ordinate from the right
+                myChart.addLegend("-100px", "30px", "100px", "-70px");
                 myChart.draw();
             });
             // Add a method to draw the chart on resize of the window
@@ -44,40 +48,41 @@
             var height = 60, width = 180, color = new dimple.color("#B3DE69");
 
             svg.append("rect")
-                .attr("x", dimple._parentWidth(svg.node()) / 2 - width / 2)
-                .attr("y", dimple._parentHeight(svg.node()) / 2 - height / 2)
-                .attr("rx", 15).attr("ry", 15)
-                .attr("width", width).attr("height", height)
-                .style("fill", color.fill).style("stroke", color.stroke);
+                    .attr("x", dimple._parentWidth(svg.node()) / 2 - width / 2)
+                    .attr("y", dimple._parentHeight(svg.node()) / 2 - height / 2)
+                    .attr("rx", 15).attr("ry", 15)
+                    .attr("width", width).attr("height", height)
+                    .style("fill", color.fill).style("stroke", color.stroke);
 
             svg.selectAll("title_text")
-                .data(["Click Here To", "To Open Resizable Popup"])
-                .enter().append("text")
-                .attr("x", dimple._parentWidth(svg.node()) / 2)
-                .attr("y", function (d, i) {
-                    return dimple._parentHeight(svg.node()) / 2 - 5 + i * 18;
-                })
-                .style("text-anchor", "middle")
-                .style("font-family", "sans-serif")
-                .style("font-size", "12px").style("opacity", 0.7)
-                .text(function (d) { return d; });
+                    .data(["Click Here To", "To Open Resizable Popup"])
+                    .enter().append("text")
+                    .attr("x", dimple._parentWidth(svg.node()) / 2)
+                    .attr("y", function (d, i) {
+                        return dimple._parentHeight(svg.node()) / 2 - 5 + i * 18;
+                    })
+                    .style("text-anchor", "middle")
+                    .style("font-family", "sans-serif")
+                    .style("font-size", "12px").style("opacity", 0.7)
+                    .text(function (d) { return d; });
 
             svg.selectAll("text,rect")
-                .on("mouseenter", function () {
-                    svg.selectAll("rect").style("fill", color.stroke)
-                })
-                .on("mouseleave", function () {
-                    svg.selectAll("rect").style("fill", color.fill)
-                })
-                .style("cursor", "pointer")
-                .on("click", function () {
-                    var w = window.open(
-                        '/examples/advanced_responsive_sizing.html',
-                        'Resize Window To See Chart Resizing',
-                        'width=640px,height=480px,resizable=1,' +
-                        'toolbar=0,menubar=0,scrollbars=0');
-                });
+                    .on("mouseenter", function () {
+                        svg.selectAll("rect").style("fill", color.stroke)
+                    })
+                    .on("mouseleave", function () {
+                        svg.selectAll("rect").style("fill", color.fill)
+                    })
+                    .style("cursor", "pointer")
+                    .on("click", function () {
+                        var w = window.open(
+                                '/examples/advanced_responsive_sizing.html',
+                                'Resize Window To See Chart Resizing',
+                                        'width=640px,height=480px,resizable=1,' +
+                                        'toolbar=0,menubar=0,scrollbars=0');
+                    });
         }
 
     </script>
-</div>
+</div>
+</html>

examples/advanced_storyboard_control.html

@@ -1,139 +1,139 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.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>
+</div>
+</html>

examples/advanced_time_axis.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
 
@@ -104,4 +107,5 @@
     myChart.draw();
 
   </script>
-</div>
+</div>
+</html>

examples/advanced_trellis_bar.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -92,4 +95,5 @@
       }, this);
     });
   </script>
-</div>
+</div>
+</html>

examples/advanced_waterfall.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
 
     // This code should support any data in this structure changing the data here
@@ -109,7 +112,7 @@
     });
 
     // Remove the padding elements entirely
-    svg.selectAll(".pad").remove();
+    svg.selectAll(".dimple-pad").remove();
 
     // Change the measure name and the category names for the tooltips
     s.y.measure = yLabel;
@@ -128,4 +131,5 @@
     });
     
   </script>
-</div>
+</div>
+</html>

examples/area_steps_horizontal.html

@@ -0,0 +1,26 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 505, 305);
+      var x = myChart.addCategoryAxis("x", "Month");
+      x.addOrderRule("Date");
+      myChart.addMeasureAxis("y", "Unit Sales");
+      var s = myChart.addSeries(null, dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_horizontal_grouped.html

@@ -0,0 +1,27 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 500, 330)
+      var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+      x.addGroupOrderRule("Date");
+      myChart.addMeasureAxis("y", "Unit Sales");
+      var s = myChart.addSeries("Owner", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      s.barGap = 0.05;
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_horizontal_grouped_100pct.html

@@ -0,0 +1,28 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(70, 30, 340, 330);
+      var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+      x.addGroupOrderRule("Date");
+      myChart.addPctAxis("y", "Unit Sales");
+      var s = myChart.addSeries("SKU", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      s.barGap = 0.05;
+      myChart.addLegend(430, 20, 100, 300, "left");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_horizontal_grouped_stacked.html

@@ -0,0 +1,28 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 350, 330)
+      var x = myChart.addCategoryAxis("x", ["Owner", "Month"]);
+      x.addGroupOrderRule("Date");
+      myChart.addMeasureAxis("y", "Unit Sales");
+      var s = myChart.addSeries("SKU", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      s.barGap = 0.05;
+      myChart.addLegend(430, 20, 100, 300, "left");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_horizontal_stacked.html

@@ -0,0 +1,27 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 505, 305);
+      var x = myChart.addCategoryAxis("x", "Month");
+      x.addOrderRule("Date");
+      myChart.addMeasureAxis("y", "Unit Sales");
+      var s = myChart.addSeries("Channel", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      myChart.addLegend(60, 10, 500, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_horizontal_stacked_100pct.html

@@ -0,0 +1,27 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(65, 30, 505, 305);
+      var x = myChart.addCategoryAxis("x", "Month");
+      x.addOrderRule("Date");
+      myChart.addPctAxis("y", "Unit Sales");
+      var s = myChart.addSeries("Channel", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      myChart.addLegend(60, 10, 500, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_vertical.html

@@ -0,0 +1,26 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(75, 30, 485, 330)
+      myChart.addMeasureAxis("x", "Unit Sales");
+      var y = myChart.addCategoryAxis("y", "Month");
+      y.addOrderRule("Date");
+      var s = myChart.addSeries(null, dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_vertical_grouped.html

@@ -0,0 +1,27 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(90, 30, 470, 330)
+      myChart.addMeasureAxis("x", "Unit Sales");
+      var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+      y.addGroupOrderRule("Date");
+      var s = myChart.addSeries("Owner", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      s.barGap = 0.05;
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_vertical_grouped_100pct.html

@@ -0,0 +1,28 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(90, 30, 320, 330);
+      myChart.addPctAxis("x", "Unit Sales");
+      var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+      y.addGroupOrderRule("Date");
+      var s = myChart.addSeries("SKU", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      s.barGap = 0.05;
+      myChart.addLegend(430, 20, 100, 300, "left");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_vertical_grouped_stacked.html

@@ -0,0 +1,28 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(90, 30, 320, 330)
+      myChart.addMeasureAxis("x", "Unit Sales");
+      var y = myChart.addCategoryAxis("y", ["Owner", "Month"]);
+      y.addGroupOrderRule("Date");
+      var s = myChart.addSeries("SKU", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      s.barGap = 0.05;
+      myChart.addLegend(430, 20, 100, 300, "left");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_vertical_stacked.html

@@ -0,0 +1,27 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(75, 30, 485, 330)
+      myChart.addMeasureAxis("x", "Unit Sales");
+      var y = myChart.addCategoryAxis("y", "Month");
+      y.addOrderRule("Date");
+      var s = myChart.addSeries("Channel", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      myChart.addLegend(60, 10, 500, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/area_steps_vertical_stacked_100pct.html

@@ -0,0 +1,27 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(75, 30, 485, 330);
+      myChart.addPctAxis("x", "Unit Sales");
+      var y = myChart.addCategoryAxis("y", "Month");
+      y.addOrderRule("Date");
+      var s = myChart.addSeries("Channel", dimple.plot.area);
+      s.interpolation = "step";
+      s.lineWeight = 1;
+      myChart.addLegend(60, 10, 500, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/areas_curvy.html

@@ -0,0 +1,26 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 505, 305);
+      var x = myChart.addCategoryAxis("x", "Month");
+      x.addOrderRule("Date");
+      myChart.addMeasureAxis("y", "Unit Sales");
+      var s = myChart.addSeries("Channel", dimple.plot.area);
+      s.interpolation = "cardinal";
+      myChart.addLegend(60, 10, 500, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/areas_dual_measure.html

@@ -0,0 +1,25 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(50, 40, 500, 310)
+      var x = myChart.addMeasureAxis("x", "Distribution");
+      var y = myChart.addMeasureAxis("y", "Price");
+      var s = myChart.addSeries(["SKU", "Price Tier"], dimple.plot.area);
+      s.aggregate = dimple.aggregateMethod.avg;
+      s.lineMarkers = true;
+      myChart.addLegend(30, 10, 500, 35, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/areas_horizontal.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -17,4 +20,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_horizontal_grouped.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -19,4 +22,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_horizontal_grouped_100pct.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -20,4 +23,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_horizontal_grouped_stacked.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -20,4 +23,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_horizontal_stacked.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -13,9 +16,10 @@
       var x = myChart.addCategoryAxis("x", "Month");
       x.addOrderRule("Date");
       myChart.addMeasureAxis("y", "Unit Sales");
-      myChart.addSeries("Channel", dimple.plot.area);
+      var s = myChart.addSeries("Channel", dimple.plot.area);
       myChart.addLegend(60, 10, 500, 20, "right");
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_horizontal_stacked_100pct.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -18,4 +21,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_vertical.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -17,4 +20,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_vertical_grouped.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -19,4 +22,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_vertical_grouped_100pct.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -20,4 +23,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_vertical_grouped_stacked.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -20,4 +23,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_vertical_stacked.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -18,4 +21,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/areas_vertical_stacked_100pct.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -18,4 +21,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/bars_dual_measure_floating.html

@@ -0,0 +1,25 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      data = dimple.filterData(data, "Month", "Dec-11");
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(60, 30, 510, 305)
+      myChart.addMeasureAxis("x", "Price Monthly Change");
+      myChart.addMeasureAxis("y", "Distribution Monthly Change");
+      var s = myChart.addSeries(["SKU", "Channel"], dimple.plot.bar);
+      s.stacked = false;
+      myChart.addLegend(60, 10, 510, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/bars_horizontal.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -16,4 +19,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/bars_horizontal_floating.html

@@ -0,0 +1,25 @@
+<!----------------------------------------------------------------->
+<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
+<!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<div id="chartContainer">
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
+  <script type="text/javascript">
+    var svg = dimple.newSvg("#chartContainer", 590, 400);
+    d3.tsv("/data/example_data.tsv", function (data) {
+      var myChart = new dimple.chart(svg, data);
+      myChart.setBounds(75, 30, 480, 315);
+      myChart.addMeasureAxis("x", "Unit Sales");
+      var y = myChart.addCategoryAxis("y", "Month");
+      y.addOrderRule("Date");
+      var s = myChart.addSeries("Channel", dimple.plot.bar);
+      s.stacked = false;
+      myChart.addLegend(60, 10, 510, 20, "right");
+      myChart.draw();
+    });
+  </script>
+</div>
+</html>

examples/bars_horizontal_grouped.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -16,4 +19,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/bars_horizontal_grouped_stacked.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -16,4 +19,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/bars_horizontal_grouped_stacked_100pct.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -16,4 +19,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/bars_horizontal_mekko.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -16,4 +19,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>

examples/bars_horizontal_stacked.html

@@ -1,9 +1,12 @@
 <!----------------------------------------------------------------->
 <!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
 <!----------------------------------------------------------------->
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
 <div id="chartContainer">
-  <script src="/lib/d3.v3.min.js"></script>
-  <script src="/dist/dimple.v1.1.2.js"></script>
+  <script src="/lib/d3.v3.4.8.js"></script>
+  <script src="/dist/dimple.v2.2.0.js"></script>
   <script type="text/javascript">
     var svg = dimple.newSvg("#chartContainer", 590, 400);
     d3.tsv("/data/example_data.tsv", function (data) {
@@ -17,4 +20,5 @@
       myChart.draw();
     });
   </script>
-</div>
+</div>
+</html>