dc.js

/*!
 *  dc 2.0.0-beta.32
 *  http://dc-js.github.io/dc.js/
 *  Copyright 2012-2016 Nick Zhu & the dc.js Developers
 *  https://github.com/dc-js/dc.js/blob/master/AUTHORS
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
(function() { function _dc(d3, crossfilter) {
        'use strict';

        /**
         * The entire dc.js library is scoped under the **dc** name space. It does not introduce
         * anything else into the global name space.
         *
         * Most `dc` functions are designed to allow function chaining, meaning they return the current chart
         * instance whenever it is appropriate.  The getter forms of functions do not participate in function
         * chaining because they return values that are not the chart, although some,
         * such as {@link dc.baseMixin#svg .svg} and {@link dc.coordinateGridMixin#xAxis .xAxis},
         * return values that are themselves chainable d3 objects.
         * @namespace dc
         * @version 2.0.0-beta.32
         * @example
         * // Example chaining
         * chart.width(300)
         *      .height(300)
         *      .filter('sunday');
         */
        /*jshint -W079*/
        var dc = {
            version: '2.0.0-beta.32',
            constants: {
                CHART_CLASS: 'dc-chart',
                DEBUG_GROUP_CLASS: 'debug',
                STACK_CLASS: 'stack',
                DESELECTED_CLASS: 'deselected',
                SELECTED_CLASS: 'selected',
                NODE_INDEX_NAME: '__index__',
                GROUP_INDEX_NAME: '__group_index__',
                DEFAULT_CHART_GROUP: '__default_chart_group__',
                EVENT_DELAY: 40,
                NEGLIGIBLE_NUMBER: 1e-10
            },
            _renderlet: null
        };
        /*jshint +W079*/

        /**
         * The dc.chartRegistry object maintains sets of all instantiated dc.js charts under named groups
         * and the default group.
         *
         * A chart group often corresponds to a crossfilter instance. It specifies
         * the set of charts which should be updated when a filter changes on one of the charts or when the
         * global functions {@link dc.filterAll dc.filterAll}, {@link dc.refocusAll dc.refocusAll},
         * {@link dc.renderAll dc.renderAll}, {@link dc.redrawAll dc.redrawAll}, or chart functions
         * {@link dc.baseMixin#renderGroup baseMixin.renderGroup},
         * {@link dc.baseMixin#redrawGroup baseMixin.redrawGroup} are called.
         *
         * @namespace chartRegistry
         * @memberof dc
         * @type {{has, register, deregister, clear, list}}
         */
        dc.chartRegistry = (function () {
            // chartGroup:string => charts:array
            var _chartMap = {};

            function initializeChartGroup (group) {
                if (!group) {
                    group = dc.constants.DEFAULT_CHART_GROUP;
                }

                if (!_chartMap[group]) {
                    _chartMap[group] = [];
                }

                return group;
            }

            return {
                /**
                 * Determine if a given chart instance resides in any group in the registry.
                 * @method has
                 * @memberof dc.chartRegistry
                 * @param {Object} chart dc.js chart instance
                 * @returns {Boolean}
                 */
                has: function (chart) {
                    for (var e in _chartMap) {
                        if (_chartMap[e].indexOf(chart) >= 0) {
                            return true;
                        }
                    }
                    return false;
                },

                /**
                 * Add given chart instance to the given group, creating the group if necessary.
                 * If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
                 * @method register
                 * @memberof dc.chartRegistry
                 * @param {Object} chart dc.js chart instance
                 * @param {String} [group] Group name
                 */
                register: function (chart, group) {
                    group = initializeChartGroup(group);
                    _chartMap[group].push(chart);
                },

                /**
                 * Remove given chart instance from the given group, creating the group if necessary.
                 * If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
                 * @method deregister
                 * @memberof dc.chartRegistry
                 * @param {Object} chart dc.js chart instance
                 * @param {String} [group] Group name
                 */
                deregister: function (chart, group) {
                    group = initializeChartGroup(group);
                    for (var i = 0; i < _chartMap[group].length; i++) {
                        if (_chartMap[group][i].anchorName() === chart.anchorName()) {
                            _chartMap[group].splice(i, 1);
                            break;
                        }
                    }
                },

                /**
                 * Clear given group if one is provided, otherwise clears all groups.
                 * @method clear
                 * @memberof dc.chartRegistry
                 * @param {String} group Group name
                 */
                clear: function (group) {
                    if (group) {
                        delete _chartMap[group];
                    } else {
                        _chartMap = {};
                    }
                },

                /**
                 * Get an array of each chart instance in the given group.
                 * If no group is provided, the charts in the default group are returned.
                 * @method list
                 * @memberof dc.chartRegistry
                 * @param {String} [group] Group name
                 * @returns {Array<Object>}
                 */
                list: function (group) {
                    group = initializeChartGroup(group);
                    return _chartMap[group];
                }
            };
        })();

        /**
         * Add given chart instance to the given group, creating the group if necessary.
         * If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
         * @memberof dc
         * @method registerChart
         * @param {Object} chart dc.js chart instance
         * @param {String} [group] Group name
         */
        dc.registerChart = function (chart, group) {
            dc.chartRegistry.register(chart, group);
        };

        /**
         * Remove given chart instance from the given group, creating the group if necessary.
         * If no group is provided, the default group `dc.constants.DEFAULT_CHART_GROUP` will be used.
         * @memberof dc
         * @method deregisterChart
         * @param {Object} chart dc.js chart instance
         * @param {String} [group] Group name
         */
        dc.deregisterChart = function (chart, group) {
            dc.chartRegistry.deregister(chart, group);
        };

        /**
         * Determine if a given chart instance resides in any group in the registry.
         * @memberof dc
         * @method hasChart
         * @param {Object} chart dc.js chart instance
         * @returns {Boolean}
         */
        dc.hasChart = function (chart) {
            return dc.chartRegistry.has(chart);
        };

        /**
         * Clear given group if one is provided, otherwise clears all groups.
         * @memberof dc
         * @method deregisterAllCharts
         * @param {String} group Group name
         */
        dc.deregisterAllCharts = function (group) {
            dc.chartRegistry.clear(group);
        };

        /**
         * Clear all filters on all charts within the given chart group. If the chart group is not given then
         * only charts that belong to the default chart group will be reset.
         * @memberof dc
         * @method filterAll
         * @param {String} [group]
         */
        dc.filterAll = function (group) {
            var charts = dc.chartRegistry.list(group);
            for (var i = 0; i < charts.length; ++i) {
                charts[i].filterAll();
            }
        };

        /**
         * Reset zoom level / focus on all charts that belong to the given chart group. If the chart group is
         * not given then only charts that belong to the default chart group will be reset.
         * @memberof dc
         * @method refocusAll
         * @param {String} [group]
         */
        dc.refocusAll = function (group) {
            var charts = dc.chartRegistry.list(group);
            for (var i = 0; i < charts.length; ++i) {
                if (charts[i].focus) {
                    charts[i].focus();
                }
            }
        };

        /**
         * Re-render all charts belong to the given chart group. If the chart group is not given then only
         * charts that belong to the default chart group will be re-rendered.
         * @memberof dc
         * @method renderAll
         * @param {String} [group]
         */
        dc.renderAll = function (group) {
            var charts = dc.chartRegistry.list(group);
            for (var i = 0; i < charts.length; ++i) {
                charts[i].render();
            }

            if (dc._renderlet !== null) {
                dc._renderlet(group);
            }
        };

        /**
         * Redraw all charts belong to the given chart group. If the chart group is not given then only charts
         * that belong to the default chart group will be re-drawn. Redraw is different from re-render since
         * when redrawing dc tries to update the graphic incrementally, using transitions, instead of starting
         * from scratch.
         * @memberof dc
         * @method redrawAll
         * @param {String} [group]
         */
        dc.redrawAll = function (group) {
            var charts = dc.chartRegistry.list(group);
            for (var i = 0; i < charts.length; ++i) {
                charts[i].redraw();
            }

            if (dc._renderlet !== null) {
                dc._renderlet(group);
            }
        };

        /**
         * If this boolean is set truthy, all transitions will be disabled, and changes to the charts will happen
         * immediately
         * @memberof dc
         * @method disableTransitions
         * @type {Boolean}
         * @default false
         */
        dc.disableTransitions = false;

        dc.transition = function (selections, duration, callback, name) {
            if (duration <= 0 || duration === undefined || dc.disableTransitions) {
                return selections;
            }

            var s = selections
                .transition(name)
                .duration(duration);

            if (typeof(callback) === 'function') {
                callback(s);
            }

            return s;
        };

        /* somewhat silly, but to avoid duplicating logic */
        dc.optionalTransition = function (enable, duration, callback, name) {
            if (enable) {
                return function (selection) {
                    return dc.transition(selection, duration, callback, name);
                };
            } else {
                return function (selection) {
                    return selection;
                };
            }
        };

// See http://stackoverflow.com/a/20773846
        dc.afterTransition = function (transition, callback) {
            if (transition.empty() || !transition.duration) {
                callback.call(transition);
            } else {
                var n = 0;
                transition
                    .each(function () { ++n; })
                    .each('end', function () {
                        if (!--n) {
                            callback.call(transition);
                        }
                    });
            }
        };

        /**
         * @namespace units
         * @memberof dc
         * @type {{}}
         */
        dc.units = {};

        /**
         * The default value for {@link dc.coordinateGridMixin#xUnits .xUnits} for the
         * {@link dc.coordinateGridMixin Coordinate Grid Chart} and should
         * be used when the x values are a sequence of integers.
         * It is a function that counts the number of integers in the range supplied in its start and end parameters.
         * @method integers
         * @memberof dc.units
         * @see {@link dc.coordinateGridMixin#xUnits coordinateGridMixin.xUnits}
         * @example
         * chart.xUnits(dc.units.integers) // already the default
         * @param {Number} start
         * @param {Number} end
         * @return {Number}
         */
        dc.units.integers = function (start, end) {
            return Math.abs(end - start);
        };

        /**
         * This argument can be passed to the {@link dc.coordinateGridMixin#xUnits .xUnits} function of the to
         * specify ordinal units for the x axis. Usually this parameter is used in combination with passing
         * {@link https://github.com/mbostock/d3/wiki/Ordinal-Scales d3.scale.ordinal} to
         * {@link dc.coordinateGridMixin#x .x}.
         * It just returns the domain passed to it, which for ordinal charts is an array of all values.
         * @method ordinal
         * @memberof dc.units
         * @see {@link https://github.com/mbostock/d3/wiki/Ordinal-Scales d3.scale.ordinal}
         * @see {@link dc.coordinateGridMixin#xUnits coordinateGridMixin.xUnits}
         * @see {@link dc.coordinateGridMixin#x coordinateGridMixin.x}
         * @example
         * chart.xUnits(dc.units.ordinal)
         *      .x(d3.scale.ordinal())
         * @param {*} start
         * @param {*} end
         * @param {Array<String>} domain
         * @return {Array<String>}
         */
        dc.units.ordinal = function (start, end, domain) {
            return domain;
        };

        /**
         * @namespace fp
         * @memberof dc.units
         * @type {{}}
         */
        dc.units.fp = {};
        /**
         * This function generates an argument for the {@link dc.coordinateGridMixin Coordinate Grid Chart}
         * {@link dc.coordinateGridMixin#xUnits .xUnits} function specifying that the x values are floating-point
         * numbers with the given precision.
         * The returned function determines how many values at the given precision will fit into the range
         * supplied in its start and end parameters.
         * @method precision
         * @memberof dc.units.fp
         * @see {@link dc.coordinateGridMixin#xUnits coordinateGridMixin.xUnits}
         * @example
         * // specify values (and ticks) every 0.1 units
         * chart.xUnits(dc.units.fp.precision(0.1)
         * // there are 500 units between 0.5 and 1 if the precision is 0.001
         * var thousandths = dc.units.fp.precision(0.001);
         * thousandths(0.5, 1.0) // returns 500
         * @param {Number} precision
         * @return {Function} start-end unit function
         */
        dc.units.fp.precision = function (precision) {
            var _f = function (s, e) {
                var d = Math.abs((e - s) / _f.resolution);
                if (dc.utils.isNegligible(d - Math.floor(d))) {
                    return Math.floor(d);
                } else {
                    return Math.ceil(d);
                }
            };
            _f.resolution = precision;
            return _f;
        };

        dc.round = {};
        dc.round.floor = function (n) {
            return Math.floor(n);
        };
        dc.round.ceil = function (n) {
            return Math.ceil(n);
        };
        dc.round.round = function (n) {
            return Math.round(n);
        };

        dc.override = function (obj, functionName, newFunction) {
            var existingFunction = obj[functionName];
            obj['_' + functionName] = existingFunction;
            obj[functionName] = newFunction;
        };

        dc.renderlet = function (_) {
            if (!arguments.length) {
                return dc._renderlet;
            }
            dc._renderlet = _;
            return dc;
        };

        dc.instanceOfChart = function (o) {
            return o instanceof Object && o.__dcFlag__ && true;
        };

        dc.errors = {};

        dc.errors.Exception = function (msg) {
            var _msg = msg || 'Unexpected internal error';

            this.message = _msg;

            this.toString = function () {
                return _msg;
            };
            this.stack = (new Error()).stack;
        };
        dc.errors.Exception.prototype = Object.create(Error.prototype);
        dc.errors.Exception.prototype.constructor = dc.errors.Exception;

        dc.errors.InvalidStateException = function () {
            dc.errors.Exception.apply(this, arguments);
        };

        dc.errors.InvalidStateException.prototype = Object.create(dc.errors.Exception.prototype);
        dc.errors.InvalidStateException.prototype.constructor = dc.errors.InvalidStateException;

        dc.errors.BadArgumentException = function () {
            dc.errors.Exception.apply(this, arguments);
        };

        dc.errors.BadArgumentException.prototype = Object.create(dc.errors.Exception.prototype);
        dc.errors.BadArgumentException.prototype.constructor = dc.errors.BadArgumentException;

        /**
         * The default date format for dc.js
         * @name dateFormat
         * @memberof dc
         * @type {Function}
         * @default d3.time.format('%m/%d/%Y')
         */
        dc.dateFormat = d3.time.format('%m/%d/%Y');

        /**
         * @namespace printers
         * @memberof dc
         * @type {{}}
         */
        dc.printers = {};

        /**
         * Converts a list of filters into a readable string
         * @method filters
         * @memberof dc.printers
         * @param {Array<dc.filters|any>} filters
         * @returns {String}
         */
        dc.printers.filters = function (filters) {
            var s = '';

            for (var i = 0; i < filters.length; ++i) {
                if (i > 0) {
                    s += ', ';
                }
                s += dc.printers.filter(filters[i]);
            }

            return s;
        };

        /**
         * Converts a filter into a readable string
         * @method filter
         * @memberof dc.printers
         * @param {dc.filters|any|Array<any>} filter
         * @returns {String}
         */
        dc.printers.filter = function (filter) {
            var s = '';

            if (typeof filter !== 'undefined' && filter !== null) {
                if (filter instanceof Array) {
                    if (filter.length >= 2) {
                        s = '[' + dc.utils.printSingleValue(filter[0]) + ' -> ' + dc.utils.printSingleValue(filter[1]) + ']';
                    } else if (filter.length >= 1) {
                        s = dc.utils.printSingleValue(filter[0]);
                    }
                } else {
                    s = dc.utils.printSingleValue(filter);
                }
            }

            return s;
        };

        /**
         * Returns a function that given a string property name, can be used to pluck the property off an object.  A function
         * can be passed as the second argument to also alter the data being returned.  This can be a useful shorthand method to create
         * accessor functions.
         * @method pluck
         * @memberof dc
         * @example
         * var xPluck = dc.pluck('x');
         * var objA = {x: 1};
         * xPluck(objA) // 1
         * @example
         * var xPosition = dc.pluck('x', function (x, i) {
 *     // `this` is the original datum,
 *     // `x` is the x property of the datum,
 *     // `i` is the position in the array
 *     return this.radius + x;
 * });
         * dc.selectAll('.circle').data(...).x(xPosition);
         * @param {String} n
         * @param {Function} [f]
         * @returns {Function}
         */
        dc.pluck = function (n, f) {
            if (!f) {
                return function (d) { return d[n]; };
            }
            return function (d, i) { return f.call(d, d[n], i); };
        };

        /**
         * @namespace utils
         * @memberof dc
         * @type {{}}
         */
        dc.utils = {};

        /**
         * Print a single value filter
         * @method printSingleValue
         * @memberof dc.utils
         * @param {any} filter
         * @returns {String}
         */
        dc.utils.printSingleValue = function (filter) {
            var s = '' + filter;

            if (filter instanceof Date) {
                s = dc.dateFormat(filter);
            } else if (typeof(filter) === 'string') {
                s = filter;
            } else if (dc.utils.isFloat(filter)) {
                s = dc.utils.printSingleValue.fformat(filter);
            } else if (dc.utils.isInteger(filter)) {
                s = Math.round(filter);
            }

            return s;
        };
        dc.utils.printSingleValue.fformat = d3.format('.2f');

        /**
         * Arbitrary add one value to another.
         * @method add
         * @memberof dc.utils
         * @todo
         * These assume than any string r is a percentage (whether or not it includes %).
         * They also generate strange results if l is a string.
         * @param {String|Date|Number} l
         * @param {Number} r
         * @returns {String|Date|Number}
         */
        dc.utils.add = function (l, r) {
            if (typeof r === 'string') {
                r = r.replace('%', '');
            }

            if (l instanceof Date) {
                if (typeof r === 'string') {
                    r = +r;
                }
                var d = new Date();
                d.setTime(l.getTime());
                d.setDate(l.getDate() + r);
                return d;
            } else if (typeof r === 'string') {
                var percentage = (+r / 100);
                return l > 0 ? l * (1 + percentage) : l * (1 - percentage);
            } else {
                return l + r;
            }
        };

        /**
         * Arbitrary subtract one value from another.
         * @method subtract
         * @memberof dc.utils
         * @todo
         * These assume than any string r is a percentage (whether or not it includes %).
         * They also generate strange results if l is a string.
         * @param {String|Date|Number} l
         * @param {Number} r
         * @returns {String|Date|Number}
         */
        dc.utils.subtract = function (l, r) {
            if (typeof r === 'string') {
                r = r.replace('%', '');
            }

            if (l instanceof Date) {
                if (typeof r === 'string') {
                    r = +r;
                }
                var d = new Date();
                d.setTime(l.getTime());
                d.setDate(l.getDate() - r);
                return d;
            } else if (typeof r === 'string') {
                var percentage = (+r / 100);
                return l < 0 ? l * (1 + percentage) : l * (1 - percentage);
            } else {
                return l - r;
            }
        };

        /**
         * Is the value a number?
         * @method isNumber
         * @memberof dc.utils
         * @param {any} n
         * @returns {Boolean}
         */
        dc.utils.isNumber = function (n) {
            return n === +n;
        };

        /**
         * Is the value a float?
         * @method isFloat
         * @memberof dc.utils
         * @param {any} n
         * @returns {Boolean}
         */
        dc.utils.isFloat = function (n) {
            return n === +n && n !== (n | 0);
        };

        /**
         * Is the value an integer?
         * @method isInteger
         * @memberof dc.utils
         * @param {any} n
         * @returns {Boolean}
         */
        dc.utils.isInteger = function (n) {
            return n === +n && n === (n | 0);
        };

        /**
         * Is the value very close to zero?
         * @method isNegligible
         * @memberof dc.utils
         * @param {any} n
         * @returns {Boolean}
         */
        dc.utils.isNegligible = function (n) {
            return !dc.utils.isNumber(n) || (n < dc.constants.NEGLIGIBLE_NUMBER && n > -dc.constants.NEGLIGIBLE_NUMBER);
        };

        /**
         * Ensure the value is no greater or less than the min/max values.  If it is return the boundary value.
         * @method clamp
         * @memberof dc.utils
         * @param {any} val
         * @param {any} min
         * @param {any} max
         * @returns {any}
         */
        dc.utils.clamp = function (val, min, max) {
            return val < min ? min : (val > max ? max : val);
        };

        /**
         * Using a simple static counter, provide a unique integer id.
         * @method uniqueId
         * @memberof dc.utils
         * @returns {Number}
         */
        var _idCounter = 0;
        dc.utils.uniqueId = function () {
            return ++_idCounter;
        };

        /**
         * Convert a name to an ID.
         * @method nameToId
         * @memberof dc.utils
         * @param {String} name
         * @returns {String}
         */
        dc.utils.nameToId = function (name) {
            return name.toLowerCase().replace(/[\s]/g, '_').replace(/[\.']/g, '');
        };

        /**
         * Append or select an item on a parent element
         * @method appendOrSelect
         * @memberof dc.utils
         * @param {d3.selection} parent
         * @param {String} selector
         * @param {String} tag
         * @returns {d3.selection}
         */
        dc.utils.appendOrSelect = function (parent, selector, tag) {
            tag = tag || selector;
            var element = parent.select(selector);
            if (element.empty()) {
                element = parent.append(tag);
            }
            return element;
        };

        /**
         * Return the number if the value is a number; else 0.
         * @method safeNumber
         * @memberof dc.utils
         * @param {Number|any} n
         * @returns {Number}
         */
        dc.utils.safeNumber = function (n) { return dc.utils.isNumber(+n) ? +n : 0;};

        dc.logger = {};

        dc.logger.enableDebugLog = false;

        dc.logger.warn = function (msg) {
            if (console) {
                if (console.warn) {
                    console.warn(msg);
                } else if (console.log) {
                    console.log(msg);
                }
            }

            return dc.logger;
        };

        dc.logger.debug = function (msg) {
            if (dc.logger.enableDebugLog && console) {
                if (console.debug) {
                    console.debug(msg);
                } else if (console.log) {
                    console.log(msg);
                }
            }

            return dc.logger;
        };

        dc.logger.deprecate = function (fn, msg) {
            // Allow logging of deprecation
            var warned = false;
            function deprecated () {
                if (!warned) {
                    dc.logger.warn(msg);
                    warned = true;
                }
                return fn.apply(this, arguments);
            }
            return deprecated;
        };

        dc.events = {
            current: null
        };

        /**
         * This function triggers a throttled event function with a specified delay (in milli-seconds).  Events
         * that are triggered repetitively due to user interaction such brush dragging might flood the library
         * and invoke more renders than can be executed in time. Using this function to wrap your event
         * function allows the library to smooth out the rendering by throttling events and only responding to
         * the most recent event.
         * @name events.trigger
         * @memberof dc
         * @example
         * chart.on('renderlet', function(chart) {
 *     // smooth the rendering through event throttling
 *     dc.events.trigger(function(){
 *         // focus some other chart to the range selected by user on this chart
 *         someOtherChart.focus(chart.filter());
 *     });
 * })
         * @param {Function} closure
         * @param {Number} [delay]
         */
        dc.events.trigger = function (closure, delay) {
            if (!delay) {
                closure();
                return;
            }

            dc.events.current = closure;

            setTimeout(function () {
                if (closure === dc.events.current) {
                    closure();
                }
            }, delay);
        };

        /**
         * The dc.js filters are functions which are passed into crossfilter to chose which records will be
         * accumulated to produce values for the charts.  In the crossfilter model, any filters applied on one
         * dimension will affect all the other dimensions but not that one.  dc always applies a filter
         * function to the dimension; the function combines multiple filters and if any of them accept a
         * record, it is filtered in.
         *
         * These filter constructors are used as appropriate by the various charts to implement brushing.  We
         * mention below which chart uses which filter.  In some cases, many instances of a filter will be added.
         *
         * Each of the dc.js filters is an object with the following properties:
         * * `isFiltered` - a function that returns true if a value is within the filter
         * * `filterType` - a string identifying the filter, here the name of the constructor
         *
         * Currently these filter objects are also arrays, but this is not a requirement. Custom filters
         * can be used as long as they have the properties above.
         * @namespace filters
         * @memberof dc
         * @type {{}}
         */
        dc.filters = {};

        /**
         * RangedFilter is a filter which accepts keys between `low` and `high`.  It is used to implement X
         * axis brushing for the {@link dc.coordinateGridMixin coordinate grid charts}.
         *
         * Its `filterType` is 'RangedFilter'
         * @name RangedFilter
         * @memberof dc.filters
         * @param {Number} low
         * @param {Number} high
         * @return {Array<Number>}
         * @constructor
         */
        dc.filters.RangedFilter = function (low, high) {
            var range = new Array(low, high);
            range.isFiltered = function (value) {
                return value >= this[0] && value < this[1];
            };
            range.filterType = 'RangedFilter';

            return range;
        };

        /**
         * TwoDimensionalFilter is a filter which accepts a single two-dimensional value.  It is used by the
         * {@link dc.heatMap heat map chart} to include particular cells as they are clicked.  (Rows and columns are
         * filtered by filtering all the cells in the row or column.)
         *
         * Its `filterType` is 'TwoDimensionalFilter'
         * @name TwoDimensionalFilter
         * @memberof dc.filters
         * @param {Array<Number>} filter
         * @return {Array<Number>}
         * @constructor
         */
        dc.filters.TwoDimensionalFilter = function (filter) {
            if (filter === null) { return null; }

            var f = filter;
            f.isFiltered = function (value) {
                return value.length && value.length === f.length &&
                    value[0] === f[0] && value[1] === f[1];
            };
            f.filterType = 'TwoDimensionalFilter';

            return f;
        };

        /**
         * The RangedTwoDimensionalFilter allows filtering all values which fit within a rectangular
         * region. It is used by the {@link dc.scatterPlot scatter plot} to implement rectangular brushing.
         *
         * It takes two two-dimensional points in the form `[[x1,y1],[x2,y2]]`, and normalizes them so that
         * `x1 <= x2` and `y1 <= y2`. It then returns a filter which accepts any points which are in the
         * rectangular range including the lower values but excluding the higher values.
         *
         * If an array of two values are given to the RangedTwoDimensionalFilter, it interprets the values as
         * two x coordinates `x1` and `x2` and returns a filter which accepts any points for which `x1 <= x <
         * x2`.
         *
         * Its `filterType` is 'RangedTwoDimensionalFilter'
         * @name RangedTwoDimensionalFilter
         * @memberof dc.filters
         * @param {Array<Array<Number>>} filter
         * @return {Array<Array<Number>>}
         * @constructor
         */
        dc.filters.RangedTwoDimensionalFilter = function (filter) {
            if (filter === null) { return null; }

            var f = filter;
            var fromBottomLeft;

            if (f[0] instanceof Array) {
                fromBottomLeft = [
                    [Math.min(filter[0][0], filter[1][0]), Math.min(filter[0][1], filter[1][1])],
                    [Math.max(filter[0][0], filter[1][0]), Math.max(filter[0][1], filter[1][1])]
                ];
            } else {
                fromBottomLeft = [[filter[0], -Infinity], [filter[1], Infinity]];
            }

            f.isFiltered = function (value) {
                var x, y;

                if (value instanceof Array) {
                    if (value.length !== 2) {
                        return false;
                    }
                    x = value[0];
                    y = value[1];
                } else {
                    x = value;
                    y = fromBottomLeft[0][1];
                }

                return x >= fromBottomLeft[0][0] && x < fromBottomLeft[1][0] &&
                    y >= fromBottomLeft[0][1] && y < fromBottomLeft[1][1];
            };
            f.filterType = 'RangedTwoDimensionalFilter';

            return f;
        };

        /**
         * `dc.baseMixin` is an abstract functional object representing a basic `dc` chart object
         * for all chart and widget implementations. Methods from the {@link #dc.baseMixin dc.baseMixin} are inherited
         * and available on all chart implementations in the `dc` library.
         * @name baseMixin
         * @memberof dc
         * @mixin
         * @param {Object} _chart
         * @return {dc.baseMixin}
         */
        dc.baseMixin = function (_chart) {
            _chart.__dcFlag__ = dc.utils.uniqueId();

            var _dimension;
            var _group;

            var _anchor;
            var _root;
            var _svg;
            var _isChild;

            var _minWidth = 200;
            var _defaultWidthCalc = function (element) {
                var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
                return (width && width > _minWidth) ? width : _minWidth;
            };
            var _widthCalc = _defaultWidthCalc;

            var _minHeight = 200;
            var _defaultHeightCalc = function (element) {
                var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
                return (height && height > _minHeight) ? height : _minHeight;
            };
            var _heightCalc = _defaultHeightCalc;
            var _width, _height;

            var _keyAccessor = dc.pluck('key');
            var _valueAccessor = dc.pluck('value');
            var _label = dc.pluck('key');

            var _ordering = dc.pluck('key');
            var _orderSort;

            var _renderLabel = false;

            var _title = function (d) {
                return _chart.keyAccessor()(d) + ': ' + _chart.valueAccessor()(d);
            };
            var _renderTitle = true;
            var _controlsUseVisibility = false;

            var _transitionDuration = 750;

            var _filterPrinter = dc.printers.filters;

            var _mandatoryAttributes = ['dimension', 'group'];

            var _chartGroup = dc.constants.DEFAULT_CHART_GROUP;

            var _listeners = d3.dispatch(
                'preRender',
                'postRender',
                'preRedraw',
                'postRedraw',
                'filtered',
                'zoomed',
                'renderlet',
                'pretransition');

            var _legend;
            var _commitHandler;

            var _filters = [];
            var _filterHandler = function (dimension, filters) {
                if (filters.length === 0) {
                    dimension.filter(null);
                } else if (filters.length === 1 && !filters[0].isFiltered) {
                    // single value and not a function-based filter
                    dimension.filterExact(filters[0]);
                } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
                    // single range-based filter
                    dimension.filterRange(filters[0]);
                } else {
                    dimension.filterFunction(function (d) {
                        for (var i = 0; i < filters.length; i++) {
                            var filter = filters[i];
                            if (filter.isFiltered && filter.isFiltered(d)) {
                                return true;
                            } else if (filter <= d && filter >= d) {
                                return true;
                            }
                        }
                        return false;
                    });
                }
                return filters;
            };

            var _data = function (group) {
                return group.all();
            };

            /**
             * Set or get the height attribute of a chart. The height is applied to the SVGElement generated by
             * the chart when rendered (or re-rendered). If a value is given, then it will be used to calculate
             * the new height and the chart returned for method chaining.  The value can either be a numeric, a
             * function, or falsy. If no value is specified then the value of the current height attribute will
             * be returned.
             *
             * By default, without an explicit height being given, the chart will select the width of its
             * anchor element. If that isn't possible it defaults to 200 (provided by the
             * {@link dc.baseMixin#minHeight minHeight} property). Setting the value falsy will return
             * the chart to the default behavior.
             * @method height
             * @memberof dc.baseMixin
             * @instance
             * @see {@link dc.baseMixin#minHeight minHeight}
             * @example
             * // Default height
             * chart.height(function (element) {
     *     var height = element && element.getBoundingClientRect && element.getBoundingClientRect().height;
     *     return (height && height > chart.minHeight()) ? height : chart.minHeight();
     * });
             *
             * chart.height(250); // Set the chart's height to 250px;
             * chart.height(function(anchor) { return doSomethingWith(anchor); }); // set the chart's height with a function
             * chart.height(null); // reset the height to the default auto calculation
             * @param {Number|Function} [height]
             * @return {Number}
             * @return {dc.baseMixin}
             */
            _chart.height = function (height) {
                if (!arguments.length) {
                    if (!dc.utils.isNumber(_height)) {
                        // only calculate once
                        _height = _heightCalc(_root.node());
                    }
                    return _height;
                }
                _heightCalc = d3.functor(height || _defaultHeightCalc);
                _height = undefined;
                return _chart;
            };

            /**
             * Set or get the width attribute of a chart.
             * @method width
             * @memberof dc.baseMixin
             * @instance
             * @see {@link dc.baseMixin#height height}
             * @see {@link dc.baseMixin#minWidth minWidth}
             * @example
             * // Default width
             * chart.width(function (element) {
     *     var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width;
     *     return (width && width > chart.minWidth()) ? width : chart.minWidth();
     * });
             * @param {Number|Function} [width]
             * @return {Number}
             * @return {dc.baseMixin}
             */
            _chart.width = function (width) {
                if (!arguments.length) {
                    if (!dc.utils.isNumber(_width)) {
                        // only calculate once
                        _width = _widthCalc(_root.node());
                    }
                    return _width;
                }
                _widthCalc = d3.functor(width || _defaultWidthCalc);
                _width = undefined;
                return _chart;
            };

            /**
             * Set or get the minimum width attribute of a chart. This only has effect when used with the default
             * {@link dc.baseMixin#width width} function.
             * @method minWidth
             * @memberof dc.baseMixin
             * @instance
             * @see {@link dc.baseMixin#width width}
             * @param {Number} [minWidth=200]
             * @return {Number}
             * @return {dc.baseMixin}
             */
            _chart.minWidth = function (minWidth) {
                if (!arguments.length) {
                    return _minWidth;
                }
                _minWidth = minWidth;
                return _chart;
            };

            /**
             * Set or get the minimum height attribute of a chart. This only has effect when used with the default
             * {@link dc.baseMixin#height height} function.
             * @method minHeight
             * @memberof dc.baseMixin
             * @instance
             * @see {@link dc.baseMixin#height height}
             * @param {Number} [minHeight=200]
             * @return {Number}
             * @return {dc.baseMixin}
             */
            _chart.minHeight = function (minHeight) {
                if (!arguments.length) {
                    return _minHeight;
                }
                _minHeight = minHeight;
                return _chart;
            };

            /**
             * **mandatory**
             *
             * Set or get the dimension attribute of a chart. In `dc`, a dimension can be any valid [crossfilter
             * dimension](https://github.com/square/crossfilter/wiki/API-Reference#wiki-dimension).
             *
             * If a value is given, then it will be used as the new dimension. If no value is specified then
             * the current dimension will be returned.
             * @method dimension
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://github.com/square/crossfilter/wiki/API-Reference#dimension crossfilter.dimension}
             * @example
             * var index = crossfilter([]);
             * var dimension = index.dimension(dc.pluck('key'));
             * chart.dimension(dimension);
             * @param {crossfilter.dimension} [dimension]
             * @return {crossfilter.dimension}
             * @return {dc.baseMixin}
             */
            _chart.dimension = function (dimension) {
                if (!arguments.length) {
                    return _dimension;
                }
                _dimension = dimension;
                _chart.expireCache();
                return _chart;
            };

            /**
             * Set the data callback or retrieve the chart's data set. The data callback is passed the chart's
             * group and by default will return
             * {@link https://github.com/square/crossfilter/wiki/API-Reference#group_all group.all}.
             * This behavior may be modified to, for instance, return only the top 5 groups.
             * @method data
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // Default data function
             * chart.data(function (group) { return group.all(); });
             *
             * chart.data(function (group) { return group.top(5); });
             * @param {Function} [callback]
             * @return {*}
             * @return {dc.baseMixin}
             */
            _chart.data = function (callback) {
                if (!arguments.length) {
                    return _data.call(_chart, _group);
                }
                _data = d3.functor(callback);
                _chart.expireCache();
                return _chart;
            };

            /**
             * **mandatory**
             *
             * Set or get the group attribute of a chart. In `dc` a group is a
             * {@link https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce crossfilter group}.
             * Usually the group should be created from the particular dimension associated with the same chart. If a value is
             * given, then it will be used as the new group.
             *
             * If no value specified then the current group will be returned.
             * If `name` is specified then it will be used to generate legend label.
             * @method group
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce crossfilter.group}
             * @example
             * var index = crossfilter([]);
             * var dimension = index.dimension(dc.pluck('key'));
             * chart.dimension(dimension);
             * chart.group(dimension.group(crossfilter.reduceSum()));
             * @param {crossfilter.group} [group]
             * @param {String} [name]
             * @return {crossfilter.group}
             * @return {dc.baseMixin}
             */
            _chart.group = function (group, name) {
                if (!arguments.length) {
                    return _group;
                }
                _group = group;
                _chart._groupName = name;
                _chart.expireCache();
                return _chart;
            };

            /**
             * Get or set an accessor to order ordinal dimensions.  The chart uses
             * {@link https://github.com/square/crossfilter/wiki/API-Reference#quicksort_by crossfilter.quicksort.by}
             * to sort elements; this accessor returns the value to order on.
             * @method ordering
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://github.com/square/crossfilter/wiki/API-Reference#quicksort_by crossfilter.quicksort.by}
             * @example
             * // Default ordering accessor
             * _chart.ordering(dc.pluck('key'));
             * @param {Function} [orderFunction]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.ordering = function (orderFunction) {
                if (!arguments.length) {
                    return _ordering;
                }
                _ordering = orderFunction;
                _orderSort = crossfilter.quicksort.by(_ordering);
                _chart.expireCache();
                return _chart;
            };

            _chart._computeOrderedGroups = function (data) {
                var dataCopy = data.slice(0);

                if (dataCopy.length <= 1) {
                    return dataCopy;
                }

                if (!_orderSort) {
                    _orderSort = crossfilter.quicksort.by(_ordering);
                }

                return _orderSort(dataCopy, 0, dataCopy.length);
            };

            /**
             * Clear all filters associated with this chart
             *
             * The same can be achieved by calling {@link dc.baseMixin#filter chart.filter(null)}.
             * @method filterAll
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.filterAll = function () {
                return _chart.filter(null);
            };

            /**
             * Execute d3 single selection in the chart's scope using the given selector and return the d3
             * selection.
             *
             * This function is **not chainable** since it does not return a chart instance; however the d3
             * selection result can be chained to d3 function calls.
             * @method select
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Selections d3.selection}
             * @example
             * // Similar to:
             * d3.select('#chart-id').select(selector);
             * @return {d3.selection}
             */
            _chart.select = function (s) {
                return _root.select(s);
            };

            /**
             * Execute in scope d3 selectAll using the given selector and return d3 selection result.
             *
             * This function is **not chainable** since it does not return a chart instance; however the d3
             * selection result can be chained to d3 function calls.
             * @method selectAll
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Selections d3.selection}
             * @example
             * // Similar to:
             * d3.select('#chart-id').selectAll(selector);
             * @return {d3.selection}
             */
            _chart.selectAll = function (s) {
                return _root ? _root.selectAll(s) : null;
            };

            /**
             * Set the root SVGElement to either be an existing chart's root; or any valid [d3 single
             * selector](https://github.com/mbostock/d3/wiki/Selections#selecting-elements) specifying a dom
             * block element such as a div; or a dom element or d3 selection. Optionally registers the chart
             * within the chartGroup. This class is called internally on chart initialization, but be called
             * again to relocate the chart. However, it will orphan any previously created SVGElements.
             * @method anchor
             * @memberof dc.baseMixin
             * @instance
             * @param {anchorChart|anchorSelector|anchorNode} [parent]
             * @param {String} [chartGroup]
             * @return {String|node|d3.selection}
             * @return {dc.baseMixin}
             */
            _chart.anchor = function (parent, chartGroup) {
                if (!arguments.length) {
                    return _anchor;
                }
                if (dc.instanceOfChart(parent)) {
                    _anchor = parent.anchor();
                    _root = parent.root();
                    _isChild = true;
                } else if (parent) {
                    if (parent.select && parent.classed) { // detect d3 selection
                        _anchor = parent.node();
                    } else {
                        _anchor = parent;
                    }
                    _root = d3.select(_anchor);
                    _root.classed(dc.constants.CHART_CLASS, true);
                    dc.registerChart(_chart, chartGroup);
                    _isChild = false;
                } else {
                    throw new dc.errors.BadArgumentException('parent must be defined');
                }
                _chartGroup = chartGroup;
                return _chart;
            };

            /**
             * Returns the DOM id for the chart's anchored location.
             * @method anchorName
             * @memberof dc.baseMixin
             * @instance
             * @return {String}
             */
            _chart.anchorName = function () {
                var a = _chart.anchor();
                if (a && a.id) {
                    return a.id;
                }
                if (a && a.replace) {
                    return a.replace('#', '');
                }
                return 'dc-chart' + _chart.chartID();
            };

            /**
             * Returns the root element where a chart resides. Usually it will be the parent div element where
             * the SVGElement was created. You can also pass in a new root element however this is usually handled by
             * dc internally. Resetting the root element on a chart outside of dc internals may have
             * unexpected consequences.
             * @method root
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement}
             * @param {HTMLElement} [rootElement]
             * @return {HTMLElement}
             * @return {dc.baseMixin}
             */
            _chart.root = function (rootElement) {
                if (!arguments.length) {
                    return _root;
                }
                _root = rootElement;
                return _chart;
            };

            /**
             * Returns the top SVGElement for this specific chart. You can also pass in a new SVGElement,
             * however this is usually handled by dc internally. Resetting the SVGElement on a chart outside
             * of dc internals may have unexpected consequences.
             * @method svg
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGElement SVGElement}
             * @param {SVGElement|d3.selection} [svgElement]
             * @return {SVGElement|d3.selection}
             * @return {dc.baseMixin}
             */
            _chart.svg = function (svgElement) {
                if (!arguments.length) {
                    return _svg;
                }
                _svg = svgElement;
                return _chart;
            };

            /**
             * Remove the chart's SVGElements from the dom and recreate the container SVGElement.
             * @method resetSvg
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/SVGElement SVGElement}
             * @return {SVGElement}
             */
            _chart.resetSvg = function () {
                _chart.select('svg').remove();
                return generateSvg();
            };

            function sizeSvg () {
                if (_svg) {
                    _svg
                        .attr('width', _chart.width())
                        .attr('height', _chart.height());
                }
            }

            function generateSvg () {
                _svg = _chart.root().append('svg');
                sizeSvg();
                return _svg;
            }

            /**
             * Set or get the filter printer function. The filter printer function is used to generate human
             * friendly text for filter value(s) associated with the chart instance. By default dc charts use a
             * default filter printer `dc.printers.filter` that provides simple printing support for both
             * single value and ranged filters.
             * @method filterPrinter
             * @memberof dc.baseMixin
             * @instance
             * @param {Function} [filterPrinterFunction=dc.printers.filter]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.filterPrinter = function (filterPrinterFunction) {
                if (!arguments.length) {
                    return _filterPrinter;
                }
                _filterPrinter = filterPrinterFunction;
                return _chart;
            };

            /**
             * If set, use the `visibility` attribute instead of the `display` attribute for showing/hiding
             * chart reset and filter controls, for less disruption to the layout.
             * @method controlsUseVisibility
             * @memberof dc.baseMixin
             * @instance
             * @param {Boolean} [controlsUseVisibility=false]
             * @return {Boolean}
             * @return {dc.baseMixin}
             **/
            _chart.controlsUseVisibility = function (_) {
                if (!arguments.length) {
                    return _controlsUseVisibility;
                }
                _controlsUseVisibility = _;
                return _chart;
            };

            /**
             * Turn on optional control elements within the root element. dc currently supports the
             * following html control elements.
             * * root.selectAll('.reset') - elements are turned on if the chart has an active filter. This type
             * of control element is usually used to store a reset link to allow user to reset filter on a
             * certain chart. This element will be turned off automatically if the filter is cleared.
             * * root.selectAll('.filter') elements are turned on if the chart has an active filter. The text
             * content of this element is then replaced with the current filter value using the filter printer
             * function. This type of element will be turned off automatically if the filter is cleared.
             * @method turnOnControls
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.turnOnControls = function () {
                if (_root) {
                    var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
                    _chart.selectAll('.reset').style(attribute, null);
                    _chart.selectAll('.filter').text(_filterPrinter(_chart.filters())).style(attribute, null);
                }
                return _chart;
            };

            /**
             * Turn off optional control elements within the root element.
             * @method turnOffControls
             * @memberof dc.baseMixin
             * @see {@link dc.baseMixin#turnOnControls turnOnControls}
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.turnOffControls = function () {
                if (_root) {
                    var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
                    var value = _chart.controlsUseVisibility() ? 'hidden' : 'none';
                    _chart.selectAll('.reset').style(attribute, value);
                    _chart.selectAll('.filter').style(attribute, value).text(_chart.filter());
                }
                return _chart;
            };

            /**
             * Set or get the animation transition duration (in milliseconds) for this chart instance.
             * @method transitionDuration
             * @memberof dc.baseMixin
             * @instance
             * @param {Number} [duration=750]
             * @return {Number}
             * @return {dc.baseMixin}
             */
            _chart.transitionDuration = function (duration) {
                if (!arguments.length) {
                    return _transitionDuration;
                }
                _transitionDuration = duration;
                return _chart;
            };

            _chart._mandatoryAttributes = function (_) {
                if (!arguments.length) {
                    return _mandatoryAttributes;
                }
                _mandatoryAttributes = _;
                return _chart;
            };

            function checkForMandatoryAttributes (a) {
                if (!_chart[a] || !_chart[a]()) {
                    throw new dc.errors.InvalidStateException('Mandatory attribute chart.' + a +
                        ' is missing on chart[#' + _chart.anchorName() + ']');
                }
            }

            /**
             * Invoking this method will force the chart to re-render everything from scratch. Generally it
             * should only be used to render the chart for the first time on the page or if you want to make
             * sure everything is redrawn from scratch instead of relying on the default incremental redrawing
             * behaviour.
             * @method render
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.render = function () {
                _height = _width = undefined; // force recalculate
                _listeners.preRender(_chart);

                if (_mandatoryAttributes) {
                    _mandatoryAttributes.forEach(checkForMandatoryAttributes);
                }

                var result = _chart._doRender();

                if (_legend) {
                    _legend.render();
                }

                _chart._activateRenderlets('postRender');

                return result;
            };

            _chart._activateRenderlets = function (event) {
                _listeners.pretransition(_chart);
                if (_chart.transitionDuration() > 0 && _svg) {
                    _svg.transition().duration(_chart.transitionDuration())
                        .each('end', function () {
                            _listeners.renderlet(_chart);
                            if (event) {
                                _listeners[event](_chart);
                            }
                        });
                } else {
                    _listeners.renderlet(_chart);
                    if (event) {
                        _listeners[event](_chart);
                    }
                }
            };

            /**
             * Calling redraw will cause the chart to re-render data changes incrementally. If there is no
             * change in the underlying data dimension then calling this method will have no effect on the
             * chart. Most chart interaction in dc will automatically trigger this method through internal
             * events (in particular {@link dc.redrawAll dc.redrawAll}); therefore, you only need to
             * manually invoke this function if data is manipulated outside of dc's control (for example if
             * data is loaded in the background using
             * {@link https://github.com/square/crossfilter/wiki/API-Reference#crossfilter_add crossfilter.add}.
             * @method redraw
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.redraw = function () {
                sizeSvg();
                _listeners.preRedraw(_chart);

                var result = _chart._doRedraw();

                if (_legend) {
                    _legend.render();
                }

                _chart._activateRenderlets('postRedraw');

                return result;
            };

            /**
             * Gets/sets the commit handler. If the chart has a commit handler, the handler will be called when
             * the chart's filters have changed, in order to send the filter data asynchronously to a server.
             *
             * Unlike other functions in dc.js, the commit handler is asynchronous. It takes two arguments:
             * a flag indicating whether this is a render (true) or a redraw (false), and a callback to be
             * triggered once the commit is filtered. The callback has the standard node.js continuation signature
             * with error first and result second.
             * @method commitHandler
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.commitHandler = function (commitHandler) {
                if (!arguments.length) {
                    return _commitHandler;
                }
                _commitHandler = commitHandler;
                return _chart;
            };

            /**
             * Redraws all charts in the same group as this chart, typically in reaction to a filter
             * change. If the chart has a {@link dc.baseMixin.commitFilter commitHandler}, it will
             * be executed and waited for.
             * @method redrawGroup
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.redrawGroup = function () {
                if (_commitHandler) {
                    _commitHandler(false, function (error, result) {
                        if (error) {
                            console.log(error);
                        } else {
                            dc.redrawAll(_chart.chartGroup());
                        }
                    });
                } else {
                    dc.redrawAll(_chart.chartGroup());
                }
                return _chart;
            };

            /**
             * Renders all charts in the same group as this chart. If the chart has a
             * {@link dc.baseMixin.commitFilter commitHandler}, it will be executed and waited for
             * @method renderGroup
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.renderGroup = function () {
                if (_commitHandler) {
                    _commitHandler(false, function (error, result) {
                        if (error) {
                            console.log(error);
                        } else {
                            dc.renderAll(_chart.chartGroup());
                        }
                    });
                } else {
                    dc.renderAll(_chart.chartGroup());
                }
                return _chart;
            };

            _chart._invokeFilteredListener = function (f) {
                if (f !== undefined) {
                    _listeners.filtered(_chart, f);
                }
            };

            _chart._invokeZoomedListener = function () {
                _listeners.zoomed(_chart);
            };

            var _hasFilterHandler = function (filters, filter) {
                if (filter === null || typeof(filter) === 'undefined') {
                    return filters.length > 0;
                }
                return filters.some(function (f) {
                    return filter <= f && filter >= f;
                });
            };

            /**
             * Set or get the has filter handler. The has filter handler is a function that checks to see if
             * the chart's current filters include a specific filter.  Using a custom has filter handler allows
             * you to change the way filters are checked for and replaced.
             * @method hasFilterHandler
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default has filter handler
             * chart.hasFilterHandler(function (filters, filter) {
     *     if (filter === null || typeof(filter) === 'undefined') {
     *         return filters.length > 0;
     *     }
     *     return filters.some(function (f) {
     *         return filter <= f && filter >= f;
     *     });
     * });
             *
             * // custom filter handler (no-op)
             * chart.hasFilterHandler(function(filters, filter) {
     *     return false;
     * });
             * @param {Function} [hasFilterHandler]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.hasFilterHandler = function (hasFilterHandler) {
                if (!arguments.length) {
                    return _hasFilterHandler;
                }
                _hasFilterHandler = hasFilterHandler;
                return _chart;
            };

            /**
             * Check whether any active filter or a specific filter is associated with particular chart instance.
             * This function is **not chainable**.
             * @method hasFilter
             * @memberof dc.baseMixin
             * @instance
             * @see {@link dc.baseMixin#hasFilterHandler hasFilterHandler}
             * @param {*} [filter]
             * @return {Boolean}
             */
            _chart.hasFilter = function (filter) {
                return _hasFilterHandler(_filters, filter);
            };

            var _removeFilterHandler = function (filters, filter) {
                for (var i = 0; i < filters.length; i++) {
                    if (filters[i] <= filter && filters[i] >= filter) {
                        filters.splice(i, 1);
                        break;
                    }
                }
                return filters;
            };

            /**
             * Set or get the remove filter handler. The remove filter handler is a function that removes a
             * filter from the chart's current filters. Using a custom remove filter handler allows you to
             * change how filters are removed or perform additional work when removing a filter, e.g. when
             * using a filter server other than crossfilter.
             *
             * Any changes should modify the `filters` array argument and return that array.
             * @method removeFilterHandler
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default remove filter handler
             * chart.removeFilterHandler(function (filters, filter) {
     *     for (var i = 0; i < filters.length; i++) {
     *         if (filters[i] <= filter && filters[i] >= filter) {
     *             filters.splice(i, 1);
     *             break;
     *         }
     *     }
     *     return filters;
     * });
             *
             * // custom filter handler (no-op)
             * chart.removeFilterHandler(function(filters, filter) {
     *     return filters;
     * });
             * @param {Function} [removeFilterHandler]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.removeFilterHandler = function (removeFilterHandler) {
                if (!arguments.length) {
                    return _removeFilterHandler;
                }
                _removeFilterHandler = removeFilterHandler;
                return _chart;
            };

            var _addFilterHandler = function (filters, filter) {
                filters.push(filter);
                return filters;
            };

            /**
             * Set or get the add filter handler. The add filter handler is a function that adds a filter to
             * the chart's filter list. Using a custom add filter handler allows you to change the way filters
             * are added or perform additional work when adding a filter, e.g. when using a filter server other
             * than crossfilter.
             *
             * Any changes should modify the `filters` array argument and return that array.
             * @method addFilterHandler
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default add filter handler
             * chart.addFilterHandler(function (filters, filter) {
     *     filters.push(filter);
     *     return filters;
     * });
             *
             * // custom filter handler (no-op)
             * chart.addFilterHandler(function(filters, filter) {
     *     return filters;
     * });
             * @param {Function} [addFilterHandler]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.addFilterHandler = function (addFilterHandler) {
                if (!arguments.length) {
                    return _addFilterHandler;
                }
                _addFilterHandler = addFilterHandler;
                return _chart;
            };

            var _resetFilterHandler = function (filters) {
                return [];
            };

            /**
             * Set or get the reset filter handler. The reset filter handler is a function that resets the
             * chart's filter list by returning a new list. Using a custom reset filter handler allows you to
             * change the way filters are reset, or perform additional work when resetting the filters,
             * e.g. when using a filter server other than crossfilter.
             *
             * This function should return an array.
             * @method resetFilterHandler
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default remove filter handler
             * function (filters) {
     *     return [];
     * }
             *
             * // custom filter handler (no-op)
             * chart.resetFilterHandler(function(filters) {
     *     return filters;
     * });
             * @param {Function} [resetFilterHandler]
             * @return {dc.baseMixin}
             */
            _chart.resetFilterHandler = function (resetFilterHandler) {
                if (!arguments.length) {
                    return _resetFilterHandler;
                }
                _resetFilterHandler = resetFilterHandler;
                return _chart;
            };

            function applyFilters () {
                if (_chart.dimension() && _chart.dimension().filter) {
                    var fs = _filterHandler(_chart.dimension(), _filters);
                    _filters = fs ? fs : _filters;
                }
            }

            /**
             * Replace the chart filter. This is equivalent to calling `chart.filter(null).filter(filter)`
             *
             * @method replaceFilter
             * @memberof dc.baseMixin
             * @instance
             * @param {*} [filter]
             * @return {dc.baseMixin}
             **/
            _chart.replaceFilter = function (filter) {
                _filters = _resetFilterHandler(_filters);
                _chart.filter(filter);
            };

            /**
             * Filter the chart by the given parameter, or return the current filter if no input parameter
             * is given.
             *
             * The filter parameter can take one of these forms:
             * * A single value: the value will be toggled (added if it is not present in the current
             * filters, removed if it is present)
             * * An array containing a single array of values (`[[value,value,value]]`): each value is
             * toggled
             * * When appropriate for the chart, a {@link dc.filters dc filter object} such as
             *   * {@link dc.filters.RangedFilter `dc.filters.RangedFilter`} for the
             * {@link dc.coordinateGridMixin dc.coordinateGridMixin} charts
             *   * {@link dc.filters.TwoDimensionalFilter `dc.filters.TwoDimensionalFilter`} for the
             * {@link dc.heatMap heat map}
             *   * {@link dc.filters.RangedTwoDimensionalFilter `dc.filters.RangedTwoDimensionalFilter`}
             * for the {@link dc.scatterPlot scatter plot}
             * * `null`: the filter will be reset using the
             * {@link dc.baseMixin#resetFilterHandler resetFilterHandler}
             *
             * Note that this is always a toggle (even when it doesn't make sense for the filter type). If
             * you wish to replace the current filter, either call `chart.filter(null)` first, or
             * equivalently, call {@link dc.baseMixin#replaceFilter `chart.replaceFilter(filter)`} instead.
             *
             * Each toggle is executed by checking if the value is already present using the
             * {@link dc.baseMixin#hasFilterHandler hasFilterHandler}; if it is not present, it is added
             * using the {@link dc.baseMixin#addFilterHandler addFilterHandler}; if it is already present,
             * it is removed using the {@link dc.baseMixin#removeFilterHandler removeFilterHandler}.
             *
             * Once the filters array has been updated, the filters are applied to the
             * crossfilter dimension, using the {@link dc.baseMixin#filterHandler filterHandler}.
             *
             * Once you have set the filters, call {@link dc.baseMixin#redrawGroup `chart.redrawGroup()`}
             * (or {@link dc.redrawAll `dc.redrawAll()`}) to redraw the chart's group.
             * @method filter
             * @memberof dc.baseMixin
             * @instance
             * @see {@link dc.baseMixin#addFilterHandler addFilterHandler}
             * @see {@link dc.baseMixin#removeFilterHandler removeFilterHandler}
             * @see {@link dc.baseMixin#resetFilterHandler resetFilterHandler}
             * @see {@link dc.baseMixin#filterHandler filterHandler}
             * @example
             * // filter by a single string
             * chart.filter('Sunday');
             * // filter by a single age
             * chart.filter(18);
             * // filter by a set of states
             * chart.filter([['MA', 'TX', 'ND', 'WA']]);
             * // filter by range -- note the use of dc.filters.RangedFilter, which is different
             * // from the syntax for filtering a crossfilter dimension directly, dimension.filter([15,20])
             * chart.filter(dc.filters.RangedFilter(15,20));
             * @param {*} [filter]
             * @return {dc.baseMixin}
             */
            _chart.filter = function (filter) {
                if (!arguments.length) {
                    return _filters.length > 0 ? _filters[0] : null;
                }
                if (filter instanceof Array && filter[0] instanceof Array && !filter.isFiltered) {
                    filter[0].forEach(function (d) {
                        if (_chart.hasFilter(d)) {
                            _removeFilterHandler(_filters, d);
                        } else {
                            _addFilterHandler(_filters, d);
                        }
                    });
                } else if (filter === null) {
                    _filters = _resetFilterHandler(_filters);
                } else {
                    if (_chart.hasFilter(filter)) {
                        _removeFilterHandler(_filters, filter);
                    } else {
                        _addFilterHandler(_filters, filter);
                    }
                }
                applyFilters();
                _chart._invokeFilteredListener(filter);

                if (_root !== null && _chart.hasFilter()) {
                    _chart.turnOnControls();
                } else {
                    _chart.turnOffControls();
                }

                return _chart;
            };

            /**
             * Returns all current filters. This method does not perform defensive cloning of the internal
             * filter array before returning, therefore any modification of the returned array will effect the
             * chart's internal filter storage.
             * @method filters
             * @memberof dc.baseMixin
             * @instance
             * @return {Array<*>}
             */
            _chart.filters = function () {
                return _filters;
            };

            _chart.highlightSelected = function (e) {
                d3.select(e).classed(dc.constants.SELECTED_CLASS, true);
                d3.select(e).classed(dc.constants.DESELECTED_CLASS, false);
            };

            _chart.fadeDeselected = function (e) {
                d3.select(e).classed(dc.constants.SELECTED_CLASS, false);
                d3.select(e).classed(dc.constants.DESELECTED_CLASS, true);
            };

            _chart.resetHighlight = function (e) {
                d3.select(e).classed(dc.constants.SELECTED_CLASS, false);
                d3.select(e).classed(dc.constants.DESELECTED_CLASS, false);
            };

            /**
             * This function is passed to d3 as the onClick handler for each chart. The default behavior is to
             * filter on the clicked datum (passed to the callback) and redraw the chart group.
             * @method onClick
             * @memberof dc.baseMixin
             * @instance
             * @param {*} datum
             */
            _chart.onClick = function (datum) {
                var filter = _chart.keyAccessor()(datum);
                dc.events.trigger(function () {
                    _chart.filter(filter);
                    _chart.redrawGroup();
                });
            };

            /**
             * Set or get the filter handler. The filter handler is a function that performs the filter action
             * on a specific dimension. Using a custom filter handler allows you to perform additional logic
             * before or after filtering.
             * @method filterHandler
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://github.com/square/crossfilter/wiki/API-Reference#dimension_filter crossfilter.dimension.filter}
             * @example
             * // default filter handler
             * chart.filterHandler(function (dimension, filters) {
     *     dimension.filter(null);
     *     if (filters.length === 0) {
     *         dimension.filter(null);
     *     } else {
     *         dimension.filterFunction(function (d) {
     *             for (var i = 0; i < filters.length; i++) {
     *                 var filter = filters[i];
     *                 if (filter.isFiltered && filter.isFiltered(d)) {
     *                     return true;
     *                 } else if (filter <= d && filter >= d) {
     *                     return true;
     *                 }
     *             }
     *             return false;
     *         });
     *     }
     *     return filters;
     * });
             *
             * // custom filter handler
             * chart.filterHandler(function(dimension, filter){
     *     var newFilter = filter + 10;
     *     dimension.filter(newFilter);
     *     return newFilter; // set the actual filter value to the new value
     * });
             * @param {Function} [filterHandler]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.filterHandler = function (filterHandler) {
                if (!arguments.length) {
                    return _filterHandler;
                }
                _filterHandler = filterHandler;
                return _chart;
            };

            // abstract function stub
            _chart._doRender = function () {
                // do nothing in base, should be overridden by sub-function
                return _chart;
            };

            _chart._doRedraw = function () {
                // do nothing in base, should be overridden by sub-function
                return _chart;
            };

            _chart.legendables = function () {
                // do nothing in base, should be overridden by sub-function
                return [];
            };

            _chart.legendHighlight = function () {
                // do nothing in base, should be overridden by sub-function
            };

            _chart.legendReset = function () {
                // do nothing in base, should be overridden by sub-function
            };

            _chart.legendToggle = function () {
                // do nothing in base, should be overriden by sub-function
            };

            _chart.isLegendableHidden = function () {
                // do nothing in base, should be overridden by sub-function
                return false;
            };

            /**
             * Set or get the key accessor function. The key accessor function is used to retrieve the key
             * value from the crossfilter group. Key values are used differently in different charts, for
             * example keys correspond to slices in a pie chart and x axis positions in a grid coordinate chart.
             * @method keyAccessor
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default key accessor
             * chart.keyAccessor(function(d) { return d.key; });
             * // custom key accessor for a multi-value crossfilter reduction
             * chart.keyAccessor(function(p) { return p.value.absGain; });
             * @param {Function} [keyAccessor]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.keyAccessor = function (keyAccessor) {
                if (!arguments.length) {
                    return _keyAccessor;
                }
                _keyAccessor = keyAccessor;
                return _chart;
            };

            /**
             * Set or get the value accessor function. The value accessor function is used to retrieve the
             * value from the crossfilter group. Group values are used differently in different charts, for
             * example values correspond to slice sizes in a pie chart and y axis positions in a grid
             * coordinate chart.
             * @method valueAccessor
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default value accessor
             * chart.valueAccessor(function(d) { return d.value; });
             * // custom value accessor for a multi-value crossfilter reduction
             * chart.valueAccessor(function(p) { return p.value.percentageGain; });
             * @param {Function} [valueAccessor]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.valueAccessor = function (valueAccessor) {
                if (!arguments.length) {
                    return _valueAccessor;
                }
                _valueAccessor = valueAccessor;
                return _chart;
            };

            /**
             * Set or get the label function. The chart class will use this function to render labels for each
             * child element in the chart, e.g. slices in a pie chart or bubbles in a bubble chart. Not every
             * chart supports the label function, for example line chart does not use this function
             * at all. By default, enables labels; pass false for the second parameter if this is not desired.
             * @method label
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default label function just return the key
             * chart.label(function(d) { return d.key; });
             * // label function has access to the standard d3 data binding and can get quite complicated
             * chart.label(function(d) { return d.data.key + '(' + Math.floor(d.data.value / all.value() * 100) + '%)'; });
             * @param {Function} [labelFunction]
             * @param {Boolean} [enableLabels=true]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.label = function (labelFunction, enableLabels) {
                if (!arguments.length) {
                    return _label;
                }
                _label = labelFunction;
                if ((enableLabels === undefined) || enableLabels) {
                    _renderLabel = true;
                }
                return _chart;
            };

            /**
             * Turn on/off label rendering
             * @method renderLabel
             * @memberof dc.baseMixin
             * @instance
             * @param {Boolean} [renderLabel=false]
             * @return {Boolean}
             * @return {dc.baseMixin}
             */
            _chart.renderLabel = function (renderLabel) {
                if (!arguments.length) {
                    return _renderLabel;
                }
                _renderLabel = renderLabel;
                return _chart;
            };

            /**
             * Set or get the title function. The chart class will use this function to render the SVGElement title
             * (usually interpreted by browser as tooltips) for each child element in the chart, e.g. a slice
             * in a pie chart or a bubble in a bubble chart. Almost every chart supports the title function;
             * however in grid coordinate charts you need to turn off the brush in order to see titles, because
             * otherwise the brush layer will block tooltip triggering.
             * @method title
             * @memberof dc.baseMixin
             * @instance
             * @example
             * // default title function shows "key: value"
             * chart.title(function(d) { return d.key + ': ' + d.value; });
             * // title function has access to the standard d3 data binding and can get quite complicated
             * chart.title(function(p) {
     *    return p.key.getFullYear()
     *        + '\n'
     *        + 'Index Gain: ' + numberFormat(p.value.absGain) + '\n'
     *        + 'Index Gain in Percentage: ' + numberFormat(p.value.percentageGain) + '%\n'
     *        + 'Fluctuation / Index Ratio: ' + numberFormat(p.value.fluctuationPercentage) + '%';
     * });
             * @param {Function} [titleFunction]
             * @return {Function}
             * @return {dc.baseMixin}
             */
            _chart.title = function (titleFunction) {
                if (!arguments.length) {
                    return _title;
                }
                _title = titleFunction;
                return _chart;
            };

            /**
             * Turn on/off title rendering, or return the state of the render title flag if no arguments are
             * given.
             * @method renderTitle
             * @memberof dc.baseMixin
             * @instance
             * @param {Boolean} [renderTitle=true]
             * @return {Boolean}
             * @return {dc.baseMixin}
             */
            _chart.renderTitle = function (renderTitle) {
                if (!arguments.length) {
                    return _renderTitle;
                }
                _renderTitle = renderTitle;
                return _chart;
            };

            /**
             * A renderlet is similar to an event listener on rendering event. Multiple renderlets can be added
             * to an individual chart.  Each time a chart is rerendered or redrawn the renderlets are invoked
             * right after the chart finishes its transitions, giving you a way to modify the SVGElements.
             * Renderlet functions take the chart instance as the only input parameter and you can
             * use the dc API or use raw d3 to achieve pretty much any effect.
             *
             * Use {@link dc.baseMixin#on on} with a 'renderlet' prefix.
             * Generates a random key for the renderlet, which makes it hard to remove.
             * @method renderlet
             * @memberof dc.baseMixin
             * @instance
             * @deprecated
             * @example
             * // do this instead of .renderlet(function(chart) { ... })
             * chart.on("renderlet", function(chart){
     *     // mix of dc API and d3 manipulation
     *     chart.select('g.y').style('display', 'none');
     *     // its a closure so you can also access other chart variable available in the closure scope
     *     moveChart.filter(chart.filter());
     * });
             * @param {Function} renderletFunction
             * @return {dc.baseMixin}
             */
            _chart.renderlet = dc.logger.deprecate(function (renderletFunction) {
                _chart.on('renderlet.' + dc.utils.uniqueId(), renderletFunction);
                return _chart;
            }, 'chart.renderlet has been deprecated.  Please use chart.on("renderlet.<renderletKey>", renderletFunction)');

            /**
             * Get or set the chart group to which this chart belongs. Chart groups are rendered or redrawn
             * together since it is expected they share the same underlying crossfilter data set.
             * @method chartGroup
             * @memberof dc.baseMixin
             * @instance
             * @param {String} [chartGroup]
             * @return {String}
             * @return {dc.baseMixin}
             */
            _chart.chartGroup = function (chartGroup) {
                if (!arguments.length) {
                    return _chartGroup;
                }
                if (!_isChild) {
                    dc.deregisterChart(_chart, _chartGroup);
                }
                _chartGroup = chartGroup;
                if (!_isChild) {
                    dc.registerChart(_chart, _chartGroup);
                }
                return _chart;
            };

            /**
             * Expire the internal chart cache. dc charts cache some data internally on a per chart basis to
             * speed up rendering and avoid unnecessary calculation; however it might be useful to clear the
             * cache if you have changed state which will affect rendering.  For example if you invoke the
             * {@link https://github.com/square/crossfilter/wiki/API-Reference#crossfilter_add crossfilter.add}
             * function or reset group or dimension after rendering it is a good idea to
             * clear the cache to make sure charts are rendered properly.
             * @method expireCache
             * @memberof dc.baseMixin
             * @instance
             * @return {dc.baseMixin}
             */
            _chart.expireCache = function () {
                // do nothing in base, should be overridden by sub-function
                return _chart;
            };

            /**
             * Attach a dc.legend widget to this chart. The legend widget will automatically draw legend labels
             * based on the color setting and names associated with each group.
             * @method legend
             * @memberof dc.baseMixin
             * @instance
             * @example
             * chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
             * @param {dc.legend} [legend]
             * @return {dc.legend}
             * @return {dc.baseMixin}
             */
            _chart.legend = function (legend) {
                if (!arguments.length) {
                    return _legend;
                }
                _legend = legend;
                _legend.parent(_chart);
                return _chart;
            };

            /**
             * Returns the internal numeric ID of the chart.
             * @method chartID
             * @memberof dc.baseMixin
             * @instance
             * @return {String}
             */
            _chart.chartID = function () {
                return _chart.__dcFlag__;
            };

            /**
             * Set chart options using a configuration object. Each key in the object will cause the method of
             * the same name to be called with the value to set that attribute for the chart.
             * @method options
             * @memberof dc.baseMixin
             * @instance
             * @example
             * chart.options({dimension: myDimension, group: myGroup});
             * @param {{}} opts
             * @return {dc.baseMixin}
             */
            _chart.options = function (opts) {
                var applyOptions = [
                    'anchor',
                    'group',
                    'xAxisLabel',
                    'yAxisLabel',
                    'stack',
                    'title',
                    'point',
                    'getColor',
                    'overlayGeoJson'
                ];

                for (var o in opts) {
                    if (typeof(_chart[o]) === 'function') {
                        if (opts[o] instanceof Array && applyOptions.indexOf(o) !== -1) {
                            _chart[o].apply(_chart, opts[o]);
                        } else {
                            _chart[o].call(_chart, opts[o]);
                        }
                    } else {
                        dc.logger.debug('Not a valid option setter name: ' + o);
                    }
                }
                return _chart;
            };

            /**
             * All dc chart instance supports the following listeners.
             * Supports the following events:
             * * `renderlet` - This listener function will be invoked after transitions after redraw and render. Replaces the
             * deprecated {@link dc.baseMixin#renderlet renderlet} method.
             * * `pretransition` - Like `.on('renderlet', ...)` but the event is fired before transitions start.
             * * `preRender` - This listener function will be invoked before chart rendering.
             * * `postRender` - This listener function will be invoked after chart finish rendering including
             * all renderlets' logic.
             * * `preRedraw` - This listener function will be invoked before chart redrawing.
             * * `postRedraw` - This listener function will be invoked after chart finish redrawing
             * including all renderlets' logic.
             * * `filtered` - This listener function will be invoked after a filter is applied, added or removed.
             * * `zoomed` - This listener function will be invoked after a zoom is triggered.
             * @method on
             * @memberof dc.baseMixin
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Internals#dispatch_on d3.dispatch.on}
             * @example
             * .on('renderlet', function(chart, filter){...})
             * .on('pretransition', function(chart, filter){...})
             * .on('preRender', function(chart){...})
             * .on('postRender', function(chart){...})
             * .on('preRedraw', function(chart){...})
             * .on('postRedraw', function(chart){...})
             * .on('filtered', function(chart, filter){...})
             * .on('zoomed', function(chart, filter){...})
             * @param {String} event
             * @param {Function} listener
             * @return {dc.baseMixin}
             */
            _chart.on = function (event, listener) {
                _listeners.on(event, listener);
                return _chart;
            };

            return _chart;
        };

        /**
         * Margin is a mixin that provides margin utility functions for both the Row Chart and Coordinate Grid
         * Charts.
         * @name marginMixin
         * @memberof dc
         * @mixin
         * @param {Object} _chart
         * @return {dc.marginMixin}
         */
        dc.marginMixin = function (_chart) {
            var _margin = {top: 10, right: 50, bottom: 30, left: 30};

            /**
             * Get or set the margins for a particular coordinate grid chart instance. The margins is stored as
             * an associative Javascript array.
             * @method margins
             * @memberof dc.marginMixin
             * @instance
             * @example
             * var leftMargin = chart.margins().left; // 30 by default
             * chart.margins().left = 50;
             * leftMargin = chart.margins().left; // now 50
             * @param {{top: Number, right: Number, left: Number, bottom: Number}} [margins={top: 10, right: 50, bottom: 30, left: 30}]
             * @return {{top: Number, right: Number, left: Number, bottom: Number}}
             * @return {dc.marginMixin}
             */
            _chart.margins = function (margins) {
                if (!arguments.length) {
                    return _margin;
                }
                _margin = margins;
                return _chart;
            };

            _chart.effectiveWidth = function () {
                return _chart.width() - _chart.margins().left - _chart.margins().right;
            };

            _chart.effectiveHeight = function () {
                return _chart.height() - _chart.margins().top - _chart.margins().bottom;
            };

            return _chart;
        };

        /**
         * The Color Mixin is an abstract chart functional class providing universal coloring support
         * as a mix-in for any concrete chart implementation.
         * @name colorMixin
         * @memberof dc
         * @mixin
         * @param {Object} _chart
         * @return {dc.colorMixin}
         */
        dc.colorMixin = function (_chart) {
            var _colors = d3.scale.category20c();
            var _defaultAccessor = true;

            var _colorAccessor = function (d) { return _chart.keyAccessor()(d); };

            /**
             * Retrieve current color scale or set a new color scale. This methods accepts any function that
             * operates like a d3 scale.
             * @method colors
             * @memberof dc.colorMixin
             * @instance
             * @see {@link http://github.com/mbostock/d3/wiki/Scales d3.scale}
             * @example
             * // alternate categorical scale
             * chart.colors(d3.scale.category20b());
             * // ordinal scale
             * chart.colors(d3.scale.ordinal().range(['red','green','blue']));
             * // convenience method, the same as above
             * chart.ordinalColors(['red','green','blue']);
             * // set a linear scale
             * chart.linearColors(["#4575b4", "#ffffbf", "#a50026"]);
             * @param {d3.scale} [colorScale=d3.scale.category20c()]
             * @return {d3.scale}
             * @return {dc.colorMixin}
             */
            _chart.colors = function (colorScale) {
                if (!arguments.length) {
                    return _colors;
                }
                if (colorScale instanceof Array) {
                    _colors = d3.scale.quantize().range(colorScale); // deprecated legacy support, note: this fails for ordinal domains
                } else {
                    _colors = d3.functor(colorScale);
                }
                return _chart;
            };

            /**
             * Convenience method to set the color scale to
             * {@link https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal d3.scale.ordinal} with
             * range `r`.
             * @method ordinalColors
             * @memberof dc.colorMixin
             * @instance
             * @param {Array<String>} r
             * @return {dc.colorMixin}
             */
            _chart.ordinalColors = function (r) {
                return _chart.colors(d3.scale.ordinal().range(r));
            };

            /**
             * Convenience method to set the color scale to an Hcl interpolated linear scale with range `r`.
             * @method linearColors
             * @memberof dc.colorMixin
             * @instance
             * @param {Array<Number>} r
             * @return {dc.colorMixin}
             */
            _chart.linearColors = function (r) {
                return _chart.colors(d3.scale.linear()
                    .range(r)
                    .interpolate(d3.interpolateHcl));
            };

            /**
             * Set or the get color accessor function. This function will be used to map a data point in a
             * crossfilter group to a color value on the color scale. The default function uses the key
             * accessor.
             * @method colorAccessor
             * @memberof dc.colorMixin
             * @instance
             * @example
             * // default index based color accessor
             * .colorAccessor(function (d, i){return i;})
             * // color accessor for a multi-value crossfilter reduction
             * .colorAccessor(function (d){return d.value.absGain;})
             * @param {Function} [colorAccessor]
             * @return {Function}
             * @return {dc.colorMixin}
             */
            _chart.colorAccessor = function (colorAccessor) {
                if (!arguments.length) {
                    return _colorAccessor;
                }
                _colorAccessor = colorAccessor;
                _defaultAccessor = false;
                return _chart;
            };

            // what is this?
            _chart.defaultColorAccessor = function () {
                return _defaultAccessor;
            };

            /**
             * Set or get the current domain for the color mapping function. The domain must be supplied as an
             * array.
             *
             * Note: previously this method accepted a callback function. Instead you may use a custom scale
             * set by {@link dc.colorMixin#colors .colors}.
             * @method colorDomain
             * @memberof dc.colorMixin
             * @instance
             * @param {Array<String>} [domain]
             * @return {Array<String>}
             * @return {dc.colorMixin}
             */
            _chart.colorDomain = function (domain) {
                if (!arguments.length) {
                    return _colors.domain();
                }
                _colors.domain(domain);
                return _chart;
            };

            /**
             * Set the domain by determining the min and max values as retrieved by
             * {@link dc.colorMixin#colorAccessor .colorAccessor} over the chart's dataset.
             * @method calculateColorDomain
             * @memberof dc.colorMixin
             * @instance
             * @return {dc.colorMixin}
             */
            _chart.calculateColorDomain = function () {
                var newDomain = [d3.min(_chart.data(), _chart.colorAccessor()),
                    d3.max(_chart.data(), _chart.colorAccessor())];
                _colors.domain(newDomain);
                return _chart;
            };

            /**
             * Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
             * @method getColor
             * @memberof dc.colorMixin
             * @instance
             * @param {*} d
             * @param {Number} [i]
             * @return {String}
             */
            _chart.getColor = function (d, i) {
                return _colors(_colorAccessor.call(this, d, i));
            };

            /**
             * Get the color for the datum d and counter i. This is used internally by charts to retrieve a color.
             * @method colorCalculator
             * @memberof dc.colorMixin
             * @instance
             * @param {*} [colorCalculator]
             * @return {*}
             */
            _chart.colorCalculator = function (colorCalculator) {
                if (!arguments.length) {
                    return _chart.getColor;
                }
                _chart.getColor = colorCalculator;
                return _chart;
            };

            return _chart;
        };

        /**
         * Coordinate Grid is an abstract base chart designed to support a number of coordinate grid based
         * concrete chart types, e.g. bar chart, line chart, and bubble chart.
         * @name coordinateGridMixin
         * @memberof dc
         * @mixin
         * @mixes dc.colorMixin
         * @mixes dc.marginMixin
         * @mixes dc.baseMixin
         * @param {Object} _chart
         * @return {dc.coordinateGridMixin}
         */
        dc.coordinateGridMixin = function (_chart) {
            var GRID_LINE_CLASS = 'grid-line';
            var HORIZONTAL_CLASS = 'horizontal';
            var VERTICAL_CLASS = 'vertical';
            var Y_AXIS_LABEL_CLASS = 'y-axis-label';
            var X_AXIS_LABEL_CLASS = 'x-axis-label';
            var DEFAULT_AXIS_LABEL_PADDING = 12;

            _chart = dc.colorMixin(dc.marginMixin(dc.baseMixin(_chart)));

            _chart.colors(d3.scale.category10());
            _chart._mandatoryAttributes().push('x');

            function zoomHandler () {
                _refocused = true;
                if (_zoomOutRestrict) {
                    _chart.x().domain(constrainRange(_chart.x().domain(), _xOriginalDomain));
                    if (_rangeChart) {
                        _chart.x().domain(constrainRange(_chart.x().domain(), _rangeChart.x().domain()));
                    }
                }

                var domain = _chart.x().domain();
                var domFilter = dc.filters.RangedFilter(domain[0], domain[1]);

                _chart.replaceFilter(domFilter);
                _chart.rescale();
                _chart.redraw();

                if (_rangeChart && !rangesEqual(_chart.filter(), _rangeChart.filter())) {
                    dc.events.trigger(function () {
                        _rangeChart.replaceFilter(domFilter);
                        _rangeChart.redraw();
                    });
                }

                _chart._invokeZoomedListener();

                dc.events.trigger(function () {
                    _chart.redrawGroup();
                }, dc.constants.EVENT_DELAY);

                _refocused = !rangesEqual(domain, _xOriginalDomain);
            }

            var _parent;
            var _g;
            var _chartBodyG;

            var _x;
            var _xOriginalDomain;
            var _xAxis = d3.svg.axis().orient('bottom');
            var _xUnits = dc.units.integers;
            var _xAxisPadding = 0;
            var _xElasticity = false;
            var _xAxisLabel;
            var _xAxisLabelPadding = 0;
            var _lastXDomain;

            var _y;
            var _yAxis = d3.svg.axis().orient('left');
            var _yAxisPadding = 0;
            var _yElasticity = false;
            var _yAxisLabel;
            var _yAxisLabelPadding = 0;

            var _brush = d3.svg.brush();
            var _brushOn = true;
            var _round;

            var _renderHorizontalGridLine = false;
            var _renderVerticalGridLine = false;

            var _refocused = false, _resizing = false;
            var _unitCount;

            var _zoomScale = [1, Infinity];
            var _zoomOutRestrict = true;

            var _zoom = d3.behavior.zoom().on('zoom', zoomHandler);
            var _nullZoom = d3.behavior.zoom().on('zoom', null);
            var _hasBeenMouseZoomable = false;

            var _rangeChart;
            var _focusChart;

            var _mouseZoomable = false;
            var _clipPadding = 0;

            var _outerRangeBandPadding = 0.5;
            var _rangeBandPadding = 0;

            var _useRightYAxis = false;

            /**
             * When changing the domain of the x or y scale, it is necessary to tell the chart to recalculate
             * and redraw the axes. (`.rescale()` is called automatically when the x or y scale is replaced
             * with {@link dc.coordinateGridMixin+x .x()} or {@link dc.coordinateGridMixin#y .y()}, and has
             * no effect on elastic scales.)
             * @method rescale
             * @memberof dc.coordinateGridMixin
             * @instance
             * @return {dc.coordinateGridMixin}
             */
            _chart.rescale = function () {
                _unitCount = undefined;
                _resizing = true;
                return _chart;
            };

            _chart.resizing = function () {
                return _resizing;
            };

            /**
             * Get or set the range selection chart associated with this instance. Setting the range selection
             * chart using this function will automatically update its selection brush when the current chart
             * zooms in. In return the given range chart will also automatically attach this chart as its focus
             * chart hence zoom in when range brush updates.
             *
             * Usually the range and focus charts will share a dimension. The range chart will set the zoom
             * boundaries for the focus chart, so its dimension values must be compatible with the domain of
             * the focus chart.
             *
             * See the [Nasdaq 100 Index](http://dc-js.github.com/dc.js/) example for this effect in action.
             * @method rangeChart
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {dc.coordinateGridMixin} [rangeChart]
             * @return {dc.coordinateGridMixin}
             */
            _chart.rangeChart = function (rangeChart) {
                if (!arguments.length) {
                    return _rangeChart;
                }
                _rangeChart = rangeChart;
                _rangeChart.focusChart(_chart);
                return _chart;
            };

            /**
             * Get or set the scale extent for mouse zooms.
             * @method zoomScale
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Array<Number|Date>} [extent=[1, Infinity]]
             * @return {Array<Number|Date>}
             * @return {dc.coordinateGridMixin}
             */
            _chart.zoomScale = function (extent) {
                if (!arguments.length) {
                    return _zoomScale;
                }
                _zoomScale = extent;
                return _chart;
            };

            /**
             * Get or set the zoom restriction for the chart. If true limits the zoom to origional domain of the chart.
             * @method zoomOutRestrict
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [zoomOutRestrict=true]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.zoomOutRestrict = function (zoomOutRestrict) {
                if (!arguments.length) {
                    return _zoomOutRestrict;
                }
                _zoomScale[0] = zoomOutRestrict ? 1 : 0;
                _zoomOutRestrict = zoomOutRestrict;
                return _chart;
            };

            _chart._generateG = function (parent) {
                if (parent === undefined) {
                    _parent = _chart.svg();
                } else {
                    _parent = parent;
                }

                var href = window.location.href.split('#')[0];

                _g = _parent.append('g');

                _chartBodyG = _g.append('g').attr('class', 'chart-body')
                    .attr('transform', 'translate(' + _chart.margins().left + ', ' + _chart.margins().top + ')')
                    .attr('clip-path', 'url(' + href + '#' + getClipPathId() + ')');

                return _g;
            };

            /**
             * Get or set the root g element. This method is usually used to retrieve the g element in order to
             * overlay custom svg drawing programatically. **Caution**: The root g element is usually generated
             * by dc.js internals, and resetting it might produce unpredictable result.
             * @method g
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {SVGElement} [gElement]
             * @return {SVGElement}
             * @return {dc.coordinateGridMixin}
             */
            _chart.g = function (gElement) {
                if (!arguments.length) {
                    return _g;
                }
                _g = gElement;
                return _chart;
            };

            /**
             * Set or get mouse zoom capability flag (default: false). When turned on the chart will be
             * zoomable using the mouse wheel. If the range selector chart is attached zooming will also update
             * the range selection brush on the associated range selector chart.
             * @method mouseZoomable
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [mouseZoomable=false]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.mouseZoomable = function (mouseZoomable) {
                if (!arguments.length) {
                    return _mouseZoomable;
                }
                _mouseZoomable = mouseZoomable;
                return _chart;
            };

            /**
             * Retrieve the svg group for the chart body.
             * @method chartBodyG
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {SVGElement} [chartBodyG]
             * @return {SVGElement}
             */
            _chart.chartBodyG = function (chartBodyG) {
                if (!arguments.length) {
                    return _chartBodyG;
                }
                _chartBodyG = chartBodyG;
                return _chart;
            };

            /**
             * **mandatory**
             *
             * Get or set the x scale. The x scale can be any d3
             * {@link https://github.com/mbostock/d3/wiki/Quantitative-Scales quantitive scale} or
             * {@link https://github.com/mbostock/d3/wiki/Ordinal-Scales ordinal scale}.
             * @method x
             * @memberof dc.coordinateGridMixin
             * @instance
             * @see {@link http://github.com/mbostock/d3/wiki/Scales d3.scale}
             * @example
             * // set x to a linear scale
             * chart.x(d3.scale.linear().domain([-2500, 2500]))
             * // set x to a time scale to generate histogram
             * chart.x(d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)]))
             * @param {d3.scale} [xScale]
             * @return {d3.scale}
             * @return {dc.coordinateGridMixin}
             */
            _chart.x = function (xScale) {
                if (!arguments.length) {
                    return _x;
                }
                _x = xScale;
                _xOriginalDomain = _x.domain();
                _chart.rescale();
                return _chart;
            };

            _chart.xOriginalDomain = function () {
                return _xOriginalDomain;
            };

            /**
             * Set or get the xUnits function. The coordinate grid chart uses the xUnits function to calculate
             * the number of data projections on x axis such as the number of bars for a bar chart or the
             * number of dots for a line chart. This function is expected to return a Javascript array of all
             * data points on x axis, or the number of points on the axis. [d3 time range functions
             * d3.time.days, d3.time.months, and
             * d3.time.years](https://github.com/mbostock/d3/wiki/Time-Intervals#aliases) are all valid xUnits
             * function. dc.js also provides a few units function, see the {@link dc.utils Utilities} section for
             * a list of built-in units functions. The default xUnits function is dc.units.integers.
             * @method xUnits
             * @memberof dc.coordinateGridMixin
             * @instance
             * @todo Add docs for utilities
             * @example
             * // set x units to count days
             * chart.xUnits(d3.time.days);
             * // set x units to count months
             * chart.xUnits(d3.time.months);
             *
             * // A custom xUnits function can be used as long as it follows the following interface:
             * // units in integer
             * function(start, end, xDomain) {
     *      // simply calculates how many integers in the domain
     *      return Math.abs(end - start);
     * };
             *
             * // fixed units
             * function(start, end, xDomain) {
     *      // be aware using fixed units will disable the focus/zoom ability on the chart
     *      return 1000;
             * @param {Function} [xUnits]
             * @return {Function}
             * @return {dc.coordinateGridMixin}
             */
            _chart.xUnits = function (xUnits) {
                if (!arguments.length) {
                    return _xUnits;
                }
                _xUnits = xUnits;
                return _chart;
            };

            /**
             * Set or get the x axis used by a particular coordinate grid chart instance. This function is most
             * useful when x axis customization is required. The x axis in dc.js is an instance of a [d3
             * axis object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis); therefore it supports any
             * valid d3 axis manipulation. **Caution**: The x axis is usually generated internally by dc;
             * resetting it may cause unexpected results.
             * @method xAxis
             * @memberof dc.coordinateGridMixin
             * @instance
             * @see {@link http://github.com/mbostock/d3/wiki/SVG-Axes d3.svg.axis}
             * @example
             * // customize x axis tick format
             * chart.xAxis().tickFormat(function(v) {return v + '%';});
             * // customize x axis tick values
             * chart.xAxis().tickValues([0, 100, 200, 300]);
             * @param {d3.svg.axis} [xAxis=d3.svg.axis().orient('bottom')]
             * @return {d3.svg.axis}
             * @return {dc.coordinateGridMixin}
             */
            _chart.xAxis = function (xAxis) {
                if (!arguments.length) {
                    return _xAxis;
                }
                _xAxis = xAxis;
                return _chart;
            };

            /**
             * Turn on/off elastic x axis behavior. If x axis elasticity is turned on, then the grid chart will
             * attempt to recalculate the x axis range whenever a redraw event is triggered.
             * @method elasticX
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [elasticX=false]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.elasticX = function (elasticX) {
                if (!arguments.length) {
                    return _xElasticity;
                }
                _xElasticity = elasticX;
                return _chart;
            };

            /**
             * Set or get x axis padding for the elastic x axis. The padding will be added to both end of the x
             * axis if elasticX is turned on; otherwise it is ignored.
             *
             * padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to
             * number or date x axes.  When padding a date axis, an integer represents number of days being padded
             * and a percentage string will be treated the same as an integer.
             * @method xAxisPadding
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Number|String} [padding=0]
             * @return {Number|String}
             * @return {dc.coordinateGridMixin}
             */
            _chart.xAxisPadding = function (padding) {
                if (!arguments.length) {
                    return _xAxisPadding;
                }
                _xAxisPadding = padding;
                return _chart;
            };

            /**
             * Returns the number of units displayed on the x axis using the unit measure configured by
             * .xUnits.
             * @method xUnitCount
             * @memberof dc.coordinateGridMixin
             * @instance
             * @return {Number}
             */
            _chart.xUnitCount = function () {
                if (_unitCount === undefined) {
                    var units = _chart.xUnits()(_chart.x().domain()[0], _chart.x().domain()[1], _chart.x().domain());

                    if (units instanceof Array) {
                        _unitCount = units.length;
                    } else {
                        _unitCount = units;
                    }
                }

                return _unitCount;
            };

            /**
             * Gets or sets whether the chart should be drawn with a right axis instead of a left axis. When
             * used with a chart in a composite chart, allows both left and right Y axes to be shown on a
             * chart.
             * @method useRightYAxis
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [useRightYAxis=false]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.useRightYAxis = function (useRightYAxis) {
                if (!arguments.length) {
                    return _useRightYAxis;
                }
                _useRightYAxis = useRightYAxis;
                return _chart;
            };

            /**
             * Returns true if the chart is using ordinal xUnits ({@link dc.units.ordinal dc.units.ordinal}, or false
             * otherwise. Most charts behave differently with ordinal data and use the result of this method to
             * trigger the appropriate logic.
             * @method isOrdinal
             * @memberof dc.coordinateGridMixin
             * @instance
             * @return {Boolean}
             */
            _chart.isOrdinal = function () {
                return _chart.xUnits() === dc.units.ordinal;
            };

            _chart._useOuterPadding = function () {
                return true;
            };

            _chart._ordinalXDomain = function () {
                var groups = _chart._computeOrderedGroups(_chart.data());
                return groups.map(_chart.keyAccessor());
            };

            function compareDomains (d1, d2) {
                return !d1 || !d2 || d1.length !== d2.length ||
                    d1.some(function (elem, i) { return (elem && d2[i]) ? elem.toString() !== d2[i].toString() : elem === d2[i]; });
            }

            function prepareXAxis (g, render) {
                if (!_chart.isOrdinal()) {
                    if (_chart.elasticX()) {
                        _x.domain([_chart.xAxisMin(), _chart.xAxisMax()]);
                    }
                } else { // _chart.isOrdinal()
                    if (_chart.elasticX() || _x.domain().length === 0) {
                        _x.domain(_chart._ordinalXDomain());
                    }
                }

                // has the domain changed?
                var xdom = _x.domain();
                if (render || compareDomains(_lastXDomain, xdom)) {
                    _chart.rescale();
                }
                _lastXDomain = xdom;

                // please can't we always use rangeBands for bar charts?
                if (_chart.isOrdinal()) {
                    _x.rangeBands([0, _chart.xAxisLength()], _rangeBandPadding,
                        _chart._useOuterPadding() ? _outerRangeBandPadding : 0);
                } else {
                    _x.range([0, _chart.xAxisLength()]);
                }

                _xAxis = _xAxis.scale(_chart.x());

                renderVerticalGridLines(g);
            }

            _chart.renderXAxis = function (g) {
                var axisXG = g.selectAll('g.x');

                if (axisXG.empty()) {
                    axisXG = g.append('g')
                        .attr('class', 'axis x')
                        .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart._xAxisY() + ')');
                }

                var axisXLab = g.selectAll('text.' + X_AXIS_LABEL_CLASS);
                if (axisXLab.empty() && _chart.xAxisLabel()) {
                    axisXLab = g.append('text')
                        .attr('class', X_AXIS_LABEL_CLASS)
                        .attr('transform', 'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) + ',' +
                            (_chart.height() - _xAxisLabelPadding) + ')')
                        .attr('text-anchor', 'middle');
                }
                if (_chart.xAxisLabel() && axisXLab.text() !== _chart.xAxisLabel()) {
                    axisXLab.text(_chart.xAxisLabel());
                }

                dc.transition(axisXG, _chart.transitionDuration())
                    .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart._xAxisY() + ')')
                    .call(_xAxis);
                dc.transition(axisXLab, _chart.transitionDuration())
                    .attr('transform', 'translate(' + (_chart.margins().left + _chart.xAxisLength() / 2) + ',' +
                        (_chart.height() - _xAxisLabelPadding) + ')');
            };

            function renderVerticalGridLines (g) {
                var gridLineG = g.selectAll('g.' + VERTICAL_CLASS);

                if (_renderVerticalGridLine) {
                    if (gridLineG.empty()) {
                        gridLineG = g.insert('g', ':first-child')
                            .attr('class', GRID_LINE_CLASS + ' ' + VERTICAL_CLASS)
                            .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
                    }

                    var ticks = _xAxis.tickValues() ? _xAxis.tickValues() :
                        (typeof _x.ticks === 'function' ? _x.ticks(_xAxis.ticks()[0]) : _x.domain());

                    var lines = gridLineG.selectAll('line')
                        .data(ticks);

                    // enter
                    var linesGEnter = lines.enter()
                        .append('line')
                        .attr('x1', function (d) {
                            return _x(d);
                        })
                        .attr('y1', _chart._xAxisY() - _chart.margins().top)
                        .attr('x2', function (d) {
                            return _x(d);
                        })
                        .attr('y2', 0)
                        .attr('opacity', 0);
                    dc.transition(linesGEnter, _chart.transitionDuration())
                        .attr('opacity', 1);

                    // update
                    dc.transition(lines, _chart.transitionDuration())
                        .attr('x1', function (d) {
                            return _x(d);
                        })
                        .attr('y1', _chart._xAxisY() - _chart.margins().top)
                        .attr('x2', function (d) {
                            return _x(d);
                        })
                        .attr('y2', 0);

                    // exit
                    lines.exit().remove();
                } else {
                    gridLineG.selectAll('line').remove();
                }
            }

            _chart._xAxisY = function () {
                return (_chart.height() - _chart.margins().bottom);
            };

            _chart.xAxisLength = function () {
                return _chart.effectiveWidth();
            };

            /**
             * Set or get the x axis label. If setting the label, you may optionally include additional padding to
             * the margin to make room for the label. By default the padded is set to 12 to accomodate the text height.
             * @method xAxisLabel
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {String} [labelText]
             * @param {Number} [padding=12]
             * @return {String}
             */
            _chart.xAxisLabel = function (labelText, padding) {
                if (!arguments.length) {
                    return _xAxisLabel;
                }
                _xAxisLabel = labelText;
                _chart.margins().bottom -= _xAxisLabelPadding;
                _xAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding;
                _chart.margins().bottom += _xAxisLabelPadding;
                return _chart;
            };

            _chart._prepareYAxis = function (g) {
                if (_y === undefined || _chart.elasticY()) {
                    if (_y === undefined) {
                        _y = d3.scale.linear();
                    }
                    var min = _chart.yAxisMin() || 0,
                        max = _chart.yAxisMax() || 0;
                    _y.domain([min, max]).rangeRound([_chart.yAxisHeight(), 0]);
                }

                _y.range([_chart.yAxisHeight(), 0]);
                _yAxis = _yAxis.scale(_y);

                if (_useRightYAxis) {
                    _yAxis.orient('right');
                }

                _chart._renderHorizontalGridLinesForAxis(g, _y, _yAxis);
            };

            _chart.renderYAxisLabel = function (axisClass, text, rotation, labelXPosition) {
                labelXPosition = labelXPosition || _yAxisLabelPadding;

                var axisYLab = _chart.g().selectAll('text.' + Y_AXIS_LABEL_CLASS + '.' + axisClass + '-label');
                var labelYPosition = (_chart.margins().top + _chart.yAxisHeight() / 2);
                if (axisYLab.empty() && text) {
                    axisYLab = _chart.g().append('text')
                        .attr('transform', 'translate(' + labelXPosition + ',' + labelYPosition + '),rotate(' + rotation + ')')
                        .attr('class', Y_AXIS_LABEL_CLASS + ' ' + axisClass + '-label')
                        .attr('text-anchor', 'middle')
                        .text(text);
                }
                if (text && axisYLab.text() !== text) {
                    axisYLab.text(text);
                }
                dc.transition(axisYLab, _chart.transitionDuration())
                    .attr('transform', 'translate(' + labelXPosition + ',' + labelYPosition + '),rotate(' + rotation + ')');
            };

            _chart.renderYAxisAt = function (axisClass, axis, position) {
                var axisYG = _chart.g().selectAll('g.' + axisClass);
                if (axisYG.empty()) {
                    axisYG = _chart.g().append('g')
                        .attr('class', 'axis ' + axisClass)
                        .attr('transform', 'translate(' + position + ',' + _chart.margins().top + ')');
                }

                dc.transition(axisYG, _chart.transitionDuration())
                    .attr('transform', 'translate(' + position + ',' + _chart.margins().top + ')')
                    .call(axis);
            };

            _chart.renderYAxis = function () {
                var axisPosition = _useRightYAxis ? (_chart.width() - _chart.margins().right) : _chart._yAxisX();
                _chart.renderYAxisAt('y', _yAxis, axisPosition);
                var labelPosition = _useRightYAxis ? (_chart.width() - _yAxisLabelPadding) : _yAxisLabelPadding;
                var rotation = _useRightYAxis ? 90 : -90;
                _chart.renderYAxisLabel('y', _chart.yAxisLabel(), rotation, labelPosition);
            };

            _chart._renderHorizontalGridLinesForAxis = function (g, scale, axis) {
                var gridLineG = g.selectAll('g.' + HORIZONTAL_CLASS);

                if (_renderHorizontalGridLine) {
                    var ticks = axis.tickValues() ? axis.tickValues() : scale.ticks(axis.ticks()[0]);

                    if (gridLineG.empty()) {
                        gridLineG = g.insert('g', ':first-child')
                            .attr('class', GRID_LINE_CLASS + ' ' + HORIZONTAL_CLASS)
                            .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
                    }

                    var lines = gridLineG.selectAll('line')
                        .data(ticks);

                    // enter
                    var linesGEnter = lines.enter()
                        .append('line')
                        .attr('x1', 1)
                        .attr('y1', function (d) {
                            return scale(d);
                        })
                        .attr('x2', _chart.xAxisLength())
                        .attr('y2', function (d) {
                            return scale(d);
                        })
                        .attr('opacity', 0);
                    dc.transition(linesGEnter, _chart.transitionDuration())
                        .attr('opacity', 1);

                    // update
                    dc.transition(lines, _chart.transitionDuration())
                        .attr('x1', 1)
                        .attr('y1', function (d) {
                            return scale(d);
                        })
                        .attr('x2', _chart.xAxisLength())
                        .attr('y2', function (d) {
                            return scale(d);
                        });

                    // exit
                    lines.exit().remove();
                } else {
                    gridLineG.selectAll('line').remove();
                }
            };

            _chart._yAxisX = function () {
                return _chart.useRightYAxis() ? _chart.width() - _chart.margins().right : _chart.margins().left;
            };

            /**
             * Set or get the y axis label. If setting the label, you may optionally include additional padding
             * to the margin to make room for the label. By default the padded is set to 12 to accomodate the
             * text height.
             * @method yAxisLabel
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {String} [labelText]
             * @param {Number} [padding=12]
             * @return {String}
             * @return {dc.coordinateGridMixin}
             */
            _chart.yAxisLabel = function (labelText, padding) {
                if (!arguments.length) {
                    return _yAxisLabel;
                }
                _yAxisLabel = labelText;
                _chart.margins().left -= _yAxisLabelPadding;
                _yAxisLabelPadding = (padding === undefined) ? DEFAULT_AXIS_LABEL_PADDING : padding;
                _chart.margins().left += _yAxisLabelPadding;
                return _chart;
            };

            /**
             * Get or set the y scale. The y scale is typically automatically determined by the chart implementation.
             * @method y
             * @memberof dc.coordinateGridMixin
             * @instance
             * @see {@link http://github.com/mbostock/d3/wiki/Scales d3.scale}
             * @param {d3.scale} [yScale]
             * @return {d3.scale}
             * @return {dc.coordinateGridMixin}
             */
            _chart.y = function (yScale) {
                if (!arguments.length) {
                    return _y;
                }
                _y = yScale;
                _chart.rescale();
                return _chart;
            };

            /**
             * Set or get the y axis used by the coordinate grid chart instance. This function is most useful
             * when y axis customization is required. The y axis in dc.js is simply an instance of a [d3 axis
             * object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-_axis); therefore it supports any
             * valid d3 axis manipulation. **Caution**: The y axis is usually generated internally by dc;
             * resetting it may cause unexpected results.
             * @method yAxis
             * @memberof dc.coordinateGridMixin
             * @instance
             * @see {@link http://github.com/mbostock/d3/wiki/SVG-Axes d3.svg.axis}
             * @example
             * // customize y axis tick format
             * chart.yAxis().tickFormat(function(v) {return v + '%';});
             * // customize y axis tick values
             * chart.yAxis().tickValues([0, 100, 200, 300]);
             * @param {d3.svg.axis} [yAxis=d3.svg.axis().orient('left')]
             * @return {d3.svg.axis}
             * @return {dc.coordinateGridMixin}
             */
            _chart.yAxis = function (yAxis) {
                if (!arguments.length) {
                    return _yAxis;
                }
                _yAxis = yAxis;
                return _chart;
            };

            /**
             * Turn on/off elastic y axis behavior. If y axis elasticity is turned on, then the grid chart will
             * attempt to recalculate the y axis range whenever a redraw event is triggered.
             * @method elasticY
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [elasticY=false]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.elasticY = function (elasticY) {
                if (!arguments.length) {
                    return _yElasticity;
                }
                _yElasticity = elasticY;
                return _chart;
            };

            /**
             * Turn on/off horizontal grid lines.
             * @method renderHorizontalGridLines
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [renderHorizontalGridLines=false]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.renderHorizontalGridLines = function (renderHorizontalGridLines) {
                if (!arguments.length) {
                    return _renderHorizontalGridLine;
                }
                _renderHorizontalGridLine = renderHorizontalGridLines;
                return _chart;
            };

            /**
             * Turn on/off vertical grid lines.
             * @method renderVerticalGridLines
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [renderVerticalGridLines=false]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.renderVerticalGridLines = function (renderVerticalGridLines) {
                if (!arguments.length) {
                    return _renderVerticalGridLine;
                }
                _renderVerticalGridLine = renderVerticalGridLines;
                return _chart;
            };

            /**
             * Calculates the minimum x value to display in the chart. Includes xAxisPadding if set.
             * @method xAxisMin
             * @memberof dc.coordinateGridMixin
             * @instance
             * @return {*}
             */
            _chart.xAxisMin = function () {
                var min = d3.min(_chart.data(), function (e) {
                    return _chart.keyAccessor()(e);
                });
                return dc.utils.subtract(min, _xAxisPadding);
            };

            /**
             * Calculates the maximum x value to display in the chart. Includes xAxisPadding if set.
             * @method xAxisMax
             * @memberof dc.coordinateGridMixin
             * @instance
             * @return {*}
             */
            _chart.xAxisMax = function () {
                var max = d3.max(_chart.data(), function (e) {
                    return _chart.keyAccessor()(e);
                });
                return dc.utils.add(max, _xAxisPadding);
            };

            /**
             * Calculates the minimum y value to display in the chart. Includes yAxisPadding if set.
             * @method yAxisMin
             * @memberof dc.coordinateGridMixin
             * @instance
             * @return {*}
             */
            _chart.yAxisMin = function () {
                var min = d3.min(_chart.data(), function (e) {
                    return _chart.valueAccessor()(e);
                });
                return dc.utils.subtract(min, _yAxisPadding);
            };

            /**
             * Calculates the maximum y value to display in the chart. Includes yAxisPadding if set.
             * @method yAxisMax
             * @memberof dc.coordinateGridMixin
             * @instance
             * @return {*}
             */
            _chart.yAxisMax = function () {
                var max = d3.max(_chart.data(), function (e) {
                    return _chart.valueAccessor()(e);
                });
                return dc.utils.add(max, _yAxisPadding);
            };

            /**
             * Set or get y axis padding for the elastic y axis. The padding will be added to the top and
             * bottom of the y axis if elasticY is turned on; otherwise it is ignored.
             *
             * Padding can be an integer or percentage in string (e.g. '10%'). Padding can be applied to
             * number or date axes. When padding a date axis, an integer represents number of days being padded
             * and a percentage string will be treated the same as an integer.
             * @method yAxisPadding
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Number|String} [padding=0]
             * @return {Number}
             * @return {dc.coordinateGridMixin}
             */
            _chart.yAxisPadding = function (padding) {
                if (!arguments.length) {
                    return _yAxisPadding;
                }
                _yAxisPadding = padding;
                return _chart;
            };

            _chart.yAxisHeight = function () {
                return _chart.effectiveHeight();
            };

            /**
             * Set or get the rounding function used to quantize the selection when brushing is enabled.
             * @method round
             * @memberof dc.coordinateGridMixin
             * @instance
             * @example
             * // set x unit round to by month, this will make sure range selection brush will
             * // select whole months
             * chart.round(d3.time.month.round);
             * @param {Function} [round]
             * @return {Function}
             * @return {dc.coordinateGridMixin}
             */
            _chart.round = function (round) {
                if (!arguments.length) {
                    return _round;
                }
                _round = round;
                return _chart;
            };

            _chart._rangeBandPadding = function (_) {
                if (!arguments.length) {
                    return _rangeBandPadding;
                }
                _rangeBandPadding = _;
                return _chart;
            };

            _chart._outerRangeBandPadding = function (_) {
                if (!arguments.length) {
                    return _outerRangeBandPadding;
                }
                _outerRangeBandPadding = _;
                return _chart;
            };

            dc.override(_chart, 'filter', function (_) {
                if (!arguments.length) {
                    return _chart._filter();
                }

                _chart._filter(_);

                if (_) {
                    _chart.brush().extent(_);
                } else {
                    _chart.brush().clear();
                }

                return _chart;
            });

            _chart.brush = function (_) {
                if (!arguments.length) {
                    return _brush;
                }
                _brush = _;
                return _chart;
            };

            function brushHeight () {
                return _chart._xAxisY() - _chart.margins().top;
            }

            _chart.renderBrush = function (g) {
                if (_brushOn) {
                    _brush.on('brush', _chart._brushing);
                    _brush.on('brushstart', _chart._disableMouseZoom);
                    _brush.on('brushend', configureMouseZoom);

                    var gBrush = g.append('g')
                        .attr('class', 'brush')
                        .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')')
                        .call(_brush.x(_chart.x()));
                    _chart.setBrushY(gBrush, false);
                    _chart.setHandlePaths(gBrush);

                    if (_chart.hasFilter()) {
                        _chart.redrawBrush(g, false);
                    }
                }
            };

            _chart.setHandlePaths = function (gBrush) {
                gBrush.selectAll('.resize').append('path').attr('d', _chart.resizeHandlePath);
            };

            _chart.setBrushY = function (gBrush) {
                gBrush.selectAll('rect')
                    .attr('height', brushHeight());
                gBrush.selectAll('.resize path')
                    .attr('d', _chart.resizeHandlePath);
            };

            _chart.extendBrush = function () {
                var extent = _brush.extent();
                if (_chart.round()) {
                    extent[0] = extent.map(_chart.round())[0];
                    extent[1] = extent.map(_chart.round())[1];

                    _g.select('.brush')
                        .call(_brush.extent(extent));
                }
                return extent;
            };

            _chart.brushIsEmpty = function (extent) {
                return _brush.empty() || !extent || extent[1] <= extent[0];
            };

            _chart._brushing = function () {
                var extent = _chart.extendBrush();

                _chart.redrawBrush(_g, false);

                if (_chart.brushIsEmpty(extent)) {
                    dc.events.trigger(function () {
                        _chart.filter(null);
                        _chart.redrawGroup();
                    }, dc.constants.EVENT_DELAY);
                } else {
                    var rangedFilter = dc.filters.RangedFilter(extent[0], extent[1]);

                    dc.events.trigger(function () {
                        _chart.replaceFilter(rangedFilter);
                        _chart.redrawGroup();
                    }, dc.constants.EVENT_DELAY);
                }
            };

            _chart.redrawBrush = function (g, doTransition) {
                if (_brushOn) {
                    if (_chart.filter() && _chart.brush().empty()) {
                        _chart.brush().extent(_chart.filter());
                    }

                    var gBrush = dc.optionalTransition(doTransition, _chart.transitionDuration())(g.select('g.brush'));
                    _chart.setBrushY(gBrush);
                    gBrush.call(_chart.brush()
                        .x(_chart.x())
                        .extent(_chart.brush().extent()));
                }

                _chart.fadeDeselectedArea();
            };

            _chart.fadeDeselectedArea = function () {
                // do nothing, sub-chart should override this function
            };

            // borrowed from Crossfilter example
            _chart.resizeHandlePath = function (d) {
                var e = +(d === 'e'), x = e ? 1 : -1, y = brushHeight() / 3;
                return 'M' + (0.5 * x) + ',' + y +
                    'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6) +
                    'V' + (2 * y - 6) +
                    'A6,6 0 0 ' + e + ' ' + (0.5 * x) + ',' + (2 * y) +
                    'Z' +
                    'M' + (2.5 * x) + ',' + (y + 8) +
                    'V' + (2 * y - 8) +
                    'M' + (4.5 * x) + ',' + (y + 8) +
                    'V' + (2 * y - 8);
            };

            function getClipPathId () {
                return _chart.anchorName().replace(/[ .#=\[\]]/g, '-') + '-clip';
            }

            /**
             * Get or set the padding in pixels for the clip path. Once set padding will be applied evenly to
             * the top, left, right, and bottom when the clip path is generated. If set to zero, the clip area
             * will be exactly the chart body area minus the margins.
             * @method clipPadding
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Number} [padding=5]
             * @return {Number}
             * @return {dc.coordinateGridMixin}
             */
            _chart.clipPadding = function (padding) {
                if (!arguments.length) {
                    return _clipPadding;
                }
                _clipPadding = padding;
                return _chart;
            };

            function generateClipPath () {
                var defs = dc.utils.appendOrSelect(_parent, 'defs');
                // cannot select <clippath> elements; bug in WebKit, must select by id
                // https://groups.google.com/forum/#!topic/d3-js/6EpAzQ2gU9I
                var id = getClipPathId();
                var chartBodyClip = dc.utils.appendOrSelect(defs, '#' + id, 'clipPath').attr('id', id);

                var padding = _clipPadding * 2;

                dc.utils.appendOrSelect(chartBodyClip, 'rect')
                    .attr('width', _chart.xAxisLength() + padding)
                    .attr('height', _chart.yAxisHeight() + padding)
                    .attr('transform', 'translate(-' + _clipPadding + ', -' + _clipPadding + ')');
            }

            _chart._preprocessData = function () {};

            _chart._doRender = function () {
                _chart.resetSvg();

                _chart._preprocessData();

                _chart._generateG();
                generateClipPath();

                drawChart(true);

                configureMouseZoom();

                return _chart;
            };

            _chart._doRedraw = function () {
                _chart._preprocessData();

                drawChart(false);
                generateClipPath();

                return _chart;
            };

            function drawChart (render) {
                if (_chart.isOrdinal()) {
                    _brushOn = false;
                }

                prepareXAxis(_chart.g(), render);
                _chart._prepareYAxis(_chart.g());

                _chart.plotData();

                if (_chart.elasticX() || _resizing || render) {
                    _chart.renderXAxis(_chart.g());
                }

                if (_chart.elasticY() || _resizing || render) {
                    _chart.renderYAxis(_chart.g());
                }

                if (render) {
                    _chart.renderBrush(_chart.g(), false);
                } else {
                    _chart.redrawBrush(_chart.g(), _resizing);
                }
                _chart.fadeDeselectedArea();
                _resizing = false;
            }

            function configureMouseZoom () {
                if (_mouseZoomable) {
                    _chart._enableMouseZoom();
                } else if (_hasBeenMouseZoomable) {
                    _chart._disableMouseZoom();
                }
            }

            _chart._enableMouseZoom = function () {
                _hasBeenMouseZoomable = true;
                _zoom.x(_chart.x())
                    .scaleExtent(_zoomScale)
                    .size([_chart.width(), _chart.height()])
                    .duration(_chart.transitionDuration());
                _chart.root().call(_zoom);
            };

            _chart._disableMouseZoom = function () {
                _chart.root().call(_nullZoom);
            };

            function constrainRange (range, constraint) {
                var constrainedRange = [];
                constrainedRange[0] = d3.max([range[0], constraint[0]]);
                constrainedRange[1] = d3.min([range[1], constraint[1]]);
                return constrainedRange;
            }

            /**
             * Zoom this chart to focus on the given range. The given range should be an array containing only
             * 2 elements (`[start, end]`) defining a range in the x domain. If the range is not given or set
             * to null, then the zoom will be reset. _For focus to work elasticX has to be turned off;
             * otherwise focus will be ignored.
             * @method focus
             * @memberof dc.coordinateGridMixin
             * @instance
             * @example
             * chart.on('renderlet', function(chart) {
     *     // smooth the rendering through event throttling
     *     dc.events.trigger(function(){
     *          // focus some other chart to the range selected by user on this chart
     *          someOtherChart.focus(chart.filter());
     *     });
     * })
             * @param {Array<Number>} [range]
             */
            _chart.focus = function (range) {
                if (hasRangeSelected(range)) {
                    _chart.x().domain(range);
                } else {
                    _chart.x().domain(_xOriginalDomain);
                }

                _zoom.x(_chart.x());
                zoomHandler();
            };

            _chart.refocused = function () {
                return _refocused;
            };

            _chart.focusChart = function (c) {
                if (!arguments.length) {
                    return _focusChart;
                }
                _focusChart = c;
                _chart.on('filtered', function (chart) {
                    if (!chart.filter()) {
                        dc.events.trigger(function () {
                            _focusChart.x().domain(_focusChart.xOriginalDomain());
                        });
                    } else if (!rangesEqual(chart.filter(), _focusChart.filter())) {
                        dc.events.trigger(function () {
                            _focusChart.focus(chart.filter());
                        });
                    }
                });
                return _chart;
            };

            function rangesEqual (range1, range2) {
                if (!range1 && !range2) {
                    return true;
                } else if (!range1 || !range2) {
                    return false;
                } else if (range1.length === 0 && range2.length === 0) {
                    return true;
                } else if (range1[0].valueOf() === range2[0].valueOf() &&
                    range1[1].valueOf() === range2[1].valueOf()) {
                    return true;
                }
                return false;
            }

            /**
             * Turn on/off the brush-based range filter. When brushing is on then user can drag the mouse
             * across a chart with a quantitative scale to perform range filtering based on the extent of the
             * brush, or click on the bars of an ordinal bar chart or slices of a pie chart to filter and
             * un-filter them. However turning on the brush filter will disable other interactive elements on
             * the chart such as highlighting, tool tips, and reference lines. Zooming will still be possible
             * if enabled, but only via scrolling (panning will be disabled.)
             * @method brushOn
             * @memberof dc.coordinateGridMixin
             * @instance
             * @param {Boolean} [brushOn=true]
             * @return {Boolean}
             * @return {dc.coordinateGridMixin}
             */
            _chart.brushOn = function (brushOn) {
                if (!arguments.length) {
                    return _brushOn;
                }
                _brushOn = brushOn;
                return _chart;
            };

            function hasRangeSelected (range) {
                return range instanceof Array && range.length > 1;
            }

            return _chart;
        };

        /**
         * Stack Mixin is an mixin that provides cross-chart support of stackability using d3.layout.stack.
         * @name stackMixin
         * @memberof dc
         * @mixin
         * @param {Object} _chart
         * @return {dc.stackMixin}
         */
        dc.stackMixin = function (_chart) {

            function prepareValues (layer, layerIdx) {
                var valAccessor = layer.accessor || _chart.valueAccessor();
                layer.name = String(layer.name || layerIdx);
                layer.values = layer.group.all().map(function (d, i) {
                    return {
                        x: _chart.keyAccessor()(d, i),
                        y: layer.hidden ? null : valAccessor(d, i),
                        data: d,
                        layer: layer.name,
                        hidden: layer.hidden
                    };
                });

                layer.values = layer.values.filter(domainFilter());
                return layer.values;
            }

            var _stackLayout = d3.layout.stack()
                .values(prepareValues);

            var _stack = [];
            var _titles = {};

            var _hidableStacks = false;

            function domainFilter () {
                if (!_chart.x()) {
                    return d3.functor(true);
                }
                var xDomain = _chart.x().domain();
                if (_chart.isOrdinal()) {
                    // TODO #416
                    //var domainSet = d3.set(xDomain);
                    return function () {
                        return true; //domainSet.has(p.x);
                    };
                }
                if (_chart.elasticX()) {
                    return function () { return true; };
                }
                return function (p) {
                    //return true;
                    return p.x >= xDomain[0] && p.x <= xDomain[xDomain.length - 1];
                };
            }

            /**
             * Stack a new crossfilter group onto this chart with an optional custom value accessor. All stacks
             * in the same chart will share the same key accessor and therefore the same set of keys.
             *
             * For example, in a stacked bar chart, the bars of each stack will be positioned using the same set
             * of keys on the x axis, while stacked vertically. If name is specified then it will be used to
             * generate the legend label.
             * @method stack
             * @memberof dc.stackMixin
             * @instance
             * @see {@link https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce crossfilter.group}
             * @example
             * // stack group using default accessor
             * chart.stack(valueSumGroup)
             * // stack group using custom accessor
             * .stack(avgByDayGroup, function(d){return d.value.avgByDay;});
             * @param {crossfilter.group} group
             * @param {String} [name]
             * @param {Function} [accessor]
             * @return {Array<{group: crossfilter.group, name: String, accessor: Function}>}
             * @return {dc.stackMixin}
             */
            _chart.stack = function (group, name, accessor) {
                if (!arguments.length) {
                    return _stack;
                }

                if (arguments.length <= 2) {
                    accessor = name;
                }

                var layer = {group: group};
                if (typeof name === 'string') {
                    layer.name = name;
                }
                if (typeof accessor === 'function') {
                    layer.accessor = accessor;
                }
                _stack.push(layer);

                return _chart;
            };

            dc.override(_chart, 'group', function (g, n, f) {
                if (!arguments.length) {
                    return _chart._group();
                }
                _stack = [];
                _titles = {};
                _chart.stack(g, n);
                if (f) {
                    _chart.valueAccessor(f);
                }
                return _chart._group(g, n);
            });

            /**
             * Allow named stacks to be hidden or shown by clicking on legend items.
             * This does not affect the behavior of hideStack or showStack.
             * @method hidableStacks
             * @memberof dc.stackMixin
             * @instance
             * @param {Boolean} [hidableStacks=false]
             * @return {Boolean}
             * @return {dc.stackMixin}
             */
            _chart.hidableStacks = function (hidableStacks) {
                if (!arguments.length) {
                    return _hidableStacks;
                }
                _hidableStacks = hidableStacks;
                return _chart;
            };

            function findLayerByName (n) {
                var i = _stack.map(dc.pluck('name')).indexOf(n);
                return _stack[i];
            }

            /**
             * Hide all stacks on the chart with the given name.
             * The chart must be re-rendered for this change to appear.
             * @method hideStack
             * @memberof dc.stackMixin
             * @instance
             * @param {String} stackName
             * @return {dc.stackMixin}
             */
            _chart.hideStack = function (stackName) {
                var layer = findLayerByName(stackName);
                if (layer) {
                    layer.hidden = true;
                }
                return _chart;
            };

            /**
             * Show all stacks on the chart with the given name.
             * The chart must be re-rendered for this change to appear.
             * @method showStack
             * @memberof dc.stackMixin
             * @instance
             * @param {String} stackName
             * @return {dc.stackMixin}
             */
            _chart.showStack = function (stackName) {
                var layer = findLayerByName(stackName);
                if (layer) {
                    layer.hidden = false;
                }
                return _chart;
            };

            _chart.getValueAccessorByIndex = function (index) {
                return _stack[index].accessor || _chart.valueAccessor();
            };

            _chart.yAxisMin = function () {
                var min = d3.min(flattenStack(), function (p) {
                    return (p.y < 0) ? (p.y + p.y0) : p.y0;
                });

                return dc.utils.subtract(min, _chart.yAxisPadding());

            };

            _chart.yAxisMax = function () {
                var max = d3.max(flattenStack(), function (p) {
                    return (p.y > 0) ? (p.y + p.y0) : p.y0;
                });

                return dc.utils.add(max, _chart.yAxisPadding());
            };

            function flattenStack () {
                var valueses = _chart.data().map(function (layer) { return layer.values; });
                return Array.prototype.concat.apply([], valueses);
            }

            _chart.xAxisMin = function () {
                var min = d3.min(flattenStack(), dc.pluck('x'));
                return dc.utils.subtract(min, _chart.xAxisPadding());
            };

            _chart.xAxisMax = function () {
                var max = d3.max(flattenStack(), dc.pluck('x'));
                return dc.utils.add(max, _chart.xAxisPadding());
            };

            /**
             * Set or get the title function. Chart class will use this function to render svg title (usually interpreted by
             * browser as tooltips) for each child element in the chart, i.e. a slice in a pie chart or a bubble in a bubble chart.
             * Almost every chart supports title function however in grid coordinate chart you need to turn off brush in order to
             * use title otherwise the brush layer will block tooltip trigger.
             *
             * If the first argument is a stack name, the title function will get or set the title for that stack. If stackName
             * is not provided, the first stack is implied.
             * @method title
             * @memberof dc.stackMixin
             * @instance
             * @example
             * // set a title function on 'first stack'
             * chart.title('first stack', function(d) { return d.key + ': ' + d.value; });
             * // get a title function from 'second stack'
             * var secondTitleFunction = chart.title('second stack');
             * @param {String} [stackName]
             * @param {Function} [titleAccessor]
             * @return {String}
             * @return {dc.stackMixin}
             */
            dc.override(_chart, 'title', function (stackName, titleAccessor) {
                if (!stackName) {
                    return _chart._title();
                }

                if (typeof stackName === 'function') {
                    return _chart._title(stackName);
                }
                if (stackName === _chart._groupName && typeof titleAccessor === 'function') {
                    return _chart._title(titleAccessor);
                }

                if (typeof titleAccessor !== 'function') {
                    return _titles[stackName] || _chart._title();
                }

                _titles[stackName] = titleAccessor;

                return _chart;
            });

            /**
             * Gets or sets the stack layout algorithm, which computes a baseline for each stack and
             * propagates it to the next
             * @method stackLayout
             * @memberof dc.stackMixin
             * @instance
             * @see {@link http://github.com/mbostock/d3/wiki/Stack-Layout d3.layout.stack}
             * @param {Function} [stack=d3.layout.stack]
             * @return {Function}
             * @return {dc.stackMixin}
             */
            _chart.stackLayout = function (stack) {
                if (!arguments.length) {
                    return _stackLayout;
                }
                _stackLayout = stack;
                if (_stackLayout.values() === d3.layout.stack().values()) {
                    _stackLayout.values(prepareValues);
                }
                return _chart;
            };

            function visability (l) {
                return !l.hidden;
            }

            _chart.data(function () {
                var layers = _stack.filter(visability);
                return layers.length ? _chart.stackLayout()(layers) : [];
            });

            _chart._ordinalXDomain = function () {
                var flat = flattenStack().map(dc.pluck('data'));
                var ordered = _chart._computeOrderedGroups(flat);
                return ordered.map(_chart.keyAccessor());
            };

            _chart.colorAccessor(function (d) {
                var layer = this.layer || this.name || d.name || d.layer;
                return layer;
            });

            _chart.legendables = function () {
                return _stack.map(function (layer, i) {
                    return {
                        chart: _chart,
                        name: layer.name,
                        hidden: layer.hidden || false,
                        color: _chart.getColor.call(layer, layer.values, i)
                    };
                });
            };

            _chart.isLegendableHidden = function (d) {
                var layer = findLayerByName(d.name);
                return layer ? layer.hidden : false;
            };

            _chart.legendToggle = function (d) {
                if (_hidableStacks) {
                    if (_chart.isLegendableHidden(d)) {
                        _chart.showStack(d.name);
                    } else {
                        _chart.hideStack(d.name);
                    }
                    //_chart.redraw();
                    _chart.renderGroup();
                }
            };

            return _chart;
        };

        /**
         * Cap is a mixin that groups small data elements below a _cap_ into an *others* grouping for both the
         * Row and Pie Charts.
         *
         * The top ordered elements in the group up to the cap amount will be kept in the chart, and the rest
         * will be replaced with an *others* element, with value equal to the sum of the replaced values. The
         * keys of the elements below the cap limit are recorded in order to filter by those keys when the
         * others* element is clicked.
         * @name capMixin
         * @memberof dc
         * @mixin
         * @param {Object} _chart
         * @return {dc.capMixin}
         */
        dc.capMixin = function (_chart) {

            var _cap = Infinity;

            var _othersLabel = 'Others';

            var _othersGrouper = function (topRows) {
                var topRowsSum = d3.sum(topRows, _chart.valueAccessor()),
                    allRows = _chart.group().all(),
                    allRowsSum = d3.sum(allRows, _chart.valueAccessor()),
                    topKeys = topRows.map(_chart.keyAccessor()),
                    allKeys = allRows.map(_chart.keyAccessor()),
                    topSet = d3.set(topKeys),
                    others = allKeys.filter(function (d) {return !topSet.has(d);});
                if (allRowsSum > topRowsSum) {
                    return topRows.concat([{'others': others, 'key': _othersLabel, 'value': allRowsSum - topRowsSum}]);
                }
                return topRows;
            };

            _chart.cappedKeyAccessor = function (d, i) {
                if (d.others) {
                    return d.key;
                }
                return _chart.keyAccessor()(d, i);
            };

            _chart.cappedValueAccessor = function (d, i) {
                if (d.others) {
                    return d.value;
                }
                return _chart.valueAccessor()(d, i);
            };

            _chart.data(function (group) {
                if (_cap === Infinity) {
                    return _chart._computeOrderedGroups(group.all());
                } else {
                    var topRows = group.top(_cap); // ordered by crossfilter group order (default value)
                    topRows = _chart._computeOrderedGroups(topRows); // re-order using ordering (default key)
                    if (_othersGrouper) {
                        return _othersGrouper(topRows);
                    }
                    return topRows;
                }
            });

            /**
             * Get or set the count of elements to that will be included in the cap.
             * @method cap
             * @memberof dc.capMixin
             * @instance
             * @param {Number} [count=Infinity]
             * @return {Number}
             * @return {dc.capMixin}
             */
            _chart.cap = function (count) {
                if (!arguments.length) {
                    return _cap;
                }
                _cap = count;
                return _chart;
            };

            /**
             * Get or set the label for *Others* slice when slices cap is specified
             * @method othersLabel
             * @memberof dc.capMixin
             * @instance
             * @param {String} [label="Others"]
             * @return {String}
             * @return {dc.capMixin}
             */
            _chart.othersLabel = function (label) {
                if (!arguments.length) {
                    return _othersLabel;
                }
                _othersLabel = label;
                return _chart;
            };

            /**
             * Get or set the grouper function that will perform the insertion of data for the *Others* slice
             * if the slices cap is specified. If set to a falsy value, no others will be added. By default the
             * grouper function computes the sum of all values below the cap.
             * @method othersGrouper
             * @memberof dc.capMixin
             * @instance
             * @example
             * // Default others grouper
             * chart.othersGrouper(function (topRows) {
     *    var topRowsSum = d3.sum(topRows, _chart.valueAccessor()),
     *        allRows = _chart.group().all(),
     *        allRowsSum = d3.sum(allRows, _chart.valueAccessor()),
     *        topKeys = topRows.map(_chart.keyAccessor()),
     *        allKeys = allRows.map(_chart.keyAccessor()),
     *        topSet = d3.set(topKeys),
     *        others = allKeys.filter(function (d) {return !topSet.has(d);});
     *    if (allRowsSum > topRowsSum) {
     *        return topRows.concat([{'others': others, 'key': _othersLabel, 'value': allRowsSum - topRowsSum}]);
     *    }
     *    return topRows;
     * });
             * // Custom others grouper
             * chart.othersGrouper(function (data) {
     *     // compute the value for others, presumably the sum of all values below the cap
     *     var othersSum  = yourComputeOthersValueLogic(data)
     *
     *     // the keys are needed to properly filter when the others element is clicked
     *     var othersKeys = yourComputeOthersKeysArrayLogic(data);
     *
     *     // add the others row to the dataset
     *     data.push({'key': 'Others', 'value': othersSum, 'others': othersKeys });
     *
     *     return data;
     * });
             * @param {Function} [grouperFunction]
             * @return {Function}
             * @return {dc.capMixin}
             */
            _chart.othersGrouper = function (grouperFunction) {
                if (!arguments.length) {
                    return _othersGrouper;
                }
                _othersGrouper = grouperFunction;
                return _chart;
            };

            dc.override(_chart, 'onClick', function (d) {
                if (d.others) {
                    _chart.filter([d.others]);
                }
                _chart._onClick(d);
            });

            return _chart;
        };

        /**
         * This Mixin provides reusable functionalities for any chart that needs to visualize data using bubbles.
         * @name bubbleMixin
         * @memberof dc
         * @mixin
         * @mixes dc.colorMixin
         * @param {Object} _chart
         * @return {dc.bubbleMixin}
         */
        dc.bubbleMixin = function (_chart) {
            var _maxBubbleRelativeSize = 0.3;
            var _minRadiusWithLabel = 10;

            _chart.BUBBLE_NODE_CLASS = 'node';
            _chart.BUBBLE_CLASS = 'bubble';
            _chart.MIN_RADIUS = 10;

            _chart = dc.colorMixin(_chart);

            _chart.renderLabel(true);

            _chart.data(function (group) {
                return group.top(Infinity);
            });

            var _r = d3.scale.linear().domain([0, 100]);

            var _rValueAccessor = function (d) {
                return d.r;
            };

            /**
             * Get or set the bubble radius scale. By default the bubble chart uses
             * {@link https://github.com/mbostock/d3/wiki/Quantitative-Scales#linear d3.scale.linear().domain([0, 100])}
             * as its radius scale.
             * @method r
             * @memberof dc.bubbleMixin
             * @instance
             * @see {@link http://github.com/mbostock/d3/wiki/Scales d3.scale}
             * @param {d3.scale} [bubbleRadiusScale=d3.scale.linear().domain([0, 100])]
             * @return {d3.scale}
             * @return {dc.bubbleMixin}
             */
            _chart.r = function (bubbleRadiusScale) {
                if (!arguments.length) {
                    return _r;
                }
                _r = bubbleRadiusScale;
                return _chart;
            };

            /**
             * Get or set the radius value accessor function. If set, the radius value accessor function will
             * be used to retrieve a data value for each bubble. The data retrieved then will be mapped using
             * the r scale to the actual bubble radius. This allows you to encode a data dimension using bubble
             * size.
             * @method radiusValueAccessor
             * @memberof dc.bubbleMixin
             * @instance
             * @param {Function} [radiusValueAccessor]
             * @return {Function}
             * @return {dc.bubbleMixin}
             */
            _chart.radiusValueAccessor = function (radiusValueAccessor) {
                if (!arguments.length) {
                    return _rValueAccessor;
                }
                _rValueAccessor = radiusValueAccessor;
                return _chart;
            };

            _chart.rMin = function () {
                var min = d3.min(_chart.data(), function (e) {
                    return _chart.radiusValueAccessor()(e);
                });
                return min;
            };

            _chart.rMax = function () {
                var max = d3.max(_chart.data(), function (e) {
                    return _chart.radiusValueAccessor()(e);
                });
                return max;
            };

            _chart.bubbleR = function (d) {
                var value = _chart.radiusValueAccessor()(d);
                var r = _chart.r()(value);
                if (isNaN(r) || value <= 0) {
                    r = 0;
                }
                return r;
            };

            var labelFunction = function (d) {
                return _chart.label()(d);
            };

            var shouldLabel = function (d) {
                return (_chart.bubbleR(d) > _minRadiusWithLabel);
            };

            var labelOpacity = function (d) {
                return shouldLabel(d) ? 1 : 0;
            };

            var labelPointerEvent = function (d) {
                return shouldLabel(d) ? 'all' : 'none';
            };

            _chart._doRenderLabel = function (bubbleGEnter) {
                if (_chart.renderLabel()) {
                    var label = bubbleGEnter.select('text');

                    if (label.empty()) {
                        label = bubbleGEnter.append('text')
                            .attr('text-anchor', 'middle')
                            .attr('dy', '.3em')
                            .on('click', _chart.onClick);
                    }

                    label
                        .attr('opacity', 0)
                        .attr('pointer-events', labelPointerEvent)
                        .text(labelFunction);
                    dc.transition(label, _chart.transitionDuration())
                        .attr('opacity', labelOpacity);
                }
            };

            _chart.doUpdateLabels = function (bubbleGEnter) {
                if (_chart.renderLabel()) {
                    var labels = bubbleGEnter.selectAll('text')
                        .attr('pointer-events', labelPointerEvent)
                        .text(labelFunction);
                    dc.transition(labels, _chart.transitionDuration())
                        .attr('opacity', labelOpacity);
                }
            };

            var titleFunction = function (d) {
                return _chart.title()(d);
            };

            _chart._doRenderTitles = function (g) {
                if (_chart.renderTitle()) {
                    var title = g.select('title');

                    if (title.empty()) {
                        g.append('title').text(titleFunction);
                    }
                }
            };

            _chart.doUpdateTitles = function (g) {
                if (_chart.renderTitle()) {
                    g.selectAll('title').text(titleFunction);
                }
            };

            /**
             * Get or set the minimum radius. This will be used to initialize the radius scale's range.
             * @method minRadius
             * @memberof dc.bubbleMixin
             * @instance
             * @param {Number} [radius=10]
             * @return {Number}
             * @return {dc.bubbleMixin}
             */
            _chart.minRadius = function (radius) {
                if (!arguments.length) {
                    return _chart.MIN_RADIUS;
                }
                _chart.MIN_RADIUS = radius;
                return _chart;
            };

            /**
             * Get or set the minimum radius for label rendering. If a bubble's radius is less than this value
             * then no label will be rendered.
             * @method minRadiusWithLabel
             * @memberof dc.bubbleMixin
             * @instance
             * @param {Number} [radius=10]
             * @return {Number}
             * @return {dc.bubbleMixin}
             */

            _chart.minRadiusWithLabel = function (radius) {
                if (!arguments.length) {
                    return _minRadiusWithLabel;
                }
                _minRadiusWithLabel = radius;
                return _chart;
            };

            /**
             * Get or set the maximum relative size of a bubble to the length of x axis. This value is useful
             * when the difference in radius between bubbles is too great.
             * @method maxBubbleRelativeSize
             * @memberof dc.bubbleMixin
             * @instance
             * @param {Number} [relativeSize=0.3]
             * @return {Number}
             * @return {dc.bubbleMixin}
             */
            _chart.maxBubbleRelativeSize = function (relativeSize) {
                if (!arguments.length) {
                    return _maxBubbleRelativeSize;
                }
                _maxBubbleRelativeSize = relativeSize;
                return _chart;
            };

            _chart.fadeDeselectedArea = function () {
                if (_chart.hasFilter()) {
                    _chart.selectAll('g.' + _chart.BUBBLE_NODE_CLASS).each(function (d) {
                        if (_chart.isSelectedNode(d)) {
                            _chart.highlightSelected(this);
                        } else {
                            _chart.fadeDeselected(this);
                        }
                    });
                } else {
                    _chart.selectAll('g.' + _chart.BUBBLE_NODE_CLASS).each(function () {
                        _chart.resetHighlight(this);
                    });
                }
            };

            _chart.isSelectedNode = function (d) {
                return _chart.hasFilter(d.key);
            };

            _chart.onClick = function (d) {
                var filter = d.key;
                dc.events.trigger(function () {
                    _chart.filter(filter);
                    _chart.redrawGroup();
                });
            };

            return _chart;
        };

        /**
         * The pie chart implementation is usually used to visualize a small categorical distribution.  The pie
         * chart uses keyAccessor to determine the slices, and valueAccessor to calculate the size of each
         * slice relative to the sum of all values. Slices are ordered by {@link dc.baseMixin#ordering ordering}
         * which defaults to sorting by key.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * @class pieChart
         * @memberof dc
         * @mixes dc.capMixin
         * @mixes dc.colorMixin
         * @mixes dc.baseMixin
         * @example
         * // create a pie chart under #chart-container1 element using the default global chart group
         * var chart1 = dc.pieChart('#chart-container1');
         * // create a pie chart under #chart-container2 element using chart group A
         * var chart2 = dc.pieChart('#chart-container2', 'chartGroupA');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.pieChart}
         */
        dc.pieChart = function (parent, chartGroup) {
            var DEFAULT_MIN_ANGLE_FOR_LABEL = 0.5;

            var _sliceCssClass = 'pie-slice';
            var _labelCssClass = 'pie-label';
            var _sliceGroupCssClass = 'pie-slice-group';
            var _labelGroupCssClass = 'pie-label-group';
            var _emptyCssClass = 'empty-chart';
            var _emptyTitle = 'empty';

            var _radius,
                _givenRadius, // specified radius, if any
                _innerRadius = 0,
                _externalRadiusPadding = 0;

            var _g;
            var _cx;
            var _cy;
            var _minAngleForLabel = DEFAULT_MIN_ANGLE_FOR_LABEL;
            var _externalLabelRadius;
            var _drawPaths = false;
            var _chart = dc.capMixin(dc.colorMixin(dc.baseMixin({})));

            _chart.colorAccessor(_chart.cappedKeyAccessor);

            _chart.title(function (d) {
                return _chart.cappedKeyAccessor(d) + ': ' + _chart.cappedValueAccessor(d);
            });

            /**
             * Get or set the maximum number of slices the pie chart will generate. The top slices are determined by
             * value from high to low. Other slices exeeding the cap will be rolled up into one single *Others* slice.
             * @method slicesCap
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [cap]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.slicesCap = _chart.cap;

            _chart.label(_chart.cappedKeyAccessor);
            _chart.renderLabel(true);

            _chart.transitionDuration(350);

            _chart._doRender = function () {
                _chart.resetSvg();

                _g = _chart.svg()
                    .append('g')
                    .attr('transform', 'translate(' + _chart.cx() + ',' + _chart.cy() + ')');

                _g.append('g').attr('class', _sliceGroupCssClass);
                _g.append('g').attr('class', _labelGroupCssClass);

                drawChart();

                return _chart;
            };

            function drawChart () {
                // set radius on basis of chart dimension if missing
                _radius = _givenRadius ? _givenRadius : d3.min([_chart.width(), _chart.height()]) / 2;

                var arc = buildArcs();

                var pie = pieLayout();
                var pieData;
                // if we have data...
                if (d3.sum(_chart.data(), _chart.valueAccessor())) {
                    pieData = pie(_chart.data());
                    _g.classed(_emptyCssClass, false);
                } else {
                    // otherwise we'd be getting NaNs, so override
                    // note: abuse others for its ignoring the value accessor
                    pieData = pie([{key: _emptyTitle, value: 1, others: [_emptyTitle]}]);
                    _g.classed(_emptyCssClass, true);
                }

                if (_g) {
                    var slices = _g.select('g.' + _sliceGroupCssClass)
                        .selectAll('g.' + _sliceCssClass)
                        .data(pieData);

                    var labels = _g.select('g.' + _labelGroupCssClass)
                        .selectAll('text.' + _labelCssClass)
                        .data(pieData);

                    createElements(slices, labels, arc, pieData);

                    updateElements(pieData, arc);

                    removeElements(slices, labels);

                    highlightFilter();

                    dc.transition(_g, _chart.transitionDuration())
                        .attr('transform', 'translate(' + _chart.cx() + ',' + _chart.cy() + ')');
                }
            }

            function createElements (slices, labels, arc, pieData) {
                var slicesEnter = createSliceNodes(slices);

                createSlicePath(slicesEnter, arc);

                createTitles(slicesEnter);

                createLabels(labels, pieData, arc);
            }

            function createSliceNodes (slices) {
                var slicesEnter = slices
                    .enter()
                    .append('g')
                    .attr('class', function (d, i) {
                        return _sliceCssClass + ' _' + i;
                    });
                return slicesEnter;
            }

            function createSlicePath (slicesEnter, arc) {
                var slicePath = slicesEnter.append('path')
                    .attr('fill', fill)
                    .on('click', onClick)
                    .attr('d', function (d, i) {
                        return safeArc(d, i, arc);
                    });

                dc.transition(slicePath, _chart.transitionDuration(), function (s) {
                    s.attrTween('d', tweenPie);
                });
            }

            function createTitles (slicesEnter) {
                if (_chart.renderTitle()) {
                    slicesEnter.append('title').text(function (d) {
                        return _chart.title()(d.data);
                    });
                }
            }

            _chart._applyLabelText = function (labels) {
                labels
                    .text(function (d) {
                        var data = d.data;
                        if ((sliceHasNoData(data) || sliceTooSmall(d)) && !isSelectedSlice(d)) {
                            return '';
                        }
                        return _chart.label()(d.data);
                    });
            };

            function positionLabels (labels, arc) {
                _chart._applyLabelText(labels);
                dc.transition(labels, _chart.transitionDuration())
                    .attr('transform', function (d) {
                        return labelPosition(d, arc);
                    })
                    .attr('text-anchor', 'middle');
            }

            function highlightSlice (i, whether) {
                _chart.select('g.pie-slice._' + i)
                    .classed('highlight', whether);
            }

            function createLabels (labels, pieData, arc) {
                if (_chart.renderLabel()) {
                    var labelsEnter = labels
                        .enter()
                        .append('text')
                        .attr('class', function (d, i) {
                            var classes = _sliceCssClass + ' ' + _labelCssClass + ' _' + i;
                            if (_externalLabelRadius) {
                                classes += ' external';
                            }
                            return classes;
                        })
                        .on('click', onClick)
                        .on('mouseover', function (d, i) {
                            highlightSlice(i, true);
                        })
                        .on('mouseout', function (d, i) {
                            highlightSlice(i, false);
                        });
                    positionLabels(labelsEnter, arc);
                    if (_externalLabelRadius && _drawPaths) {
                        updateLabelPaths(pieData, arc);
                    }
                }
            }

            function updateLabelPaths (pieData, arc) {
                var polyline = _g.selectAll('polyline.' + _sliceCssClass)
                    .data(pieData);

                polyline
                    .enter()
                    .append('polyline')
                    .attr('class', function (d, i) {
                        return 'pie-path _' + i + ' ' + _sliceCssClass;
                    })
                    .on('click', onClick)
                    .on('mouseover', function (d, i) {
                        highlightSlice(i, true);
                    })
                    .on('mouseout', function (d, i) {
                        highlightSlice(i, false);
                    });

                polyline.exit().remove();
                var arc2 = d3.svg.arc()
                    .outerRadius(_radius - _externalRadiusPadding + _externalLabelRadius)
                    .innerRadius(_radius - _externalRadiusPadding);
                var transition = dc.transition(polyline, _chart.transitionDuration());
                // this is one rare case where d3.selection differs from d3.transition
                if (transition.attrTween) {
                    transition
                        .attrTween('points', function (d) {
                            this._current = this._current || d;
                            var interpolate = d3.interpolate(this._current, d);
                            this._current = interpolate(0);
                            return function (t) {
                                var d2 = interpolate(t);
                                return [arc.centroid(d2), arc2.centroid(d2)];
                            };
                        });
                } else {
                    transition.attr('points', function (d) {
                        return [arc.centroid(d), arc2.centroid(d)];
                    });
                }
                transition.style('visibility', function (d) {
                    return d.endAngle - d.startAngle < 0.0001 ? 'hidden' : 'visible';
                });

            }

            function updateElements (pieData, arc) {
                updateSlicePaths(pieData, arc);
                updateLabels(pieData, arc);
                updateTitles(pieData);
            }

            function updateSlicePaths (pieData, arc) {
                var slicePaths = _g.selectAll('g.' + _sliceCssClass)
                    .data(pieData)
                    .select('path')
                    .attr('d', function (d, i) {
                        return safeArc(d, i, arc);
                    });
                dc.transition(slicePaths, _chart.transitionDuration(),
                    function (s) {
                        s.attrTween('d', tweenPie);
                    }).attr('fill', fill);
            }

            function updateLabels (pieData, arc) {
                if (_chart.renderLabel()) {
                    var labels = _g.selectAll('text.' + _labelCssClass)
                        .data(pieData);
                    positionLabels(labels, arc);
                    if (_externalLabelRadius && _drawPaths) {
                        updateLabelPaths(pieData, arc);
                    }
                }
            }

            function updateTitles (pieData) {
                if (_chart.renderTitle()) {
                    _g.selectAll('g.' + _sliceCssClass)
                        .data(pieData)
                        .select('title')
                        .text(function (d) {
                            return _chart.title()(d.data);
                        });
                }
            }

            function removeElements (slices, labels) {
                slices.exit().remove();
                labels.exit().remove();
            }

            function highlightFilter () {
                if (_chart.hasFilter()) {
                    _chart.selectAll('g.' + _sliceCssClass).each(function (d) {
                        if (isSelectedSlice(d)) {
                            _chart.highlightSelected(this);
                        } else {
                            _chart.fadeDeselected(this);
                        }
                    });
                } else {
                    _chart.selectAll('g.' + _sliceCssClass).each(function () {
                        _chart.resetHighlight(this);
                    });
                }
            }

            /**
             * Get or set the external radius padding of the pie chart. This will force the radius of the
             * pie chart to become smaller or larger depending on the value.
             * @method externalRadiusPadding
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [externalRadiusPadding=0]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.externalRadiusPadding = function (externalRadiusPadding) {
                if (!arguments.length) {
                    return _externalRadiusPadding;
                }
                _externalRadiusPadding = externalRadiusPadding;
                return _chart;
            };

            /**
             * Get or set the inner radius of the pie chart. If the inner radius is greater than 0px then the
             * pie chart will be rendered as a doughnut chart.
             * @method innerRadius
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [innerRadius=0]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.innerRadius = function (innerRadius) {
                if (!arguments.length) {
                    return _innerRadius;
                }
                _innerRadius = innerRadius;
                return _chart;
            };

            /**
             * Get or set the outer radius. If the radius is not set, it will be half of the minimum of the
             * chart width and height.
             * @method radius
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [radius]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.radius = function (radius) {
                if (!arguments.length) {
                    return _givenRadius;
                }
                _givenRadius = radius;
                return _chart;
            };

            /**
             * Get or set center x coordinate position. Default is center of svg.
             * @method cx
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [cx]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.cx = function (cx) {
                if (!arguments.length) {
                    return (_cx ||  _chart.width() / 2);
                }
                _cx = cx;
                return _chart;
            };

            /**
             * Get or set center y coordinate position. Default is center of svg.
             * @method cy
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [cy]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.cy = function (cy) {
                if (!arguments.length) {
                    return (_cy ||  _chart.height() / 2);
                }
                _cy = cy;
                return _chart;
            };

            function buildArcs () {
                return d3.svg.arc()
                    .outerRadius(_radius - _externalRadiusPadding)
                    .innerRadius(_innerRadius);
            }

            function isSelectedSlice (d) {
                return _chart.hasFilter(_chart.cappedKeyAccessor(d.data));
            }

            _chart._doRedraw = function () {
                drawChart();
                return _chart;
            };

            /**
             * Get or set the minimal slice angle for label rendering. Any slice with a smaller angle will not
             * display a slice label.
             * @method minAngleForLabel
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [minAngleForLabel=0.5]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.minAngleForLabel = function (minAngleForLabel) {
                if (!arguments.length) {
                    return _minAngleForLabel;
                }
                _minAngleForLabel = minAngleForLabel;
                return _chart;
            };

            function pieLayout () {
                return d3.layout.pie().sort(null).value(_chart.cappedValueAccessor);
            }

            function sliceTooSmall (d) {
                var angle = (d.endAngle - d.startAngle);
                return isNaN(angle) || angle < _minAngleForLabel;
            }

            function sliceHasNoData (d) {
                return _chart.cappedValueAccessor(d) === 0;
            }

            function tweenPie (b) {
                b.innerRadius = _innerRadius;
                var current = this._current;
                if (isOffCanvas(current)) {
                    current = {startAngle: 0, endAngle: 0};
                } else {
                    // only interpolate startAngle & endAngle, not the whole data object
                    current = {startAngle: current.startAngle, endAngle: current.endAngle};
                }
                var i = d3.interpolate(current, b);
                this._current = i(0);
                return function (t) {
                    return safeArc(i(t), 0, buildArcs());
                };
            }

            function isOffCanvas (current) {
                return !current || isNaN(current.startAngle) || isNaN(current.endAngle);
            }

            function fill (d, i) {
                return _chart.getColor(d.data, i);
            }

            function onClick (d, i) {
                if (_g.attr('class') !== _emptyCssClass) {
                    _chart.onClick(d.data, i);
                }
            }

            function safeArc (d, i, arc) {
                var path = arc(d, i);
                if (path.indexOf('NaN') >= 0) {
                    path = 'M0,0';
                }
                return path;
            }

            /**
             * Title to use for the only slice when there is no data.
             * @method emptyTitle
             * @memberof dc.pieChart
             * @instance
             * @param {String} [title]
             * @return {String}
             * @return {dc.pieChart}
             */
            _chart.emptyTitle = function (title) {
                if (arguments.length === 0) {
                    return _emptyTitle;
                }
                _emptyTitle = title;
                return _chart;
            };

            /**
             * Position slice labels offset from the outer edge of the chart
             *
             * The given argument sets the radial offset.
             * @method externalLabels
             * @memberof dc.pieChart
             * @instance
             * @param {Number} [externalLabelRadius]
             * @return {Number}
             * @return {dc.pieChart}
             */
            _chart.externalLabels = function (externalLabelRadius) {
                if (arguments.length === 0) {
                    return _externalLabelRadius;
                } else if (externalLabelRadius) {
                    _externalLabelRadius = externalLabelRadius;
                } else {
                    _externalLabelRadius = undefined;
                }

                return _chart;
            };

            /**
             * Get or set whether to draw lines from pie slices to their labels.
             *
             * @method drawPaths
             * @memberof dc.pieChart
             * @instance
             * @param {Boolean} [drawPaths]
             * @return {Boolean}
             * @return {dc.pieChart}
             */
            _chart.drawPaths = function (drawPaths) {
                if (arguments.length === 0) {
                    return _drawPaths;
                }
                _drawPaths = drawPaths;
                return _chart;
            };

            function labelPosition (d, arc) {
                var centroid;
                if (_externalLabelRadius) {
                    centroid = d3.svg.arc()
                        .outerRadius(_radius - _externalRadiusPadding + _externalLabelRadius)
                        .innerRadius(_radius - _externalRadiusPadding + _externalLabelRadius)
                        .centroid(d);
                } else {
                    centroid = arc.centroid(d);
                }
                if (isNaN(centroid[0]) || isNaN(centroid[1])) {
                    return 'translate(0,0)';
                } else {
                    return 'translate(' + centroid + ')';
                }
            }

            _chart.legendables = function () {
                return _chart.data().map(function (d, i) {
                    var legendable = {name: d.key, data: d.value, others: d.others, chart: _chart};
                    legendable.color = _chart.getColor(d, i);
                    return legendable;
                });
            };

            _chart.legendHighlight = function (d) {
                highlightSliceFromLegendable(d, true);
            };

            _chart.legendReset = function (d) {
                highlightSliceFromLegendable(d, false);
            };

            _chart.legendToggle = function (d) {
                _chart.onClick({key: d.name, others: d.others});
            };

            function highlightSliceFromLegendable (legendable, highlighted) {
                _chart.selectAll('g.pie-slice').each(function (d) {
                    if (legendable.name === d.data.key) {
                        d3.select(this).classed('highlight', highlighted);
                    }
                });
            }

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * Concrete bar chart/histogram implementation.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
         * @class barChart
         * @memberof dc
         * @mixes dc.stackMixin
         * @mixes dc.coordinateGridMixin
         * @example
         * // create a bar chart under #chart-container1 element using the default global chart group
         * var chart1 = dc.barChart('#chart-container1');
         * // create a bar chart under #chart-container2 element using chart group A
         * var chart2 = dc.barChart('#chart-container2', 'chartGroupA');
         * // create a sub-chart under a composite parent chart
         * var chart3 = dc.barChart(compositeChart);
         * @param {String|node|d3.selection|dc.compositeChart} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector}
         * specifying a dom block element such as a div; or a dom element or d3 selection.  If the bar
         * chart is a sub-chart in a {@link dc.compositeChart Composite Chart} then pass in the parent
         * composite chart instance instead.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.barChart}
         */
        dc.barChart = function (parent, chartGroup) {
            var MIN_BAR_WIDTH = 1;
            var DEFAULT_GAP_BETWEEN_BARS = 2;
            var LABEL_PADDING = 3;

            var _chart = dc.stackMixin(dc.coordinateGridMixin({}));

            var _gap = DEFAULT_GAP_BETWEEN_BARS;
            var _centerBar = false;
            var _alwaysUseRounding = false;

            var _barWidth;

            dc.override(_chart, 'rescale', function () {
                _chart._rescale();
                _barWidth = undefined;
                return _chart;
            });

            dc.override(_chart, 'render', function () {
                if (_chart.round() && _centerBar && !_alwaysUseRounding) {
                    dc.logger.warn('By default, brush rounding is disabled if bars are centered. ' +
                        'See dc.js bar chart API documentation for details.');
                }

                return _chart._render();
            });

            _chart.label(function (d) {
                return dc.utils.printSingleValue(d.y0 + d.y);
            }, false);

            _chart.plotData = function () {
                var layers = _chart.chartBodyG().selectAll('g.stack')
                    .data(_chart.data());

                calculateBarWidth();

                layers
                    .enter()
                    .append('g')
                    .attr('class', function (d, i) {
                        return 'stack ' + '_' + i;
                    });

                var last = layers.size() - 1;
                layers.each(function (d, i) {
                    var layer = d3.select(this);

                    renderBars(layer, i, d);

                    if (_chart.renderLabel() && last === i) {
                        renderLabels(layer, i, d);
                    }
                });
            };

            function barHeight (d) {
                return dc.utils.safeNumber(Math.abs(_chart.y()(d.y + d.y0) - _chart.y()(d.y0)));
            }

            function renderLabels (layer, layerIndex, d) {
                var labels = layer.selectAll('text.barLabel')
                    .data(d.values, dc.pluck('x'));

                labels.enter()
                    .append('text')
                    .attr('class', 'barLabel')
                    .attr('text-anchor', 'middle');

                if (_chart.isOrdinal()) {
                    labels.on('click', _chart.onClick);
                    labels.attr('cursor', 'pointer');
                }

                dc.transition(labels, _chart.transitionDuration())
                    .attr('x', function (d) {
                        var x = _chart.x()(d.x);
                        if (!_centerBar) {
                            x += _barWidth / 2;
                        }
                        return dc.utils.safeNumber(x);
                    })
                    .attr('y', function (d) {
                        var y = _chart.y()(d.y + d.y0);

                        if (d.y < 0) {
                            y -= barHeight(d);
                        }

                        return dc.utils.safeNumber(y - LABEL_PADDING);
                    })
                    .text(function (d) {
                        return _chart.label()(d);
                    });

                dc.transition(labels.exit(), _chart.transitionDuration())
                    .attr('height', 0)
                    .remove();
            }

            function renderBars (layer, layerIndex, d) {
                var bars = layer.selectAll('rect.bar')
                    .data(d.values, dc.pluck('x'));

                var enter = bars.enter()
                    .append('rect')
                    .attr('class', 'bar')
                    .attr('fill', dc.pluck('data', _chart.getColor))
                    .attr('y', _chart.yAxisHeight())
                    .attr('height', 0);

                if (_chart.renderTitle()) {
                    enter.append('title').text(dc.pluck('data', _chart.title(d.name)));
                }

                if (_chart.isOrdinal()) {
                    bars.on('click', _chart.onClick);
                }

                dc.transition(bars, _chart.transitionDuration())
                    .attr('x', function (d) {
                        var x = _chart.x()(d.x);
                        if (_centerBar) {
                            x -= _barWidth / 2;
                        }
                        if (_chart.isOrdinal() && _gap !== undefined) {
                            x += _gap / 2;
                        }
                        return dc.utils.safeNumber(x);
                    })
                    .attr('y', function (d) {
                        var y = _chart.y()(d.y + d.y0);

                        if (d.y < 0) {
                            y -= barHeight(d);
                        }

                        return dc.utils.safeNumber(y);
                    })
                    .attr('width', _barWidth)
                    .attr('height', function (d) {
                        return barHeight(d);
                    })
                    .attr('fill', dc.pluck('data', _chart.getColor))
                    .select('title').text(dc.pluck('data', _chart.title(d.name)));

                dc.transition(bars.exit(), _chart.transitionDuration())
                    .attr('x', function (d) { return _chart.x()(d.x); })
                    .attr('width', _barWidth * 0.9)
                    .remove();
            }

            function calculateBarWidth () {
                if (_barWidth === undefined) {
                    var numberOfBars = _chart.xUnitCount();

                    // please can't we always use rangeBands for bar charts?
                    if (_chart.isOrdinal() && _gap === undefined) {
                        _barWidth = Math.floor(_chart.x().rangeBand());
                    } else if (_gap) {
                        _barWidth = Math.floor((_chart.xAxisLength() - (numberOfBars - 1) * _gap) / numberOfBars);
                    } else {
                        _barWidth = Math.floor(_chart.xAxisLength() / (1 + _chart.barPadding()) / numberOfBars);
                    }

                    if (_barWidth === Infinity || isNaN(_barWidth) || _barWidth < MIN_BAR_WIDTH) {
                        _barWidth = MIN_BAR_WIDTH;
                    }
                }
            }

            _chart.fadeDeselectedArea = function () {
                var bars = _chart.chartBodyG().selectAll('rect.bar');
                var extent = _chart.brush().extent();

                if (_chart.isOrdinal()) {
                    if (_chart.hasFilter()) {
                        bars.classed(dc.constants.SELECTED_CLASS, function (d) {
                            return _chart.hasFilter(d.x);
                        });
                        bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
                            return !_chart.hasFilter(d.x);
                        });
                    } else {
                        bars.classed(dc.constants.SELECTED_CLASS, false);
                        bars.classed(dc.constants.DESELECTED_CLASS, false);
                    }
                } else {
                    if (!_chart.brushIsEmpty(extent)) {
                        var start = extent[0];
                        var end = extent[1];

                        bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
                            return d.x < start || d.x >= end;
                        });
                    } else {
                        bars.classed(dc.constants.DESELECTED_CLASS, false);
                    }
                }
            };

            /**
             * Whether the bar chart will render each bar centered around the data position on the x-axis.
             * @method centerBar
             * @memberof dc.barChart
             * @instance
             * @param {Boolean} [centerBar=false]
             * @return {Boolean}
             * @return {dc.barChart}
             */
            _chart.centerBar = function (centerBar) {
                if (!arguments.length) {
                    return _centerBar;
                }
                _centerBar = centerBar;
                return _chart;
            };

            dc.override(_chart, 'onClick', function (d) {
                _chart._onClick(d.data);
            });

            /**
             * Get or set the spacing between bars as a fraction of bar size. Valid values are between 0-1.
             * Setting this value will also remove any previously set {@link dc.barChart#gap gap}. See the
             * {@link https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands d3 docs}
             * for a visual description of how the padding is applied.
             * @method barPadding
             * @memberof dc.barChart
             * @instance
             * @param {Number} [barPadding=0]
             * @return {Number}
             * @return {dc.barChart}
             */
            _chart.barPadding = function (barPadding) {
                if (!arguments.length) {
                    return _chart._rangeBandPadding();
                }
                _chart._rangeBandPadding(barPadding);
                _gap = undefined;
                return _chart;
            };

            _chart._useOuterPadding = function () {
                return _gap === undefined;
            };

            /**
             * Get or set the outer padding on an ordinal bar chart. This setting has no effect on non-ordinal charts.
             * Will pad the width by `padding * barWidth` on each side of the chart.
             * @method outerPadding
             * @memberof dc.barChart
             * @instance
             * @param {Number} [padding=0.5]
             * @return {Number}
             * @return {dc.barChart}
             */
            _chart.outerPadding = _chart._outerRangeBandPadding;

            /**
             * Manually set fixed gap (in px) between bars instead of relying on the default auto-generated
             * gap.  By default the bar chart implementation will calculate and set the gap automatically
             * based on the number of data points and the length of the x axis.
             * @method gap
             * @memberof dc.barChart
             * @instance
             * @param {Number} [gap=2]
             * @return {Number}
             * @return {dc.barChart}
             */
            _chart.gap = function (gap) {
                if (!arguments.length) {
                    return _gap;
                }
                _gap = gap;
                return _chart;
            };

            _chart.extendBrush = function () {
                var extent = _chart.brush().extent();
                if (_chart.round() && (!_centerBar || _alwaysUseRounding)) {
                    extent[0] = extent.map(_chart.round())[0];
                    extent[1] = extent.map(_chart.round())[1];

                    _chart.chartBodyG().select('.brush')
                        .call(_chart.brush().extent(extent));
                }

                return extent;
            };

            /**
             * Set or get whether rounding is enabled when bars are centered. If false, using
             * rounding with centered bars will result in a warning and rounding will be ignored.  This flag
             * has no effect if bars are not {@link dc.barChart#centerBar centered}.
             * When using standard d3.js rounding methods, the brush often doesn't align correctly with
             * centered bars since the bars are offset.  The rounding function must add an offset to
             * compensate, such as in the following example.
             * @method alwaysUseRounding
             * @memberof dc.barChart
             * @instance
             * @example
             * chart.round(function(n) { return Math.floor(n) + 0.5; });
             * @param {Boolean} [alwaysUseRounding=false]
             * @return {Boolean}
             * @return {dc.barChart}
             */
            _chart.alwaysUseRounding = function (alwaysUseRounding) {
                if (!arguments.length) {
                    return _alwaysUseRounding;
                }
                _alwaysUseRounding = alwaysUseRounding;
                return _chart;
            };

            function colorFilter (color, inv) {
                return function () {
                    var item = d3.select(this);
                    var match = item.attr('fill') === color;
                    return inv ? !match : match;
                };
            }

            _chart.legendHighlight = function (d) {
                if (!_chart.isLegendableHidden(d)) {
                    _chart.g().selectAll('rect.bar')
                        .classed('highlight', colorFilter(d.color))
                        .classed('fadeout', colorFilter(d.color, true));
                }
            };

            _chart.legendReset = function () {
                _chart.g().selectAll('rect.bar')
                    .classed('highlight', false)
                    .classed('fadeout', false);
            };

            dc.override(_chart, 'xAxisMax', function () {
                var max = this._xAxisMax();
                if ('resolution' in _chart.xUnits()) {
                    var res = _chart.xUnits().resolution;
                    max += res;
                }
                return max;
            });

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * Concrete line/area chart implementation.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
         * @class lineChart
         * @memberof dc
         * @mixes dc.stackMixin
         * @mixes dc.coordinateGridMixin
         * @example
         * // create a line chart under #chart-container1 element using the default global chart group
         * var chart1 = dc.lineChart('#chart-container1');
         * // create a line chart under #chart-container2 element using chart group A
         * var chart2 = dc.lineChart('#chart-container2', 'chartGroupA');
         * // create a sub-chart under a composite parent chart
         * var chart3 = dc.lineChart(compositeChart);
         * @param {String|node|d3.selection|dc.compositeChart} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector}
         * specifying a dom block element such as a div; or a dom element or d3 selection.  If the line
         * chart is a sub-chart in a {@link dc.compositeChart Composite Chart} then pass in the parent
         * composite chart instance instead.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.lineChart}
         */
        dc.lineChart = function (parent, chartGroup) {
            var DEFAULT_DOT_RADIUS = 5;
            var TOOLTIP_G_CLASS = 'dc-tooltip';
            var DOT_CIRCLE_CLASS = 'dot';
            var Y_AXIS_REF_LINE_CLASS = 'yRef';
            var X_AXIS_REF_LINE_CLASS = 'xRef';
            var DEFAULT_DOT_OPACITY = 1e-6;
            var LABEL_PADDING = 3;

            var _chart = dc.stackMixin(dc.coordinateGridMixin({}));
            var _renderArea = false;
            var _dotRadius = DEFAULT_DOT_RADIUS;
            var _dataPointRadius = null;
            var _dataPointFillOpacity = DEFAULT_DOT_OPACITY;
            var _dataPointStrokeOpacity = DEFAULT_DOT_OPACITY;
            var _interpolate = 'linear';
            var _tension = 0.7;
            var _defined;
            var _dashStyle;
            var _xyTipsOn = true;

            _chart.transitionDuration(500);
            _chart._rangeBandPadding(1);

            _chart.plotData = function () {
                var chartBody = _chart.chartBodyG();
                var layersList = chartBody.selectAll('g.stack-list');

                if (layersList.empty()) {
                    layersList = chartBody.append('g').attr('class', 'stack-list');
                }

                var layers = layersList.selectAll('g.stack').data(_chart.data());

                var layersEnter = layers
                    .enter()
                    .append('g')
                    .attr('class', function (d, i) {
                        return 'stack ' + '_' + i;
                    });

                drawLine(layersEnter, layers);

                drawArea(layersEnter, layers);

                drawDots(chartBody, layers);

                if (_chart.renderLabel()) {
                    drawLabels(layers);
                }
            };

            /**
             * Gets or sets the interpolator to use for lines drawn, by string name, allowing e.g. step
             * functions, splines, and cubic interpolation.  This is passed to
             * {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate d3.svg.line.interpolate} and
             * {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#area_interpolate d3.svg.area.interpolate},
             * where you can find a complete list of valid arguments
             * @method interpolate
             * @memberof dc.lineChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate d3.svg.line.interpolate}
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#area_interpolate d3.svg.area.interpolate}
             * @param  {String} [interpolate='linear']
             * @return {String}
             * @return {dc.lineChart}
             */
            _chart.interpolate = function (interpolate) {
                if (!arguments.length) {
                    return _interpolate;
                }
                _interpolate = interpolate;
                return _chart;
            };

            /**
             * Gets or sets the tension to use for lines drawn, in the range 0 to 1.
             * This parameter further customizes the interpolation behavior.  It is passed to
             * {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#line_tension d3.svg.line.tension} and
             * {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#area_tension d3.svg.area.tension}.
             * @method tension
             * @memberof dc.lineChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate d3.svg.line.interpolate}
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#area_interpolate d3.svg.area.interpolate}
             * @param  {Number} [tension=0.7]
             * @return {Number}
             * @return {dc.lineChart}
             */
            _chart.tension = function (tension) {
                if (!arguments.length) {
                    return _tension;
                }
                _tension = tension;
                return _chart;
            };

            /**
             * Gets or sets a function that will determine discontinuities in the line which should be
             * skipped: the path will be broken into separate subpaths if some points are undefined.
             * This function is passed to
             * {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#line_defined d3.svg.line.defined}
             *
             * Note: crossfilter will sometimes coerce nulls to 0, so you may need to carefully write
             * custom reduce functions to get this to work, depending on your data. See
             * https://github.com/dc-js/dc.js/issues/615#issuecomment-49089248
             * @method defined
             * @memberof dc.lineChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#line_defined d3.svg.line.defined}
             * @param  {Function} [defined]
             * @return {Function}
             * @return {dc.lineChart}
             */
            _chart.defined = function (defined) {
                if (!arguments.length) {
                    return _defined;
                }
                _defined = defined;
                return _chart;
            };

            /**
             * Set the line's d3 dashstyle. This value becomes the 'stroke-dasharray' of line. Defaults to empty
             * array (solid line).
             * @method dashStyle
             * @memberof dc.lineChart
             * @instance
             * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray}
             * @example
             * // create a Dash Dot Dot Dot
             * chart.dashStyle([3,1,1,1]);
             * @param  {Array<Number>} [dashStyle=[]]
             * @return {Array<Number>}
             * @return {dc.lineChart}
             */
            _chart.dashStyle = function (dashStyle) {
                if (!arguments.length) {
                    return _dashStyle;
                }
                _dashStyle = dashStyle;
                return _chart;
            };

            /**
             * Get or set render area flag. If the flag is set to true then the chart will render the area
             * beneath each line and the line chart effectively becomes an area chart.
             * @method renderArea
             * @memberof dc.lineChart
             * @instance
             * @param  {Boolean} [renderArea=false]
             * @return {Boolean}
             * @return {dc.lineChart}
             */
            _chart.renderArea = function (renderArea) {
                if (!arguments.length) {
                    return _renderArea;
                }
                _renderArea = renderArea;
                return _chart;
            };

            function colors (d, i) {
                return _chart.getColor.call(d, d.values, i);
            }

            function drawLine (layersEnter, layers) {
                var line = d3.svg.line()
                    .x(function (d) {
                        return _chart.x()(d.x);
                    })
                    .y(function (d) {
                        return _chart.y()(d.y + d.y0);
                    })
                    .interpolate(_interpolate)
                    .tension(_tension);
                if (_defined) {
                    line.defined(_defined);
                }

                var path = layersEnter.append('path')
                    .attr('class', 'line')
                    .attr('stroke', colors);
                if (_dashStyle) {
                    path.attr('stroke-dasharray', _dashStyle);
                }

                dc.transition(layers.select('path.line'), _chart.transitionDuration())
                //.ease('linear')
                    .attr('stroke', colors)
                    .attr('d', function (d) {
                        return safeD(line(d.values));
                    });
            }

            function drawArea (layersEnter, layers) {
                if (_renderArea) {
                    var area = d3.svg.area()
                        .x(function (d) {
                            return _chart.x()(d.x);
                        })
                        .y(function (d) {
                            return _chart.y()(d.y + d.y0);
                        })
                        .y0(function (d) {
                            return _chart.y()(d.y0);
                        })
                        .interpolate(_interpolate)
                        .tension(_tension);
                    if (_defined) {
                        area.defined(_defined);
                    }

                    layersEnter.append('path')
                        .attr('class', 'area')
                        .attr('fill', colors)
                        .attr('d', function (d) {
                            return safeD(area(d.values));
                        });

                    dc.transition(layers.select('path.area'), _chart.transitionDuration())
                    //.ease('linear')
                        .attr('fill', colors)
                        .attr('d', function (d) {
                            return safeD(area(d.values));
                        });
                }
            }

            function safeD (d) {
                return (!d || d.indexOf('NaN') >= 0) ? 'M0,0' : d;
            }

            function drawDots (chartBody, layers) {
                if (!_chart.brushOn() && _chart.xyTipsOn()) {
                    var tooltipListClass = TOOLTIP_G_CLASS + '-list';
                    var tooltips = chartBody.select('g.' + tooltipListClass);

                    if (tooltips.empty()) {
                        tooltips = chartBody.append('g').attr('class', tooltipListClass);
                    }

                    layers.each(function (d, layerIndex) {
                        var points = d.values;
                        if (_defined) {
                            points = points.filter(_defined);
                        }

                        var g = tooltips.select('g.' + TOOLTIP_G_CLASS + '._' + layerIndex);
                        if (g.empty()) {
                            g = tooltips.append('g').attr('class', TOOLTIP_G_CLASS + ' _' + layerIndex);
                        }

                        createRefLines(g);

                        var dots = g.selectAll('circle.' + DOT_CIRCLE_CLASS)
                            .data(points, dc.pluck('x'));

                        dots.enter()
                            .append('circle')
                            .attr('class', DOT_CIRCLE_CLASS)
                            .attr('r', getDotRadius())
                            .style('fill-opacity', _dataPointFillOpacity)
                            .style('stroke-opacity', _dataPointStrokeOpacity)
                            .attr('fill', _chart.getColor)
                            .on('mousemove', function () {
                                var dot = d3.select(this);
                                showDot(dot);
                                showRefLines(dot, g);
                            })
                            .on('mouseout', function () {
                                var dot = d3.select(this);
                                hideDot(dot);
                                hideRefLines(g);
                            });

                        dots.call(renderTitle, d);

                        dc.transition(dots, _chart.transitionDuration())
                            .attr('cx', function (d) {
                                return dc.utils.safeNumber(_chart.x()(d.x));
                            })
                            .attr('cy', function (d) {
                                return dc.utils.safeNumber(_chart.y()(d.y + d.y0));
                            })
                            .attr('fill', _chart.getColor);

                        dots.exit().remove();
                    });
                }
            }

            _chart.label(function (d) {
                return dc.utils.printSingleValue(d.y0 + d.y);
            }, false);

            function drawLabels (layers) {
                layers.each(function (d, layerIndex) {
                    var layer = d3.select(this);
                    var labels = layer.selectAll('text.lineLabel')
                        .data(d.values, dc.pluck('x'));

                    labels.enter()
                        .append('text')
                        .attr('class', 'lineLabel')
                        .attr('text-anchor', 'middle');

                    dc.transition(labels, _chart.transitionDuration())
                        .attr('x', function (d) {
                            return dc.utils.safeNumber(_chart.x()(d.x));
                        })
                        .attr('y', function (d) {
                            var y = _chart.y()(d.y + d.y0) - LABEL_PADDING;
                            return dc.utils.safeNumber(y);
                        })
                        .text(function (d) {
                            return _chart.label()(d);
                        });

                    dc.transition(labels.exit(), _chart.transitionDuration())
                        .attr('height', 0)
                        .remove();
                });
            }

            function createRefLines (g) {
                var yRefLine = g.select('path.' + Y_AXIS_REF_LINE_CLASS).empty() ?
                    g.append('path').attr('class', Y_AXIS_REF_LINE_CLASS) : g.select('path.' + Y_AXIS_REF_LINE_CLASS);
                yRefLine.style('display', 'none').attr('stroke-dasharray', '5,5');

                var xRefLine = g.select('path.' + X_AXIS_REF_LINE_CLASS).empty() ?
                    g.append('path').attr('class', X_AXIS_REF_LINE_CLASS) : g.select('path.' + X_AXIS_REF_LINE_CLASS);
                xRefLine.style('display', 'none').attr('stroke-dasharray', '5,5');
            }

            function showDot (dot) {
                dot.style('fill-opacity', 0.8);
                dot.style('stroke-opacity', 0.8);
                dot.attr('r', _dotRadius);
                return dot;
            }

            function showRefLines (dot, g) {
                var x = dot.attr('cx');
                var y = dot.attr('cy');
                var yAxisX = (_chart._yAxisX() - _chart.margins().left);
                var yAxisRefPathD = 'M' + yAxisX + ' ' + y + 'L' + (x) + ' ' + (y);
                var xAxisRefPathD = 'M' + x + ' ' + _chart.yAxisHeight() + 'L' + x + ' ' + y;
                g.select('path.' + Y_AXIS_REF_LINE_CLASS).style('display', '').attr('d', yAxisRefPathD);
                g.select('path.' + X_AXIS_REF_LINE_CLASS).style('display', '').attr('d', xAxisRefPathD);
            }

            function getDotRadius () {
                return _dataPointRadius || _dotRadius;
            }

            function hideDot (dot) {
                dot.style('fill-opacity', _dataPointFillOpacity)
                    .style('stroke-opacity', _dataPointStrokeOpacity)
                    .attr('r', getDotRadius());
            }

            function hideRefLines (g) {
                g.select('path.' + Y_AXIS_REF_LINE_CLASS).style('display', 'none');
                g.select('path.' + X_AXIS_REF_LINE_CLASS).style('display', 'none');
            }

            function renderTitle (dot, d) {
                if (_chart.renderTitle()) {
                    dot.selectAll('title').remove();
                    dot.append('title').text(dc.pluck('data', _chart.title(d.name)));
                }
            }

            /**
             * Turn on/off the mouseover behavior of an individual data point which renders a circle and x/y axis
             * dashed lines back to each respective axis.  This is ignored if the chart
             * {@link dc.coordinateGridMixin#brushOn brush} is on
             * @method xyTipsOn
             * @memberof dc.lineChart
             * @instance
             * @param  {Boolean} [xyTipsOn=false]
             * @return {Boolean}
             * @return {dc.lineChart}
             */
            _chart.xyTipsOn = function (xyTipsOn) {
                if (!arguments.length) {
                    return _xyTipsOn;
                }
                _xyTipsOn = xyTipsOn;
                return _chart;
            };

            /**
             * Get or set the radius (in px) for dots displayed on the data points.
             * @method dotRadius
             * @memberof dc.lineChart
             * @instance
             * @param  {Number} [dotRadius=5]
             * @return {Number}
             * @return {dc.lineChart}
             */
            _chart.dotRadius = function (dotRadius) {
                if (!arguments.length) {
                    return _dotRadius;
                }
                _dotRadius = dotRadius;
                return _chart;
            };

            /**
             * Always show individual dots for each datapoint.
             * If `options` is falsy, it disables data point rendering.
             *
             * If no `options` are provided, the current `options` values are instead returned.
             * @method renderDataPoints
             * @memberof dc.lineChart
             * @instance
             * @example
             * chart.renderDataPoints({radius: 2, fillOpacity: 0.8, strokeOpacity: 0.8})
             * @param  {{fillOpacity: Number, strokeOpacity: Number, radius: Number}} [options={fillOpacity: 0.8, strokeOpacity: 0.8, radius: 2}]
             * @return {{fillOpacity: Number, strokeOpacity: Number, radius: Number}}
             * @return {dc.lineChart}
             */
            _chart.renderDataPoints = function (options) {
                if (!arguments.length) {
                    return {
                        fillOpacity: _dataPointFillOpacity,
                        strokeOpacity: _dataPointStrokeOpacity,
                        radius: _dataPointRadius
                    };
                } else if (!options) {
                    _dataPointFillOpacity = DEFAULT_DOT_OPACITY;
                    _dataPointStrokeOpacity = DEFAULT_DOT_OPACITY;
                    _dataPointRadius = null;
                } else {
                    _dataPointFillOpacity = options.fillOpacity || 0.8;
                    _dataPointStrokeOpacity = options.strokeOpacity || 0.8;
                    _dataPointRadius = options.radius || 2;
                }
                return _chart;
            };

            function colorFilter (color, dashstyle, inv) {
                return function () {
                    var item = d3.select(this);
                    var match = (item.attr('stroke') === color &&
                        item.attr('stroke-dasharray') === ((dashstyle instanceof Array) ?
                            dashstyle.join(',') : null)) || item.attr('fill') === color;
                    return inv ? !match : match;
                };
            }

            _chart.legendHighlight = function (d) {
                if (!_chart.isLegendableHidden(d)) {
                    _chart.g().selectAll('path.line, path.area')
                        .classed('highlight', colorFilter(d.color, d.dashstyle))
                        .classed('fadeout', colorFilter(d.color, d.dashstyle, true));
                }
            };

            _chart.legendReset = function () {
                _chart.g().selectAll('path.line, path.area')
                    .classed('highlight', false)
                    .classed('fadeout', false);
            };

            dc.override(_chart, 'legendables', function () {
                var legendables = _chart._legendables();
                if (!_dashStyle) {
                    return legendables;
                }
                return legendables.map(function (l) {
                    l.dashstyle = _dashStyle;
                    return l;
                });
            });

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * The data count widget is a simple widget designed to display the number of records selected by the
         * current filters out of the total number of records in the data set. Once created the data count widget
         * will automatically update the text content of the following elements under the parent element.
         *
         * Note: this widget works best for the specific case of showing the number of records out of a
         * total. If you want a more general-purpose numeric display, please use the
         * {@link dc.numberDisplay} widget instead.
         *
         * '.total-count' - total number of records
         * '.filter-count' - number of records matched by the current filters
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * @class dataCount
         * @memberof dc
         * @mixes dc.baseMixin
         * @example
         * var ndx = crossfilter(data);
         * var all = ndx.groupAll();
         *
         * dc.dataCount('.dc-data-count')
         *     .dimension(ndx)
         *     .group(all);
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.dataCount}
         */
        dc.dataCount = function (parent, chartGroup) {
            var _formatNumber = d3.format(',d');
            var _chart = dc.baseMixin({});
            var _html = {some: '', all: ''};

            /**
             * Gets or sets an optional object specifying HTML templates to use depending how many items are
             * selected. The text `%total-count` will replaced with the total number of records, and the text
             * `%filter-count` will be replaced with the number of selected records.
             * - all: HTML template to use if all items are selected
             * - some: HTML template to use if not all items are selected
             * @method html
             * @memberof dc.dataCount
             * @instance
             * @example
             * counter.html({
     *      some: '%filter-count out of %total-count records selected',
     *      all: 'All records selected. Click on charts to apply filters'
     * })
             * @param {{some:String, all: String}} [options]
             * @return {{some:String, all: String}}
             * @return {dc.dataCount}
             */
            _chart.html = function (options) {
                if (!arguments.length) {
                    return _html;
                }
                if (options.all) {
                    _html.all = options.all;
                }
                if (options.some) {
                    _html.some = options.some;
                }
                return _chart;
            };

            /**
             * Gets or sets an optional function to format the filter count and total count.
             * @method formatNumber
             * @memberof dc.dataCount
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Formatting d3.format}
             * @example
             * counter.formatNumber(d3.format('.2g'))
             * @param {Function} [formatter=d3.format('.2g')]
             * @return {Function}
             * @return {dc.dataCount}
             */
            _chart.formatNumber = function (formatter) {
                if (!arguments.length) {
                    return _formatNumber;
                }
                _formatNumber = formatter;
                return _chart;
            };

            _chart._doRender = function () {
                var tot = _chart.dimension().size(),
                    val = _chart.group().value();
                var all = _formatNumber(tot);
                var selected = _formatNumber(val);

                if ((tot === val) && (_html.all !== '')) {
                    _chart.root().html(_html.all.replace('%total-count', all).replace('%filter-count', selected));
                } else if (_html.some !== '') {
                    _chart.root().html(_html.some.replace('%total-count', all).replace('%filter-count', selected));
                } else {
                    _chart.selectAll('.total-count').text(all);
                    _chart.selectAll('.filter-count').text(selected);
                }
                return _chart;
            };

            _chart._doRedraw = function () {
                return _chart._doRender();
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * The data table is a simple widget designed to list crossfilter focused data set (rows being
         * filtered) in a good old tabular fashion.
         *
         * Note: Unlike other charts, the data table (and data grid chart) use the group attribute as a
         * keying function for {@link https://github.com/mbostock/d3/wiki/Arrays#-nest nesting} the data
         * together in groups.  Do not pass in a crossfilter group as this will not work.
         *
         * Another interesting feature of the data table is that you can pass a crossfilter group to the `dimension`, as
         * long as you specify the {@link dc.dataTable#order order} as `d3.descending`, since the data
         * table will use `dimension.top()` to fetch the data in that case, and the method is equally
         * supported on the crossfilter group as the crossfilter dimension.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * - {@link http://dc-js.github.io/dc.js/examples/table-on-aggregated-data.html dataTable on a crossfilter group}
         * ({@link https://github.com/dc-js/dc.js/blob/develop/web/examples/table-on-aggregated-data.html source})
         * @class dataTable
         * @memberof dc
         * @mixes dc.baseMixin
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.dataTable}
         */
        dc.dataTable = function (parent, chartGroup) {
            var LABEL_CSS_CLASS = 'dc-table-label';
            var ROW_CSS_CLASS = 'dc-table-row';
            var COLUMN_CSS_CLASS = 'dc-table-column';
            var GROUP_CSS_CLASS = 'dc-table-group';
            var HEAD_CSS_CLASS = 'dc-table-head';

            var _chart = dc.baseMixin({});

            var _size = 25;
            var _columns = [];
            var _sortBy = function (d) {
                return d;
            };
            var _order = d3.ascending;
            var _beginSlice = 0;
            var _endSlice;
            var _showGroups = true;

            _chart._doRender = function () {
                _chart.selectAll('tbody').remove();

                renderRows(renderGroups());

                return _chart;
            };

            _chart._doColumnValueFormat = function (v, d) {
                return ((typeof v === 'function') ?
                        v(d) :                          // v as function
                        ((typeof v === 'string') ?
                                d[v] :                         // v is field name string
                                v.format(d)                        // v is Object, use fn (element 2)
                        )
                );
            };

            _chart._doColumnHeaderFormat = function (d) {
                // if 'function', convert to string representation
                // show a string capitalized
                // if an object then display its label string as-is.
                return (typeof d === 'function') ?
                    _chart._doColumnHeaderFnToString(d) :
                    ((typeof d === 'string') ?
                        _chart._doColumnHeaderCapitalize(d) : String(d.label));
            };

            _chart._doColumnHeaderCapitalize = function (s) {
                // capitalize
                return s.charAt(0).toUpperCase() + s.slice(1);
            };

            _chart._doColumnHeaderFnToString = function (f) {
                // columnString(f) {
                var s = String(f);
                var i1 = s.indexOf('return ');
                if (i1 >= 0) {
                    var i2 = s.lastIndexOf(';');
                    if (i2 >= 0) {
                        s = s.substring(i1 + 7, i2);
                        var i3 = s.indexOf('numberFormat');
                        if (i3 >= 0) {
                            s = s.replace('numberFormat', '');
                        }
                    }
                }
                return s;
            };

            function renderGroups () {
                // The 'original' example uses all 'functions'.
                // If all 'functions' are used, then don't remove/add a header, and leave
                // the html alone. This preserves the functionality of earlier releases.
                // A 2nd option is a string representing a field in the data.
                // A third option is to supply an Object such as an array of 'information', and
                // supply your own _doColumnHeaderFormat and _doColumnValueFormat functions to
                // create what you need.
                var bAllFunctions = true;
                _columns.forEach(function (f) {
                    bAllFunctions = bAllFunctions & (typeof f === 'function');
                });

                if (!bAllFunctions) {
                    // ensure one thead
                    var thead = _chart.selectAll('thead').data([0]);
                    thead.enter().append('thead');
                    thead.exit().remove();

                    // with one tr
                    var headrow = thead.selectAll('tr').data([0]);
                    headrow.enter().append('tr');
                    headrow.exit().remove();

                    // with a th for each column
                    var headcols = headrow.selectAll('th')
                        .data(_columns);
                    headcols.enter().append('th');
                    headcols.exit().remove();

                    headcols
                        .attr('class', HEAD_CSS_CLASS)
                        .html(function (d) {
                            return (_chart._doColumnHeaderFormat(d));

                        });
                }

                var groups = _chart.root().selectAll('tbody')
                    .data(nestEntries(), function (d) {
                        return _chart.keyAccessor()(d);
                    });

                var rowGroup = groups
                    .enter()
                    .append('tbody');

                if (_showGroups === true) {
                    rowGroup
                        .append('tr')
                        .attr('class', GROUP_CSS_CLASS)
                        .append('td')
                        .attr('class', LABEL_CSS_CLASS)
                        .attr('colspan', _columns.length)
                        .html(function (d) {
                            return _chart.keyAccessor()(d);
                        });
                }

                groups.exit().remove();

                return rowGroup;
            }

            function nestEntries () {
                var entries;
                if (_order === d3.ascending) {
                    entries = _chart.dimension().bottom(_size);
                } else {
                    entries = _chart.dimension().top(_size);
                }

                return d3.nest()
                    .key(_chart.group())
                    .sortKeys(_order)
                    .entries(entries.sort(function (a, b) {
                        return _order(_sortBy(a), _sortBy(b));
                    }).slice(_beginSlice, _endSlice));
            }

            function renderRows (groups) {
                var rows = groups.order()
                    .selectAll('tr.' + ROW_CSS_CLASS)
                    .data(function (d) {
                        return d.values;
                    });

                var rowEnter = rows.enter()
                    .append('tr')
                    .attr('class', ROW_CSS_CLASS);

                _columns.forEach(function (v, i) {
                    rowEnter.append('td')
                        .attr('class', COLUMN_CSS_CLASS + ' _' + i)
                        .html(function (d) {
                            return _chart._doColumnValueFormat(v, d);
                        });
                });

                rows.exit().remove();

                return rows;
            }

            _chart._doRedraw = function () {
                return _chart._doRender();
            };

            /**
             * Get or set the table size which determines the number of rows displayed by the widget.
             * @method size
             * @memberof dc.dataTable
             * @instance
             * @param {Number} [size=25]
             * @return {Number}
             * @return {dc.dataTable}
             */
            _chart.size = function (size) {
                if (!arguments.length) {
                    return _size;
                }
                _size = size;
                return _chart;
            };

            /**
             * Get or set the index of the beginning slice which determines which entries get displayed
             * by the widget. Useful when implementing pagination.
             *
             * Note: the sortBy function will determine how the rows are ordered for pagination purposes.

             * See the {@link http://dc-js.github.io/dc.js/examples/table-pagination.html table pagination example}
             * to see how to implement the pagination user interface using `beginSlice` and `endSlice`.
             * @method beginSlice
             * @memberof dc.dataTable
             * @instance
             * @param {Number} [beginSlice=0]
             * @return {Number}
             * @return {dc.dataTable}
             */
            _chart.beginSlice = function (beginSlice) {
                if (!arguments.length) {
                    return _beginSlice;
                }
                _beginSlice = beginSlice;
                return _chart;
            };

            /**
             * Get or set the index of the end slice which determines which entries get displayed by the
             * widget. Useful when implementing pagination. See {@link dc.dataTable#beginSlice `beginSlice`} for more information.
             * @method endSlice
             * @memberof dc.dataTable
             * @instance
             * @param {Number|undefined} [endSlice=undefined]
             * @return {Number}
             * @return {dc.dataTable}
             */
            _chart.endSlice = function (endSlice) {
                if (!arguments.length) {
                    return _endSlice;
                }
                _endSlice = endSlice;
                return _chart;
            };

            /**
             * Get or set column functions. The data table widget supports several methods of specifying the
             * columns to display.
             *
             * The original method uses an array of functions to generate dynamic columns. Column functions
             * are simple javascript functions with only one input argument `d` which represents a row in
             * the data set. The return value of these functions will be used to generate the content for
             * each cell. However, this method requires the HTML for the table to have a fixed set of column
             * headers.
             *
             * <pre><code>chart.columns([
             *     function(d) { return d.date; },
             *     function(d) { return d.open; },
             *     function(d) { return d.close; },
             *     function(d) { return numberFormat(d.close - d.open); },
             *     function(d) { return d.volume; }
             * ]);
             * </code></pre>
             *
             * In the second method, you can list the columns to read from the data without specifying it as
             * a function, except where necessary (ie, computed columns).  Note the data element name is
             * capitalized when displayed in the table header. You can also mix in functions as necessary,
             * using the third `{label, format}` form, as shown below.
             *
             * <pre><code>chart.columns([
             *     "date",    // d["date"], ie, a field accessor; capitalized automatically
             *     "open",    // ...
             *     "close",   // ...
             *     {
     *         label: "Change",
     *         format: function (d) {
     *             return numberFormat(d.close - d.open);
     *         }
     *     },
             *     "volume"   // d["volume"], ie, a field accessor; capitalized automatically
             * ]);
             * </code></pre>
             *
             * In the third example, we specify all fields using the `{label, format}` method:
             * <pre><code>chart.columns([
             *     {
     *         label: "Date",
     *         format: function (d) { return d.date; }
     *     },
             *     {
     *         label: "Open",
     *         format: function (d) { return numberFormat(d.open); }
     *     },
             *     {
     *         label: "Close",
     *         format: function (d) { return numberFormat(d.close); }
     *     },
             *     {
     *         label: "Change",
     *         format: function (d) { return numberFormat(d.close - d.open); }
     *     },
             *     {
     *         label: "Volume",
     *         format: function (d) { return d.volume; }
     *     }
             * ]);
             * </code></pre>
             *
             * You may wish to override the dataTable functions `_doColumnHeaderCapitalize` and
             * `_doColumnHeaderFnToString`, which are used internally to translate the column information or
             * function into a displayed header. The first one is used on the "string" column specifier; the
             * second is used to transform a stringified function into something displayable. For the Stock
             * example, the function for Change becomes the table header **d.close - d.open**.
             *
             * Finally, you can even specify a completely different form of column definition. To do this,
             * override `_chart._doColumnHeaderFormat` and `_chart._doColumnValueFormat` Be aware that
             * fields without numberFormat specification will be displayed just as they are stored in the
             * data, unformatted.
             * @method columns
             * @memberof dc.dataTable
             * @instance
             * @param {Array<Function>} [columns=[]]
             * @return {Array<Function>}}
             * @return {dc.dataTable}
             */
            _chart.columns = function (columns) {
                if (!arguments.length) {
                    return _columns;
                }
                _columns = columns;
                return _chart;
            };

            /**
             * Get or set sort-by function. This function works as a value accessor at row level and returns a
             * particular field to be sorted by. Default value: identity function
             * @method sortBy
             * @memberof dc.dataTable
             * @instance
             * @example
             * chart.sortBy(function(d) {
     *     return d.date;
     * });
             * @param {Function} [sortBy]
             * @return {Function}
             * @return {dc.dataTable}
             */
            _chart.sortBy = function (sortBy) {
                if (!arguments.length) {
                    return _sortBy;
                }
                _sortBy = sortBy;
                return _chart;
            };

            /**
             * Get or set sort order. If the order is `d3.ascending`, the data table will use
             * `dimension().bottom()` to fetch the data; otherwise it will use `dimension().top()`
             * @method order
             * @memberof dc.dataTable
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_ascending d3.ascending}
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_descending d3.descending}
             * @example
             * chart.order(d3.descending);
             * @param {Function} [order=d3.ascending]
             * @return {Function}
             * @return {dc.dataTable}
             */
            _chart.order = function (order) {
                if (!arguments.length) {
                    return _order;
                }
                _order = order;
                return _chart;
            };

            /**
             * Get or set if group rows will be shown.
             *
             * The .group() getter-setter must be provided in either case.
             * @method showGroups
             * @memberof dc.dataTable
             * @instance
             * @example
             * chart
             *     .group([value], [name])
             *     .showGroups(true|false);
             * @param {Boolean} [showGroups=true]
             * @return {Boolean}
             * @return {dc.dataTable}
             */
            _chart.showGroups = function (showGroups) {
                if (!arguments.length) {
                    return _showGroups;
                }
                _showGroups = showGroups;
                return _chart;
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * Data grid is a simple widget designed to list the filtered records, providing
         * a simple way to define how the items are displayed.
         *
         * Note: Unlike other charts, the data grid chart (and data table) use the group attribute as a keying function
         * for {@link https://github.com/mbostock/d3/wiki/Arrays#-nest nesting} the data together in groups.
         * Do not pass in a crossfilter group as this will not work.
         *
         * Examples:
         * - {@link http://europarl.me/dc.js/web/ep/index.html List of members of the european parliament}
         * @class dataGrid
         * @memberof dc
         * @mixes dc.baseMixin
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.dataGrid}
         */
        dc.dataGrid = function (parent, chartGroup) {
            var LABEL_CSS_CLASS = 'dc-grid-label';
            var ITEM_CSS_CLASS = 'dc-grid-item';
            var GROUP_CSS_CLASS = 'dc-grid-group';
            var GRID_CSS_CLASS = 'dc-grid-top';

            var _chart = dc.baseMixin({});

            var _size = 999; // shouldn't be needed, but you might
            var _html = function (d) { return 'you need to provide an html() handling param:  ' + JSON.stringify(d); };
            var _sortBy = function (d) {
                return d;
            };
            var _order = d3.ascending;
            var _beginSlice = 0, _endSlice;

            var _htmlGroup = function (d) {
                return '<div class=\'' + GROUP_CSS_CLASS + '\'><h1 class=\'' + LABEL_CSS_CLASS + '\'>' +
                    _chart.keyAccessor()(d) + '</h1></div>';
            };

            _chart._doRender = function () {
                _chart.selectAll('div.' + GRID_CSS_CLASS).remove();

                renderItems(renderGroups());

                return _chart;
            };

            function renderGroups () {
                var groups = _chart.root().selectAll('div.' + GRID_CSS_CLASS)
                    .data(nestEntries(), function (d) {
                        return _chart.keyAccessor()(d);
                    });

                var itemGroup = groups
                    .enter()
                    .append('div')
                    .attr('class', GRID_CSS_CLASS);

                if (_htmlGroup) {
                    itemGroup
                        .html(function (d) {
                            return _htmlGroup(d);
                        });
                }

                groups.exit().remove();
                return itemGroup;
            }

            function nestEntries () {
                var entries = _chart.dimension().top(_size);

                return d3.nest()
                    .key(_chart.group())
                    .sortKeys(_order)
                    .entries(entries.sort(function (a, b) {
                        return _order(_sortBy(a), _sortBy(b));
                    }).slice(_beginSlice, _endSlice));
            }

            function renderItems (groups) {
                var items = groups.order()
                    .selectAll('div.' + ITEM_CSS_CLASS)
                    .data(function (d) {
                        return d.values;
                    });

                items.enter()
                    .append('div')
                    .attr('class', ITEM_CSS_CLASS)
                    .html(function (d) {
                        return _html(d);
                    });

                items.exit().remove();

                return items;
            }

            _chart._doRedraw = function () {
                return _chart._doRender();
            };

            /**
             * Get or set the index of the beginning slice which determines which entries get displayed by the widget.
             * Useful when implementing pagination.
             * @method beginSlice
             * @memberof dc.dataGrid
             * @instance
             * @param {Number} [beginSlice=0]
             * @return {Number}
             * @return {dc.dataGrid}
             */
            _chart.beginSlice = function (beginSlice) {
                if (!arguments.length) {
                    return _beginSlice;
                }
                _beginSlice = beginSlice;
                return _chart;
            };

            /**
             * Get or set the index of the end slice which determines which entries get displayed by the widget
             * Useful when implementing pagination.
             * @method endSlice
             * @memberof dc.dataGrid
             * @instance
             * @param {Number} [endSlice]
             * @return {Number}
             * @return {dc.dataGrid}
             */
            _chart.endSlice = function (endSlice) {
                if (!arguments.length) {
                    return _endSlice;
                }
                _endSlice = endSlice;
                return _chart;
            };

            /**
             * Get or set the grid size which determines the number of items displayed by the widget.
             * @method size
             * @memberof dc.dataGrid
             * @instance
             * @param {Number} [size=999]
             * @return {Number}
             * @return {dc.dataGrid}
             */
            _chart.size = function (size) {
                if (!arguments.length) {
                    return _size;
                }
                _size = size;
                return _chart;
            };

            /**
             * Get or set the function that formats an item. The data grid widget uses a
             * function to generate dynamic html. Use your favourite templating engine or
             * generate the string directly.
             * @method html
             * @memberof dc.dataGrid
             * @instance
             * @example
             * chart.html(function (d) { return '<div class='item '+data.exampleCategory+''>'+data.exampleString+'</div>';});
             * @param {Function} [html]
             * @return {Function}
             * @return {dc.dataGrid}
             */
            _chart.html = function (html) {
                if (!arguments.length) {
                    return _html;
                }
                _html = html;
                return _chart;
            };

            /**
             * Get or set the function that formats a group label.
             * @method htmlGroup
             * @memberof dc.dataGrid
             * @instance
             * @example
             * chart.htmlGroup (function (d) { return '<h2>'.d.key . 'with ' . d.values.length .' items</h2>'});
             * @param {Function} [htmlGroup]
             * @return {Function}
             * @return {dc.dataGrid}
             */
            _chart.htmlGroup = function (htmlGroup) {
                if (!arguments.length) {
                    return _htmlGroup;
                }
                _htmlGroup = htmlGroup;
                return _chart;
            };

            /**
             * Get or set sort-by function. This function works as a value accessor at the item
             * level and returns a particular field to be sorted.
             * @method sortBy
             * @memberof dc.dataGrid
             * @instance
             * @example
             * chart.sortBy(function(d) {
     *     return d.date;
     * });
             * @param {Function} [sortByFunction]
             * @return {Function}
             * @return {dc.dataGrid}
             */
            _chart.sortBy = function (sortByFunction) {
                if (!arguments.length) {
                    return _sortBy;
                }
                _sortBy = sortByFunction;
                return _chart;
            };

            /**
             * Get or set sort order function.
             * @method order
             * @memberof dc.dataGrid
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_ascending d3.ascending}
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_descending d3.descending}
             * @example
             * chart.order(d3.descending);
             * @param {Function} [order=d3.ascending]
             * @return {Function}
             * @return {dc.dataGrid}
             */
            _chart.order = function (order) {
                if (!arguments.length) {
                    return _order;
                }
                _order = order;
                return _chart;
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * A concrete implementation of a general purpose bubble chart that allows data visualization using the
         * following dimensions:
         * - x axis position
         * - y axis position
         * - bubble radius
         * - color
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * - {@link http://dc-js.github.com/dc.js/vc/index.html US Venture Capital Landscape 2011}
         * @class bubbleChart
         * @memberof dc
         * @mixes dc.bubbleMixin
         * @mixes dc.coordinateGridMixin
         * @example
         * // create a bubble chart under #chart-container1 element using the default global chart group
         * var bubbleChart1 = dc.bubbleChart('#chart-container1');
         * // create a bubble chart under #chart-container2 element using chart group A
         * var bubbleChart2 = dc.bubbleChart('#chart-container2', 'chartGroupA');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.bubbleChart}
         */
        dc.bubbleChart = function (parent, chartGroup) {
            var _chart = dc.bubbleMixin(dc.coordinateGridMixin({}));

            var _elasticRadius = false;
            var _sortBubbleSize = false;

            _chart.transitionDuration(750);

            var bubbleLocator = function (d) {
                return 'translate(' + (bubbleX(d)) + ',' + (bubbleY(d)) + ')';
            };

            /**
             * Turn on or off the elastic bubble radius feature, or return the value of the flag. If this
             * feature is turned on, then bubble radii will be automatically rescaled to fit the chart better.
             * @method elasticRadius
             * @memberof dc.bubbleChart
             * @instance
             * @param {Boolean} [elasticRadius=false]
             * @return {Boolean}
             * @return {dc.bubbleChart}
             */
            _chart.elasticRadius = function (elasticRadius) {
                if (!arguments.length) {
                    return _elasticRadius;
                }
                _elasticRadius = elasticRadius;
                return _chart;
            };

            /**
             * Turn on or off the bubble sorting feature, or return the value of the flag. If enabled,
             * bubbles will be sorted by their radius, with smaller bubbles in front.
             * @method sortBubbleSize
             * @memberof dc.bubbleChart
             * @instance
             * @param {Boolean} [sortBubbleSize=false]
             * @return {Boolean}
             * @return {dc.bubbleChart}
             */
            _chart.sortBubbleSize = function (sortBubbleSize) {
                if (!arguments.length) {
                    return _sortBubbleSize;
                }
                _sortBubbleSize = sortBubbleSize;
                return _chart;
            };

            _chart.plotData = function () {
                if (_elasticRadius) {
                    _chart.r().domain([_chart.rMin(), _chart.rMax()]);
                }

                _chart.r().range([_chart.MIN_RADIUS, _chart.xAxisLength() * _chart.maxBubbleRelativeSize()]);

                var data = _chart.data();
                if (_sortBubbleSize) {
                    // sort descending so smaller bubbles are on top
                    var radiusAccessor = _chart.radiusValueAccessor();
                    data.sort(function (a, b) { return d3.descending(radiusAccessor(a), radiusAccessor(b)); });
                }
                var bubbleG = _chart.chartBodyG().selectAll('g.' + _chart.BUBBLE_NODE_CLASS)
                    .data(data, function (d) { return d.key; });
                if (_sortBubbleSize) {
                    // Call order here to update dom order based on sort
                    bubbleG.order();
                }

                renderNodes(bubbleG);

                updateNodes(bubbleG);

                removeNodes(bubbleG);

                _chart.fadeDeselectedArea();
            };

            function renderNodes (bubbleG) {
                var bubbleGEnter = bubbleG.enter().append('g');

                bubbleGEnter
                    .attr('class', _chart.BUBBLE_NODE_CLASS)
                    .attr('transform', bubbleLocator)
                    .append('circle').attr('class', function (d, i) {
                    return _chart.BUBBLE_CLASS + ' _' + i;
                })
                    .on('click', _chart.onClick)
                    .attr('fill', _chart.getColor)
                    .attr('r', 0);
                dc.transition(bubbleG, _chart.transitionDuration())
                    .selectAll('circle.' + _chart.BUBBLE_CLASS)
                    .attr('r', function (d) {
                        return _chart.bubbleR(d);
                    })
                    .attr('opacity', function (d) {
                        return (_chart.bubbleR(d) > 0) ? 1 : 0;
                    });

                _chart._doRenderLabel(bubbleGEnter);

                _chart._doRenderTitles(bubbleGEnter);
            }

            function updateNodes (bubbleG) {
                dc.transition(bubbleG, _chart.transitionDuration())
                    .attr('transform', bubbleLocator)
                    .selectAll('circle.' + _chart.BUBBLE_CLASS)
                    .attr('fill', _chart.getColor)
                    .attr('r', function (d) {
                        return _chart.bubbleR(d);
                    })
                    .attr('opacity', function (d) {
                        return (_chart.bubbleR(d) > 0) ? 1 : 0;
                    });

                _chart.doUpdateLabels(bubbleG);
                _chart.doUpdateTitles(bubbleG);
            }

            function removeNodes (bubbleG) {
                bubbleG.exit().remove();
            }

            function bubbleX (d) {
                var x = _chart.x()(_chart.keyAccessor()(d));
                if (isNaN(x)) {
                    x = 0;
                }
                return x;
            }

            function bubbleY (d) {
                var y = _chart.y()(_chart.valueAccessor()(d));
                if (isNaN(y)) {
                    y = 0;
                }
                return y;
            }

            _chart.renderBrush = function () {
                // override default x axis brush from parent chart
            };

            _chart.redrawBrush = function () {
                // override default x axis brush from parent chart
                _chart.fadeDeselectedArea();
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * Composite charts are a special kind of chart that render multiple charts on the same Coordinate
         * Grid. You can overlay (compose) different bar/line/area charts in a single composite chart to
         * achieve some quite flexible charting effects.
         * @class compositeChart
         * @memberof dc
         * @mixes dc.coordinateGridMixin
         * @example
         * // create a composite chart under #chart-container1 element using the default global chart group
         * var compositeChart1 = dc.compositeChart('#chart-container1');
         * // create a composite chart under #chart-container2 element using chart group A
         * var compositeChart2 = dc.compositeChart('#chart-container2', 'chartGroupA');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.compositeChart}
         */
        dc.compositeChart = function (parent, chartGroup) {

            var SUB_CHART_CLASS = 'sub';
            var DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING = 12;

            var _chart = dc.coordinateGridMixin({});
            var _children = [];

            var _childOptions = {};

            var _shareColors = false,
                _shareTitle = true,
                _alignYAxes = false;

            var _rightYAxis = d3.svg.axis(),
                _rightYAxisLabel = 0,
                _rightYAxisLabelPadding = DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING,
                _rightY,
                _rightAxisGridLines = false;

            _chart._mandatoryAttributes([]);
            _chart.transitionDuration(500);

            dc.override(_chart, '_generateG', function () {
                var g = this.__generateG();

                for (var i = 0; i < _children.length; ++i) {
                    var child = _children[i];

                    generateChildG(child, i);

                    if (!child.dimension()) {
                        child.dimension(_chart.dimension());
                    }
                    if (!child.group()) {
                        child.group(_chart.group());
                    }

                    child.chartGroup(_chart.chartGroup());
                    child.svg(_chart.svg());
                    child.xUnits(_chart.xUnits());
                    child.transitionDuration(_chart.transitionDuration());
                    child.brushOn(_chart.brushOn());
                    child.renderTitle(_chart.renderTitle());
                    child.elasticX(_chart.elasticX());
                }

                return g;
            });

            _chart._brushing = function () {
                var extent = _chart.extendBrush();
                var brushIsEmpty = _chart.brushIsEmpty(extent);

                for (var i = 0; i < _children.length; ++i) {
                    _children[i].replaceFilter(brushIsEmpty ? null : extent);
                }
            };

            _chart._prepareYAxis = function () {
                var left = (leftYAxisChildren().length !== 0);
                var right = (rightYAxisChildren().length !== 0);
                var ranges = calculateYAxisRanges(left, right);

                if (left) { prepareLeftYAxis(ranges); }
                if (right) { prepareRightYAxis(ranges); }

                if (leftYAxisChildren().length > 0 && !_rightAxisGridLines) {
                    _chart._renderHorizontalGridLinesForAxis(_chart.g(), _chart.y(), _chart.yAxis());
                } else if (rightYAxisChildren().length > 0) {
                    _chart._renderHorizontalGridLinesForAxis(_chart.g(), _rightY, _rightYAxis);
                }
            };

            _chart.renderYAxis = function () {
                if (leftYAxisChildren().length !== 0) {
                    _chart.renderYAxisAt('y', _chart.yAxis(), _chart.margins().left);
                    _chart.renderYAxisLabel('y', _chart.yAxisLabel(), -90);
                }

                if (rightYAxisChildren().length !== 0) {
                    _chart.renderYAxisAt('yr', _chart.rightYAxis(), _chart.width() - _chart.margins().right);
                    _chart.renderYAxisLabel('yr', _chart.rightYAxisLabel(), 90, _chart.width() - _rightYAxisLabelPadding);
                }
            };

            function calculateYAxisRanges (left, right) {
                var lyAxisMin, lyAxisMax, ryAxisMin, ryAxisMax;
                var ranges;

                if (left) {
                    lyAxisMin = yAxisMin();
                    lyAxisMax = yAxisMax();
                }

                if (right) {
                    ryAxisMin = rightYAxisMin();
                    ryAxisMax = rightYAxisMax();
                }

                if (_chart.alignYAxes() && left && right) {
                    ranges = alignYAxisRanges(lyAxisMin, lyAxisMax, ryAxisMin, ryAxisMax);
                }

                return ranges || {
                        lyAxisMin: lyAxisMin,
                        lyAxisMax: lyAxisMax,
                        ryAxisMin: ryAxisMin,
                        ryAxisMax: ryAxisMax
                    };
            }

            function alignYAxisRanges (lyAxisMin, lyAxisMax, ryAxisMin, ryAxisMax) {
                // since the two series will share a zero, each Y is just a multiple
                // of the other. and the ratio should be the ratio of the ranges of the
                // input data, so that they come out the same height. so we just min/max

                // note: both ranges already include zero due to the stack mixin (#667)
                // if #667 changes, we can reconsider whether we want data height or
                // height from zero to be equal. and it will be possible for the axes
                // to be aligned but not visible.
                var extentRatio = (ryAxisMax - ryAxisMin) / (lyAxisMax - lyAxisMin);

                return {
                    lyAxisMin: Math.min(lyAxisMin, ryAxisMin / extentRatio),
                    lyAxisMax: Math.max(lyAxisMax, ryAxisMax / extentRatio),
                    ryAxisMin: Math.min(ryAxisMin, lyAxisMin * extentRatio),
                    ryAxisMax: Math.max(ryAxisMax, lyAxisMax * extentRatio)
                };
            }

            function prepareRightYAxis (ranges) {
                var needDomain = _chart.rightY() === undefined || _chart.elasticY(),
                    needRange = needDomain || _chart.resizing();
                if (_chart.rightY() === undefined) {
                    _chart.rightY(d3.scale.linear());
                }
                if (needDomain) {
                    _chart.rightY().domain([ranges.ryAxisMin, ranges.ryAxisMax]);
                }
                if (needRange) {
                    _chart.rightY().rangeRound([_chart.yAxisHeight(), 0]);
                }

                _chart.rightY().range([_chart.yAxisHeight(), 0]);
                _chart.rightYAxis(_chart.rightYAxis().scale(_chart.rightY()));

                _chart.rightYAxis().orient('right');
            }

            function prepareLeftYAxis (ranges) {
                var needDomain = _chart.y() === undefined || _chart.elasticY(),
                    needRange = needDomain || _chart.resizing();
                if (_chart.y() === undefined) {
                    _chart.y(d3.scale.linear());
                }
                if (needDomain) {
                    _chart.y().domain([ranges.lyAxisMin, ranges.lyAxisMax]);
                }
                if (needRange) {
                    _chart.y().rangeRound([_chart.yAxisHeight(), 0]);
                }

                _chart.y().range([_chart.yAxisHeight(), 0]);
                _chart.yAxis(_chart.yAxis().scale(_chart.y()));

                _chart.yAxis().orient('left');
            }

            function generateChildG (child, i) {
                child._generateG(_chart.g());
                child.g().attr('class', SUB_CHART_CLASS + ' _' + i);
            }

            _chart.plotData = function () {
                for (var i = 0; i < _children.length; ++i) {
                    var child = _children[i];

                    if (!child.g()) {
                        generateChildG(child, i);
                    }

                    if (_shareColors) {
                        child.colors(_chart.colors());
                    }

                    child.x(_chart.x());

                    child.xAxis(_chart.xAxis());

                    if (child.useRightYAxis()) {
                        child.y(_chart.rightY());
                        child.yAxis(_chart.rightYAxis());
                    } else {
                        child.y(_chart.y());
                        child.yAxis(_chart.yAxis());
                    }

                    child.plotData();

                    child._activateRenderlets();
                }
            };

            /**
             * Get or set whether to draw gridlines from the right y axis.  Drawing from the left y axis is the
             * default behavior. This option is only respected when subcharts with both left and right y-axes
             * are present.
             * @method useRightAxisGridLines
             * @memberof dc.compositeChart
             * @instance
             * @param {Boolean} [useRightAxisGridLines=false]
             * @return {Boolean}
             * @return {dc.compositeChart}
             */
            _chart.useRightAxisGridLines = function (useRightAxisGridLines) {
                if (!arguments) {
                    return _rightAxisGridLines;
                }

                _rightAxisGridLines = useRightAxisGridLines;
                return _chart;
            };

            /**
             * Get or set chart-specific options for all child charts. This is equivalent to calling
             * {@link dc.baseMixin#options .options} on each child chart.
             * @method childOptions
             * @memberof dc.compositeChart
             * @instance
             * @param {Object} [childOptions]
             * @return {Object}
             * @return {dc.compositeChart}
             */
            _chart.childOptions = function (childOptions) {
                if (!arguments.length) {
                    return _childOptions;
                }
                _childOptions = childOptions;
                _children.forEach(function (child) {
                    child.options(_childOptions);
                });
                return _chart;
            };

            _chart.fadeDeselectedArea = function () {
                for (var i = 0; i < _children.length; ++i) {
                    var child = _children[i];
                    child.brush(_chart.brush());
                    child.fadeDeselectedArea();
                }
            };

            /**
             * Set or get the right y axis label.
             * @method rightYAxisLabel
             * @memberof dc.compositeChart
             * @instance
             * @param {String} [rightYAxisLabel]
             * @param {Number} [padding]
             * @return {String}
             * @return {dc.compositeChart}
             */
            _chart.rightYAxisLabel = function (rightYAxisLabel, padding) {
                if (!arguments.length) {
                    return _rightYAxisLabel;
                }
                _rightYAxisLabel = rightYAxisLabel;
                _chart.margins().right -= _rightYAxisLabelPadding;
                _rightYAxisLabelPadding = (padding === undefined) ? DEFAULT_RIGHT_Y_AXIS_LABEL_PADDING : padding;
                _chart.margins().right += _rightYAxisLabelPadding;
                return _chart;
            };

            /**
             * Combine the given charts into one single composite coordinate grid chart.
             * @method compose
             * @memberof dc.compositeChart
             * @instance
             * @example
             * moveChart.compose([
             *     // when creating sub-chart you need to pass in the parent chart
             *     dc.lineChart(moveChart)
             *         .group(indexAvgByMonthGroup) // if group is missing then parent's group will be used
             *         .valueAccessor(function (d){return d.value.avg;})
             *         // most of the normal functions will continue to work in a composed chart
             *         .renderArea(true)
             *         .stack(monthlyMoveGroup, function (d){return d.value;})
             *         .title(function (d){
     *             var value = d.value.avg?d.value.avg:d.value;
     *             if(isNaN(value)) value = 0;
     *             return dateFormat(d.key) + '\n' + numberFormat(value);
     *         }),
             *     dc.barChart(moveChart)
             *         .group(volumeByMonthGroup)
             *         .centerBar(true)
             * ]);
             * @param {Array<Chart>} [subChartArray]
             * @return {dc.compositeChart}
             */
            _chart.compose = function (subChartArray) {
                _children = subChartArray;
                _children.forEach(function (child) {
                    child.height(_chart.height());
                    child.width(_chart.width());
                    child.margins(_chart.margins());

                    if (_shareTitle) {
                        child.title(_chart.title());
                    }

                    child.options(_childOptions);
                });
                return _chart;
            };

            /**
             * Returns the child charts which are composed into the composite chart.
             * @method children
             * @memberof dc.compositeChart
             * @instance
             * @return {Array<dc.baseMixin>}
             */
            _chart.children = function () {
                return _children;
            };

            /**
             * Get or set color sharing for the chart. If set, the {@link dc.colorMixin#colors .colors()} value from this chart
             * will be shared with composed children. Additionally if the child chart implements
             * Stackable and has not set a custom .colorAccessor, then it will generate a color
             * specific to its order in the composition.
             * @method shareColors
             * @memberof dc.compositeChart
             * @instance
             * @param {Boolean} [shareColors=false]
             * @return {Boolean}
             * @return {dc.compositeChart}
             */
            _chart.shareColors = function (shareColors) {
                if (!arguments.length) {
                    return _shareColors;
                }
                _shareColors = shareColors;
                return _chart;
            };

            /**
             * Get or set title sharing for the chart. If set, the {@link dc.baseMixin#title .title()} value from
             * this chart will be shared with composed children.
             * @method shareTitle
             * @memberof dc.compositeChart
             * @instance
             * @param {Boolean} [shareTitle=true]
             * @return {Boolean}
             * @return {dc.compositeChart}
             */
            _chart.shareTitle = function (shareTitle) {
                if (!arguments.length) {
                    return _shareTitle;
                }
                _shareTitle = shareTitle;
                return _chart;
            };

            /**
             * Get or set the y scale for the right axis. The right y scale is typically automatically
             * generated by the chart implementation.
             * @method rightY
             * @memberof dc.compositeChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Scales d3.scale}
             * @param {d3.scale} [yScale]
             * @return {d3.scale}
             * @return {dc.compositeChart}
             */
            _chart.rightY = function (yScale) {
                if (!arguments.length) {
                    return _rightY;
                }
                _rightY = yScale;
                _chart.rescale();
                return _chart;
            };

            /**
             * Get or set alignment between left and right y axes. A line connecting '0' on both y axis
             * will be parallel to x axis. This only has effect when {@link #dc.coordinateGridMixin+elasticY elasticY} is true.
             * @method alignYAxes
             * @memberof dc.compositeChart
             * @instance
             * @param {Boolean} [alignYAxes=false]
             * @return {Chart}
             */
            _chart.alignYAxes = function (alignYAxes) {
                if (!arguments.length) {
                    return _alignYAxes;
                }
                _alignYAxes = alignYAxes;
                _chart.rescale();
                return _chart;
            };

            function leftYAxisChildren () {
                return _children.filter(function (child) {
                    return !child.useRightYAxis();
                });
            }

            function rightYAxisChildren () {
                return _children.filter(function (child) {
                    return child.useRightYAxis();
                });
            }

            function getYAxisMin (charts) {
                return charts.map(function (c) {
                    return c.yAxisMin();
                });
            }

            delete _chart.yAxisMin;
            function yAxisMin () {
                return d3.min(getYAxisMin(leftYAxisChildren()));
            }

            function rightYAxisMin () {
                return d3.min(getYAxisMin(rightYAxisChildren()));
            }

            function getYAxisMax (charts) {
                return charts.map(function (c) {
                    return c.yAxisMax();
                });
            }

            delete _chart.yAxisMax;
            function yAxisMax () {
                return dc.utils.add(d3.max(getYAxisMax(leftYAxisChildren())), _chart.yAxisPadding());
            }

            function rightYAxisMax () {
                return dc.utils.add(d3.max(getYAxisMax(rightYAxisChildren())), _chart.yAxisPadding());
            }

            function getAllXAxisMinFromChildCharts () {
                return _children.map(function (c) {
                    return c.xAxisMin();
                });
            }

            dc.override(_chart, 'xAxisMin', function () {
                return dc.utils.subtract(d3.min(getAllXAxisMinFromChildCharts()), _chart.xAxisPadding());
            });

            function getAllXAxisMaxFromChildCharts () {
                return _children.map(function (c) {
                    return c.xAxisMax();
                });
            }

            dc.override(_chart, 'xAxisMax', function () {
                return dc.utils.add(d3.max(getAllXAxisMaxFromChildCharts()), _chart.xAxisPadding());
            });

            _chart.legendables = function () {
                return _children.reduce(function (items, child) {
                    if (_shareColors) {
                        child.colors(_chart.colors());
                    }
                    items.push.apply(items, child.legendables());
                    return items;
                }, []);
            };

            _chart.legendHighlight = function (d) {
                for (var j = 0; j < _children.length; ++j) {
                    var child = _children[j];
                    child.legendHighlight(d);
                }
            };

            _chart.legendReset = function (d) {
                for (var j = 0; j < _children.length; ++j) {
                    var child = _children[j];
                    child.legendReset(d);
                }
            };

            _chart.legendToggle = function () {
                console.log('composite should not be getting legendToggle itself');
            };

            /**
             * Set or get the right y axis used by the composite chart. This function is most useful when y
             * axis customization is required. The y axis in dc.js is an instance of a [d3 axis
             * object](https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-_axis) therefore it supports any valid
             * d3 axis manipulation. **Caution**: The y axis is usually generated internally by dc;
             * resetting it may cause unexpected results.
             * @method rightYAxis
             * @memberof dc.compositeChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Axes d3.svg.axis}
             * @example
             * // customize y axis tick format
             * chart.rightYAxis().tickFormat(function (v) {return v + '%';});
             * // customize y axis tick values
             * chart.rightYAxis().tickValues([0, 100, 200, 300]);
             * @param {d3.svg.axis} [rightYAxis]
             * @return {d3.svg.axis}
             * @return {dc.compositeChart}
             */
            _chart.rightYAxis = function (rightYAxis) {
                if (!arguments.length) {
                    return _rightYAxis;
                }
                _rightYAxis = rightYAxis;
                return _chart;
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * A series chart is a chart that shows multiple series of data overlaid on one chart, where the
         * series is specified in the data. It is a specialization of Composite Chart and inherits all
         * composite features other than recomposing the chart.
         *
         * Examples:
         * - {@link http://dc-js.github.io/dc.js/examples/series.html Series Chart}
         * @class seriesChart
         * @memberof dc
         * @mixes dc.compositeChart
         * @example
         * // create a series chart under #chart-container1 element using the default global chart group
         * var seriesChart1 = dc.seriesChart("#chart-container1");
         * // create a series chart under #chart-container2 element using chart group A
         * var seriesChart2 = dc.seriesChart("#chart-container2", "chartGroupA");
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.seriesChart}
         */
        dc.seriesChart = function (parent, chartGroup) {
            var _chart = dc.compositeChart(parent, chartGroup);

            function keySort (a, b) {
                return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
            }

            var _charts = {};
            var _chartFunction = dc.lineChart;
            var _seriesAccessor;
            var _seriesSort = d3.ascending;
            var _valueSort = keySort;

            _chart._mandatoryAttributes().push('seriesAccessor', 'chart');
            _chart.shareColors(true);

            _chart._preprocessData = function () {
                var keep = [];
                var childrenChanged;
                var nester = d3.nest().key(_seriesAccessor);
                if (_seriesSort) {
                    nester.sortKeys(_seriesSort);
                }
                if (_valueSort) {
                    nester.sortValues(_valueSort);
                }
                var nesting = nester.entries(_chart.data());
                var children =
                    nesting.map(function (sub, i) {
                        var subChart = _charts[sub.key] || _chartFunction.call(_chart, _chart, chartGroup, sub.key, i);
                        if (!_charts[sub.key]) {
                            childrenChanged = true;
                        }
                        _charts[sub.key] = subChart;
                        keep.push(sub.key);
                        return subChart
                            .dimension(_chart.dimension())
                            .group({all: d3.functor(sub.values)}, sub.key)
                            .keyAccessor(_chart.keyAccessor())
                            .valueAccessor(_chart.valueAccessor())
                            .brushOn(_chart.brushOn());
                    });
                // this works around the fact compositeChart doesn't really
                // have a removal interface
                Object.keys(_charts)
                    .filter(function (c) {return keep.indexOf(c) === -1;})
                    .forEach(function (c) {
                        clearChart(c);
                        childrenChanged = true;
                    });
                _chart._compose(children);
                if (childrenChanged && _chart.legend()) {
                    _chart.legend().render();
                }
            };

            function clearChart (c) {
                if (_charts[c].g()) {
                    _charts[c].g().remove();
                }
                delete _charts[c];
            }

            function resetChildren () {
                Object.keys(_charts).map(clearChart);
                _charts = {};
            }

            /**
             * Get or set the chart function, which generates the child charts.
             * @method chart
             * @memberof dc.seriesChart
             * @instance
             * @example
             * // put interpolation on the line charts used for the series
             * chart.chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
             * // do a scatter series chart
             * chart.chart(dc.scatterPlot)
             * @param {Function} [chartFunction=dc.lineChart]
             * @return {Function}
             * @return {dc.seriesChart}
             */
            _chart.chart = function (chartFunction) {
                if (!arguments.length) {
                    return _chartFunction;
                }
                _chartFunction = chartFunction;
                resetChildren();
                return _chart;
            };

            /**
             * **mandatory**
             *
             * Get or set accessor function for the displayed series. Given a datum, this function
             * should return the series that datum belongs to.
             * @method seriesAccessor
             * @memberof dc.seriesChart
             * @instance
             * @example
             * // simple series accessor
             * chart.seriesAccessor(function(d) { return "Expt: " + d.key[0]; })
             * @param {Function} [accessor]
             * @return {Function}
             * @return {dc.seriesChart}
             */
            _chart.seriesAccessor = function (accessor) {
                if (!arguments.length) {
                    return _seriesAccessor;
                }
                _seriesAccessor = accessor;
                resetChildren();
                return _chart;
            };

            /**
             * Get or set a function to sort the list of series by, given series values.
             * @method seriesSort
             * @memberof dc.seriesChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_ascending d3.ascending}
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_descending d3.descending}
             * @example
             * chart.seriesSort(d3.descending);
             * @param {Function} [sortFunction=d3.ascending]
             * @return {Function}
             * @return {dc.seriesChart}
             */
            _chart.seriesSort = function (sortFunction) {
                if (!arguments.length) {
                    return _seriesSort;
                }
                _seriesSort = sortFunction;
                resetChildren();
                return _chart;
            };

            /**
             * Get or set a function to sort each series values by. By default this is the key accessor which,
             * for example, will ensure a lineChart series connects its points in increasing key/x order,
             * rather than haphazardly.
             * @method valueSort
             * @memberof dc.seriesChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_ascending d3.ascending}
             * @see {@link https://github.com/mbostock/d3/wiki/Arrays#d3_descending d3.descending}
             * @example
             * // Default value sort
             * _chart.valueSort(function keySort (a, b) {
     *     return d3.ascending(_chart.keyAccessor()(a), _chart.keyAccessor()(b));
     * });
             * @param {Function} [sortFunction]
             * @return {Function}
             * @return {dc.seriesChart}
             */
            _chart.valueSort = function (sortFunction) {
                if (!arguments.length) {
                    return _valueSort;
                }
                _valueSort = sortFunction;
                resetChildren();
                return _chart;
            };

            // make compose private
            _chart._compose = _chart.compose;
            delete _chart.compose;

            return _chart;
        };

        /**
         * The geo choropleth chart is designed as an easy way to create a crossfilter driven choropleth map
         * from GeoJson data. This chart implementation was inspired by
         * {@link http://bl.ocks.org/4060606 the great d3 choropleth example}.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/vc/index.html US Venture Capital Landscape 2011}
         * @class geoChoroplethChart
         * @memberof dc
         * @mixes dc.colorMixin
         * @mixes dc.baseMixin
         * @example
         * // create a choropleth chart under '#us-chart' element using the default global chart group
         * var chart1 = dc.geoChoroplethChart('#us-chart');
         * // create a choropleth chart under '#us-chart2' element using chart group A
         * var chart2 = dc.compositeChart('#us-chart2', 'chartGroupA');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.geoChoroplethChart}
         */
        dc.geoChoroplethChart = function (parent, chartGroup) {
            var _chart = dc.colorMixin(dc.baseMixin({}));

            _chart.colorAccessor(function (d) {
                return d || 0;
            });

            var _geoPath = d3.geo.path();
            var _projectionFlag;

            var _geoJsons = [];

            _chart._doRender = function () {
                _chart.resetSvg();
                for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
                    var states = _chart.svg().append('g')
                        .attr('class', 'layer' + layerIndex);

                    var regionG = states.selectAll('g.' + geoJson(layerIndex).name)
                        .data(geoJson(layerIndex).data)
                        .enter()
                        .append('g')
                        .attr('class', geoJson(layerIndex).name);

                    regionG
                        .append('path')
                        .attr('fill', 'white')
                        .attr('d', _geoPath);

                    regionG.append('title');

                    plotData(layerIndex);
                }
                _projectionFlag = false;
            };

            function plotData (layerIndex) {
                var data = generateLayeredData();

                if (isDataLayer(layerIndex)) {
                    var regionG = renderRegionG(layerIndex);

                    renderPaths(regionG, layerIndex, data);

                    renderTitle(regionG, layerIndex, data);
                }
            }

            function generateLayeredData () {
                var data = {};
                var groupAll = _chart.data();
                for (var i = 0; i < groupAll.length; ++i) {
                    data[_chart.keyAccessor()(groupAll[i])] = _chart.valueAccessor()(groupAll[i]);
                }
                return data;
            }

            function isDataLayer (layerIndex) {
                return geoJson(layerIndex).keyAccessor;
            }

            function renderRegionG (layerIndex) {
                var regionG = _chart.svg()
                    .selectAll(layerSelector(layerIndex))
                    .classed('selected', function (d) {
                        return isSelected(layerIndex, d);
                    })
                    .classed('deselected', function (d) {
                        return isDeselected(layerIndex, d);
                    })
                    .attr('class', function (d) {
                        var layerNameClass = geoJson(layerIndex).name;
                        var regionClass = dc.utils.nameToId(geoJson(layerIndex).keyAccessor(d));
                        var baseClasses = layerNameClass + ' ' + regionClass;
                        if (isSelected(layerIndex, d)) {
                            baseClasses += ' selected';
                        }
                        if (isDeselected(layerIndex, d)) {
                            baseClasses += ' deselected';
                        }
                        return baseClasses;
                    });
                return regionG;
            }

            function layerSelector (layerIndex) {
                return 'g.layer' + layerIndex + ' g.' + geoJson(layerIndex).name;
            }

            function isSelected (layerIndex, d) {
                return _chart.hasFilter() && _chart.hasFilter(getKey(layerIndex, d));
            }

            function isDeselected (layerIndex, d) {
                return _chart.hasFilter() && !_chart.hasFilter(getKey(layerIndex, d));
            }

            function getKey (layerIndex, d) {
                return geoJson(layerIndex).keyAccessor(d);
            }

            function geoJson (index) {
                return _geoJsons[index];
            }

            function renderPaths (regionG, layerIndex, data) {
                var paths = regionG
                    .select('path')
                    .attr('fill', function () {
                        var currentFill = d3.select(this).attr('fill');
                        if (currentFill) {
                            return currentFill;
                        }
                        return 'none';
                    })
                    .on('click', function (d) {
                        return _chart.onClick(d, layerIndex);
                    });

                dc.transition(paths, _chart.transitionDuration()).attr('fill', function (d, i) {
                    return _chart.getColor(data[geoJson(layerIndex).keyAccessor(d)], i);
                });
            }

            _chart.onClick = function (d, layerIndex) {
                var selectedRegion = geoJson(layerIndex).keyAccessor(d);
                dc.events.trigger(function () {
                    _chart.filter(selectedRegion);
                    _chart.redrawGroup();
                });
            };

            function renderTitle (regionG, layerIndex, data) {
                if (_chart.renderTitle()) {
                    regionG.selectAll('title').text(function (d) {
                        var key = getKey(layerIndex, d);
                        var value = data[key];
                        return _chart.title()({key: key, value: value});
                    });
                }
            }

            _chart._doRedraw = function () {
                for (var layerIndex = 0; layerIndex < _geoJsons.length; ++layerIndex) {
                    plotData(layerIndex);
                    if (_projectionFlag) {
                        _chart.svg().selectAll('g.' + geoJson(layerIndex).name + ' path').attr('d', _geoPath);
                    }
                }
                _projectionFlag = false;
            };

            /**
             * **mandatory**
             *
             * Use this function to insert a new GeoJson map layer. This function can be invoked multiple times
             * if you have multiple GeoJson data layers to render on top of each other. If you overlay multiple
             * layers with the same name the new overlay will override the existing one.
             * @method overlayGeoJson
             * @memberof dc.geoChoroplethChart
             * @instance
             * @see {@link http://geojson.org/ GeoJSON}
             * @see {@link https://github.com/mbostock/topojson/wiki TopoJSON}
             * @see {@link https://github.com/mbostock/topojson/wiki/API-Reference#feature topojson.feature}
             * @example
             * // insert a layer for rendering US states
             * chart.overlayGeoJson(statesJson.features, 'state', function(d) {
     *      return d.properties.name;
     * });
             * @param {geoJson} json - a geojson feed
             * @param {String} name - name of the layer
             * @param {Function} keyAccessor - accessor function used to extract 'key' from the GeoJson data. The key extracted by
             * this function should match the keys returned by the crossfilter groups.
             * @return {dc.geoChoroplethChart}
             */
            _chart.overlayGeoJson = function (json, name, keyAccessor) {
                for (var i = 0; i < _geoJsons.length; ++i) {
                    if (_geoJsons[i].name === name) {
                        _geoJsons[i].data = json;
                        _geoJsons[i].keyAccessor = keyAccessor;
                        return _chart;
                    }
                }
                _geoJsons.push({name: name, data: json, keyAccessor: keyAccessor});
                return _chart;
            };

            /**
             * Set custom geo projection function. See the available [d3 geo projection
             * functions](https://github.com/mbostock/d3/wiki/Geo-Projections).
             * @method projection
             * @memberof dc.geoChoroplethChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Geo-Projections d3.geo.projection}
             * @see {@link https://github.com/d3/d3-geo-projection Extended d3.geo.projection}
             * @param {d3.projection} [projection=d3.geo.albersUsa()]
             * @return {dc.geoChoroplethChart}
             */
            _chart.projection = function (projection) {
                _geoPath.projection(projection);
                _projectionFlag = true;
                return _chart;
            };

            /**
             * Returns all GeoJson layers currently registered with this chart. The returned array is a
             * reference to this chart's internal data structure, so any modification to this array will also
             * modify this chart's internal registration.
             * @method geoJsons
             * @memberof dc.geoChoroplethChart
             * @instance
             * @return {Array<{name:String, data: Object, accessor: Function}>}
             */
            _chart.geoJsons = function () {
                return _geoJsons;
            };

            /**
             * Returns the {@link https://github.com/mbostock/d3/wiki/Geo-Paths#path d3.geo.path} object used to
             * render the projection and features.  Can be useful for figuring out the bounding box of the
             * feature set and thus a way to calculate scale and translation for the projection.
             * @method geoPath
             * @memberof dc.geoChoroplethChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Geo-Paths#path d3.geo.path}
             * @return {d3.geo.path}
             */
            _chart.geoPath = function () {
                return _geoPath;
            };

            /**
             * Remove a GeoJson layer from this chart by name
             * @method removeGeoJson
             * @memberof dc.geoChoroplethChart
             * @instance
             * @param {String} name
             * @return {dc.geoChoroplethChart}
             */
            _chart.removeGeoJson = function (name) {
                var geoJsons = [];

                for (var i = 0; i < _geoJsons.length; ++i) {
                    var layer = _geoJsons[i];
                    if (layer.name !== name) {
                        geoJsons.push(layer);
                    }
                }

                _geoJsons = geoJsons;

                return _chart;
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * The bubble overlay chart is quite different from the typical bubble chart. With the bubble overlay
         * chart you can arbitrarily place bubbles on an existing svg or bitmap image, thus changing the
         * typical x and y positioning while retaining the capability to visualize data using bubble radius
         * and coloring.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
         * @class bubbleOverlay
         * @memberof dc
         * @mixes dc.bubbleMixin
         * @mixes dc.baseMixin
         * @example
         * // create a bubble overlay chart on top of the '#chart-container1 svg' element using the default global chart group
         * var bubbleChart1 = dc.bubbleOverlayChart('#chart-container1').svg(d3.select('#chart-container1 svg'));
         * // create a bubble overlay chart on top of the '#chart-container2 svg' element using chart group A
         * var bubbleChart2 = dc.compositeChart('#chart-container2', 'chartGroupA').svg(d3.select('#chart-container2 svg'));
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.bubbleOverlay}
         */
        dc.bubbleOverlay = function (parent, chartGroup) {
            var BUBBLE_OVERLAY_CLASS = 'bubble-overlay';
            var BUBBLE_NODE_CLASS = 'node';
            var BUBBLE_CLASS = 'bubble';

            /**
             * **mandatory**
             *
             * Set the underlying svg image element. Unlike other dc charts this chart will not generate a svg
             * element; therefore the bubble overlay chart will not work if this function is not invoked. If the
             * underlying image is a bitmap, then an empty svg will need to be created on top of the image.
             * @method svg
             * @memberof dc.bubbleOverlay
             * @instance
             * @example
             * // set up underlying svg element
             * chart.svg(d3.select('#chart svg'));
             * @param {SVGElement|d3.selection} [imageElement]
             * @return {dc.bubbleOverlay}
             */
            var _chart = dc.bubbleMixin(dc.baseMixin({}));
            var _g;
            var _points = [];

            _chart.transitionDuration(750);

            _chart.radiusValueAccessor(function (d) {
                return d.value;
            });

            /**
             * **mandatory**
             *
             * Set up a data point on the overlay. The name of a data point should match a specific 'key' among
             * data groups generated using keyAccessor.  If a match is found (point name <-> data group key)
             * then a bubble will be generated at the position specified by the function. x and y
             * value specified here are relative to the underlying svg.
             * @method point
             * @memberof dc.bubbleOverlay
             * @instance
             * @param {String} name
             * @param {Number} x
             * @param {Number} y
             * @return {dc.bubbleOverlay}
             */
            _chart.point = function (name, x, y) {
                _points.push({name: name, x: x, y: y});
                return _chart;
            };

            _chart._doRender = function () {
                _g = initOverlayG();

                _chart.r().range([_chart.MIN_RADIUS, _chart.width() * _chart.maxBubbleRelativeSize()]);

                initializeBubbles();

                _chart.fadeDeselectedArea();

                return _chart;
            };

            function initOverlayG () {
                _g = _chart.select('g.' + BUBBLE_OVERLAY_CLASS);
                if (_g.empty()) {
                    _g = _chart.svg().append('g').attr('class', BUBBLE_OVERLAY_CLASS);
                }
                return _g;
            }

            function initializeBubbles () {
                var data = mapData();

                _points.forEach(function (point) {
                    var nodeG = getNodeG(point, data);

                    var circle = nodeG.select('circle.' + BUBBLE_CLASS);

                    if (circle.empty()) {
                        circle = nodeG.append('circle')
                            .attr('class', BUBBLE_CLASS)
                            .attr('r', 0)
                            .attr('fill', _chart.getColor)
                            .on('click', _chart.onClick);
                    }

                    dc.transition(circle, _chart.transitionDuration())
                        .attr('r', function (d) {
                            return _chart.bubbleR(d);
                        });

                    _chart._doRenderLabel(nodeG);

                    _chart._doRenderTitles(nodeG);
                });
            }

            function mapData () {
                var data = {};
                _chart.data().forEach(function (datum) {
                    data[_chart.keyAccessor()(datum)] = datum;
                });
                return data;
            }

            function getNodeG (point, data) {
                var bubbleNodeClass = BUBBLE_NODE_CLASS + ' ' + dc.utils.nameToId(point.name);

                var nodeG = _g.select('g.' + dc.utils.nameToId(point.name));

                if (nodeG.empty()) {
                    nodeG = _g.append('g')
                        .attr('class', bubbleNodeClass)
                        .attr('transform', 'translate(' + point.x + ',' + point.y + ')');
                }

                nodeG.datum(data[point.name]);

                return nodeG;
            }

            _chart._doRedraw = function () {
                updateBubbles();

                _chart.fadeDeselectedArea();

                return _chart;
            };

            function updateBubbles () {
                var data = mapData();

                _points.forEach(function (point) {
                    var nodeG = getNodeG(point, data);

                    var circle = nodeG.select('circle.' + BUBBLE_CLASS);

                    dc.transition(circle, _chart.transitionDuration())
                        .attr('r', function (d) {
                            return _chart.bubbleR(d);
                        })
                        .attr('fill', _chart.getColor);

                    _chart.doUpdateLabels(nodeG);

                    _chart.doUpdateTitles(nodeG);
                });
            }

            _chart.debug = function (flag) {
                if (flag) {
                    var debugG = _chart.select('g.' + dc.constants.DEBUG_GROUP_CLASS);

                    if (debugG.empty()) {
                        debugG = _chart.svg()
                            .append('g')
                            .attr('class', dc.constants.DEBUG_GROUP_CLASS);
                    }

                    var debugText = debugG.append('text')
                        .attr('x', 10)
                        .attr('y', 20);

                    debugG
                        .append('rect')
                        .attr('width', _chart.width())
                        .attr('height', _chart.height())
                        .on('mousemove', function () {
                            var position = d3.mouse(debugG.node());
                            var msg = position[0] + ', ' + position[1];
                            debugText.text(msg);
                        });
                } else {
                    _chart.selectAll('.debug').remove();
                }

                return _chart;
            };

            _chart.anchor(parent, chartGroup);

            return _chart;
        };

        /**
         * Concrete row chart implementation.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * @class rowChart
         * @memberof dc
         * @mixes dc.capMixin
         * @mixes dc.marginMixin
         * @mixes dc.colorMixin
         * @mixes dc.baseMixin
         * @example
         * // create a row chart under #chart-container1 element using the default global chart group
         * var chart1 = dc.rowChart('#chart-container1');
         * // create a row chart under #chart-container2 element using chart group A
         * var chart2 = dc.rowChart('#chart-container2', 'chartGroupA');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.rowChart}
         */
        dc.rowChart = function (parent, chartGroup) {

            var _g;

            var _labelOffsetX = 10;
            var _labelOffsetY = 15;
            var _hasLabelOffsetY = false;
            var _dyOffset = '0.35em';  // this helps center labels https://github.com/mbostock/d3/wiki/SVG-Shapes#svg_text
            var _titleLabelOffsetX = 2;

            var _gap = 5;

            var _fixedBarHeight = false;
            var _rowCssClass = 'row';
            var _titleRowCssClass = 'titlerow';
            var _renderTitleLabel = false;

            var _chart = dc.capMixin(dc.marginMixin(dc.colorMixin(dc.baseMixin({}))));

            var _x;

            var _elasticX;

            var _xAxis = d3.svg.axis().orient('bottom');

            var _rowData;

            _chart.rowsCap = _chart.cap;

            function calculateAxisScale () {
                if (!_x || _elasticX) {
                    var extent = d3.extent(_rowData, _chart.cappedValueAccessor);
                    if (extent[0] > 0) {
                        extent[0] = 0;
                    }
                    if (extent[1] < 0) {
                        extent[1] = 0;
                    }
                    _x = d3.scale.linear().domain(extent)
                        .range([0, _chart.effectiveWidth()]);
                }
                _xAxis.scale(_x);
            }

            function drawAxis () {
                var axisG = _g.select('g.axis');

                calculateAxisScale();

                if (axisG.empty()) {
                    axisG = _g.append('g').attr('class', 'axis');
                }
                axisG.attr('transform', 'translate(0, ' + _chart.effectiveHeight() + ')');

                dc.transition(axisG, _chart.transitionDuration())
                    .call(_xAxis);
            }

            _chart._doRender = function () {
                _chart.resetSvg();

                _g = _chart.svg()
                    .append('g')
                    .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');

                drawChart();

                return _chart;
            };

            _chart.title(function (d) {
                return _chart.cappedKeyAccessor(d) + ': ' + _chart.cappedValueAccessor(d);
            });

            _chart.label(_chart.cappedKeyAccessor);

            /**
             * Gets or sets the x scale. The x scale can be any d3
             * {@link https://github.com/mbostock/d3/wiki/Quantitative-Scales quantitive scale}
             * @method x
             * @memberof dc.rowChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Quantitative-Scales quantitive scale}
             * @param {d3.scale} [scale]
             * @return {d3.scale}
             * @return {dc.rowChart}
             */
            _chart.x = function (scale) {
                if (!arguments.length) {
                    return _x;
                }
                _x = scale;
                return _chart;
            };

            function drawGridLines () {
                _g.selectAll('g.tick')
                    .select('line.grid-line')
                    .remove();

                _g.selectAll('g.tick')
                    .append('line')
                    .attr('class', 'grid-line')
                    .attr('x1', 0)
                    .attr('y1', 0)
                    .attr('x2', 0)
                    .attr('y2', function () {
                        return -_chart.effectiveHeight();
                    });
            }

            function drawChart () {
                _rowData = _chart.data();

                drawAxis();
                drawGridLines();

                var rows = _g.selectAll('g.' + _rowCssClass)
                    .data(_rowData);

                createElements(rows);
                removeElements(rows);
                updateElements(rows);
            }

            function createElements (rows) {
                var rowEnter = rows.enter()
                    .append('g')
                    .attr('class', function (d, i) {
                        return _rowCssClass + ' _' + i;
                    });

                rowEnter.append('rect').attr('width', 0);

                createLabels(rowEnter);
            }

            function removeElements (rows) {
                rows.exit().remove();
            }

            function rootValue () {
                var root = _x(0);
                return (root === -Infinity || root !== root) ? _x(1) : root;
            }

            function updateElements (rows) {
                var n = _rowData.length;

                var height;
                if (!_fixedBarHeight) {
                    height = (_chart.effectiveHeight() - (n + 1) * _gap) / n;
                } else {
                    height = _fixedBarHeight;
                }

                // vertically align label in center unless they override the value via property setter
                if (!_hasLabelOffsetY) {
                    _labelOffsetY = height / 2;
                }

                var rect = rows.attr('transform', function (d, i) {
                    return 'translate(0,' + ((i + 1) * _gap + i * height) + ')';
                }).select('rect')
                    .attr('height', height)
                    .attr('fill', _chart.getColor)
                    .on('click', onClick)
                    .classed('deselected', function (d) {
                        return (_chart.hasFilter()) ? !isSelectedRow(d) : false;
                    })
                    .classed('selected', function (d) {
                        return (_chart.hasFilter()) ? isSelectedRow(d) : false;
                    });

                dc.transition(rect, _chart.transitionDuration())
                    .attr('width', function (d) {
                        return Math.abs(rootValue() - _x(_chart.valueAccessor()(d)));
                    })
                    .attr('transform', translateX);

                createTitles(rows);
                updateLabels(rows);
            }

            function createTitles (rows) {
                if (_chart.renderTitle()) {
                    rows.selectAll('title').remove();
                    rows.append('title').text(_chart.title());
                }
            }

            function createLabels (rowEnter) {
                if (_chart.renderLabel()) {
                    rowEnter.append('text')
                        .on('click', onClick);
                }
                if (_chart.renderTitleLabel()) {
                    rowEnter.append('text')
                        .attr('class', _titleRowCssClass)
                        .on('click', onClick);
                }
            }

            function updateLabels (rows) {
                if (_chart.renderLabel()) {
                    var lab = rows.select('text')
                        .attr('x', _labelOffsetX)
                        .attr('y', _labelOffsetY)
                        .attr('dy', _dyOffset)
                        .on('click', onClick)
                        .attr('class', function (d, i) {
                            return _rowCssClass + ' _' + i;
                        })
                        .text(function (d) {
                            return _chart.label()(d);
                        });
                    dc.transition(lab, _chart.transitionDuration())
                        .attr('transform', translateX);
                }
                if (_chart.renderTitleLabel()) {
                    var titlelab = rows.select('.' + _titleRowCssClass)
                        .attr('x', _chart.effectiveWidth() - _titleLabelOffsetX)
                        .attr('y', _labelOffsetY)
                        .attr('dy', _dyOffset)
                        .attr('text-anchor', 'end')
                        .on('click', onClick)
                        .attr('class', function (d, i) {
                            return _titleRowCssClass + ' _' + i ;
                        })
                        .text(function (d) {
                            return _chart.title()(d);
                        });
                    dc.transition(titlelab, _chart.transitionDuration())
                        .attr('transform', translateX);
                }
            }

            /**
             * Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'
             * @method renderTitleLabel
             * @memberof dc.rowChart
             * @instance
             * @param {Boolean} [renderTitleLabel=false]
             * @return {Boolean}
             * @return {dc.rowChart}
             */
            _chart.renderTitleLabel = function (renderTitleLabel) {
                if (!arguments.length) {
                    return _renderTitleLabel;
                }
                _renderTitleLabel = renderTitleLabel;
                return _chart;
            };

            function onClick (d) {
                _chart.onClick(d);
            }

            function translateX (d) {
                var x = _x(_chart.cappedValueAccessor(d)),
                    x0 = rootValue(),
                    s = x > x0 ? x0 : x;
                return 'translate(' + s + ',0)';
            }

            _chart._doRedraw = function () {
                drawChart();
                return _chart;
            };

            /**
             * Get the x axis for the row chart instance.  Note: not settable for row charts.
             * See the {@link https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis d3 axis object}
             * documention for more information.
             * @method xAxis
             * @memberof dc.rowChart
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-axis d3.svg.axis}
             * @example
             * // customize x axis tick format
             * chart.xAxis().tickFormat(function (v) {return v + '%';});
             * // customize x axis tick values
             * chart.xAxis().tickValues([0, 100, 200, 300]);
             * @return {d3.svg.axis}
             */
            _chart.xAxis = function () {
                return _xAxis;
            };

            /**
             * Get or set the fixed bar height. Default is [false] which will auto-scale bars.
             * For example, if you want to fix the height for a specific number of bars (useful in TopN charts)
             * you could fix height as follows (where count = total number of bars in your TopN and gap is
             * your vertical gap space).
             * @method fixedBarHeight
             * @memberof dc.rowChart
             * @instance
             * @example
             * chart.fixedBarHeight( chartheight - (count + 1) * gap / count);
             * @param {Boolean|Number} [fixedBarHeight=false]
             * @return {Boolean|Number}
             * @return {dc.rowChart}
             */
            _chart.fixedBarHeight = function (fixedBarHeight) {
                if (!arguments.length) {
                    return _fixedBarHeight;
                }
                _fixedBarHeight = fixedBarHeight;
                return _chart;
            };

            /**
             * Get or set the vertical gap space between rows on a particular row chart instance
             * @method gap
             * @memberof dc.rowChart
             * @instance
             * @param {Number} [gap=5]
             * @return {Number}
             * @return {dc.rowChart}
             */
            _chart.gap = function (gap) {
                if (!arguments.length) {
                    return _gap;
                }
                _gap = gap;
                return _chart;
            };

            /**
             * Get or set the elasticity on x axis. If this attribute is set to true, then the x axis will rescle to auto-fit the
             * data range when filtered.
             * @method elasticX
             * @memberof dc.rowChart
             * @instance
             * @param {Boolean} [elasticX]
             * @return {Boolean}
             * @return {dc.rowChart}
             */
            _chart.elasticX = function (elasticX) {
                if (!arguments.length) {
                    return _elasticX;
                }
                _elasticX = elasticX;
                return _chart;
            };

            /**
             * Get or set the x offset (horizontal space to the top left corner of a row) for labels on a particular row chart.
             * @method labelOffsetX
             * @memberof dc.rowChart
             * @instance
             * @param {Number} [labelOffsetX=10]
             * @return {Number}
             * @return {dc.rowChart}
             */
            _chart.labelOffsetX = function (labelOffsetX) {
                if (!arguments.length) {
                    return _labelOffsetX;
                }
                _labelOffsetX = labelOffsetX;
                return _chart;
            };

            /**
             * Get or set the y offset (vertical space to the top left corner of a row) for labels on a particular row chart.
             * @method labelOffsetY
             * @memberof dc.rowChart
             * @instance
             * @param {Number} [labelOffsety=15]
             * @return {Number}
             * @return {dc.rowChart}
             */
            _chart.labelOffsetY = function (labelOffsety) {
                if (!arguments.length) {
                    return _labelOffsetY;
                }
                _labelOffsetY = labelOffsety;
                _hasLabelOffsetY = true;
                return _chart;
            };

            /**
             * Get of set the x offset (horizontal space between right edge of row and right edge or text.
             * @method titleLabelOffsetX
             * @memberof dc.rowChart
             * @instance
             * @param {Number} [titleLabelOffsetX=2]
             * @return {Number}
             * @return {dc.rowChart}
             */
            _chart.titleLabelOffsetX = function (titleLabelOffsetX) {
                if (!arguments.length) {
                    return _titleLabelOffsetX;
                }
                _titleLabelOffsetX = titleLabelOffsetX;
                return _chart;
            };

            function isSelectedRow (d) {
                return _chart.hasFilter(_chart.cappedKeyAccessor(d));
            }

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * Legend is a attachable widget that can be added to other dc charts to render horizontal legend
         * labels.
         *
         * Examples:
         * - {@link http://dc-js.github.com/dc.js/ Nasdaq 100 Index}
         * - {@link http://dc-js.github.com/dc.js/crime/index.html Canadian City Crime Stats}
         * @class legend
         * @memberof dc
         * @example
         * chart.legend(dc.legend().x(400).y(10).itemHeight(13).gap(5))
         * @return {dc.legend}
         */
        dc.legend = function () {
            var LABEL_GAP = 2;

            var _legend = {},
                _parent,
                _x = 0,
                _y = 0,
                _itemHeight = 12,
                _gap = 5,
                _horizontal = false,
                _legendWidth = 560,
                _itemWidth = 70,
                _autoItemWidth = false,
                _legendText = dc.pluck('name');

            var _g;

            _legend.parent = function (p) {
                if (!arguments.length) {
                    return _parent;
                }
                _parent = p;
                return _legend;
            };

            _legend.render = function () {
                _parent.svg().select('g.dc-legend').remove();
                _g = _parent.svg().append('g')
                    .attr('class', 'dc-legend')
                    .attr('transform', 'translate(' + _x + ',' + _y + ')');
                var legendables = _parent.legendables();

                var itemEnter = _g.selectAll('g.dc-legend-item')
                    .data(legendables)
                    .enter()
                    .append('g')
                    .attr('class', 'dc-legend-item')
                    .on('mouseover', function (d) {
                        _parent.legendHighlight(d);
                    })
                    .on('mouseout', function (d) {
                        _parent.legendReset(d);
                    })
                    .on('click', function (d) {
                        d.chart.legendToggle(d);
                    });

                _g.selectAll('g.dc-legend-item')
                    .classed('fadeout', function (d) {
                        return d.chart.isLegendableHidden(d);
                    });

                if (legendables.some(dc.pluck('dashstyle'))) {
                    itemEnter
                        .append('line')
                        .attr('x1', 0)
                        .attr('y1', _itemHeight / 2)
                        .attr('x2', _itemHeight)
                        .attr('y2', _itemHeight / 2)
                        .attr('stroke-width', 2)
                        .attr('stroke-dasharray', dc.pluck('dashstyle'))
                        .attr('stroke', dc.pluck('color'));
                } else {
                    itemEnter
                        .append('rect')
                        .attr('width', _itemHeight)
                        .attr('height', _itemHeight)
                        .attr('fill', function (d) {return d ? d.color : 'blue';});
                }

                itemEnter.append('text')
                    .text(_legendText)
                    .attr('x', _itemHeight + LABEL_GAP)
                    .attr('y', function () {
                        return _itemHeight / 2 + (this.clientHeight ? this.clientHeight : 13) / 2 - 2;
                    });

                var _cumulativeLegendTextWidth = 0;
                var row = 0;
                itemEnter.attr('transform', function (d, i) {
                    if (_horizontal) {
                        var translateBy = 'translate(' + _cumulativeLegendTextWidth + ',' + row * legendItemHeight() + ')';
                        var itemWidth   = _autoItemWidth === true ? this.getBBox().width + _gap : _itemWidth;

                        if ((_cumulativeLegendTextWidth + itemWidth) >= _legendWidth) {
                            ++row ;
                            _cumulativeLegendTextWidth = 0 ;
                        } else {
                            _cumulativeLegendTextWidth += itemWidth;
                        }
                        return translateBy;
                    } else {
                        return 'translate(0,' + i * legendItemHeight() + ')';
                    }
                });
            };

            function legendItemHeight () {
                return _gap + _itemHeight;
            }

            /**
             * Set or get x coordinate for legend widget.
             * @method x
             * @memberof dc.legend
             * @instance
             * @param  {Number} [x=0]
             * @return {Number}
             * @return {dc.legend}
             */
            _legend.x = function (x) {
                if (!arguments.length) {
                    return _x;
                }
                _x = x;
                return _legend;
            };

            /**
             * Set or get y coordinate for legend widget.
             * @method y
             * @memberof dc.legend
             * @instance
             * @param  {Number} [y=0]
             * @return {Number}
             * @return {dc.legend}
             */
            _legend.y = function (y) {
                if (!arguments.length) {
                    return _y;
                }
                _y = y;
                return _legend;
            };

            /**
             * Set or get gap between legend items.
             * @method gap
             * @memberof dc.legend
             * @instance
             * @param  {Number} [gap=5]
             * @return {Number}
             * @return {dc.legend}
             */
            _legend.gap = function (gap) {
                if (!arguments.length) {
                    return _gap;
                }
                _gap = gap;
                return _legend;
            };

            /**
             * Set or get legend item height.
             * @method itemHeight
             * @memberof dc.legend
             * @instance
             * @param  {Number} [itemHeight=12]
             * @return {Number}
             * @return {dc.legend}
             */
            _legend.itemHeight = function (itemHeight) {
                if (!arguments.length) {
                    return _itemHeight;
                }
                _itemHeight = itemHeight;
                return _legend;
            };

            /**
             * Position legend horizontally instead of vertically.
             * @method horizontal
             * @memberof dc.legend
             * @instance
             * @param  {Boolean} [horizontal=false]
             * @return {Boolean}
             * @return {dc.legend}
             */
            _legend.horizontal = function (horizontal) {
                if (!arguments.length) {
                    return _horizontal;
                }
                _horizontal = horizontal;
                return _legend;
            };

            /**
             * Maximum width for horizontal legend.
             * @method legendWidth
             * @memberof dc.legend
             * @instance
             * @param  {Number} [legendWidth=500]
             * @return {Number}
             * @return {dc.legend}
             */
            _legend.legendWidth = function (legendWidth) {
                if (!arguments.length) {
                    return _legendWidth;
                }
                _legendWidth = legendWidth;
                return _legend;
            };

            /**
             * legendItem width for horizontal legend.
             * @method itemWidth
             * @memberof dc.legend
             * @instance
             * @param  {Number} [itemWidth=70]
             * @return {Number}
             * @return {dc.legend}
             */
            _legend.itemWidth = function (itemWidth) {
                if (!arguments.length) {
                    return _itemWidth;
                }
                _itemWidth = itemWidth;
                return _legend;
            };

            /**
             * Turn automatic width for legend items on or off. If true, {@link dc.legend#itemWidth itemWidth} is ignored.
             * This setting takes into account {@link dc.legend#gap gap}.
             * @method autoItemWidth
             * @memberof dc.legend
             * @instance
             * @param  {Boolean} [autoItemWidth=false]
             * @return {Boolean}
             * @return {dc.legend}
             */
            _legend.autoItemWidth = function (autoItemWidth) {
                if (!arguments.length) {
                    return _autoItemWidth;
                }
                _autoItemWidth = autoItemWidth;
                return _legend;
            };

            /**
             * Set or get the legend text function. The legend widget uses this function to render the legend
             * text for each item. If no function is specified the legend widget will display the names
             * associated with each group.
             * @method legendText
             * @memberof dc.legend
             * @instance
             * @param  {Function} [legendText]
             * @return {Function}
             * @return {dc.legend}
             * @example
             * // default legendText
             * legend.legendText(dc.pluck('name'))
             *
             * // create numbered legend items
             * chart.legend(dc.legend().legendText(function(d, i) { return i + '. ' + d.name; }))
             *
             * // create legend displaying group counts
             * chart.legend(dc.legend().legendText(function(d) { return d.name + ': ' d.data; }))
             **/
            _legend.legendText = function (legendText) {
                if (!arguments.length) {
                    return _legendText;
                }
                _legendText = legendText;
                return _legend;
            };

            return _legend;
        };

        /**
         * A scatter plot chart
         *
         * Examples:
         * - {@link http://dc-js.github.io/dc.js/examples/scatter.html Scatter Chart}
         * - {@link http://dc-js.github.io/dc.js/examples/multi-scatter.html Multi-Scatter Chart}
         * @class scatterPlot
         * @memberof dc
         * @mixes dc.coordinateGridMixin
         * @example
         * // create a scatter plot under #chart-container1 element using the default global chart group
         * var chart1 = dc.scatterPlot('#chart-container1');
         * // create a scatter plot under #chart-container2 element using chart group A
         * var chart2 = dc.scatterPlot('#chart-container2', 'chartGroupA');
         * // create a sub-chart under a composite parent chart
         * var chart3 = dc.scatterPlot(compositeChart);
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.scatterPlot}
         */
        dc.scatterPlot = function (parent, chartGroup) {
            var _chart = dc.coordinateGridMixin({});
            var _symbol = d3.svg.symbol();

            var _existenceAccessor = function (d) { return d.value; };

            var originalKeyAccessor = _chart.keyAccessor();
            _chart.keyAccessor(function (d) { return originalKeyAccessor(d)[0]; });
            _chart.valueAccessor(function (d) { return originalKeyAccessor(d)[1]; });
            _chart.colorAccessor(function () { return _chart._groupName; });

            var _locator = function (d) {
                return 'translate(' + _chart.x()(_chart.keyAccessor()(d)) + ',' +
                    _chart.y()(_chart.valueAccessor()(d)) + ')';
            };

            var _highlightedSize = 7;
            var _symbolSize = 5;
            var _excludedSize = 3;
            var _excludedColor = null;
            var _excludedOpacity = 1.0;
            var _emptySize = 0;
            var _filtered = [];

            _symbol.size(function (d, i) {
                if (!_existenceAccessor(d)) {
                    return _emptySize;
                } else if (_filtered[i]) {
                    return Math.pow(_symbolSize, 2);
                } else {
                    return Math.pow(_excludedSize, 2);
                }
            });

            dc.override(_chart, '_filter', function (filter) {
                if (!arguments.length) {
                    return _chart.__filter();
                }

                return _chart.__filter(dc.filters.RangedTwoDimensionalFilter(filter));
            });

            _chart.plotData = function () {
                var symbols = _chart.chartBodyG().selectAll('path.symbol')
                    .data(_chart.data());

                symbols
                    .enter()
                    .append('path')
                    .attr('class', 'symbol')
                    .attr('opacity', 0)
                    .attr('fill', _chart.getColor)
                    .attr('transform', _locator);

                symbols.each(function (d, i) {
                    _filtered[i] = !_chart.filter() || _chart.filter().isFiltered([d.key[0], d.key[1]]);
                });

                dc.transition(symbols, _chart.transitionDuration())
                    .attr('opacity', function (d, i) {
                        return !_existenceAccessor(d) ? 0 :
                            _filtered[i] ? 1 : _chart.excludedOpacity();
                    })
                    .attr('fill', function (d, i) {
                        return _chart.excludedColor() && !_filtered[i] ?
                            _chart.excludedColor() :
                            _chart.getColor(d);
                    })
                    .attr('transform', _locator)
                    .attr('d', _symbol);

                dc.transition(symbols.exit(), _chart.transitionDuration())
                    .attr('opacity', 0).remove();
            };

            /**
             * Get or set the existence accessor.  If a point exists, it is drawn with
             * {@link dc.scatterPlot#symbolSize symbolSize} radius and
             * opacity 1; if it does not exist, it is drawn with
             * {@link dc.scatterPlot#emptySize emptySize} radius and opacity 0. By default,
             * the existence accessor checks if the reduced value is truthy.
             * @method existenceAccessor
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link dc.scatterPlot#symbolSize symbolSize}
             * @see {@link dc.scatterPlot#emptySize emptySize}
             * @example
             * // default accessor
             * chart.existenceAccessor(function (d) { return d.value; });
             * @param {Function} [accessor]
             * @return {Function}
             * @return {dc.scatterPlot}
             */
            _chart.existenceAccessor = function (accessor) {
                if (!arguments.length) {
                    return _existenceAccessor;
                }
                _existenceAccessor = accessor;
                return this;
            };

            /**
             * Get or set the symbol type used for each point. By default the symbol is a circle.
             * Type can be a constant or an accessor.
             * @method symbol
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_type d3.svg.symbol().type()}
             * @example
             * // Circle type
             * chart.symbol('circle');
             * // Square type
             * chart.symbol('square');
             * @param {String|Function} [type='circle']
             * @return {String|Function}
             * @return {dc.scatterPlot}
             */
            _chart.symbol = function (type) {
                if (!arguments.length) {
                    return _symbol.type();
                }
                _symbol.type(type);
                return _chart;
            };

            /**
             * Set or get radius for symbols.
             * @method symbolSize
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
             * @param {Number} [symbolSize=3]
             * @return {Number}
             * @return {dc.scatterPlot}
             */
            _chart.symbolSize = function (symbolSize) {
                if (!arguments.length) {
                    return _symbolSize;
                }
                _symbolSize = symbolSize;
                return _chart;
            };

            /**
             * Set or get radius for highlighted symbols.
             * @method highlightedSize
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
             * @param {Number} [highlightedSize=5]
             * @return {Number}
             * @return {dc.scatterPlot}
             */
            _chart.highlightedSize = function (highlightedSize) {
                if (!arguments.length) {
                    return _highlightedSize;
                }
                _highlightedSize = highlightedSize;
                return _chart;
            };

            /**
             * Set or get size for symbols excluded from this chart's filter. If null, no
             * special size is applied for symbols based on their filter status
             * @method excludedSize
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
             * @param {Number} [excludedSize=null]
             * @return {Number}
             * @return {dc.scatterPlot}
             */
            _chart.excludedSize = function (excludedSize) {
                if (!arguments.length) {
                    return _excludedSize;
                }
                _excludedSize = excludedSize;
                return _chart;
            };

            /**
             * Set or get color for symbols excluded from this chart's filter. If null, no
             * special color is applied for symbols based on their filter status
             * @method excludedColor
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
             * @param {Number} [excludedColor=null]
             * @return {Number}
             * @return {dc.scatterPlot}
             */
            _chart.excludedColor = function (excludedColor) {
                if (!arguments.length) {
                    return _excludedColor;
                }
                _excludedColor = excludedColor;
                return _chart;
            };

            /**
             * Set or get opacity for symbols excluded from this chart's filter.
             * @method excludedOpacity
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
             * @param {Number} [excludedOpacity=1.0]
             * @return {Number}
             * @return {dc.scatterPlot}
             */
            _chart.excludedOpacity = function (excludedOpacity) {
                if (!arguments.length) {
                    return _excludedOpacity;
                }
                _excludedOpacity = excludedOpacity;
                return _chart;
            };

            /**
             * Set or get radius for symbols when the group is empty.
             * @method emptySize
             * @memberof dc.scatterPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/SVG-Shapes#symbol_size d3.svg.symbol().size()}
             * @param {Number} [emptySize=0]
             * @return {Number}
             * @return {dc.scatterPlot}
             */
            _chart.hiddenSize = _chart.emptySize = function (emptySize) {
                if (!arguments.length) {
                    return _emptySize;
                }
                _emptySize = emptySize;
                return _chart;
            };

            _chart.legendables = function () {
                return [{chart: _chart, name: _chart._groupName, color: _chart.getColor()}];
            };

            _chart.legendHighlight = function (d) {
                resizeSymbolsWhere(function (symbol) {
                    return symbol.attr('fill') === d.color;
                }, _highlightedSize);
                _chart.selectAll('.chart-body path.symbol').filter(function () {
                    return d3.select(this).attr('fill') !== d.color;
                }).classed('fadeout', true);
            };

            _chart.legendReset = function (d) {
                resizeSymbolsWhere(function (symbol) {
                    return symbol.attr('fill') === d.color;
                }, _symbolSize);
                _chart.selectAll('.chart-body path.symbol').filter(function () {
                    return d3.select(this).attr('fill') !== d.color;
                }).classed('fadeout', false);
            };

            function resizeSymbolsWhere (condition, size) {
                var symbols = _chart.selectAll('.chart-body path.symbol').filter(function () {
                    return condition(d3.select(this));
                });
                var oldSize = _symbol.size();
                _symbol.size(Math.pow(size, 2));
                dc.transition(symbols, _chart.transitionDuration()).attr('d', _symbol);
                _symbol.size(oldSize);
            }

            _chart.setHandlePaths = function () {
                // no handle paths for poly-brushes
            };

            _chart.extendBrush = function () {
                var extent = _chart.brush().extent();
                if (_chart.round()) {
                    extent[0] = extent[0].map(_chart.round());
                    extent[1] = extent[1].map(_chart.round());

                    _chart.g().select('.brush')
                        .call(_chart.brush().extent(extent));
                }
                return extent;
            };

            _chart.brushIsEmpty = function (extent) {
                return _chart.brush().empty() || !extent || extent[0][0] >= extent[1][0] || extent[0][1] >= extent[1][1];
            };

            _chart._brushing = function () {
                var extent = _chart.extendBrush();

                _chart.redrawBrush(_chart.g());

                if (_chart.brushIsEmpty(extent)) {
                    dc.events.trigger(function () {
                        _chart.filter(null);
                        _chart.redrawGroup();
                    });

                } else {
                    var ranged2DFilter = dc.filters.RangedTwoDimensionalFilter(extent);
                    dc.events.trigger(function () {
                        _chart.filter(null);
                        _chart.filter(ranged2DFilter);
                        _chart.redrawGroup();
                    }, dc.constants.EVENT_DELAY);

                }
            };

            _chart.setBrushY = function (gBrush) {
                gBrush.call(_chart.brush().y(_chart.y()));
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * A display of a single numeric value.
         * Unlike other charts, you do not need to set a dimension. Instead a group object must be provided and
         * a valueAccessor that returns a single value.
         * @class numberDisplay
         * @memberof dc
         * @mixes dc.baseMixin
         * @example
         * // create a number display under #chart-container1 element using the default global chart group
         * var display1 = dc.numberDisplay('#chart-container1');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.numberDisplay}
         */
        dc.numberDisplay = function (parent, chartGroup) {
            var SPAN_CLASS = 'number-display';
            var _formatNumber = d3.format('.2s');
            var _chart = dc.baseMixin({});
            var _html = {one: '', some: '', none: ''};
            var _lastValue;

            // dimension not required
            _chart._mandatoryAttributes(['group']);

            /**
             * Gets or sets an optional object specifying HTML templates to use depending on the number
             * displayed.  The text `%number` will be replaced with the current value.
             * - one: HTML template to use if the number is 1
             * - zero: HTML template to use if the number is 0
             * - some: HTML template to use otherwise
             * @method html
             * @memberof dc.numberDisplay
             * @instance
             * @example
             * numberWidget.html({
     *      one:'%number record',
     *      some:'%number records',
     *      none:'no records'})
             * @param {{one:String, some:String, none:String}} [html={one: '', some: '', none: ''}]
             * @return {{one:String, some:String, none:String}}
             * @return {dc.numberDisplay}
             */
            _chart.html = function (html) {
                if (!arguments.length) {
                    return _html;
                }
                if (html.none) {
                    _html.none = html.none;//if none available
                } else if (html.one) {
                    _html.none = html.one;//if none not available use one
                } else if (html.some) {
                    _html.none = html.some;//if none and one not available use some
                }
                if (html.one) {
                    _html.one = html.one;//if one available
                } else if (html.some) {
                    _html.one = html.some;//if one not available use some
                }
                if (html.some) {
                    _html.some = html.some;//if some available
                } else if (html.one) {
                    _html.some = html.one;//if some not available use one
                }
                return _chart;
            };

            /**
             * Calculate and return the underlying value of the display
             * @method value
             * @memberof dc.numberDisplay
             * @instance
             * @return {Number}
             */
            _chart.value = function () {
                return _chart.data();
            };

            _chart.data(function (group) {
                var valObj = group.value ? group.value() : group.top(1)[0];
                return _chart.valueAccessor()(valObj);
            });

            _chart.transitionDuration(250); // good default

            _chart._doRender = function () {
                var newValue = _chart.value(),
                    span = _chart.selectAll('.' + SPAN_CLASS);

                if (span.empty()) {
                    span = span.data([0])
                        .enter()
                        .append('span')
                        .attr('class', SPAN_CLASS);
                }

                span.transition()
                    .duration(_chart.transitionDuration())
                    .ease('quad-out-in')
                    .tween('text', function () {
                        // [XA] don't try and interpolate from Infinity, else this breaks.
                        var interpStart = isFinite(_lastValue) ? _lastValue : 0;
                        var interp = d3.interpolateNumber(interpStart || 0, newValue);
                        _lastValue = newValue;
                        return function (t) {
                            var html = null, num = _chart.formatNumber()(interp(t));
                            if (newValue === 0 && (_html.none !== '')) {
                                html = _html.none;
                            } else if (newValue === 1 && (_html.one !== '')) {
                                html = _html.one;
                            } else if (_html.some !== '') {
                                html = _html.some;
                            }
                            this.innerHTML = html ? html.replace('%number', num) : num;
                        };
                    });
            };

            _chart._doRedraw = function () {
                return _chart._doRender();
            };

            /**
             * Get or set a function to format the value for the display.
             * @method formatNumber
             * @memberof dc.numberDisplay
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Formatting d3.format}
             * @param {Function} [formatter=d3.format('.2s')]
             * @return {Function}
             * @return {dc.numberDisplay}
             */
            _chart.formatNumber = function (formatter) {
                if (!arguments.length) {
                    return _formatNumber;
                }
                _formatNumber = formatter;
                return _chart;
            };

            return _chart.anchor(parent, chartGroup);
        };

        /**
         * A heat map is matrix that represents the values of two dimensions of data using colors.
         * @class heatMap
         * @memberof dc
         * @mixes dc.colorMixin
         * @mixes dc.marginMixin
         * @mixes dc.baseMixin
         * @example
         * // create a heat map under #chart-container1 element using the default global chart group
         * var heatMap1 = dc.heatMap('#chart-container1');
         * // create a heat map under #chart-container2 element using chart group A
         * var heatMap2 = dc.heatMap('#chart-container2', 'chartGroupA');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.heatMap}
         */
        dc.heatMap = function (parent, chartGroup) {

            var DEFAULT_BORDER_RADIUS = 6.75;

            var _chartBody;

            var _cols;
            var _rows;
            var _xBorderRadius = DEFAULT_BORDER_RADIUS;
            var _yBorderRadius = DEFAULT_BORDER_RADIUS;

            var _chart = dc.colorMixin(dc.marginMixin(dc.baseMixin({})));
            _chart._mandatoryAttributes(['group']);
            _chart.title(_chart.colorAccessor());

            var _colsLabel = function (d) {
                return d;
            };
            var _rowsLabel = function (d) {
                return d;
            };

            /**
             * Set or get the column label function. The chart class uses this function to render
             * column labels on the X axis. It is passed the column name.
             * @method colsLabel
             * @memberof dc.heatMap
             * @instance
             * @example
             * // the default label function just returns the name
             * chart.colsLabel(function(d) { return d; });
             * @param  {Function} [labelFunction=function(d) { return d; }]
             * @return {Function}
             * @return {dc.heatMap}
             */
            _chart.colsLabel = function (labelFunction) {
                if (!arguments.length) {
                    return _colsLabel;
                }
                _colsLabel = labelFunction;
                return _chart;
            };

            /**
             * Set or get the row label function. The chart class uses this function to render
             * row labels on the Y axis. It is passed the row name.
             * @method rowsLabel
             * @memberof dc.heatMap
             * @instance
             * @example
             * // the default label function just returns the name
             * chart.rowsLabel(function(d) { return d; });
             * @param  {Function} [labelFunction=function(d) { return d; }]
             * @return {Function}
             * @return {dc.heatMap}
             */
            _chart.rowsLabel = function (labelFunction) {
                if (!arguments.length) {
                    return _rowsLabel;
                }
                _rowsLabel = labelFunction;
                return _chart;
            };

            var _xAxisOnClick = function (d) { filterAxis(0, d); };
            var _yAxisOnClick = function (d) { filterAxis(1, d); };
            var _boxOnClick = function (d) {
                var filter = d.key;
                dc.events.trigger(function () {
                    _chart.filter(filter);
                    _chart.redrawGroup();
                });
            };

            function filterAxis (axis, value) {
                var cellsOnAxis = _chart.selectAll('.box-group').filter(function (d) {
                    return d.key[axis] === value;
                });
                var unfilteredCellsOnAxis = cellsOnAxis.filter(function (d) {
                    return !_chart.hasFilter(d.key);
                });
                dc.events.trigger(function () {
                    if (unfilteredCellsOnAxis.empty()) {
                        cellsOnAxis.each(function (d) {
                            _chart.filter(d.key);
                        });
                    } else {
                        unfilteredCellsOnAxis.each(function (d) {
                            _chart.filter(d.key);
                        });
                    }
                    _chart.redrawGroup();
                });
            }

            dc.override(_chart, 'filter', function (filter) {
                if (!arguments.length) {
                    return _chart._filter();
                }

                return _chart._filter(dc.filters.TwoDimensionalFilter(filter));
            });

            function uniq (d, i, a) {
                return !i || a[i - 1] !== d;
            }

            /**
             * Gets or sets the values used to create the rows of the heatmap, as an array. By default, all
             * the values will be fetched from the data using the value accessor, and they will be sorted in
             * ascending order.
             * @method rows
             * @memberof dc.heatMap
             * @instance
             * @param  {Array<String|Number>} [rows]
             * @return {Array<String|Number>}
             * @return {dc.heatMap}
             */
            _chart.rows = function (rows) {
                if (arguments.length) {
                    _rows = rows;
                    return _chart;
                }
                if (_rows) {
                    return _rows;
                }
                var rowValues = _chart.data().map(_chart.valueAccessor());
                rowValues.sort(d3.ascending);
                return d3.scale.ordinal().domain(rowValues.filter(uniq));
            };

            /**
             * Gets or sets the keys used to create the columns of the heatmap, as an array. By default, all
             * the values will be fetched from the data using the key accessor, and they will be sorted in
             * ascending order.
             * @method cols
             * @memberof dc.heatMap
             * @instance
             * @param  {Array<String|Number>} [cols]
             * @return {Array<String|Number>}
             * @return {dc.heatMap}
             */
            _chart.cols = function (cols) {
                if (arguments.length) {
                    _cols = cols;
                    return _chart;
                }
                if (_cols) {
                    return _cols;
                }
                var colValues = _chart.data().map(_chart.keyAccessor());
                colValues.sort(d3.ascending);
                return d3.scale.ordinal().domain(colValues.filter(uniq));
            };

            _chart._doRender = function () {
                _chart.resetSvg();

                _chartBody = _chart.svg()
                    .append('g')
                    .attr('class', 'heatmap')
                    .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');

                return _chart._doRedraw();
            };

            _chart._doRedraw = function () {
                var rows = _chart.rows(),
                    cols = _chart.cols(),
                    rowCount = rows.domain().length,
                    colCount = cols.domain().length,
                    boxWidth = Math.floor(_chart.effectiveWidth() / colCount),
                    boxHeight = Math.floor(_chart.effectiveHeight() / rowCount);

                cols.rangeRoundBands([0, _chart.effectiveWidth()]);
                rows.rangeRoundBands([_chart.effectiveHeight(), 0]);

                var boxes = _chartBody.selectAll('g.box-group').data(_chart.data(), function (d, i) {
                    return _chart.keyAccessor()(d, i) + '\0' + _chart.valueAccessor()(d, i);
                });
                var gEnter = boxes.enter().append('g')
                    .attr('class', 'box-group');

                gEnter.append('rect')
                    .attr('class', 'heat-box')
                    .attr('fill', 'white')
                    .on('click', _chart.boxOnClick());

                if (_chart.renderTitle()) {
                    gEnter.append('title');
                    boxes.selectAll('title').text(_chart.title());
                }

                dc.transition(boxes.selectAll('rect'), _chart.transitionDuration())
                    .attr('x', function (d, i) { return cols(_chart.keyAccessor()(d, i)); })
                    .attr('y', function (d, i) { return rows(_chart.valueAccessor()(d, i)); })
                    .attr('rx', _xBorderRadius)
                    .attr('ry', _yBorderRadius)
                    .attr('fill', _chart.getColor)
                    .attr('width', boxWidth)
                    .attr('height', boxHeight);

                boxes.exit().remove();

                var gCols = _chartBody.selectAll('g.cols');
                if (gCols.empty()) {
                    gCols = _chartBody.append('g').attr('class', 'cols axis');
                }
                var gColsText = gCols.selectAll('text').data(cols.domain());
                gColsText.enter().append('text')
                    .attr('x', function (d) { return cols(d) + boxWidth / 2; })
                    .style('text-anchor', 'middle')
                    .attr('y', _chart.effectiveHeight())
                    .attr('dy', 12)
                    .on('click', _chart.xAxisOnClick())
                    .text(_chart.colsLabel());
                dc.transition(gColsText, _chart.transitionDuration())
                    .text(_chart.colsLabel())
                    .attr('x', function (d) { return cols(d) + boxWidth / 2; })
                    .attr('y', _chart.effectiveHeight());
                gColsText.exit().remove();
                var gRows = _chartBody.selectAll('g.rows');
                if (gRows.empty()) {
                    gRows = _chartBody.append('g').attr('class', 'rows axis');
                }
                var gRowsText = gRows.selectAll('text').data(rows.domain());
                gRowsText.enter().append('text')
                    .attr('dy', 6)
                    .style('text-anchor', 'end')
                    .attr('x', 0)
                    .attr('dx', -2)
                    .on('click', _chart.yAxisOnClick())
                    .text(_chart.rowsLabel());
                dc.transition(gRowsText, _chart.transitionDuration())
                    .text(_chart.rowsLabel())
                    .attr('y', function (d) { return rows(d) + boxHeight / 2; });
                gRowsText.exit().remove();

                if (_chart.hasFilter()) {
                    _chart.selectAll('g.box-group').each(function (d) {
                        if (_chart.isSelectedNode(d)) {
                            _chart.highlightSelected(this);
                        } else {
                            _chart.fadeDeselected(this);
                        }
                    });
                } else {
                    _chart.selectAll('g.box-group').each(function () {
                        _chart.resetHighlight(this);
                    });
                }
                return _chart;
            };

            /**
             * Gets or sets the handler that fires when an individual cell is clicked in the heatmap.
             * By default, filtering of the cell will be toggled.
             * @method boxOnClick
             * @memberof dc.heatMap
             * @instance
             * @example
             * // default box on click handler
             * chart.boxOnClick(function (d) {
     *     var filter = d.key;
     *     dc.events.trigger(function () {
     *         _chart.filter(filter);
     *         _chart.redrawGroup();
     *     });
     * });
             * @param  {Function} [handler]
             * @return {Function}
             * @return {dc.heatMap}
             */
            _chart.boxOnClick = function (handler) {
                if (!arguments.length) {
                    return _boxOnClick;
                }
                _boxOnClick = handler;
                return _chart;
            };

            /**
             * Gets or sets the handler that fires when a column tick is clicked in the x axis.
             * By default, if any cells in the column are unselected, the whole column will be selected,
             * otherwise the whole column will be unselected.
             * @method xAxisOnClick
             * @memberof dc.heatMap
             * @instance
             * @param  {Function} [handler]
             * @return {Function}
             * @return {dc.heatMap}
             */
            _chart.xAxisOnClick = function (handler) {
                if (!arguments.length) {
                    return _xAxisOnClick;
                }
                _xAxisOnClick = handler;
                return _chart;
            };

            /**
             * Gets or sets the handler that fires when a row tick is clicked in the y axis.
             * By default, if any cells in the row are unselected, the whole row will be selected,
             * otherwise the whole row will be unselected.
             * @method yAxisOnClick
             * @memberof dc.heatMap
             * @instance
             * @param  {Function} [handler]
             * @return {Function}
             * @return {dc.heatMap}
             */
            _chart.yAxisOnClick = function (handler) {
                if (!arguments.length) {
                    return _yAxisOnClick;
                }
                _yAxisOnClick = handler;
                return _chart;
            };

            /**
             * Gets or sets the X border radius.  Set to 0 to get full rectangles.
             * @method xBorderRadius
             * @memberof dc.heatMap
             * @instance
             * @param  {Number} [xBorderRadius=6.75]
             * @return {Number}
             * @return {dc.heatMap}
             */
            _chart.xBorderRadius = function (xBorderRadius) {
                if (!arguments.length) {
                    return _xBorderRadius;
                }
                _xBorderRadius = xBorderRadius;
                return _chart;
            };

            /**
             * Gets or sets the Y border radius.  Set to 0 to get full rectangles.
             * @method yBorderRadius
             * @memberof dc.heatMap
             * @instance
             * @param  {Number} [yBorderRadius=6.75]
             * @return {Number}
             * @return {dc.heatMap}
             */
            _chart.yBorderRadius = function (yBorderRadius) {
                if (!arguments.length) {
                    return _yBorderRadius;
                }
                _yBorderRadius = yBorderRadius;
                return _chart;
            };

            _chart.isSelectedNode = function (d) {
                return _chart.hasFilter(d.key);
            };

            return _chart.anchor(parent, chartGroup);
        };

// https://github.com/d3/d3-plugins/blob/master/box/box.js
        (function () {

            // Inspired by http://informationandvisualization.de/blog/box-plot
            d3.box = function () {
                var width = 1,
                    height = 1,
                    duration = 0,
                    domain = null,
                    value = Number,
                    whiskers = boxWhiskers,
                    quartiles = boxQuartiles,
                    tickFormat = null;

                // For each small multiple…
                function box (g) {
                    g.each(function (d, i) {
                        d = d.map(value).sort(d3.ascending);
                        var g = d3.select(this),
                            n = d.length,
                            min = d[0],
                            max = d[n - 1];

                        // Compute quartiles. Must return exactly 3 elements.
                        var quartileData = d.quartiles = quartiles(d);

                        // Compute whiskers. Must return exactly 2 elements, or null.
                        var whiskerIndices = whiskers && whiskers.call(this, d, i),
                            whiskerData = whiskerIndices && whiskerIndices.map(function (i) { return d[i]; });

                        // Compute outliers. If no whiskers are specified, all data are 'outliers'.
                        // We compute the outliers as indices, so that we can join across transitions!
                        var outlierIndices = whiskerIndices ?
                            d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n)) : d3.range(n);

                        // Compute the new x-scale.
                        var x1 = d3.scale.linear()
                            .domain(domain && domain.call(this, d, i) || [min, max])
                            .range([height, 0]);

                        // Retrieve the old x-scale, if this is an update.
                        var x0 = this.__chart__ || d3.scale.linear()
                                .domain([0, Infinity])
                                .range(x1.range());

                        // Stash the new scale.
                        this.__chart__ = x1;

                        // Note: the box, median, and box tick elements are fixed in number,
                        // so we only have to handle enter and update. In contrast, the outliers
                        // and other elements are variable, so we need to exit them! Variable
                        // elements also fade in and out.

                        // Update center line: the vertical line spanning the whiskers.
                        var center = g.selectAll('line.center')
                            .data(whiskerData ? [whiskerData] : []);

                        center.enter().insert('line', 'rect')
                            .attr('class', 'center')
                            .attr('x1', width / 2)
                            .attr('y1', function (d) { return x0(d[0]); })
                            .attr('x2', width / 2)
                            .attr('y2', function (d) { return x0(d[1]); })
                            .style('opacity', 1e-6)
                            .transition()
                            .duration(duration)
                            .style('opacity', 1)
                            .attr('y1', function (d) { return x1(d[0]); })
                            .attr('y2', function (d) { return x1(d[1]); });

                        center.transition()
                            .duration(duration)
                            .style('opacity', 1)
                            .attr('y1', function (d) { return x1(d[0]); })
                            .attr('y2', function (d) { return x1(d[1]); });

                        center.exit().transition()
                            .duration(duration)
                            .style('opacity', 1e-6)
                            .attr('y1', function (d) { return x1(d[0]); })
                            .attr('y2', function (d) { return x1(d[1]); })
                            .remove();

                        // Update innerquartile box.
                        var box = g.selectAll('rect.box')
                            .data([quartileData]);

                        box.enter().append('rect')
                            .attr('class', 'box')
                            .attr('x', 0)
                            .attr('y', function (d) { return x0(d[2]); })
                            .attr('width', width)
                            .attr('height', function (d) { return x0(d[0]) - x0(d[2]); })
                            .transition()
                            .duration(duration)
                            .attr('y', function (d) { return x1(d[2]); })
                            .attr('height', function (d) { return x1(d[0]) - x1(d[2]); });

                        box.transition()
                            .duration(duration)
                            .attr('y', function (d) { return x1(d[2]); })
                            .attr('height', function (d) { return x1(d[0]) - x1(d[2]); });

                        // Update median line.
                        var medianLine = g.selectAll('line.median')
                            .data([quartileData[1]]);

                        medianLine.enter().append('line')
                            .attr('class', 'median')
                            .attr('x1', 0)
                            .attr('y1', x0)
                            .attr('x2', width)
                            .attr('y2', x0)
                            .transition()
                            .duration(duration)
                            .attr('y1', x1)
                            .attr('y2', x1);

                        medianLine.transition()
                            .duration(duration)
                            .attr('y1', x1)
                            .attr('y2', x1);

                        // Update whiskers.
                        var whisker = g.selectAll('line.whisker')
                            .data(whiskerData || []);

                        whisker.enter().insert('line', 'circle, text')
                            .attr('class', 'whisker')
                            .attr('x1', 0)
                            .attr('y1', x0)
                            .attr('x2', width)
                            .attr('y2', x0)
                            .style('opacity', 1e-6)
                            .transition()
                            .duration(duration)
                            .attr('y1', x1)
                            .attr('y2', x1)
                            .style('opacity', 1);

                        whisker.transition()
                            .duration(duration)
                            .attr('y1', x1)
                            .attr('y2', x1)
                            .style('opacity', 1);

                        whisker.exit().transition()
                            .duration(duration)
                            .attr('y1', x1)
                            .attr('y2', x1)
                            .style('opacity', 1e-6)
                            .remove();

                        // Update outliers.
                        var outlier = g.selectAll('circle.outlier')
                            .data(outlierIndices, Number);

                        outlier.enter().insert('circle', 'text')
                            .attr('class', 'outlier')
                            .attr('r', 5)
                            .attr('cx', width / 2)
                            .attr('cy', function (i) { return x0(d[i]); })
                            .style('opacity', 1e-6)
                            .transition()
                            .duration(duration)
                            .attr('cy', function (i) { return x1(d[i]); })
                            .style('opacity', 1);

                        outlier.transition()
                            .duration(duration)
                            .attr('cy', function (i) { return x1(d[i]); })
                            .style('opacity', 1);

                        outlier.exit().transition()
                            .duration(duration)
                            .attr('cy', function (i) { return x1(d[i]); })
                            .style('opacity', 1e-6)
                            .remove();

                        // Compute the tick format.
                        var format = tickFormat || x1.tickFormat(8);

                        // Update box ticks.
                        var boxTick = g.selectAll('text.box')
                            .data(quartileData);

                        boxTick.enter().append('text')
                            .attr('class', 'box')
                            .attr('dy', '.3em')
                            .attr('dx', function (d, i) { return i & 1 ? 6 : -6; })
                            .attr('x', function (d, i) { return i & 1 ? width : 0; })
                            .attr('y', x0)
                            .attr('text-anchor', function (d, i) { return i & 1 ? 'start' : 'end'; })
                            .text(format)
                            .transition()
                            .duration(duration)
                            .attr('y', x1);

                        boxTick.transition()
                            .duration(duration)
                            .text(format)
                            .attr('y', x1);

                        // Update whisker ticks. These are handled separately from the box
                        // ticks because they may or may not exist, and we want don't want
                        // to join box ticks pre-transition with whisker ticks post-.
                        var whiskerTick = g.selectAll('text.whisker')
                            .data(whiskerData || []);

                        whiskerTick.enter().append('text')
                            .attr('class', 'whisker')
                            .attr('dy', '.3em')
                            .attr('dx', 6)
                            .attr('x', width)
                            .attr('y', x0)
                            .text(format)
                            .style('opacity', 1e-6)
                            .transition()
                            .duration(duration)
                            .attr('y', x1)
                            .style('opacity', 1);

                        whiskerTick.transition()
                            .duration(duration)
                            .text(format)
                            .attr('y', x1)
                            .style('opacity', 1);

                        whiskerTick.exit().transition()
                            .duration(duration)
                            .attr('y', x1)
                            .style('opacity', 1e-6)
                            .remove();
                    });
                    d3.timer.flush();
                }

                box.width = function (x) {
                    if (!arguments.length) {
                        return width;
                    }
                    width = x;
                    return box;
                };

                box.height = function (x) {
                    if (!arguments.length) {
                        return height;
                    }
                    height = x;
                    return box;
                };

                box.tickFormat = function (x) {
                    if (!arguments.length) {
                        return tickFormat;
                    }
                    tickFormat = x;
                    return box;
                };

                box.duration = function (x) {
                    if (!arguments.length) {
                        return duration;
                    }
                    duration = x;
                    return box;
                };

                box.domain = function (x) {
                    if (!arguments.length) {
                        return domain;
                    }
                    domain = x === null ? x : d3.functor(x);
                    return box;
                };

                box.value = function (x) {
                    if (!arguments.length) {
                        return value;
                    }
                    value = x;
                    return box;
                };

                box.whiskers = function (x) {
                    if (!arguments.length) {
                        return whiskers;
                    }
                    whiskers = x;
                    return box;
                };

                box.quartiles = function (x) {
                    if (!arguments.length) {
                        return quartiles;
                    }
                    quartiles = x;
                    return box;
                };

                return box;
            };

            function boxWhiskers (d) {
                return [0, d.length - 1];
            }

            function boxQuartiles (d) {
                return [
                    d3.quantile(d, 0.25),
                    d3.quantile(d, 0.5),
                    d3.quantile(d, 0.75)
                ];
            }

        })();

        /**
         * A box plot is a chart that depicts numerical data via their quartile ranges.
         *
         * Examples:
         * - {@link http://dc-js.github.io/dc.js/examples/box-plot-time.html Box plot time example}
         * - {@link http://dc-js.github.io/dc.js/examples/box-plot.html Box plot example}
         * @class boxPlot
         * @memberof dc
         * @mixes dc.coordinateGridMixin
         * @example
         * // create a box plot under #chart-container1 element using the default global chart group
         * var boxPlot1 = dc.boxPlot('#chart-container1');
         * // create a box plot under #chart-container2 element using chart group A
         * var boxPlot2 = dc.boxPlot('#chart-container2', 'chartGroupA');
         * @param {String|node|d3.selection} parent - Any valid
         * {@link https://github.com/mbostock/d3/wiki/Selections#selecting-elements d3 single selector} specifying
         * a dom block element such as a div; or a dom element or d3 selection.
         * @param {String} [chartGroup] - The name of the chart group this chart instance should be placed in.
         * Interaction with a chart will only trigger events and redraws within the chart's group.
         * @return {dc.boxPlot}
         */
        dc.boxPlot = function (parent, chartGroup) {
            var _chart = dc.coordinateGridMixin({});

            // Returns a function to compute the interquartile range.
            function DEFAULT_WHISKERS_IQR (k) {
                return function (d) {
                    var q1 = d.quartiles[0],
                        q3 = d.quartiles[2],
                        iqr = (q3 - q1) * k,
                        i = -1,
                        j = d.length;
                    do { ++i; } while (d[i] < q1 - iqr);
                    do { --j; } while (d[j] > q3 + iqr);
                    return [i, j];
                };
            }

            var _whiskerIqrFactor = 1.5;
            var _whiskersIqr = DEFAULT_WHISKERS_IQR;
            var _whiskers = _whiskersIqr(_whiskerIqrFactor);

            var _box = d3.box();
            var _tickFormat = null;

            var _boxWidth = function (innerChartWidth, xUnits) {
                if (_chart.isOrdinal()) {
                    return _chart.x().rangeBand();
                } else {
                    return innerChartWidth / (1 + _chart.boxPadding()) / xUnits;
                }
            };

            // default padding to handle min/max whisker text
            _chart.yAxisPadding(12);

            // default to ordinal
            _chart.x(d3.scale.ordinal());
            _chart.xUnits(dc.units.ordinal);

            // valueAccessor should return an array of values that can be coerced into numbers
            // or if data is overloaded for a static array of arrays, it should be `Number`.
            // Empty arrays are not included.
            _chart.data(function (group) {
                return group.all().map(function (d) {
                    d.map = function (accessor) { return accessor.call(d, d); };
                    return d;
                }).filter(function (d) {
                    var values = _chart.valueAccessor()(d);
                    return values.length !== 0;
                });
            });

            /**
             * Get or set the spacing between boxes as a fraction of box size. Valid values are within 0-1.
             * See the {@link https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands d3 docs}
             * for a visual description of how the padding is applied.
             * @method boxPadding
             * @memberof dc.boxPlot
             * @instance
             * @see {@link https://github.com/mbostock/d3/wiki/Ordinal-Scales#wiki-ordinal_rangeBands d3.scale.ordinal.rangeBands}
             * @param {Number} [padding=0.8]
             * @return {Number}
             * @return {dc.boxPlot}
             */
            _chart.boxPadding = _chart._rangeBandPadding;
            _chart.boxPadding(0.8);

            /**
             * Get or set the outer padding on an ordinal box chart. This setting has no effect on non-ordinal charts
             * or on charts with a custom {@link dc.boxPlot#boxWidth .boxWidth}. Will pad the width by
             * `padding * barWidth` on each side of the chart.
             * @method outerPadding
             * @memberof dc.boxPlot
             * @instance
             * @param {Number} [padding=0.5]
             * @return {Number}
             * @return {dc.boxPlot}
             */
            _chart.outerPadding = _chart._outerRangeBandPadding;
            _chart.outerPadding(0.5);

            /**
             * Get or set the numerical width of the boxplot box. The width may also be a function taking as
             * parameters the chart width excluding the right and left margins, as well as the number of x
             * units.
             * @example
             * // Using numerical parameter
             * chart.boxWidth(10);
             * // Using function
             * chart.boxWidth((innerChartWidth, xUnits) { ... });
             * @method boxWidth
             * @memberof dc.boxPlot
             * @instance
             * @param {Number|Function} [boxWidth=0.5]
             * @return {Number|Function}
             * @return {dc.boxPlot}
             */
            _chart.boxWidth = function (boxWidth) {
                if (!arguments.length) {
                    return _boxWidth;
                }
                _boxWidth = d3.functor(boxWidth);
                return _chart;
            };

            var boxTransform = function (d, i) {
                var xOffset = _chart.x()(_chart.keyAccessor()(d, i));
                return 'translate(' + xOffset + ', 0)';
            };

            _chart._preprocessData = function () {
                if (_chart.elasticX()) {
                    _chart.x().domain([]);
                }
            };

            _chart.plotData = function () {
                var _calculatedBoxWidth = _boxWidth(_chart.effectiveWidth(), _chart.xUnitCount());

                _box.whiskers(_whiskers)
                    .width(_calculatedBoxWidth)
                    .height(_chart.effectiveHeight())
                    .value(_chart.valueAccessor())
                    .domain(_chart.y().domain())
                    .duration(_chart.transitionDuration())
                    .tickFormat(_tickFormat);

                var boxesG = _chart.chartBodyG().selectAll('g.box').data(_chart.data(), function (d) { return d.key; });

                renderBoxes(boxesG);
                updateBoxes(boxesG);
                removeBoxes(boxesG);

                _chart.fadeDeselectedArea();
            };

            function renderBoxes (boxesG) {
                var boxesGEnter = boxesG.enter().append('g');

                boxesGEnter
                    .attr('class', 'box')
                    .attr('transform', boxTransform)
                    .call(_box)
                    .on('click', function (d) {
                        _chart.filter(d.key);
                        _chart.redrawGroup();
                    });
            }

            function updateBoxes (boxesG) {
                dc.transition(boxesG, _chart.transitionDuration())
                    .attr('transform', boxTransform)
                    .call(_box)
                    .each(function () {
                        d3.select(this).select('rect.box').attr('fill', _chart.getColor);
                    });
            }

            function removeBoxes (boxesG) {
                boxesG.exit().remove().call(_box);
            }

            _chart.fadeDeselectedArea = function () {
                if (_chart.hasFilter()) {
                    _chart.g().selectAll('g.box').each(function (d) {
                        if (_chart.isSelectedNode(d)) {
                            _chart.highlightSelected(this);
                        } else {
                            _chart.fadeDeselected(this);
                        }
                    });
                } else {
                    _chart.g().selectAll('g.box').each(function () {
                        _chart.resetHighlight(this);
                    });
                }
            };

            _chart.isSelectedNode = function (d) {
                return _chart.hasFilter(d.key);
            };

            _chart.yAxisMin = function () {
                var min = d3.min(_chart.data(), function (e) {
                    return d3.min(_chart.valueAccessor()(e));
                });
                return dc.utils.subtract(min, _chart.yAxisPadding());
            };

            _chart.yAxisMax = function () {
                var max = d3.max(_chart.data(), function (e) {
                    return d3.max(_chart.valueAccessor()(e));
                });
                return dc.utils.add(max, _chart.yAxisPadding());
            };

            /**
             * Set the numerical format of the boxplot median, whiskers and quartile labels. Defaults to
             * integer formatting.
             * @example
             * // format ticks to 2 decimal places
             * chart.tickFormat(d3.format('.2f'));
             * @method tickFormat
             * @memberof dc.boxPlot
             * @instance
             * @param {Function} [tickFormat]
             * @return {Number|Function}
             * @return {dc.boxPlot}
             */
            _chart.tickFormat = function (tickFormat) {
                if (!arguments.length) {
                    return _tickFormat;
                }
                _tickFormat = tickFormat;
                return _chart;
            };

            return _chart.anchor(parent, chartGroup);
        };

// Renamed functions

        dc.abstractBubbleChart = dc.bubbleMixin;
        dc.baseChart = dc.baseMixin;
        dc.capped = dc.capMixin;
        dc.colorChart = dc.colorMixin;
        dc.coordinateGridChart = dc.coordinateGridMixin;
        dc.marginable = dc.marginMixin;
        dc.stackableChart = dc.stackMixin;

// Expose d3 and crossfilter, so that clients in browserify
// case can obtain them if they need them.
        dc.d3 = d3;
        dc.crossfilter = crossfilter;

        return dc;}
        if(typeof define === "function" && define.amd) {
            define(["d3", "crossfilter"], _dc);
        } else if(typeof module === "object" && module.exports) {
            var _d3 = require('d3');
            var _crossfilter = require('crossfilter2');
            // When using npm + browserify, 'crossfilter' is a function,
            // since package.json specifies index.js as main function, and it
            // does special handling. When using bower + browserify,
            // there's no main in bower.json (in fact, there's no bower.json),
            // so we need to fix it.
            if (typeof _crossfilter !== "function") {
                _crossfilter = _crossfilter.crossfilter;
            }
            module.exports = _dc(_d3, _crossfilter);
        } else {
            this.dc = _dc(d3, crossfilter);
        }
    }
)();

//# sourceMappingURL=dc.js.map