samussiah · June 2, 2018 18:17
diff --git a/ADTIMELINES.csv b/ADTIMELINES.csv
diff --git a/clinicalTimelines.js b/clinicalTimelines.js
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('d3'), require('webcharts')) :
 	typeof define === 'function' && define.amd ? define(['d3', 'webcharts'], factory) :
 	(global.clinicalTimelines = factory(global.d3,global.webCharts));
 }(this, (function (d3$1,webcharts) { 'use strict';

 Number.isInteger = Number.isInteger || function (value) {
    return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
 };

 /*------------------------------------------------------------------------------------------------\
  Add assign method to Object if nonexistent.
 \------------------------------------------------------------------------------------------------*/

 if (typeof Object.assign != 'function') {
    (function () {
        Object.assign = function (target) {
            'use strict';

            if (target === undefined || target === null) {
                throw new TypeError('Cannot convert undefined or null to object');
            }

            var output = Object(target);
            for (var index = 1; index < arguments.length; index++) {
                var source = arguments[index];
                if (source !== undefined && source !== null) {
                    for (var nextKey in source) {
                        if (source.hasOwnProperty(nextKey)) {
                            output[nextKey] = source[nextKey];
                        }
                    }
                }
            }
            return output;
        };
    })();
 }

 if (!Array.prototype.find) {
    Object.defineProperty(Array.prototype, 'find', {
        value: function value(predicate) {
            // 1. Let O be ? ToObject(this value).
            if (this == null) {
                throw new TypeError('"this" is null or not defined');
            }

            var o = Object(this);

            // 2. Let len be ? ToLength(? Get(O, "length")).
            var len = o.length >>> 0;

            // 3. If IsCallable(predicate) is false, throw a TypeError exception.
            if (typeof predicate !== 'function') {
                throw new TypeError('predicate must be a function');
            }

            // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
            var thisArg = arguments[1];

            // 5. Let k be 0.
            var k = 0;

            // 6. Repeat, while k < len
            while (k < len) {
                // a. Let Pk be ! ToString(k).
                // b. Let kValue be ? Get(O, Pk).
                // c. Let testResult be ToBoolean(? Call(predicate, T, � kValue, k, O �)).
                // d. If testResult is true, return kValue.
                var kValue = o[k];
                if (predicate.call(thisArg, kValue, k, o)) {
                    return kValue;
                }
                // e. Increase k by 1.
                k++;
            }

            // 7. Return undefined.
            return undefined;
        }
    });
 }

 if (!Array.prototype.findIndex) {
    Object.defineProperty(Array.prototype, 'findIndex', {
        value: function value(predicate) {
            // 1. Let O be ? ToObject(this value).
            if (this == null) {
                throw new TypeError('"this" is null or not defined');
            }

            var o = Object(this);

            // 2. Let len be ? ToLength(? Get(O, "length")).
            var len = o.length >>> 0;

            // 3. If IsCallable(predicate) is false, throw a TypeError exception.
            if (typeof predicate !== 'function') {
                throw new TypeError('predicate must be a function');
            }

            // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
            var thisArg = arguments[1];

            // 5. Let k be 0.
            var k = 0;

            // 6. Repeat, while k < len
            while (k < len) {
                // a. Let Pk be ! ToString(k).
                // b. Let kValue be ? Get(O, Pk).
                // c. Let testResult be ToBoolean(? Call(predicate, T, � kValue, k, O �)).
                // d. If testResult is true, return k.
                var kValue = o[k];
                if (predicate.call(thisArg, kValue, k, o)) {
                    return k;
                }
                // e. Increase k by 1.
                k++;
            }

            // 7. Return -1.
            return -1;
        }
    });
 }

 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
  return typeof obj;
 } : function (obj) {
  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
 };





 var asyncGenerator = function () {
  function AwaitValue(value) {
    this.value = value;
  }

  function AsyncGenerator(gen) {
    var front, back;

    function send(key, arg) {
      return new Promise(function (resolve, reject) {
        var request = {
          key: key,
          arg: arg,
          resolve: resolve,
          reject: reject,
          next: null
        };

        if (back) {
          back = back.next = request;
        } else {
          front = back = request;
          resume(key, arg);
        }
      });
    }

    function resume(key, arg) {
      try {
        var result = gen[key](arg);
        var value = result.value;

        if (value instanceof AwaitValue) {
          Promise.resolve(value.value).then(function (arg) {
            resume("next", arg);
          }, function (arg) {
            resume("throw", arg);
          });
        } else {
          settle(result.done ? "return" : "normal", result.value);
        }
      } catch (err) {
        settle("throw", err);
      }
    }

    function settle(type, value) {
      switch (type) {
        case "return":
          front.resolve({
            value: value,
            done: true
          });
          break;

        case "throw":
          front.reject(value);
          break;

        default:
          front.resolve({
            value: value,
            done: false
          });
          break;
      }

      front = front.next;

      if (front) {
        resume(front.key, front.arg);
      } else {
        back = null;
      }
    }

    this._invoke = send;

    if (typeof gen.return !== "function") {
      this.return = undefined;
    }
  }

  if (typeof Symbol === "function" && Symbol.asyncIterator) {
    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
      return this;
    };
  }

  AsyncGenerator.prototype.next = function (arg) {
    return this._invoke("next", arg);
  };

  AsyncGenerator.prototype.throw = function (arg) {
    return this._invoke("throw", arg);
  };

  AsyncGenerator.prototype.return = function (arg) {
    return this._invoke("return", arg);
  };

  return {
    wrap: function (fn) {
      return function () {
        return new AsyncGenerator(fn.apply(this, arguments));
      };
    },
    await: function (value) {
      return new AwaitValue(value);
    }
  };
 }();

 /*------------------------------------------------------------------------------------------------\
  Clone a variable (http://stackoverflow.com/a/728694).
 \------------------------------------------------------------------------------------------------*/

 function clone(obj) {
    var copy;

    //Handle the 3 simple types, and null or undefined
    if (null == obj || 'object' != (typeof obj === "undefined" ? "undefined" : _typeof(obj))) return obj;

    //Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    //Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    //Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
 }

 var rendererSpecificSettings = {
    //ID settings
    id_col: 'USUBJID',
    id_unit: 'participant',
    id_characteristics: null,

    //Event settings
    event_col: 'DOMAIN',
    event_types: null,
    event_highlighted: null,
    event_highlight_color: 'black',
    event_symbols: null,

    //Filter settings
    filters: null,

    //Grouping settings
    groupings: null,
    grouping_initial: null,
    grouping_direction: 'horizontal',

    //Timing settings
    time_scale: 'Date',

    //Date settings
    stdt_col: 'STDT',
    endt_col: 'ENDT',
    date_range: null,
    date_ranges: null,
    date_format: '%Y-%m-%d',
    date_display_format: '%b %y', // sync in syncSettings()

    //Day settings
    stdy_col: 'STDY',
    endy_col: 'ENDY',
    day_range: null,
    day_ranges: null,

    //Miscellaneous settings
    seq_col: 'SEQ',
    ongo_col: 'ONGO',
    ongo_val: 'Y',
    tooltip_col: 'TOOLTIP',
    offset_col: null,
    reference_lines: null,
    mark_thickness: 6,
    transpose_data: false,

    //Listing settings
    details: null,
    details_config: null
 };

 var webchartsSettings = {
    x: {
        type: null, // set in syncSettings()
        column: 'wc_value',
        label: null, // set in syncSettings()
        format: null // set in syncSettings()
    },
    y: {
        type: 'ordinal',
        column: null, // set in syncSettings()
        label: null, // set in syncSettings()
        sort: 'By Earliest Event',
        behavior: 'flex',
        grouping: null // set in syncSettings()
    },
    marks: [{
        type: 'line',
        per: null, // set in syncSettings()
        tooltip: null, // set in syncSettings()
        attributes: {
            'stroke-width': null // set in syncSettings()
        }
    }, {
        type: 'circle',
        per: null, // set in syncSettings()
        tooltip: null, // set in syncSettings()
        radius: null, // set in syncSettings()
        attributes: {
            'stroke-width': null // set in syncSettings()
        }
    }],
    colors: ['#1b9e77', '#d95f02', '#7570b3', '#a6cee3', '#1f78b4', '#b2df8a', '#66c2a5', '#fc8d62', '#8da0cb'],
    color_dom: null, // set in syncSettings()
    legend: {
        location: 'top',
        label: 'Event Type',
        order: null, // set in syncSettings()
        mark: 'circle'
    },
    range_band: 35,
    margin: {
        top: 60,
        right: 40
    }, // for second x-axis
    resizable: false // can't be resizable so the multiples aren't overlapped by their titles
 };

 var settings = Object.assign({}, rendererSpecificSettings, webchartsSettings);

 function arrayOfVariablesCheck(defaultVariables, userDefinedVariables) {
    var validSetting = userDefinedVariables instanceof Array && userDefinedVariables.length ? d3$1.merge([defaultVariables, userDefinedVariables.filter(function (item) {
        return !(item instanceof Object && item.hasOwnProperty('value_col') === false) && defaultVariables.map(function (d) {
            return d.value_col;
        }).indexOf(item.value_col || item) === -1;
    })]).map(function (item) {
        var itemObject = item instanceof Object ? Object.assign({}, item) : { value_col: item };

        itemObject.label = itemObject.label || itemObject.value_col;

        return itemObject;
    }) : defaultVariables;

    return validSetting;
 }

 function syncRendererSpecificSettings(settings) {
    /**-------------------------------------------------------------------------------------------\
      ID settings
    \-------------------------------------------------------------------------------------------**/

    //id_unit
    settings.id_unit = settings.id_unit.replace(/^\s+|\s+$/g, ''); // remove leading and trailing white space
    settings.id_unitPropCased = settings.id_unit.substring(0, 1).toUpperCase() + settings.id_unit.substring(1).toLowerCase();
    settings.id_unitPlural = /y$/.test(settings.id_unit) ? settings.id_unit.substring(0, settings.id_unit.length - 1) + 'ies' : settings.id_unit + 's';

    //id_characteristics
    var defaultID_characteristics = [{ value_col: settings.id_col, label: settings.id_unitPropCased }];
    settings.id_characteristics = arrayOfVariablesCheck(defaultID_characteristics, settings.id_characteristics);

    /**-------------------------------------------------------------------------------------------\
      Event settings
    \-------------------------------------------------------------------------------------------**/

    //event_types
    if (!(settings.event_types instanceof Array && settings.event_types.length)) delete settings.event_types;

    //event_symbols
    if (settings.event_symbols instanceof Array) settings.event_symbols = settings.event_symbols.filter(function (event_symbol) {
        return ['square', 'diamond', 'triangle'].indexOf(event_symbol.symbol) > -1;
    });
    if (!(settings.event_symbols instanceof Array && settings.event_symbols.length)) delete settings.event_symbols;

    /**-------------------------------------------------------------------------------------------\
      Filter settings
    \-------------------------------------------------------------------------------------------**/

    //filters
    var defaultFilters = [{ value_col: settings.id_col, label: settings.id_unitPropCased }, { value_col: settings.event_col, label: 'Event Type' }];
    if (settings.ongo_col) defaultFilters.splice(2, 0, { value_col: settings.ongo_col, label: 'Ongoing?' });
    settings.filters = arrayOfVariablesCheck(defaultFilters, settings.filters);

    /**-------------------------------------------------------------------------------------------\
      Grouping settings
    \-------------------------------------------------------------------------------------------**/

    //groupings
    var defaultGroupings = [];
    settings.groupings = arrayOfVariablesCheck(defaultGroupings, settings.groupings);

    //grouping direction
    if (['horizontal', 'vertical'].indexOf(settings.grouping_direction) === -1) settings.grouping_direction = 'horizontal';

    /**-------------------------------------------------------------------------------------------\
      Timing settings
    \-------------------------------------------------------------------------------------------**/

    //date_display_format
    settings.date_display_format = settings.date_display_format || settings.date_format;

    //date_ranges - array of 2-element date ranges or of objects with a label property and a time_range property
    //  {
    //      domain: [
    //          <lower bound>,
    //          <upper bound>
    //      ],
    //      label: '<date range description>'
    //  }

    if (Array.isArray(settings.date_range) && settings.date_ranges === null) settings.date_ranges = [{
        domain: settings.date_range,
        label: 'Initial Date Range'
    }];else if (Array.isArray(settings.date_range) && Array.isArray(settings.date_ranges)) settings.date_ranges.unshift(settings.date_range);

    if (Array.isArray(settings.date_ranges)) settings.date_ranges = settings.date_ranges.filter(function (date_range) {
        var domain = date_range.domain || date_range;
        return domain instanceof Array && domain.length === 2 && domain[0].toString() !== domain[1].toString() && domain.every(function (d) {
            return d instanceof Date || d3$1.time.format(settings.date_format).parse(d);
        });
    }).map(function (date_range) {
        var domain = (date_range.domain || date_range).map(function (date) {
            return date instanceof Date ? date : d3$1.time.format(settings.date_format).parse(date);
        });
        var label = date_range.label || domain.map(function (date) {
            return date instanceof Date ? d3$1.time.format(settings.date_display_format)(date) : date;
        }).join(' - ');
        return {
            domain: domain,
            label: label
        };
    });else settings.date_ranges = [];

    //day_ranges - array of 2-element day ranges or of objects with a label property and a time_range property
    //  {
    //      domain: [
    //          <lower bound>,
    //          <upper bound>
    //      ],
    //      label: '<day range description>'
    //  }

    if (Array.isArray(settings.day_range) && settings.day_ranges === null) settings.day_ranges = [{
        domain: settings.day_range,
        label: 'Initial Day Range'
    }];else if (Array.isArray(settings.day_range) && Array.isArray(settings.day_ranges)) settings.day_ranges.unshift(settings.day_range);

    if (settings.day_range && settings.day_ranges === null) settings.day_ranges = [{
        domain: settings.day_range,
        label: 'Initial Day Range'
    }];
    if (Array.isArray(settings.day_ranges)) settings.day_ranges = settings.day_ranges.filter(function (day_range) {
        var domain = day_range.domain || day_range;
        return domain instanceof Array && domain.length === 2 && domain[0].toString() !== domain[1].toString() && domain.every(function (d) {
            return Number.isInteger(+d);
        });
    }).map(function (day_range) {
        var domain = day_range.domain || day_range;
        var label = day_range.label || domain.join(' - ');
        return {
            domain: domain,
            label: label
        };
    });else settings.day_ranges = [];

    /**-------------------------------------------------------------------------------------------\
      Miscellaneous settings
    \-------------------------------------------------------------------------------------------**/

    //reference_lines
    if (settings.reference_lines) {
        if (!(settings.reference_lines instanceof Array)) settings.reference_lines = [settings.reference_lines];

        settings.reference_lines = settings.reference_lines.map(function (reference_line) {
            var referenceLineObject = {};

            //either an object or not
            referenceLineObject.timepoint = reference_line instanceof Object ? reference_line.timepoint : reference_line;

            //either an integer or not
            referenceLineObject.time_scale = Number.isInteger(+referenceLineObject.timepoint) ? 'Day' : 'Date';

            //label predefined or not
            referenceLineObject.label = reference_line.label ? reference_line.label : referenceLineObject.time_scale.substring(0, 1).toUpperCase() + referenceLineObject.time_scale.substring(1) + ': ' + referenceLineObject.timepoint;

            return referenceLineObject;
        }).filter(function (reference_line) {
            return reference_line.time_scale === 'Day' && Number.isInteger(reference_line.timepoint) || reference_line.time_scale === 'Date' && d3$1.time.format(settings.date_format).parse(reference_line.timepoint) instanceof Date;
        });

        if (!settings.reference_lines.length) delete settings.reference_lines;
    }

    /**-------------------------------------------------------------------------------------------\
      Listing settings
    \-------------------------------------------------------------------------------------------**/

    //details
    var defaultDetails = [{ value_col: settings.event_col, label: 'Event Type' }, { value_col: 'stdtdy', label: 'Start Date (Day)' }, { value_col: 'endtdy', label: 'Stop Date (Day)' }, { value_col: settings.seq_col, label: 'Sequence Number' }];

    //add ongo_col if specified
    if (settings.ongo_col) defaultDetails.push({ value_col: settings.ongo_col, label: 'Ongoing?' });

    //add tooltip_col if specified
    if (settings.tooltip_col) defaultDetails.push({ value_col: settings.tooltip_col, label: 'Details' });

    settings.details = arrayOfVariablesCheck(defaultDetails, settings.details);

    //add filters
    settings.filters.filter(function (filter) {
        return filter.value_col !== settings.id_col;
    }) // remove id_col
    .filter(function (filter) {
        return settings.id_characteristics.map(function (id_characteristic) {
            return id_characteristic.value_col;
        }).indexOf(filter.value_col) < 0;
    }) // remove id_characteristics
    .forEach(function (filter) {
        if (settings.details.map(function (detail) {
            return detail.value_col;
        }).indexOf(filter.value_col) === -1) settings.details.push(filter);
    });
 }

 function syncWebchartsSettings(settings) {
    //Y-axis
    settings.y.column = settings.id_col;
    if (settings.grouping_initial) {
        settings.y.grouping = settings.grouping_initial;
        settings.y.groupingLabel = settings.groupings[settings.groupings.map(function (grouping) {
            return grouping.value_col;
        }).indexOf(settings.grouping_initial)].label;
    }

    //Lines
    var lines = settings.marks[0];
    lines.per = [settings.id_col, settings.event_col, settings.seq_col];
    lines.attributes['stroke-width'] = settings.mark_thickness * 1.25;

    //Circles
    var circles = settings.marks[1];
    circles.per = [settings.id_col, settings.event_col, settings.seq_col, 'wc_value'];
    circles.radius = settings.mark_thickness * 3 / 4;
    circles.attributes['stroke-width'] = settings.mark_thickness * 1 / 2;

    //Color stratification
    settings.color_by = settings.event_col;

    //Add space at bottom of timeline to create space for the last ID's offset marks.
    settings.margin.bottom = settings.margin.top + settings.range_band;
 }

 function syncTimeScaleSettings(settings) {
    settings.time_scale = ['date', 'day'].indexOf(settings.time_scale.toLowerCase()) > -1 ? settings.time_scale.substring(0, 1).toUpperCase() + settings.time_scale.substring(1).toLowerCase() : 'Date';

    //Define settings variables to handle both date and day time scales.
    if (settings.time_scale === 'Date') {
        settings.st_col = settings.stdt_col;
        settings.en_col = settings.endt_col;
        settings.x.type = 'time';
        settings.x.format = settings.date_display_format;
        settings.time_unit = 'DT';

        settings.x_parseFormat = d3$1.time.format(settings.date_format);
        settings.x_displayFormat = d3$1.time.format(settings.date_display_format);
        settings.time_function = function (dt) {
            var parsed = void 0;
            try {
                parsed = settings.x_parseFormat.parse(dt) || new Date(dt);
            } catch (error) {
                parsed = new Date(dt);
            }
            return parsed;
        };
    } else if (settings.time_scale === 'Day') {
        settings.st_col = settings.stdy_col;
        settings.en_col = settings.endy_col;
        settings.x.type = 'linear';
        settings.x.format = '1f';
        settings.time_unit = 'DY';

        settings.x_parseFormat = d3$1.format(settings.x.format);
        settings.x_displayFormat = settings.x_parseFormat;
        settings.time_function = function (dy) {
            return +settings.x_displayFormat(+dy);
        };
    }

    //Time intervals (lines)
    settings.marks[0].tooltip = 'Event: [' + settings.event_col + ']' + ('\nStart ' + settings.time_scale.toLowerCase() + ': [' + settings.st_col + ']') + ('\nStop ' + settings.time_scale.toLowerCase() + ': [' + settings.en_col + ']');
    settings.marks[0].values = { wc_category: [settings.st_col, settings.en_col] };

    //Timepoints (circles)
    settings.marks[1].tooltip = 'Event: [' + settings.event_col + ']' + ('\n' + settings.time_scale + ': [' + settings.st_col + ']');
    settings.marks[1].values = { wc_category: settings.time_unit };
 }

 function syncIDtimelineSettings(settings) {
    settings.x.label = '';
    settings.y.column = settings.seq_col;
    settings.y.sort = 'alphabetical-descending';
    settings.marks[0].per = [settings.event_col, settings.seq_col];
    settings.marks[1].per = [settings.event_col, settings.seq_col, 'wc_value'];
    settings.gridlines = 'y';
    settings.range_band = settings.mark_thickness * 2;
    settings.margin = { left: 25 };
 }

 function syncListingSettings(settings) {
    settings.details_config = settings.details_config || {
        cols: settings.details.map(function (detail) {
            return detail.value_col;
        }),
        headers: settings.details.map(function (detail) {
            return detail.label;
        })
    };

    //Define listing columns and headers if not already defined.
    if (!settings.details_config.hasOwnProperty('cols')) {
        settings.details_config.cols = settings.details.map(function (detail) {
            return detail.value_col;
        });
        settings.details_config.headers = settings.details.map(function (detail) {
            return detail.label;
        });
    }
 }

 function syncSettings(settings) {
    var syncedSettings = clone(settings);

    //Clinical timelines
    syncTimeScaleSettings(syncedSettings);
    syncRendererSpecificSettings(syncedSettings);
    syncWebchartsSettings(syncedSettings);

    //ID timeline
    syncedSettings.IDtimelineSettings = clone(syncedSettings);
    syncIDtimelineSettings(syncedSettings.IDtimelineSettings);

    //Listing
    syncListingSettings(syncedSettings);

    return syncedSettings;
 }

 var controls = [{
    type: 'dropdown',
    option: 'event_highlighted',
    label: '',
    description: 'Event highlighting',
    values: null // set in onInit() callback
 }, {
    type: 'dropdown',
    option: 'time_scale',
    label: '',
    description: 'X-axis scale',
    values: ['Date', 'Day'],
    require: true
 }, {
    type: 'dropdown',
    option: 'date_time_range',
    label: '',
    description: 'Time range',
    values: null, // set in onInit() callback
    require: true
 }, {
    type: 'dropdown',
    option: 'day_time_range',
    label: '',
    description: 'Time range',
    values: null, // set in onInit() callback
    require: true
 }, {
    type: 'dropdown',
    option: 'y.sort',
    label: '',
    description: 'Y-axis sort',
    values: ['By Earliest Event', 'Alphanumerically'],
    require: true
 }, {
    type: 'dropdown',
    option: 'y.groupingLabel',
    label: '',
    description: 'Y-axis grouping',
    values: null // set in onInit() callback
 }];

 function syncControls(controls, settings) {
    settings.filters.sort(function (a, b) {
        return a.value_col === settings.event_col ? 1 : 0;
    }).forEach(function (filter) {
        filter.type = 'subsetter';
        filter.description = filter.label;
        filter.label = '';

        //Update ID filter.
        if (filter.value_col === settings.id_col) filter.description = settings.id_unitPropCased + ' view';

        //Update event type filter.
        if (filter.value_col === settings.event_col) {
            filter.multiple = true;
            filter.start = settings.event_types;
        }
    });

    //Remove groupings control if no groupings are specified.
    if (settings.groupings.length === 0) controls.splice(controls.findIndex(function (control) {
        return control.option === 'y.grouping';
    }), 1);

    var syncedControls = d3$1.merge([[settings.filters[0]], // ID dropdown first
    clone(controls), // Non-filters second
    settings.filters.slice(1) // Filters last
    ]);

    return syncedControls;
 }

 var defaults$1 = {
    settings: settings,
    syncSettings: syncSettings,
    controls: controls,
    syncControls: syncControls
 };

 function defineSettings() {
    this.settings.merged = Object.assign({}, clone(defaults$1.settings), clone(this.settings.user));
    this.settings.synced = defaults$1.syncSettings(clone(this.settings.merged));
    Object.assign(this.settings, clone(this.settings.synced));
    this.settings.IDtimeline = clone(this.settings.IDtimelineSettings);
    this.settings.listing = clone(this.settings.details_config);
    this.settings.controls = defaults$1.syncControls(clone(defaults$1.controls), clone(this.settings));
 }

 function defineStyles() {
    //Define styles.
    var line = this.settings.synced.marks.find(function (mark) {
        return mark.type === 'line';
    });
    var circle = this.settings.synced.marks.find(function (mark) {
        return mark.type === 'circle';
    });
    var styles = [

    /***--------------------------------------------------------------------------------------\
      Global styles
    \--------------------------------------------------------------------------------------***/

    //general
    'html {' + '    overflow: -moz-scrollbars-vertical;' + '    overflow-y: scroll;' + '}', '#clinical-timelines {' + '    display: inline-block;' + '    width: 100%;' + '}',

    //hidden
    '#clinical-timelines .ct-hidden {' + '    display: none !important;' + '}',

    //buttons
    '#clinical-timelines .ct-button {' + '    display: inline-block;' + '    padding: 3px 5px !important;' + '    border: 2px solid black !important;' + '    border-radius: 4px !important;' + '    color: #333;' + '    background: #ccc;' + '    cursor: pointer !important;' + '}', '#clinical-timelines .ct-button:hover {' + '    color: #ccc;' + '    background: #333 !important;' + '}',

    /***--------------------------------------------------------------------------------------\
      Left and right columns
    \--------------------------------------------------------------------------------------***/

    '#clinical-timelines .ct-column {' + '    display: inline-block;' + '}', '#clinical-timelines #ct-left-column {' + '    width: 24%;' + '    float: left;' + '}', '#clinical-timelines #ct-right-column {' + '    width: 75%;' + '    float: right;' + '}', '#clinical-timelines .ct-column > * {' + '    width: 100%;' + '    vertical-align: top;' + '    display: inline-block;' + '    margin-bottom: 10px;' + '    border: 1px solid #eee;' + '}', '#clinical-timelines .ct-column > * > * {' + '    margin: 10px;' + '}',

    /***--------------------------------------------------------------------------------------\
      Left column elements
    \--------------------------------------------------------------------------------------***/

    '#clinical-timelines #ct-left-column > * {' + '}',

    //Details
    '#clinical-timelines #ct-left-column .ct-details {' + '    font-size: 90%;' + '    text-align: right;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-button {' + '    float: left;' + '    font-size: 110%;' + '    font-weight: bold;' + '    margin-bottom: 10px;' + '    margin-right: 10px;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-button a {' + '    color: blue;' + '    text-decoration: none;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-button:hover a {' + '    color: #ccc;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-stats,' + '#clinical-timelines #ct-left-column .ct-details .ct-characteristic span {' + '    font-weight: bold;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-stats.ct-sample {' + '    color: green;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-stats.ct-sample-inside-time-range {' + '    color: blue;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-stats.ct-sample-outside-time-range {' + '    color: red;' + '}', '#clinical-timelines #ct-left-column .ct-details .ct-info-icon {' + '    font-weight: bold;' + '    color: blue;' + '    cursor: help;' + '}',

    //Controls
    '#clinical-timelines #ct-left-column .wc-controls {' + '    margin-bottom: 0;' + '    clear: left;' + '}', '#clinical-timelines #ct-left-column .wc-controls .control-group {' + '    margin: 0 0 5px 0;' + '    display: block;' + '    float: right;' + '    clear: both;' + '    width: 100%;' + '}', '#clinical-timelines #ct-left-column .wc-controls .ct-horizontal-rule {' + '    width: 100%;' + '    display: inline-block;' + '    margin-bottom: 5px;' + '    font-size: 150%;' + '    border-bottom: 1px solid black;' + '}', '#clinical-timelines #ct-left-column .wc-controls .control-group.ct-ID {' + '    display: inline-block;' + '}', '#clinical-timelines #ct-left-column .wc-controls .control-group > * {' + '    display: inline-block;' + '    vertical-align: top;' + '    float: right;' + '}', '#clinical-timelines #ct-left-column .wc-controls .control-group .span-description {' + '    font-size: 90%;' + '}', '#clinical-timelines #ct-left-column .wc-controls .control-group .changer {' + '    margin-left: 5px;' + '    width: 50%;' + '    clear: right;' + '    box-sizing: border-box;' + '}',

    //Reference Tables
    '#clinical-timelines #ct-left-column .ct-reference-line-table-header {' + '    text-align: center;' + '    border-bottom: 1px solid black;' + '    padding-bottom: 5px;' + '}', '#clinical-timelines #ct-left-column .ct-reference-line-table-body table {' + '    width: 100%;' + '    display: table;' + '}', '#clinical-timelines #ct-left-column .ct-reference-line-table-body th,' + '#clinical-timelines #ct-left-column .ct-reference-line-table-body td {' + '    text-align: left;' + '}', '#clinical-timelines #ct-left-column .ct-higher-level {' + '    border-bottom: 1px dotted lightgray;' + '    font-weight: bold;' + '    font-size: 14px;' + '}', '#clinical-timelines #ct-left-column .ct-lower-level {' + '    font-size: 12px;' + '}', '#clinical-timelines #ct-left-column .ct-lower-level.ct-indent {' + '    padding-left: 5%;' + '}',

    /***--------------------------------------------------------------------------------------\
      Right column elements
    \--------------------------------------------------------------------------------------***/

    '#clinical-timelines #ct-right-column > * {' + '}', '#clinical-timelines #ct-right-column #ct-timelines {' + '    min-height: 80px;' + '}',

    //Legend
    '#clinical-timelines #ct-right-column #ct-timelines .legend {' + '    display: flex !important;' + '    justify-content: center;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .legend-title {' + '    border-radius: 4px;' + '    padding: 5px 7px 3px 4px;' + '    border: 2px solid white;' + '    margin-right: .25em !important;' + '    margin-left: 10em;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .legend-item {' + '    cursor: pointer;' + '    float: left;' + '    border-radius: 4px;' + '    padding: 4px 7px 3px 4px;' + '    border: 2px solid white;' + '    margin-right: .25em !important;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .legend-item:not(.ct-highlighted) {' + '    border: none !important;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .legend-item:not(.ct-selected) {' + '    background: white;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .legend-color-block circle {' + '    cx: .55em !important;' + '    cy: .55em !important;' + '    r: .4em !important;' + '    stroke: black;' + '    stroke-width: 1;' + '}',

    //Second legend
    '#clinical-timelines #ct-legend {' + '    list-style-type: none;' + '    position: absolute;' + '    top: 0;' + '}', '#clinical-timelines .ct-legend-item {' + '    cursor: default;' + '    margin-right: 10px;' + '}',

    //Y-axis
    '#clinical-timelines #ct-right-column #ct-timelines .wc-chart .wc-svg .y.axis .tick {' + '    cursor: pointer;' + '    fill: blue;' + '    text-decoration: none;' + '    font-weight: bolder;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .wc-chart .wc-svg .y.axis .tick:hover {' + '    text-decoration: underline;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .wc-chart .wc-svg .y.axis .tick rect.ct-stripe {' + '    stroke: #aaa;' + '    stroke-width: 1;' + '    fill: none;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .wc-chart .wc-svg .y.axis .tick:nth-child(even) rect.ct-stripe {' + '    fill: #eee;' + '}',

    //Grouping
    '#clinical-timelines #ct-right-column #ct-timelines .wc-chart .wc-svg .ct-grouping .ct-boundary {' + '    stroke: black;' + '    stroke-width: 2;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .wc-chart .wc-svg .ct-grouping .ct-annotation {' + '    font-size: 150%;' + '    font-weight: normal;' + '    text-anchor: start;' + '}', '#clinical-timelines #ct-right-column #ct-timelines .wc-chart .wc-svg .ct-grouping.ct-vertical .ct-annotation {' + '    writing-mode: tb-rl;' + '}',

    //Lines
    '#clinical-timelines path.wc-data-mark {' + ('    stroke-width: ' + line.attributes['stroke-width'] + ';') + '    stroke-opacity: 1;' + '}', '#clinical-timelines path.wc-data-mark.ct-highlighted {' + ('    stroke-width: ' + line.attributes['stroke-width'] * 1.5 + ';') + '}', '#clinical-timelines line.ct-highlight-overlay {' + ('    stroke-width: ' + line.attributes['stroke-width'] / 2 + ';') + '    stroke-linecap: round;' + '}',

    //Circles
    '#clinical-timelines circle.wc-data-mark:not(.ct-highlighted) {' + '    stroke-width: 1;' + '    stroke: black;' + '    fill-opacity: 1;' + '}', '#clinical-timelines circle.wc-data-mark.ct-highlighted {' + '    stroke-opacity: 1;' + '    fill-opacity: 1;' + ('    stroke-width: ' + circle.attributes['stroke-width'] + ';') + '}',

    //Symbols
    '#clinical-timelines .ct-custom-mark:not(.ct-highlighted) {' + '    stroke-width: 1;' + '    stroke: black;' + '    fill-opacity: 1;' + '}', '#clinical-timelines .ct-custom-mark.ct-highlighted {' + '    stroke-opacity: 1;' + '    fill-opacity: 1;' + ('    stroke-width: ' + circle.attributes['stroke-width'] + ';') + '}',

    //Arrows
    '#clinical-timelines polygon.ct-ongoing-event {' + '}', '#clinical-timelines polygon.ct-ongoing-event.ct-highlighted {' + ('    stroke-width: ' + line.attributes['stroke-width'] / 3 + ';') + '}',

    //Reference lines
    '#clinical-timelines #ct-right-column .wc-chart .wc-svg .ct-visible-reference-line {' + '    stroke: black;' + '    stroke-width: 1;' + '    stroke-dasharray: 2,2;' + '}', '#clinical-timelines #ct-right-column .wc-chart .wc-svg .ct-visible-reference-line.ct-hover {' + '    stroke-dasharray: none;' + '}', '#clinical-timelines #ct-right-column .wc-chart .wc-svg .ct-hover-line {' + '    cursor: pointer;' + '    stroke: black;' + '    stroke-width: 20;' + '    stroke-opacity: 0;' + '}', '#clinical-timelines #ct-right-column .wc-chart .wc-svg .ct-reference-line-text {' + '    font-weight: bold;' + '    font-size: 24px;' + '}',

    //ID timeline
    '#clinical-timelines #ct-right-column #ct-ID-timeline .wc-chart .wc-svg title {' + '    white-space: pre;' + '}', '#clinical-timelines #ct-right-column #ct-ID-timeline .wc-small-multiples .wc-chart {' + '    width: 100%;' + '    padding: 0;' + '    border-top: 1px solid black;' + '}', '#clinical-timelines #ct-right-column #ct-ID-timeline .wc-small-multiples .wc-chart > * {' + '    display: inline-block;' + '}', '#clinical-timelines #ct-right-column #ct-ID-timeline .wc-small-multiples .wc-chart .wc-svg {' + '    float: left;' + '    width: 75%;' + '}', '#clinical-timelines #ct-right-column #ct-ID-timeline .wc-small-multiples .wc-chart .wc-chart-title {' + '    float: right;' + '    text-align: left;' + '    font-size: 150%;' + '    font-weight: normal;' + '    width: 24%;' + '}', '#clinical-timelines #ct-right-column #ct-ID-timeline .wc-small-multiples .wc-chart .wc-svg .ct-time-range {' + '    opacity: .1;' + '}',

    //Listing
    '#clinical-timelines #ct-right-column #ct-listing .wc-chart.wc-table table {' + '    display: table;' + '    width: 100%;' + '}'];

    //Attach styles to DOM.
    var style = this.document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = styles.join('\n');
    this.document.getElementsByTagName('head')[0].appendChild(style);
 }

 function exportData() {
    var _this = this;

    //Filter data on events overlapping current time range.
    var data = this.timelines.wideDataInsideTimeRange.filter(function (d) {
        var st = _this.timelines.config.time_function(d[_this.timelines.config.st_col]),
            en = _this.timelines.config.time_function(d[_this.timelines.config.en_col]),
            stInsideTimeRange = _this.timelines.config.x.domain[0] <= st && st <= _this.timelines.config.x.domain[1],
            // start is within the time range
        enInsideTimeRange = _this.timelines.config.x.domain[0] <= en && en <= _this.timelines.config.x.domain[1],
            // end is within the time range
        surroundingTimeRange = _this.timelines.config.x.domain[0] > st && en > _this.timelines.config.x.domain[1]; // start is prior to time range and end is after time range

        return stInsideTimeRange || enInsideTimeRange || surroundingTimeRange;
    }),
        columns = void 0,
        headers = void 0;

    //If specified, transpose data to one record per ID per sequence number.
    if (this.settings.transpose_data) {
        var nested = d3$1.nest().key(function (d) {
            return d[_this.settings.id_col] + '|' + d[_this.settings.seq_col];
        })
        //.rollup(d => console.log(d))
        .entries(data),
            transposed = [];
        nested.forEach(function (d) {
            var datum = {},
                keys = d.key.split('|');
            datum[_this.settings.id_col] = keys[0];
            datum[_this.settings.seq_col] = keys[1];

            d.values.forEach(function (di) {
                //ID characteristics
                _this.settings.id_characteristics.forEach(function (id_characteristic) {
                    datum[id_characteristic.label] = di[id_characteristic.value_col];
                });

                //Event characteristics
                datum[di[_this.settings.event_col] + ' Start'] = di.stdtdy;
                datum[di[_this.settings.event_col] + ' End'] = di.endtdy;
            });

            transposed.push(datum);
        });
        data = transposed;
        columns = this.settings.id_characteristics.map(function (id_characteristic) {
            return id_characteristic.label;
        }).concat([this.settings.seq_col]).concat(this.timelines.currentEventTypes.concat(this.timelines.currentEventTypes).sort().map(function (eventType, i) {
            return eventType + (i % 2 ? ' End' : ' Start');
        }));
        headers = columns;
    } else {
        //Otherwise export one record per ID per event.
        var variables = this.settings.id_characteristics.concat(this.settings.details.filter(function (detail) {
            return _this.settings.id_characteristics.map(function (id_characteristic) {
                return id_characteristic.value_col;
            }).indexOf(detail.value_col) < 0;
        }));
        columns = variables.map(function (variable) {
            return variable.value_col;
        });
        headers = variables.map(function (variable) {
            return variable.label;
        });
    }

    //Add headers and rows to CSV array.
    var CSVarray = [];
    data.forEach(function (d, i) {
        //Add headers to CSV array.
        if (i === 0) CSVarray.push(headers.map(function (header) {
            return '"' + header.replace(/"/g, '""') + '"';
        }));

        //add rows to CSV array
        var row = columns.map(function (col) {
            var value = d[col] || '';

            if (typeof value === 'string') value = value.replace(/"/g, '""');

            return '"' + value + '"';
        });

        CSVarray.push(row);
    });

    //transform CSV array into CSV string
    var CSV = new Blob([CSVarray.join('\n')], { type: 'text/csv;charset=utf-8;' }),
        fileName = 'ClinicalTimelinesData_' + d3$1.time.format('%Y-%m-%dT%H-%M-%S')(new Date()) + '.csv',
        link = this.containers.exportButton;

    if (navigator.msSaveBlob) {
        // IE 10+
        link.style({
            cursor: 'pointer',
            'text-decoration': 'underline',
            color: 'blue'
        });
        navigator.msSaveBlob(CSV, fileName);
    } else {
        // Browsers that support HTML5 download attribute
        if (link.node().download !== undefined) {
            var url = URL.createObjectURL(CSV);
            link.node().setAttribute('href', url);
            link.node().setAttribute('download', fileName);
        }
    }
 }

 function hideTimeRangeControl() {
    var _this = this;

    this.controls.wrap.selectAll('.control-group').filter(function (d) {
        return d.option && d.option.indexOf('_time_range') > -1;
    }).classed('ct-hidden', function (d) {
        return _this.config.time_scale === 'Date' && d.option === 'day_time_range' || _this.config.time_scale === 'Day' && d.option === 'date_time_range';
    });
 }

 function enableDisableControls() {
    var _this = this;

    //Enable/Disable controls other than ID and Event Type filters.
    this.controls.wrap.selectAll('.control-group').filter(function (control) {
        return control.value_col !== _this.config.id_col && control.option !== 'event_highlighted' && control.option !== 'time_scale' && control.value_col !== _this.config.event_col;
    }).classed('ct-hidden', !!this.selected_id);

    if (!this.selected_id) hideTimeRangeControl.call(this);
 }

 function updateIDfilter() {
    var _this = this;

    var IDfilter = this.controls.wrap.selectAll('.control-group').filter(function (control) {
        return control.value_col === _this.config.id_col;
    });

    //Update selected option.
    IDfilter.selectAll('option').property('selected', function (option) {
        return option === _this.selected_id;
    });

    //Update ID object in filters array.
    this.filters.filter(function (filter) {
        return filter.col === _this.config.id_col;
    })[0].val = this.selected_id || 'All';

    //Bring focus to the ID dropdown.
    IDfilter.style({
        'font-weight': 'bold'
    }).transition().delay(1000).style({
        'font-weight': 'normal'
    }).select('select').node().focus();
 }

 function goBackToTimelines() {
    delete this.timelines.selected_id;

    enableDisableControls.call(this.timelines);
    updateIDfilter.call(this.timelines);

    //Hide ID timelines.
    this.containers.IDdetails.classed('ct-hidden', true);
    this.containers.IDtimeline.classed('ct-hidden', true);
    this.containers.listing.classed('ct-hidden', true);

    //Display population timelines.
    this.containers.populationDetails.classed('ct-hidden', false);
    this.timelines.wrap.select('svg.wc-svg').classed('ct-hidden', false);

    //Redraw clinical timelines.
    this.timelines.draw();
 }

 function defineLayout() {
    var _this = this;

    this.containers.main = d3$1.select(this.element).append('div').attr('id', 'clinical-timelines');

    /**-------------------------------------------------------------------------------------------\
      Left column
    \-------------------------------------------------------------------------------------------**/

    this.containers.leftColumn = this.containers.main.append('div').classed('ct-column', true).attr('id', 'ct-left-column');

    /***--------------------------------------------------------------------------------------\
      Details
    \--------------------------------------------------------------------------------------***/

    this.containers.details = this.containers.leftColumn.append('div').attr('id', 'ct-details');

    /****---------------------------------------------------------------------------------\
      Population details
    \---------------------------------------------------------------------------------****/

    this.containers.populationDetails = this.containers.details.append('div').classed('ct-details', true).attr('id', 'ct-population-details');

    //Add button to export timelines data.
    this.containers.exportButton = this.containers.populationDetails.append('div').classed('ct-button', true).attr('id', 'ct-export-button').append('a').html('&dArr; Data').on('click', function () {
        exportData.call(_this);
    });

    //Add container for population details given current filters.
    this.containers.popCurrentFilters = this.containers.populationDetails.append('div').classed('ct-characteristic', true).attr('id', 'ct-current-filters');

    //Add container for population details inside time range.
    this.containers.popInsideTimeRange = this.containers.populationDetails.append('div').classed('ct-characteristic', true).attr('id', 'ct-inside-time-range');

    //Add container for population details inside time range.
    this.containers.popOutsideTimeRange = this.containers.populationDetails.append('div').classed('ct-characteristic', true).attr('id', 'ct-outside-time-range');

    /****---------------------------------------------------------------------------------\
      ID details
    \---------------------------------------------------------------------------------****/

    this.containers.IDdetails = this.containers.details.append('div').classed('ct-details ct-hidden', true).attr('id', 'ct-ID-details');

    //Add button to return from ID timeline to timelines.
    this.containers.backButton = this.containers.IDdetails.append('div').classed('ct-button', true).attr('id', 'ct-back-button').append('a').html('&lArr; Back').on('click', function () {
        goBackToTimelines.call(_this);
    });

    /***--------------------------------------------------------------------------------------\
      Controls
    \--------------------------------------------------------------------------------------***/

    this.containers.controls = this.containers.leftColumn.append('div').attr('id', 'ct-controls');

    /**-------------------------------------------------------------------------------------------\
      Right column
    \-------------------------------------------------------------------------------------------**/

    this.containers.rightColumn = this.containers.main.append('div').classed('ct-column', true).attr('id', 'ct-right-column');

    /***--------------------------------------------------------------------------------------\
      Timelines
    \--------------------------------------------------------------------------------------***/

    this.containers.timelines = this.containers.rightColumn.append('div').attr('id', 'ct-timelines');

    /***--------------------------------------------------------------------------------------\
      ID timeline
    \--------------------------------------------------------------------------------------***/

    this.containers.IDtimeline = this.containers.rightColumn.append('div').classed('ct-hidden', true).attr('id', 'ct-ID-timeline');

    /***--------------------------------------------------------------------------------------\
      Listing
    \--------------------------------------------------------------------------------------***/

    this.containers.listing = this.containers.rightColumn.append('div').classed('ct-hidden', true).attr('id', 'ct-listing');
 }

 function recurse() {
    this.timelines.IDtimeline = this.IDtimeline;
    this.timelines.listing = this.listing;
    this.timelines.settings = this.settings;
    this.IDtimeline.timelines = this.timelines;
    this.IDtimeline.listing = this.listing;
    this.IDtimeline.settings = this.settings;
    this.listing.timelines = this.timelines;
    this.listing.IDtimeline = this.IDtimeline;
    this.listing.settings = this.settings;
 }

 function controls$1() {
    this.controls = webcharts.createControls(this.containers.controls.node(), {
        location: 'top',
        inputs: this.settings.controls
    });
 }

 function getPopulationDetails() {
    var _this = this;

    this.populationDetails = {
        population: d3$1.set(this.raw_data.map(function (d) {
            return d[_this.config.id_col];
        })).values()
    };
    this.populationDetails.N = this.populationDetails.population.length;
    this.IDdetails = {};
 }

 //Remove records with missing key variables.
 function removeInvalidData() {
    var _this = this;

    this.initial_data = this.raw_data.filter(function (d) {
        return !/^\s*$/.test(d[_this.config.id_col]) && !/^\s*$/.test(d[_this.config.event_col]);
    });

    //Warn user of removed records.
    if (this.initial_data.length < this.raw_data.length) console.warn(this.raw_data.length - this.initial_data.length + ' records have been removed due to missing identifiers or event types.');

    //Check which time scales are present in the data.
    this.anyDates = this.initial_data.some(function (d) {
        return d.hasOwnProperty(_this.config.stdt_col) && d[_this.config.stdt_col] !== '';
    });
    this.anyDays = this.initial_data.some(function (d) {
        return d.hasOwnProperty(_this.config.stdy_col) && d[_this.config.stdy_col] !== '';
    });
 }

 //Attach initial, valid data to controls, bypassing controls.init().
 function attachDataToControls() {
    this.controls.data = this.initial_data;
    this.controls.ready = true;
 }

 function standardizeTimeVariables() {
    var _this = this;

    this.initial_data.forEach(function (d, i) {
        var has_stdt = d.hasOwnProperty(_this.config.stdt_col),
            has_endt = d.hasOwnProperty(_this.config.endt_col),
            has_stdy = d.hasOwnProperty(_this.config.stdy_col),
            has_endy = d.hasOwnProperty(_this.config.endy_col);

        //Set to an empty string invalid date and day values.
        if (has_stdt) {
            if (!d3$1.time.format(_this.config.date_format).parse(d[_this.config.stdt_col])) d[_this.config.stdt_col] = '';
        }
        if (has_endt) {
            if (!d3$1.time.format(_this.config.date_format).parse(d[_this.config.endt_col])) d[_this.config.endt_col] = d[_this.config.stdt_col];
        }
        if (has_stdy) {
            if (!/^ *-?\d+ *$/.test(d[_this.config.stdy_col])) d[_this.config.stdy_col] = '';
        }
        if (has_endy) {
            if (!/^ *-?\d+ *$/.test(d[_this.config.endy_col])) d[_this.config.endy_col] = d[_this.config.stdy_col];
        }

        //Concatenate date and day values for listing.
        d.stdtdy = has_stdt && has_stdy && d[_this.config.stdy_col] !== '' ? d[_this.config.stdt_col] + ' (' + d[_this.config.stdy_col] + ')' : d[_this.config.stdt_col] || d[_this.config.stdy_col];
        d.endtdy = has_endt && has_endy && d[_this.config.endy_col] !== '' ? d[_this.config.endt_col] + ' (' + d[_this.config.endy_col] + ')' : d[_this.config.endt_col] || d[_this.config.endy_col];
    });
 }

 function handleEventTypes() {
    var _this = this;

    this.allEventTypes = d3$1.set(this.initial_data.map(function (d) {
        return d[_this.config.event_col];
    })).values().sort();
    this.currentEventTypes = this.config.event_types || this.allEventTypes.slice();
    this.controls.config.inputs.find(function (input) {
        return input.description === 'Event Type';
    }).start = this.currentEventTypes;
    this.config.color_dom = this.currentEventTypes.concat(this.allEventTypes.filter(function (eventType) {
        return _this.currentEventTypes.indexOf(eventType) === -1;
    }).sort());
    this.config.legend.order = this.config.color_dom.slice();
 }

 function defineFullTimeRanges() {
    var _this = this;

    /**-------------------------------------------------------------------------------------------\
      Dates
    \-------------------------------------------------------------------------------------------**/

    if (this.anyDates) {
        //full domain
        this.full_date_range = [d3$1.min(this.initial_data, function (d) {
            return d3$1.time.format(_this.config.date_format).parse(d[_this.config.stdt_col]);
        }), d3$1.max(this.initial_data, function (d) {
            return d3$1.time.format(_this.config.date_format).parse(d[_this.config.endt_col]);
        })];

        //full domain as a string
        this.full_date_time_range = this.full_date_range.map(function (d) {
            return d3$1.time.format(_this.config.date_format)(d);
        }).join(' - ');

        //add full domain to date ranges
        this.config.date_ranges.push({
            domain: this.full_date_range,
            label: 'Full'
        });

        //add custom domain to date ranges
        this.config.date_ranges.push({
            domain: this.full_date_range.slice(),
            label: 'User Input'
        });
    }

    /**-------------------------------------------------------------------------------------------\
      Days
    \-------------------------------------------------------------------------------------------**/

    if (this.anyDays) {
        //full domain
        this.full_day_range = [d3$1.min(this.initial_data, function (d) {
            return +d[_this.config.stdy_col];
        }), d3$1.max(this.initial_data, function (d) {
            return +d[_this.config.endy_col];
        })];

        //full domain as a string
        this.full_day_time_range = this.full_day_range.join(' - ');

        //add full domain to day ranges
        this.config.day_ranges.push({
            domain: this.full_day_range,
            label: 'Full'
        });

        //add custom domain to day ranges
        this.config.day_ranges.push({
            domain: this.full_day_range.slice(),
            label: 'User Input'
        });
    }
 }

 function defineInitialTimeRanges() {
    if (this.anyDates) this.date_range = this.config.date_ranges[0].domain.slice();
    if (this.anyDays) this.day_range = this.config.day_ranges[0].domain.slice();
 }

 function syncTimeRanges() {
    if (this.config.time_scale === 'Date') this.time_range = this.date_range.slice();else this.time_range = this.day_range.slice();
 }

 function handleTimeRanges() {
    //Calculate extent of each time scale.
    defineFullTimeRanges.call(this);

    //Set initial range of each time scale.
    defineInitialTimeRanges.call(this);

    //Sync time range variables given initial time scale.
    syncTimeRanges.call(this);
 }

 function checkTimeScales() {
    var _this = this;

    this.controls.config.inputs = this.controls.config.inputs.filter(function (input) {
        if (input.description !== 'X-axis scale') return true;else {
            if (!_this.anyDates && !_this.anyDays) {
                var errorText = 'The data either contain neither ' + _this.config.stdt_col + ' nor ' + _this.config.stdy_col + ' or both ' + _this.config.stdt_col + ' and ' + _this.config.stdy_col + ' contain no valid values.  Please update the settings object to match the variables in the data or clean the data.';
                _this.wrap.append('div').style('color', 'red').html(errorText);
                throw new Error(errorText);
            } else if (!_this.anyDates && _this.config.time_scale === 'Date') {
                console.warn('The data either do not contain a variable named ' + _this.config.stdt_col + ' or ' + _this.config.stdt_col + ' contains no valid values.  Please update the settings object to match the variable in the data or clean the data.');
                _this.config.time_scale = 'Day';
                syncTimeScaleSettings(_this.config);
                _this.IDtimeline.config.time_scale = 'Day';
                syncTimeScaleSettings(_this.IDtimeline.config);
            } else if (!_this.anyDays && _this.config.time_scale === 'Day') {
                console.warn('The data either do not contain a variable named ' + _this.config.stdy_col + ' or ' + _this.config.stdy_col + ' contains no valid values.  Please update the settings object to match the variable in the data or clean the data.');
                _this.config.time_scale = 'Date';
                syncTimeScaleSettings(_this.config);
                _this.IDtimeline.config.time_scale = 'Date';
                syncTimeScaleSettings(_this.IDtimeline.config);
            }

            return _this.anyDates && _this.anyDays;
        }
    });
 }

 function updateTimeRangeControls() {
    if (this.anyDates) {
        //Update date time range dropdown.
        this.controls.config.inputs.find(function (input) {
            return input.option === 'date_time_range';
        }).values = this.config.date_ranges.map(function (date_time_range) {
            return date_time_range.label;
        });
        this.config.date_time_range = this.config.date_ranges[0].label;
    }

    if (this.anyDays) {
        //Update day time range dropdown.
        this.controls.config.inputs.find(function (input) {
            return input.option === 'day_time_range';
        }).values = this.config.day_ranges.map(function (day_time_range) {
            return day_time_range.label;
        });
        this.config.day_time_range = this.config.day_ranges[0].label;
    }
 }

 function checkOtherControls() {
    var _this = this;

    this.controls.config.inputs.filter(function (input) {
        return input.type !== 'subsetter';
    }).forEach(function (input) {
        //Set values of Event Type highlighting control to event types present in the data.
        if (input.description === 'Event highlighting') input.values = _this.config.color_dom.slice();else if (input.description === 'Y-axis grouping') input.values = _this.config.groupings.map(function (grouping) {
            return grouping.label;
        });

        return true;
    });

    checkTimeScales.call(this);
    updateTimeRangeControls.call(this);
 }

 function checkFilters() {
    var _this = this;

    this.controls.config.inputs = this.controls.config.inputs.filter(function (input) {
        if (input.type !== 'subsetter') return true;else if (!_this.initial_data[0].hasOwnProperty(input.value_col)) {
            console.warn(input.value_col + ' filter removed because the variable does not exist.');

            return false;
        } else {
            var levels = d3$1.set(_this.initial_data.map(function (d) {
                return d[input.value_col];
            })).values();

            if (levels.length < 2) {
                console.warn(input.value_col + ' filter removed because the variable has only one level.');
            }

            return levels.length > 1;
        }
    });
 }

 function checkControls() {
    checkOtherControls.call(this);
    checkFilters.call(this);
 }

 //If a tooltip variable is specified and exists, attach it to each mark's existing tooltip specification.
 function updateTooltipSettings() {
    var _this = this;

    if (this.raw_data[0].hasOwnProperty(this.config.tooltip_col)) {
        this.config.marks.forEach(function (mark) {
            mark.tooltip = mark.tooltip + "\n[" + _this.config.tooltip_col + "]";
        });
        this.clinicalTimelines.settings.IDtimeline.marks.forEach(function (mark) {
            mark.tooltip = mark.tooltip + "\n[" + _this.config.tooltip_col + "]";
        });
    }
 }

 //Remove invalid time data.
 function cleanData() {
    var _this = this;

    this.wide_data = this.initial_data.filter(function (d) {
        return d[_this.config.st_col] !== '';
    });

    //Warn user of removed records.
    if (this.wide_data.length < this.initial_data.length) {
        if (this.config.time_scale === 'Date') console.warn(this.initial_data.length - this.wide_data.length + ' records have been removed due to missing or invalid date variable values that do not match settings.date_format (' + this.config.date_format + ')');else if (this.config.time_scale === 'Day') console.warn(this.initial_data.length - this.wide_data.length + ' records have been removed due to missing or invalid day variable values.');
    }
 }

 /*------------------------------------------------------------------------------------------------\
  Expand a data array to one item per original item per specified column.
 \------------------------------------------------------------------------------------------------*/

 function lengthenRaw(data, columns) {
    var my_data = [];

    data.forEach(function (d) {
        columns.forEach(function (column) {
            var obj = Object.assign({}, d);
            obj.wc_category = column;
            obj.wc_value = d[column];
            my_data.push(obj);
        });
    });

    return my_data;
 }

 function defineData() {
    var _this = this;

    //Capture timepoints.
    var timepoints = this.wide_data.filter(function (d) {
        return d[_this.config.st_col] === d[_this.config.en_col];
    }).map(function (d) {
        d.wc_category = _this.config.time_unit;
        d.wc_value = d[_this.config.st_col];

        return d;
    });

    //Capture time intervals, creating two records for each event..
    var timeIntervals = lengthenRaw(this.wide_data.filter(function (d) {
        return d[_this.config.st_col] !== d[_this.config.en_col];
    }), [this.config.st_col, this.config.en_col]);

    //Merge timepoints and time intervals.
    this.long_data = d3$1.merge([timepoints, timeIntervals]);
    this.raw_data = this.long_data;
 }

 function onInit() {
    getPopulationDetails.call(this);
    removeInvalidData.call(this);
    attachDataToControls.call(this);
    standardizeTimeVariables.call(this);
    handleEventTypes.call(this);
    handleTimeRanges.call(this);
    checkControls.call(this);
    updateTooltipSettings.call(this);

    cleanData.call(this);
    defineData.call(this);
 }

 function IDdetails() {
    //Add ID characteristics.
    this.clinicalTimelines.containers.IDdetails.selectAll('div.characteristic').data(this.config.id_characteristics).enter().append('div').classed('ct-characteristic', true).html(function (d) {
        return d.label + ': <span id = \'' + d.value_col + '\'></span>';
    });
 }

 function controlGroupLayout() {
    var context = this;

    this.controls.wrap.selectAll('.control-group').each(function (d) {
        var controlGroup = d3$1.select(this),
            label = controlGroup.selectAll('.wc-control-label, .control-label'),
            description = controlGroup.select('.span-description'),
            container = controlGroup.append('div').classed('ct-label-description', true);

        controlGroup.attr('class', controlGroup.attr('class') + ' ' + d.type);

        container.node().appendChild(label.node());
        container.node().appendChild(description.node());

        //Add horizontal rule to group controls and filters.
        if (d.value_col === context.config.id_col) context.controls.wrap.insert('div', ':first-child').classed('ct-controls ct-horizontal-rule', true).text('Controls');else if (context.config.groupings.length && d.option === 'y.groupingLabel' || !context.config.groupings.length && d.option === 'y.sort') {
            var filterRule = context.controls.wrap.append('div').classed('ct-filters ct-horizontal-rule', true).text('Filters');
            context.controls.wrap.node().insertBefore(filterRule.node(), this.nextSibling);
        }
    });
 }

 function drawIDtimeline() {
    var _this = this;

    //Hide population details.
    this.clinicalTimelines.containers.populationDetails.classed('ct-hidden', true);

    //Display ID information.
    this.clinicalTimelines.containers.IDdetails.classed('ct-hidden', false);

    //Hide reference line table.
    if (this.config.reference_lines) this.config.reference_lines.forEach(function (reference_line) {
        reference_line.tableContainer.remove();
    });

    //Hide clinical timelines.
    this.wrap.select('svg.wc-svg').classed('ct-hidden', true);

    //Define ID data.
    var longIDdata = this.long_data.filter(function (di) {
        return di[_this.config.id_col] === _this.selected_id;
    });
    var wideIDdata = this.wide_data.filter(function (di) {
        return di[_this.config.id_col] === _this.selected_id;
    });

    //Draw ID characteristics.
    if (this.config.id_characteristics) {
        var id_characteristics = this.initial_data.filter(function (d) {
            return d[_this.config.id_col] === _this.selected_id;
        })[0];
        this.clinicalTimelines.containers.IDdetails.selectAll('.ct-characteristic').each(function (d) {
            d3$1.select(this).select('span').text(id_characteristics[d.value_col]);
        });
    }

    //Draw ID timeline.
    this.clinicalTimelines.containers.IDtimeline.classed('ct-hidden', false);
    this.clinicalTimelines.containers.IDtimeline.select('div').selectAll('*').remove();
    webcharts.multiply(this.IDtimeline, longIDdata.filter(function (d) {
        return _this.currentEventTypes !== 'All' ? _this.currentEventTypes.indexOf(d[_this.config.event_col]) > -1 : true;
    }), this.config.event_col, this.config.color_dom, this.clinicalTimelines.test);

    //Draw ID detail listing.
    this.clinicalTimelines.containers.listing.classed('ct-hidden', false);
    this.clinicalTimelines.containers.listing.select('div').selectAll('*').remove();
    this.listing.init(wideIDdata.filter(function (d) {
        return _this.currentEventTypes !== 'All' ? _this.currentEventTypes.indexOf(d[_this.config.event_col]) > -1 : true;
    }), this.clinicalTimelines.test);
 }

 function eventHighlighting(select$$1, d) {
    //Update event highlighting settings.
    this.config.event_highlighted = d3$1.select(select$$1).select('option:checked').text();
    this.IDtimeline.config.event_highlighted = this.config.event_highlighted;

    //Redraw.
    if (this.selected_id) drawIDtimeline.call(this);else this.draw();
 }

 function timeScale(dropdown, d) {
    //Update clinical timelines time scale settings
    this.config.time_scale = d3$1.select(dropdown).select('option:checked').text();
    syncTimeScaleSettings(this.config);

    //Hide other time range dropdown.
    if (!this.selected_id) hideTimeRangeControl.call(this);

    //Update time range settings.
    this.time_range = this[this.config.time_scale.toLowerCase() + '_range'];

    //Update ID timeline time scale settings
    this.IDtimeline.config.time_scale = this.config.time_scale;
    syncTimeScaleSettings(this.IDtimeline.config);

    //Remove records without time data.
    cleanData.call(this);

    //Redefine data.
    defineData.call(this);

    //Redraw.
    if (this.selected_id) drawIDtimeline.call(this);else this.draw();
 }

 function timeRange(dropdown, d) {
    var label = d3$1.select(dropdown).selectAll('option').filter(function () {
        return this.selected;
    }).text();
    var time_range = this.config[this.config.time_scale.toLowerCase() + '_ranges'].find(function (di) {
        return di.label === label;
    });
    this[this.config.time_scale.toLowerCase() + '_range'] = time_range.domain.slice();
    this.time_range = time_range.domain.slice();

    //Remove records without time data.
    cleanData.call(this);

    //Redefine data.
    defineData.call(this);

    //Redraw.
    if (this.selected_id) drawIDtimeline.call(this);else this.draw();
 }

 function yAxisGrouping(select$$1, d) {
    var selected = d3$1.select(select$$1).select('option:checked');

    //Update grouping settings.
    if (selected.text() !== 'None') {
        this.config.y.grouping = this.config.groupings.find(function (grouping) {
            return grouping.label === selected.text();
        }).value_col;
        this.config.y.groupingLabel = selected.text();
    } else {
        delete this.config.y.grouping;
        this.config.y.groupingLabel = 'Event Types';
    }

    //Redraw.
    this.draw();
 }

 function augmentOtherControls() {
    var context = this;
    var controls = this.controls.wrap.selectAll('.control-group').filter(function (d) {
        return d.type !== 'subsetter';
    }).classed('ct-control', true).attr('id', function (d) {
        return 'control-' + d.option.replace('.', '-');
    });

    //Redefine event highlighting event listener.
    controls.filter(function (d) {
        return d.option === 'event_highlighted';
    }).select('select').on('change', function (d) {
        eventHighlighting.call(context, this, d);
    });

    //Redefine time scale event listener.
    controls.filter(function (d) {
        return d.option === 'time_scale';
    }).select('select').on('change', function (d) {
        timeScale.call(context, this, d);
    });

    //Redefine time range event listener.
    controls.filter(function (d) {
        return d.option.indexOf('time_range') > -1;
    }).selectAll('select').each(function (d) {
        //add event listener
        d3$1.select(this).on('change', function (d) {
            timeRange.call(context, this, d);
        });
    });

    //Redefine y-axis grouping event listener.
    controls.filter(function (d) {
        return d.option === 'y.groupingLabel';
    }).select('select').on('change', function (d) {
        yAxisGrouping.call(context, this, d);
    });
 }

 function onChange(input, d) {
    var _this = this;

    var time_range = this.config.time_scale.toLowerCase() + '_range';
    var increment = this.config.time_scale === 'Date' ? 24 * 60 * 60 * 1000 : 1;

    //User input.
    var inputValue = this.config.time_scale === 'Date' ? d3$1.time.format('%Y-%m-%d').parse(input.value) : +input.value;

    //handle invalid inputs
    if (d.index === 0 && inputValue >= this[time_range][1]) inputValue = this.config.time_scale === 'Date' ? new Date(this[time_range][1].getTime() - increment) : this[time_range][1] - increment;else if (d.index === 1 && inputValue <= this[time_range][0]) inputValue = this.config.time_scale === 'Date' ? new Date(this[time_range][0].getTime() + increment) : inputValue = this[time_range][0] + increment;

    //Update time range.
    this[time_range][d.index] = inputValue;
    this.time_range = this[time_range];

    //Update custom time range setting.
    var customTimeRange = this.config[time_range + 's'].find(function (d) {
        return d.label === 'User Input';
    });
    customTimeRange.domain = this.time_range.slice();

    //Update time range control.
    this.controls.wrap.selectAll('.control-group').filter(function (d) {
        return d.option === _this.config.time_scale.toLowerCase() + '_time_range';
    }).selectAll('option').property('selected', function () {
        return this.value === 'User Input';
    }).filter(function () {
        return this.value === 'User Input';
    }).datum(customTimeRange.time_range);

    this.draw();
 }

 function timeRangeControl(datum) {
    var context = this,
        timeRangeContainer = this.controls.wrap.insert('div', '#control-y-sort').datum(datum).classed('control-group ct-time-range ct-control', true).attr('id', function (d) {
        return 'control-' + d.option.replace(/\./g, '-');
    }),
        timeRangeInput = timeRangeContainer.append('input').classed('changer', true),
        timeRangeLabelDescription = timeRangeContainer.append('div').classed('ct-label-description', true);

    //Add control label and span description nodes.
    timeRangeLabelDescription.append('span').classed('wc-control-label', true);
    timeRangeLabelDescription.append('span').classed('span-description', true).text(function (d) {
        return d.description;
    });

    //Add event listener to input node.
    timeRangeInput.on('change', function (d) {
        onChange.call(context, this, d);
    });
 }

 function addTimeRangeControls() {
    //Start
    timeRangeControl.call(this, {
        index: 0,
        option: 'x.domain.0',
        label: '',
        description: 'Start'
    });

    //End
    timeRangeControl.call(this, {
        index: 1,
        option: 'x.domain.1',
        label: '',
        description: 'End'
    });
 }

 function IDchange(select$$1) {
    var _this = this;

    this.selected_id = d3$1.select(select$$1).select('option:checked').text();
    this.filters.filter(function (filter) {
        return filter.col === _this.config.id_col;
    })[0].val = this.selected_id;

    //Redraw.
    if (this.selected_id !== 'All') {
        drawIDtimeline.call(this);
    } else {
        delete this.selected_id;

        //Display population details.
        this.clinicalTimelines.containers.populationDetails.classed('ct-hidden', false);

        //Hide ID information.
        this.clinicalTimelines.containers.IDdetails.classed('ct-hidden', true);

        //Hide clinical timelines.
        this.wrap.select('svg.wc-svg').classed('ct-hidden', false);
        this.draw();

        //Hide ID timeline.
        this.clinicalTimelines.containers.IDtimeline.select('div').selectAll('*').remove();
        this.clinicalTimelines.containers.IDtimeline.classed('ct-hidden', true);

        //Draw ID detail listing.
        this.clinicalTimelines.containers.listing.select('div').selectAll('*').remove();
        this.clinicalTimelines.containers.listing.classed('ct-hidden', true);
    }

    //Update controls given the current view.
    enableDisableControls.call(this);
 }

 function eventTypeChange(select$$1) {
    var _this = this;

    this.currentEventTypes = d3$1.select(select$$1).selectAll('select option:checked').pop().map(function (d) {
        return d.textContent;
    });
    this.filters.filter(function (filter) {
        return filter.col === _this.config.event_col;
    })[0].val = this.currentEventTypes;
    this.wrap.selectAll('.legend-item').classed('ct-selected', function (d) {
        return _this.currentEventTypes.indexOf(d.label) > -1;
    });

    if (this.selected_id) drawIDtimeline.call(this);else this.draw();
 }

 function augmentFilters() {
    var _this = this;

    var context = this;
    var controls = this.controls.wrap.selectAll('.control-group').filter(function (d) {
        return d.type === 'subsetter';
    }).classed('ct-filter', true).attr('id', function (d) {
        return 'filter-' + d.value_col;
    }).classed('ct-ID', function (d) {
        return d.value_col === _this.config.id_col;
    }),
        IDfilter = controls.filter(function (filter) {
        return filter.value_col === _this.config.id_col;
    }),
        eventTypeFilter = controls.filter(function (filter) {
        return filter.value_col === _this.config.event_col;
    });

    IDfilter.select('select').on('change', function (d) {
        IDchange.call(context, this);
    });

    eventTypeFilter.selectAll('select.changer option').property('selected', function (di) {
        return context.currentEventTypes instanceof Array ? context.currentEventTypes.indexOf(di) > -1 : true;
    });
    eventTypeFilter.select('select').on('change', function (d) {
        eventTypeChange.call(context, this);
    });
 }

 function topXaxis() {
    this.svg.append('g').classed('x-top axis linear', true).append('text').classed('axis-title top', true);
 }

 function onLayout() {
    //Lay out details container.
    IDdetails.call(this);

    //Move control labels and descriptions inside a div to display them vertically, label on top of description.
    controlGroupLayout.call(this);

    //Add additional functionality to other control event listeners.
    augmentOtherControls.call(this);

    //Hide other time range dropdown.
    hideTimeRangeControl.call(this);

    //Add time range functionality.
    addTimeRangeControls.call(this);

    //Add additional functionality to filter event listeners.
    augmentFilters.call(this);

    //Add top x-axis.
    topXaxis.call(this);
 }

 function updateTimeRangeControls$1() {
    var _this = this;

    var timeRangeControls = this.controls.wrap.selectAll('.ct-time-range input');

    //Internet Explorer does not support input date type.
    timeRangeControls.property('type', !this.clinicalTimelines.document.documentMode ? this.config.time_scale === 'Date' ? 'date' : 'number' : 'text');

    timeRangeControls.property('value', function (d) {
        return _this.config.time_scale === 'Date' ? d3$1.time.format(_this.config.date_format)(_this.time_range[d.index]) : +_this.time_range[d.index];
    });
 }

 function defineFilteredData() {
    var _this = this;

    //Redefine filtered data as it defaults to the final mark drawn, which might be filtered in
    //addition to the current filter selections.
    this.filtered_long_data = this.long_data.filter(function (d) {
        var filtered = false;

        _this.filters.forEach(function (di) {
            if (filtered === false && di.val !== 'All') {
                filtered = di.val instanceof Array ? di.val.indexOf(d[di.col]) === -1 : di.val !== d[di.col];
            }
        });

        return !filtered;
    });
    this.raw_data = this.filtered_long_data;

    //Define subset of original raw data.
    this.filtered_wide_data = this.wide_data.filter(function (d) {
        var filtered = false;

        _this.filters.forEach(function (di) {
            if (filtered === false && di.val !== 'All') {
                filtered = di.val instanceof Array ? di.val.indexOf(d[di.col]) === -1 : di.val !== d[di.col];
            }
        });

        return !filtered;
    });
 }

 function updatePopulationDetails() {
    this.clinicalTimelines.containers.popCurrentFilters.html('<span class = \'ct-stats ct-sample\'>' + this.populationDetails.n + '</span> of <span class = \'ct-stats\'>' + this.populationDetails.N + '</span> ' + (this.populationDetails.N > 1 ? this.config.id_unitPlural : this.config.id_unit) + ' (<span class = \'ct-stats\'>' + d3$1.format('%')(this.populationDetails.rate) + '</span>) <span class = \'ct-info-icon\' title = \'These ' + this.config.id_unitPlural + ' have data that meet the current filter criteria.\'>&#9432;</span>');
    this.clinicalTimelines.containers.popInsideTimeRange.html(this.populationDetails.nInsideTimeRange < this.populationDetails.n ? '<span class = \'ct-stats ct-sample-inside-time-range\'>' + this.populationDetails.nInsideTimeRange + '</span> of <span class = \'ct-stats ct-sample\'>' + this.populationDetails.n + '</span> displayed (<span class = \'ct-stats\'>' + d3$1.format('%')(this.populationDetails.rateInsideTimeRange) + '</span>) <span class = \'ct-info-icon\' title = \'These ' + this.config.id_unitPlural + ' have events that occur in the current time range.\'>&#9432;</span>' : '');
    this.clinicalTimelines.containers.popOutsideTimeRange.html(this.populationDetails.nOutsideTimeRange ? '<span class = \'ct-stats ct-sample-outside-time-range\'>' + this.populationDetails.nOutsideTimeRange + '</span> of <span class = \'ct-stats ct-sample\'>' + this.populationDetails.n + '</span> hidden (<span class = \'ct-stats\'>' + d3$1.format('%')(this.populationDetails.rateOutsideTimeRange) + '</span>) <span class = \'ct-info-icon\' title = \'These ' + this.config.id_unitPlural + ' do not have events that occur in the current time range.\'>&#9432;</span>' : '');
 }

 function definePopulationDetails() {
    var _this = this;

    //Define sample given current filters.
    this.populationDetails.sample = d3$1.set(this.filtered_wide_data.map(function (d) {
        return d[_this.config.id_col];
    })).values().map(function (ID) {
        var IDobject = {
            ID: ID,
            data: _this.filtered_wide_data.filter(function (d) {
                return ID === d[_this.config.id_col];
            })
        };

        IDobject.dataInsideTimeRange = IDobject.data.filter(function (d) {
            var st = _this.config.time_function(d[_this.config.st_col]),
                en = _this.config.time_function(d[_this.config.en_col]),
                stInsideTimeRange = _this.config.x.domain[0] <= st && st <= _this.config.x.domain[1],
                // start is within the time range
            enInsideTimeRange = _this.config.x.domain[0] <= en && en <= _this.config.x.domain[1],
                // end is within the time range
            surroundingTimeRange = _this.config.x.domain[0] > st && en > _this.config.x.domain[1]; // start is prior to time range and end is after time range

            return stInsideTimeRange || enInsideTimeRange || surroundingTimeRange;
        });

        return IDobject;
    });
    this.populationDetails.n = this.populationDetails.sample.length;
    this.populationDetails.rate = this.populationDetails.n / this.populationDetails.N;

    //Define sample given current filters of IDs with an event inside the current time range.
    this.populationDetails.sampleInsideTimeRange = this.populationDetails.sample.filter(function (d) {
        return d.dataInsideTimeRange.length;
    }).map(function (d) {
        return d.ID;
    });
    this.populationDetails.nInsideTimeRange = this.populationDetails.sampleInsideTimeRange.length;
    this.populationDetails.rateInsideTimeRange = this.populationDetails.nInsideTimeRange / this.populationDetails.n;

    //Define sample given current filters of IDs without an event inside the current time range.
    this.populationDetails.sampleOutsideTimeRange = this.populationDetails.sample.filter(function (d) {
        return !d.dataInsideTimeRange.length;
    }).map(function (d) {
        return d.ID;
    });
    this.populationDetails.nOutsideTimeRange = this.populationDetails.sampleOutsideTimeRange.length;
    this.populationDetails.rateOutsideTimeRange = this.populationDetails.nOutsideTimeRange / this.populationDetails.n;

    //Update population details.
    updatePopulationDetails.call(this);
 }

 function defineDataInsideTimeRange() {
    var _this = this;

    this.longDataInsideTimeRange = this.filtered_long_data.filter(function (d) {
        return _this.populationDetails.sampleInsideTimeRange.indexOf(d[_this.config.id_col]) > -1;
    });
    this.raw_data = this.longDataInsideTimeRange;
    this.wideDataInsideTimeRange = this.filtered_wide_data.filter(function (d) {
        return _this.populationDetails.sampleInsideTimeRange.indexOf(d[_this.config.id_col]) > -1;
    });
 }

 function defineGroupingData() {
    var _this = this;

    if (this.config.y.grouping) {
        //Capture each grouping and corresponding array of IDs.
        this.groupings = d3$1.set(this.longDataInsideTimeRange.map(function (d) {
            return d[_this.config.y.grouping];
        })).values().sort().map(function (d, i) {
            var groupingObject = {
                key: d,
                IDs: []
            };

            if (_this.config.grouping_direction === 'horizontal') {
                //Define datum for each grouping that looks like actual data.
                for (var variable in _this.raw_data[0]) {
                    if ([_this.config.id_col, _this.config.event_col, _this.config.seq_col, _this.config.y.grouping].indexOf(variable) === -1) groupingObject[variable] = '';else if (variable === _this.config.id_col) groupingObject[_this.config.id_col] = d;else if (variable === _this.config.event_col) groupingObject[_this.config.event_col] = 'Grouping';else if (variable === _this.config.seq_col) groupingObject[_this.config.seq_col] = '1';else if (variable === _this.config.y.grouping) groupingObject[_this.config.y.grouping] = d;
                }

                //Define both a start and end datum.
                var groupingStart = clone(groupingObject),
                    groupingEnd = clone(groupingObject);

                if (_this.config.time_scale === 'Date') {
                    groupingStart.wc_value = _this.full_date_range[0];
                    groupingEnd.wc_value = _this.full_date_range[0];
                } else {
                    groupingStart.wc_value = _this.full_day_range[0];
                    groupingEnd.wc_value = _this.full_day_range[0];
                }

                //Push two start and two end data to raw_data to create space to annotate grouping.
                var groupingStart1 = clone(groupingStart),
                    groupingStart2 = clone(groupingStart),
                    groupingEnd1 = clone(groupingEnd),
                    groupingEnd2 = clone(groupingEnd);

                //Placeholder row in which to print grouping.
                groupingStart1[_this.config.id_col] = '-g' + i + '-';
                _this.raw_data.push(groupingStart1);
                _this.longDataInsideTimeRange.push(groupingStart1);

                groupingEnd1[_this.config.id_col] = '-g' + i + '-';
                _this.raw_data.push(groupingEnd1);
                _this.longDataInsideTimeRange.push(groupingEnd1);
            }

            return groupingObject;
        });
    } else delete this.groupings;
 }

 function sortYdomain() {
    var _this = this;

    /**-------------------------------------------------------------------------------------------\
      Sort y-domain by the earliest event of each ID.
    \-------------------------------------------------------------------------------------------**/
    if (this.config.y.sort === 'By Earliest Event') {
        if (this.config.y.grouping) {
            //Sort IDs by grouping then earliest event if y-axis is grouped.
            var nestedData = d3$1.nest().key(function (d) {
                return d[_this.config.y.grouping] + '|' + d[_this.config.id_col];
            }).rollup(function (d) {
                return d3$1.min(d, function (di) {
                    return _this.config.time_function(di.wc_value);
                });
            }).entries(this.longDataInsideTimeRange).sort(function (a, b) {
                var aGrouping = a.key.split('|')[0];
                var bGrouping = b.key.split('|')[0];
                var earliestEventSort = a.values > b.values ? -2 : a.values < b.values ? 2 : a.key > b.key ? -1 : 1;

                return aGrouping > bGrouping ? -1 : aGrouping < bGrouping ? 1 : earliestEventSort;
            }); // nest data by grouping and ID.

            //Capture list of IDs by grouping.
            nestedData.forEach(function (d) {
                var split = d.key.split('|');

                _this.groupings.filter(function (grouping) {
                    return grouping.key === split[0];
                }).pop().IDs.push(split[1]);
            });

            //Set y-domain.
            this.config.y.domain = nestedData.map(function (d) {
                return d.key.split('|')[1];
            });
        } else {
            //Otherwise sort IDs by earliest event.
            this.config.y.domain = d3$1.nest().key(function (d) {
                return d[_this.config.id_col];
            }).rollup(function (d) {
                return d3$1.min(d, function (di) {
                    return _this.config.time_function(di[_this.config.st_col]);
                });
            }).entries(this.longDataInsideTimeRange).sort(function (a, b) {
                var earliestEventSort = a.values > b.values ? -2 : a.values < b.values ? 2 : a.key > b.key ? -1 : 1;

                return earliestEventSort;
            }).map(function (d) {
                return d.key;
            });
        }
    } else {
        /**-------------------------------------------------------------------------------------------\
        Sort y-domain alphanumerically.
        \-------------------------------------------------------------------------------------------**/

        if (this.config.y.grouping) {
            //Sort IDs by grouping then alphanumerically if y-axis is grouped.
            this.config.y.domain = d3$1.set(this.longDataInsideTimeRange.map(function (d) {
                return d[_this.config.id_col];
            })).values().sort(function (a, b) {
                var aGrouping = _this.raw_data.filter(function (d) {
                    return d[_this.config.id_col] === a;
                })[0][_this.config.y.grouping],
                    bGrouping = _this.raw_data.filter(function (d) {
                    return d[_this.config.id_col] === b;
                })[0][_this.config.y.grouping],
                    alphanumericSort = a > b ? -1 : 1;

                return aGrouping > bGrouping ? -1 : aGrouping < bGrouping ? 1 : alphanumericSort;
            });

            this.config.y.domain.forEach(function (d) {
                _this.groupings.filter(function (grouping) {
                    return grouping.key === _this.raw_data.filter(function (di) {
                        return di[_this.config.id_col] === d;
                    })[0][_this.config.y.grouping];
                }).pop().IDs.push(d);
            });
        } else {
            //Otherwise sort IDs alphanumerically.
            this.config.y.domain = this.populationDetails.sampleInsideTimeRange.sort(function (a, b) {
                var alphanumericSort = a > b ? -1 : 1;

                return alphanumericSort;
            });
        }
    }
 }

 function onPreprocess() {
    //Set x-domain.
    this.config.x.domain = this.time_range;

    //Set x-domain.
    updateTimeRangeControls$1.call(this);

    //Define filtered data irrespective of individual mark filtering.
    defineFilteredData.call(this);

    //Define population details data.
    definePopulationDetails.call(this);

    //Define data inside time range.
    defineDataInsideTimeRange.call(this);

    //Insert dummy grouping data into data array to draw empty rows in which to annotate groupings.
    defineGroupingData.call(this);

    //Sort y-axis based on `Sort IDs` control selection.
    sortYdomain.call(this);
 }

 function onDatatransform() {}

 function onDraw() {}

 function legendFilter() {
    var _this = this;

    //Filter data by clicking on legend.
    var context = this,
        eventTypeFilter = this.filters.filter(function (filter) {
        return filter.col === _this.config.event_col;
    })[0],
        // event type filter object
    eventTypeControl = this.controls.wrap.selectAll('.control-group').filter(function (d) {
        return d.description === 'Event Type';
    }),
        // event type control
    eventTypes = eventTypeControl.selectAll('.changer option').sort(function (a, b) {
        return _this.config.color_dom.indexOf(a) - _this.config.color_dom.indexOf(b);
    }),
        // event type options
    legendItems = this.wrap.selectAll('.legend-item').classed('ct-button', true).classed('ct-selected', function (d) {
        return eventTypeFilter.val instanceof Array ? eventTypeFilter.val.indexOf(d.label) > -1 : true;
    }).classed('ct-hidden', function (d) {
        return d.label === 'None';
    }); // Remove None legend item; not sure why it's showing up.

    //Add event listener to legend items.
    legendItems.on('click', function (d) {
        var legendItem = d3$1.select(this),
            // clicked legend item
        selected = !legendItem.classed('ct-selected'); // selected boolean

        legendItem.classed('ct-selected', selected); // toggle selected class

        var selectedLegendItems = legendItems.filter(function () {
            return d3$1.select(this).classed('ct-selected');
        }).data().map(function (d) {
            return d.label;
        }); // selected event types

        eventTypes.property('selected', false).filter(function (d) {
            return selectedLegendItems.indexOf(d) > -1;
        }).property('selected', true); // sync selected options in event type filter with selected legend items

        eventTypeFilter.val = selectedLegendItems; // update filter object
        context.currentEventTypes = selectedLegendItems;

        if (context.selected_id) drawIDtimeline.call(context);else context.draw();
    });
 }

 function timepoint(legendMark) {
    var x = 1;
    var y = 10;
    var width = 8;
    var height = 8;
    var margin = 2;
    legendMark.append('rect').classed('ct-legend-mark', true).attr({
        x: x + width * 0 + margin * 0,
        y: y - height / 2,
        width: width,
        height: height,
        fill: 'black'
    });
    //.append('animateTransform')
    //.attr({
    //    attributeName: 'transform',
    //    type: 'rotate',
    //    from: `0 ${x + width/2} ${y}`,
    //    to: `360 ${x + width/2} ${y}`,
    //    dur: '4s',
    //    repeatCount: 'indefinite'
    //});
    legendMark.append('circle').classed('ct-legend-mark', true).attr({
        cx: x + width * 1 + width / 2 + +margin * 1,
        cy: y,
        r: width / 2,
        fill: 'black'
    });
    legendMark.append('polygon').classed('ct-legend-mark', true).attr({
        points: [[x + width * 2 + margin * 2, y - height / 2], [x + width * 2 + margin * 2 + width, y], [x + width * 2 + margin * 2, y + height / 2]].map(function (point) {
            return point.join(',');
        }).join(','),
        fill: 'black'
    });
    //.append('animateTransform')
    //.attr({
    //    attributeName: 'transform',
    //    type: 'rotate',
    //    from: `0 ${x + width*2 + 2 + width/2} ${y}`,
    //    to: `360 ${x + width*2 + 2 + width/2} ${y}`,
    //    dur: '4s',
    //    repeatCount: 'indefinite'
    //});
 }

 function timeInterval(legendMark) {
    var y = 10;
    legendMark.append('line').classed('ct-legend-mark', true).attr({
        x1: 4,
        x2: 26,
        y1: y,
        y2: y
    }).style({
        'stroke-width': 8,
        stroke: 'black',
        'stroke-linecap': 'round'
    });
    legendMark.append('circle').classed('ct-legend-mark ct-start-stop-circle', true).attr({
        cx: 5,
        cy: y,
        r: 2.5,
        fill: 'white',
        stroke: 'lightgray'
    });
    legendMark.append('circle').classed('ct-legend-mark ct-start-stop-circle', true).attr({
        cx: 25,
        cy: y,
        r: 2.5,
        fill: 'white',
        stroke: 'lightgray'
    });
 }

 function ongoingEvent(legendMark) {
    var y = 10;
    legendMark.append('line').classed('ct-legend-mark', true).attr({
        x1: 4,
        x2: 20,
        y1: y,
        y2: y
    }).style({
        'stroke-width': 8,
        stroke: 'black',
        'stroke-linecap': 'round'
    });
    legendMark.append('circle').classed('ct-legend-mark ct-start-stop-circle', true).attr({
        cx: 5,
        cy: y,
        r: 2.5,
        fill: 'white',
        stroke: 'lightgray'
    });
    legendMark.append('polygon').classed('ct-legend-mark ct-ongoing-event', true).attr({
        points: [[18, y - 6], [30, y], [18, y + 6]].map(function (point) {
            return point.join(',');
        }).join(' '),
        fill: 'black',
        stroke: 'black'
    });
 }

 function addSecondLegend() {
    var context = this;
    var secondLegend = this.wrap.insert('ul', '.wc-svg').attr('id', 'ct-legend');
    secondLegend.selectAll('li').data([{ label: 'timepoint', function: timepoint }, { label: 'time interval', function: timeInterval }, { label: 'ongoing event', function: ongoingEvent }]).enter().append('li').classed('ct-legend-item', true).each(function (d) {
        var legendItem = d3$1.select(this);
        var legendMark = legendItem.append('svg').classed('ct-legend-color-block', true).attr({
            width: 36,
            height: 16
        });
        d.function.call(context, legendMark);
        var legendLabel = legendItem.append('span').classed('ct-legend-label', true).text(d.label);
    });
 }

 function drawTopXaxis() {
    var topXaxis = d3$1.svg.axis().scale(this.x).orient('top').ticks(this.xAxis.ticks()[0]).tickFormat(this.config.x_displayFormat).innerTickSize(this.xAxis.innerTickSize()).outerTickSize(this.xAxis.outerTickSize()),
        topXaxisSelection = this.svg.select('g.x-top.axis').attr('class', 'x-top axis linear');
    topXaxisSelection.call(topXaxis);
    topXaxisSelection.select('text.axis-title.top').attr({
        transform: 'translate(' + this.plot_width / 2 + ',' + -this.margin.top / 2 + ')',
        'text-anchor': 'middle'
    }).text(this.config.x.label);
 }

 function addTooltip() {
    var context = this;

    this.svg.select('title.ct-tooltip').remove();
    this.tooltip = this.svg.append('title').classed('ct-tooltip', true);
    this.svg.on('mousemove', function () {
        context.tooltip.text('' + context.config.x_displayFormat(context.x.invert(d3$1.mouse(this)[0])));
    });
 }

 function tickClick() {
    var _this = this;

    this.svg.selectAll('.y.axis .tick').each(function (d) {
        if (/^-g\d+-/.test(d)) d3$1.select(this).remove();
    }).on('click', function (d) {
        _this.selected_id = d;

        drawIDtimeline.call(_this);
        enableDisableControls.call(_this);
        updateIDfilter.call(_this);
    }).append('title').text(function (d) {
        return 'View a profile of ' + _this.config.id_unit + ' ' + d + '.';
    });
 }

 function horizontally() {
    var _this = this;

    this.groupings.sort(function (a, b) {
        return a.key < b.key ? -1 : 1;
    }).forEach(function (d, i) {
        if (d.IDs.length) {
            var nIDs = d.IDs.length,
                firstID = d.IDs[nIDs - 1],
                y1 = _this.y(firstID),
                y2 = _this.y(d.IDs[0]),
                g = _this.svg.append('g').classed('ct-grouping ct-horizontal', true).attr('id', d.key.replace(/ /g, '-')),
                annotation = g.append('text').classed('ct-annotation', true).attr({
                x: 0,
                y: y1,
                dy: _this.y.rangeBand() * 1.25
            }).text(_this.config.y.groupingLabel + ': ' + d.key),
                textArea = annotation.node().getBBox(),
                background = g.insert('rect', ':first-child').attr({
                x: textArea.x,
                y: textArea.y,
                width: textArea.width,
                height: textArea.height,
                fill: 'white'
            }),
                rule = g.append('line').classed('ct-boundary ct-horizontal', true).attr({
                x1: 0,
                y1: y1 + _this.y.rangeBand() / 4,
                x2: _this.plot_width,
                y2: y1 + _this.y.rangeBand() / 4
            });
        }
    });
 }

 function vertically() {
    var _this = this;

    this.groupings.forEach(function (d) {
        if (d.IDs.length) {
            var nIDs = d.IDs.length,
                firstID = d.IDs[nIDs - 1],
                y1 = _this.y(firstID),
                y2 = _this.y(d.IDs[0]),
                g = _this.svg.append('g').classed('ct-grouping ct-vertical', true).attr('id', d.key.replace(/ /g, '-')),
                topBoundary = g.append('line').classed('ct-boundary ct-horizontal', true).attr({
                x1: _this.plot_width,
                x2: _this.plot_width + _this.margin.right / 8,
                y1: y1 + 3 * _this.y.rangeBand() / 4,
                y2: y1 + 3 * _this.y.rangeBand() / 4
            }),
                span = g.append('line').classed('ct-boundary ct-vertical', true).attr({
                x1: _this.plot_width + _this.margin.right / 8,
                x2: _this.plot_width + _this.margin.right / 8,
                y1: y1 + 3 * _this.y.rangeBand() / 4,
                y2: y2 + _this.y.rangeBand()
            }),
                bottomBoundary = g.append('line').classed('ct-boundary ct-horizontal', true).attr({
                x1: _this.plot_width,
                x2: _this.plot_width + _this.margin.right / 8,
                y1: y2 + _this.y.rangeBand(),
                y2: y2 + _this.y.rangeBand()
            }),
                annotation = g.append('text').classed('ct-annotation', true).attr({
                x: _this.plot_width,
                dx: 4 * _this.margin.right / 8,
                y: y1,
                dy: _this.y.rangeBand()
            }).text(_this.config.groupings.filter(function (grouping) {
                return grouping.value_col === _this.config.y.grouping;
            })[0].label + ': ' + d.key);
        }
    });
 }

 function annotateGrouping() {
    //Clear grouping elements.
    this.svg.selectAll('.ct-grouping').remove();

    if (this.config.y.grouping) {
        if (this.config.grouping_direction === 'horizontal') horizontally.call(this);else if (this.config.grouping_direction === 'vertical') vertically.call(this);
    }
 }

 function addStriping() {
    var context = this;
    this.svg.selectAll('.ct-stripe').remove();
    var yAxisGridLines = this.svg.selectAll('.y.axis .tick').each(function (d, i) {
        //Offset tick label.
        d3$1.select(this).select('text').attr('dx', 4).attr('dy', context.y.rangeBand() / 4);

        //Insert a rectangle with which to visually group each ID's events.
        d3$1.select(this).insert('rect', ':first-child').classed('ct-stripe', true).attr({
            id: d,
            x: -context.margin.left + 1,
            y: -context.config.marks[0].attributes['stroke-width'],
            width: context.plot_width + context.margin.left,
            height: context.y.rangeBand() + context.config.marks[0].attributes['stroke-width']
        });
    });
 }

 function offsetCircles(mark, markData) {
    var _this = this;

    var context = this;

    this.svg.selectAll('g.point').attr('transform', null);

    if (this.raw_data.length && this.raw_data[0].hasOwnProperty(this.config.offset_col)) {
        this.svg.selectAll('g.point').each(function (d) {
            d3$1.select(this).attr('transform', 'translate(0,' + d.offset * context.config.mark_thickness * 2 + ')');
        });
    } else {
        //Nest data by timepoint and filter on any nested object with more than one datum.
        var overlapping = d3$1.nest().key(function (d) {
            return d.total + '|' + d.values.raw[0][_this.config.id_col];
        }).rollup(function (d) {
            return {
                n: d.length,
                keys: d.map(function (di) {
                    return di.key;
                })
            };
        }).entries(markData).filter(function (d) {
            return d.values.n > 1;
        });

        //For each timepoint with more than one event...
        overlapping.forEach(function (d) {
            var x = d.key.split('|')[0]; // timepoint
            var y = d.key.split('|')[1]; // ID

            //For each overlapping point...
            d.values.keys.forEach(function (di, i) {
                //Capture point via its class name and offset vertically.
                var className = di + ' point';
                var g = d3$1.select(_this.clinicalTimelines.document.getElementsByClassName(className)[0]);
                var point = g.select('circle');
                g.attr('transform', 'translate(0,' + i * _this.config.mark_thickness * 2 + ')');
            });
        });
    }
 }

 function offsetLines(mark, markData) {
    var _this = this;

    var context = this;

    this.svg.selectAll('g.line').attr('transform', null);

    if (this.config.offset_col && this.raw_data.length && this.raw_data[0].hasOwnProperty(this.config.offset_col)) {
        this.svg.selectAll('g.line').each(function (d) {
            d3$1.select(this).attr('transform', 'translate(0,' + d.offset * context.config.mark_thickness * 2 + ')');
        });
    } else {
        //Nest data by time interval and filter on any nested object with more than one datum.
        var IDdata = d3$1.nest().key(function (d) {
            return d.values[0].values.raw[0][_this.config.id_col];
        }).key(function (d) {
            return d.key;
        }).rollup(function (d) {
            //Expose start and end point of line.
            return _this.config.time_scale === 'Date' ? {
                x1: new Date(d[0].values[0].key),
                x2: new Date(d[0].values[1].key)
            } : {
                x1: +d[0].values[0].key,
                x2: +d[0].values[1].key
            };
        }).entries(markData.filter(function (d) {
            return d.values.length > 1;
        }));

        //For each ID...
        IDdata.forEach(function (IDdatum) {
            var lineData = IDdatum.values;

            //Attach line x-coordinates to line object.
            lineData.forEach(function (lineDatum) {
                lineDatum.x1 = lineDatum.values.x1;
                lineDatum.x2 = lineDatum.values.x2;
                delete lineDatum.values;
            });

            //Capture all line x-coordinates in an array.
            var lineCoordinates = lineData.map(function (di) {
                return [di.x1, di.x2];
            }),
                overlappingLines = lineData.filter(function (lineDatum) {
                var overlap = lineCoordinates.filter(function (lineCoordinate) {
                    return lineCoordinate[0] <= lineDatum.x1 && lineCoordinate[1] >= lineDatum.x1 || lineDatum.x1 <= lineCoordinate[0] && lineDatum.x2 >= lineCoordinate[0] || lineCoordinate[0] <= lineDatum.x2 && lineCoordinate[1] >= lineDatum.x2 || lineDatum.x1 <= lineCoordinate[1] && lineDatum.x2 >= lineCoordinate[1];
                });

                return overlap.length > 1;
            }).sort(function (a, b) {
                var x1diff = a.x1 - b.x1,
                    x2diff = b.x2 - a.x2;
                return x1diff !== 0 ? x1diff : x2diff !== 0 ? x2diff : a.key < b.key ? -1 : 1;
            });

            if (overlappingLines.length) {
                var currentlyOverlappingLines = [];

                //For each overlapping line...
                overlappingLines.forEach(function (currentLine, i) {
                    if (i === 0) {
                        currentLine.offset = 0;
                        currentlyOverlappingLines.push(currentLine);
                    } else {
                        currentlyOverlappingLines.forEach(function (d) {
                            var currLapsPrevX1 = currentLine.x1 <= d.x1 && currentLine.x2 >= d.x1,
                                currLapsPrevX2 = currentLine.x1 <= d.x2 && currentLine.x2 >= d.x2,
                                currLapsPrev = currentLine.x1 <= d.x1 && currentLine.x2 >= d.x2,
                                prevLapsCurrX1 = d.x1 <= currentLine.x1 && d.x2 >= currentLine.x1,
                                prevLapsCurrX2 = d.x1 <= currentLine.x2 && d.x2 >= currentLine.x2,
                                prevLapsCurr = d.x1 <= currentLine.x1 && d.x2 >= currentLine.x2;

                            d.overlapping = currLapsPrevX1 || currLapsPrevX2 || currLapsPrev || prevLapsCurrX1 || prevLapsCurrX2 || prevLapsCurr;
                        });
                        var nOverlapping = currentlyOverlappingLines.filter(function (d) {
                            return d.overlapping;
                        }).length;

                        //if no lines are currently overlapping reset currently overlapping lines
                        if (nOverlapping === 0) {
                            currentLine.offset = 0;
                            currentlyOverlappingLines = [currentLine];
                        } else if (nOverlapping === currentlyOverlappingLines.length) {
                            //else if all lines are currently overlapping increase offset and add current line to currently overlapping lines
                            currentLine.offset = d3$1.max(currentlyOverlappingLines, function (d) {
                                return d.offset;
                            }) + 1;
                            currentlyOverlappingLines.push(currentLine);
                        } else {
                            //otherwise replace non-overlapping line with the smallest offset with current line
                            currentlyOverlappingLines.forEach(function (d, i) {
                                d.index = i;
                            });
                            var minOffset = d3$1.min(currentlyOverlappingLines.filter(function (d) {
                                return !d.overlapping;
                            }), function (d) {
                                return d.offset;
                            }),
                                minIndex = currentlyOverlappingLines.filter(function (d) {
                                return d.offset === minOffset;
                            })[0].index;
                            currentLine.offset = minOffset;
                            currentlyOverlappingLines.splice(minIndex, 1, currentLine);
                        }
                    }

                    //Offset lines vertically.
                    var className = currentLine.key + ' line';
                    var g = d3$1.select(_this.clinicalTimelines.document.getElementsByClassName(className)[0]);
                    g.attr('transform', currentLine.offset > 0 ? 'translate(0,' + currentLine.offset * _this.config.mark_thickness * 2 + ')' : 'translate(0,0)');
                });
            }
        });
    }
 }

 function offsetOverlappingMarks() {
    var _this = this;

    this.config.marks.forEach(function (mark, i) {
        var markData = _this.marks[i].data;

        //Identify marks which represent ongoing events.
        if (_this.config.ongo_col && _this.raw_data.length && _this.raw_data[0].hasOwnProperty(_this.config.ongo_col)) markData.forEach(function (d) {
            d.ongoing = mark.type === 'line' ? d.values[0].values.raw[0][_this.config.ongo_col] : d.values.raw[0][_this.config.ongo_col];
        });

        //Attach offset value to each mark datum.
        if (_this.config.offset_col && _this.raw_data.length && _this.raw_data[0].hasOwnProperty(_this.config.offset_col)) markData.forEach(function (d) {
            d.offset = mark.type === 'line' ? d.values[0].values.raw[0][_this.config.offset_col] : d.values.raw[0][_this.config.offset_col];
        });

        if (mark.type === 'line') offsetLines.call(_this, mark, markData);else if (mark.type === 'circle') offsetCircles.call(_this, mark, markData);
    });
 }

 function highlightMarks() {
    var _this = this;

    var context = this;

    //Clear line overlays.
    this.svg.selectAll('.ct-highlight-overlay').remove();

    //Highlight legend.
    this.wrap.selectAll('.legend-item').classed('ct-highlighted', function (d) {
        return d.label === _this.config.event_highlighted;
    });

    //Select marks.
    var highlightedMarks = this.svg.selectAll('.wc-data-mark, .ct-ongoing-event, .ct-custom-mark').classed('ct-highlighted', function (d) {
        return d.key.indexOf(_this.config.event_highlighted) > -1;
    }).filter(function (d) {
        return d.key.indexOf(_this.config.event_highlighted) > -1;
    });

    //Highlight time intervals.
    var timeIntervals = highlightedMarks.filter(function () {
        return this.tagName === 'path' && this.getAttribute('class').indexOf('highlighted') > -1;
    });
    timeIntervals.each(function (d, i) {
        var g = d3$1.select(this.parentNode);
        var x1 = context.x(context.config.time_function(d.values[0].key));
        var x2 = context.x(context.config.time_function(d.values[1].key)) + (d.ongoing === 'Y' ? context.config.marks.find(function (mark) {
            return mark.type === 'line';
        }).attributes['stroke-width'] / 2 : 0);
        var y = context.y(d.values[0].values.raw[0][context.config.y.column === context.config.id_col ? context.config.id_col : context.config.seq_col]) + context.y.rangeBand() / 2;
        var color = context.config.event_highlight_color;
        var line = g.append('line').classed('ct-highlight-overlay', true).attr({
            x1: x1,
            x2: x2,
            y1: y,
            y2: y,
            stroke: color
        });
    });

    //Highlight timepoints.
    var timepoints = highlightedMarks.filter(function () {
        return ['circle', 'polygon'].indexOf(this.tagName) > -1 && this.getAttribute('class').indexOf('ct-highlighted') > -1 && this.getAttribute('class').indexOf('ct-hidden') < 0 && this.getAttribute('class').indexOf('ct-ongoing-event') < 0;
    });
    timepoints.attr({
        stroke: function stroke(d) {
            return _this.colorScale(d.values.raw[0][_this.config.event_col]);
        },
        fill: function fill(d) {
            return _this.config.event_highlight_color;
        }
    });
 }

 function drawOngoingMarks() {
    var _this = this;

    this.svg.selectAll('.ct-ongoing-event').remove();
    if (this.raw_data.length && this.raw_data[0].hasOwnProperty(this.config.ongo_col)) {
        var context = this;
        var lineSettings = this.config.marks.find(function (mark) {
            return mark.type === 'line';
        });

        this.svg.selectAll('.line-supergroup .line').filter(function (d) {
            return d.ongoing === _this.config.ongo_val;
        }).each(function (d) {
            var g = d3$1.select(this);
            var endpoint = d.values[1];
            var x = context.x(context.config.time_function(endpoint.key));
            var y = context.y(endpoint.values.y) + context.y.rangeBand() / 2;
            var highlight = d.key.indexOf(context.config.event_highlighted) > -1;
            var length = x + (highlight ? lineSettings.attributes['stroke-width'] * 1.5 : lineSettings.attributes['stroke-width'] * 1.5);
            var heightOffset = highlight ? lineSettings.attributes['stroke-width'] * 2 / 3 : lineSettings.attributes['stroke-width'] * 2 / 3;
            var arrow = [[length, y], [x, y - heightOffset], [x, y + heightOffset]];

            g.insert('polygon', 'line').datum(d).classed('ct-ongoing-event', true).classed('ct-highlighted', highlight).attr({
                points: arrow.map(function (coordinate) {
                    return coordinate.join(',');
                }).join(' '),
                fill: highlight ? context.config.event_highlight_color : context.colorScale(endpoint.values.raw[0][context.config.event_col]),
                stroke: context.colorScale(endpoint.values.raw[0][context.config.event_col])
            });
        });
    }
 }

 function addStartStopCircles() {
    var context = this;

    this.svg.selectAll('.ct-start-stop-circle').remove();
    this.svg.selectAll('g.line').each(function (d) {
        var g = d3$1.select(this);
        d.values.filter(function (di, i) {
            return !(i === 1 && di.values.raw[0][context.config.ongo_col] === context.config.ongo_val);
        }).forEach(function (di) {
            g.append('circle').classed('ct-start-stop-circle', true).attr({
                cx: context.x(di.values.x),
                cy: context.y(di.values.y) + context.y.rangeBand() / 2,
                r: context.config.mark_thickness * 2 / 5,
                fill: 'white',
                stroke: 'lightgray'
            });
        });
    });
 }

 function drawPolygon(marks, event_symbol) {
    marks.each(function (d) {
        var g = d3.select(this);

        //clear out g
        g.select('circle').classed('ct-hidden', true);
        g.select('polygon.ct-custom-mark').remove();

        //define vertices
        var vertices = void 0;
        if (event_symbol.symbol === 'square') vertices = [[d.symbolCoordinates.x1, d.symbolCoordinates.y1], [d.symbolCoordinates.x1, d.symbolCoordinates.y3], [d.symbolCoordinates.x3, d.symbolCoordinates.y3], [d.symbolCoordinates.x3, d.symbolCoordinates.y1]];else if (event_symbol.symbol === 'diamond') vertices = [[d.symbolCoordinates.x1, d.symbolCoordinates.y2], [d.symbolCoordinates.x2, d.symbolCoordinates.y3], [d.symbolCoordinates.x3, d.symbolCoordinates.y2], [d.symbolCoordinates.x2, d.symbolCoordinates.y1]];else if (event_symbol.symbol === 'triangle') {
            if (event_symbol.direction === 'right') vertices = [[d.symbolCoordinates.x1, d.symbolCoordinates.y1], [d.symbolCoordinates.x3, d.symbolCoordinates.y2], [d.symbolCoordinates.x1, d.symbolCoordinates.y3]];else if (event_symbol.direction === 'down') vertices = [[d.symbolCoordinates.x1, d.symbolCoordinates.y1], [d.symbolCoordinates.x3, d.symbolCoordinates.y1], [d.symbolCoordinates.x2, d.symbolCoordinates.y3]];else if (event_symbol.direction === 'left') vertices = [[d.symbolCoordinates.x3, d.symbolCoordinates.y1], [d.symbolCoordinates.x1, d.symbolCoordinates.y2], [d.symbolCoordinates.x3, d.symbolCoordinates.y3]];else vertices = [[d.symbolCoordinates.x2, d.symbolCoordinates.y1], [d.symbolCoordinates.x3, d.symbolCoordinates.y3], [d.symbolCoordinates.x1, d.symbolCoordinates.y3]];
        }

        //draw polygon
        var polygon = g.append('polygon').datum(d).classed('ct-custom-mark', true).attr({
            points: vertices.map(function (vertex) {
                return vertex.join(',');
            }).join(' '),
            fill: d.color
        });
    });
 }

 function addSymbols() {
    var _this = this;

    this.svg.selectAll('.ct-custom-mark').remove();
    if (this.config.event_symbols && this.config.event_symbols.length) {
        this.config.event_symbols.forEach(function (event_symbol) {
            var marks = _this.svg.selectAll('g.point').filter(function (d) {
                var event$$1 = d.values.raw[0][_this.config.event_col];
                return (event_symbol.event === event$$1 || event_symbol.events.indexOf(event$$1) > -1) && _this.x_dom[0] <= d.total && d.total <= _this.x_dom[1];
            }).each(function (d) {
                var x = _this.x(d.values.x);
                var y = _this.y(d.values.y) + _this.y.rangeBand() / 2;
                var sizeFactor = 1;
                d.symbolCoordinates = {
                    x1: x - _this.config.mark_thickness * sizeFactor,
                    x2: x,
                    x3: x + _this.config.mark_thickness * sizeFactor,
                    y1: y - _this.config.mark_thickness * sizeFactor,
                    y2: y,
                    y3: y + _this.config.mark_thickness * sizeFactor
                };
                d.color = _this.colorScale(d.values.raw[0][_this.config.event_col]);
            });

            drawPolygon.call(_this, marks, event_symbol);
        });
    }
 }

 function addSymbolsToLegend() {
    var _this = this;

    var context = this;

    if (this.config.event_symbols && this.config.event_symbols.length) {
        this.config.event_symbols.forEach(function (event_symbol) {
            var marks = _this.wrap.selectAll('.legend .legend-color-block').filter(function (d) {
                var event$$1 = d.label;
                return event_symbol.event === event$$1 || event_symbol.events.indexOf(event$$1) > -1;
            }).each(function (d) {
                var dimensions = this.getBBox();
                var x = dimensions.x + dimensions.width / 2;
                var y = dimensions.y + dimensions.height / 2;
                d.symbolCoordinates = {
                    x1: x - dimensions.width / 2,
                    x2: x,
                    x3: x + dimensions.width / 2,
                    y1: y - dimensions.height / 2,
                    y2: y,
                    y3: y + dimensions.height / 2
                };
                d.color = context.colorScale(d.label);
            });

            drawPolygon.call(_this, marks, event_symbol);
        });
    }
 }

 function offsetBottomXaxis() {
    if (!this.clinicalTimelines.test) {
        var //capture x-axis and its translation coordinates
        bottomXaxis = this.svg.select('.x.axis'),
            bottomXaxisTransform = bottomXaxis.attr('transform').replace(/^translate\((.*)\)$/, '$1'),
            bottomXaxisTransformCoordinates = bottomXaxisTransform.indexOf(',') > -1 ? bottomXaxisTransform.split(',') : bottomXaxisTransform.split(' '),

        //capture x-axis title and its translation coordinates
        bottomXaxisTitle = bottomXaxis.select('.axis-title'),
            bottomXaxisTitleTransform = bottomXaxisTitle.attr('transform').replace(/^translate\((.*)\)$/, '$1'),
            bottomXaxisTitleTransformCoordinates = bottomXaxisTitleTransform.indexOf(',') > -1 ? bottomXaxisTitleTransform.split(',') : bottomXaxisTitleTransform.split(' ');

        //offset x-axis
        bottomXaxis.attr('transform', 'translate(' + +bottomXaxisTransformCoordinates[0] + ',' + (+bottomXaxisTransformCoordinates[1] + this.y.rangeBand()) + ')');

        //offset x-axis title
        bottomXaxisTitle.attr('transform', 'translate(' + +bottomXaxisTitleTransformCoordinates[0] + ',' + (+bottomXaxisTitleTransformCoordinates[1] - 7 * this.margin.bottom / 16) + ')');
    }
 }

 function addVisibleLine(reference_line) {
    reference_line.visibleLine = reference_line.g.append('line').datum(reference_line.lineDatum).classed('ct-visible-reference-line', true).attr({
        x1: function x1(d) {
            return d.x1;
        },
        x2: function x2(d) {
            return d.x2;
        },
        y1: function y1(d) {
            return d.y1;
        },
        y2: function y2(d) {
            return d.y2;
        }
    });
 }

 function addHoverLine(reference_line) {
    reference_line.hoverLine = reference_line.g.append('line').datum(reference_line.lineDatum).classed('ct-hover-line', true).attr({
        x1: function x1(d) {
            return d.x1;
        },
        x2: function x2(d) {
            return d.x2;
        },
        y1: function y1(d) {
            return d.y1;
        },
        y2: function y2(d) {
            return d.y2;
        }
    });
 }

 function updateText(reference_line) {
    reference_line.textDirection = reference_line.lineDatum.x1 <= this.plot_width / 2 ? 'right' : 'left';
    reference_line.text.attr({
        x: reference_line.lineDatum.x1,
        dx: reference_line.textDirection === 'right' ? 20 : -25,
        'text-anchor': reference_line.textDirection === 'right' ? 'beginning' : 'end'
    }).text(reference_line.label);
 }

 function addText(reference_line) {
    reference_line.text = reference_line.g.append('text').classed('ct-reference-line-text', true);
    updateText.call(this, reference_line);
 }

 function addHover(reference_line) {
    var context = this;

    //Hide reference labels initially.
    reference_line.text.classed('ct-hidden', true);

    //Add event listeners to hover reference line.
    reference_line.hoverLine.on('mouseover', function () {
        reference_line.visibleLine.classed('ct-hover', true);
        reference_line.text.classed('ct-hidden', false).attr('y', d3$1.mouse(this)[1]);
        context.svg.node().appendChild(reference_line.text.node());
    }).on('mouseout', function () {
        reference_line.visibleLine.classed('ct-hover', false);
        reference_line.text.classed('ct-hidden', true);
    });
 }

 function updateTable(reference_line) {
    var _this = this;

    //Update reference table header.
    reference_line.tableHeader.text(reference_line.label);

    //Filter data on events that overlap reference line.
    reference_line.wide_data = this.filtered_wide_data.filter(function (d) {
        return _this.config.time_function(d[_this.config.st_col]) <= _this.config.time_function(reference_line.timepoint) && _this.config.time_function(d[_this.config.en_col]) >= _this.config.time_function(reference_line.timepoint);
    });

    //Nest data by grouping and event type.
    reference_line.nested_data = d3$1.nest().key(function (d) {
        return d[_this.config.y.grouping] || 'All ' + _this.config.id_unitPlural;
    }).key(function (d) {
        return d[_this.config.event_col];
    }).rollup(function (d) {
        return d.length;
    }).entries(reference_line.wide_data);
    reference_line.flattened_data = [];
    reference_line.nested_data.forEach(function (d) {
        reference_line.flattened_data.push({
            class: 'ct-higher-level',
            key: d.key,
            n: d3$1.sum(d.values, function (di) {
                return di.values;
            })
        });
        d.values.forEach(function (di) {
            reference_line.flattened_data.push({
                class: 'ct-lower-level',
                key: di.key,
                n: di.values
            });
        });
    });

    //Update table.
    reference_line.table.selectAll('tr').remove();
    reference_line.table.selectAll('tr').data(reference_line.flattened_data).enter().append('tr').each(function (d) {
        var row = d3$1.select(this);
        row.append('td').text(d.key).attr('class', function (d) {
            return d.class + (d.class === 'ct-lower-level' ? ' ct-indent' : '');
        });
        row.append('td').text(d.n).attr('class', function (d) {
            return d.class;
        });
    });
 }

 function addDrag(reference_line) {
    var context = this,
        drag = d3$1.behavior.drag().origin(function (d) {
        return d;
    }).on('dragstart', function () {
        d3$1.select(this).classed('ct-active', true);
    }).on('drag', function () {
        var dx = d3$1.event.dx;

        //Calculate x-coordinate of drag line.
        var x = parseInt(reference_line.hoverLine.attr('x1')) + dx;
        if (x < 0) x = 0;
        if (x > context.plot_width) x = context.plot_width;

        //Invert x-coordinate with x-scale.
        var xInverted = context.x.invert(x);

        //Update reference line datum.
        reference_line.timepoint = context.config.x_parseFormat(xInverted);
        reference_line.label = context.config.x_displayFormat(xInverted);
        reference_line.lineDatum.x1 = x;
        reference_line.lineDatum.x2 = x;
        reference_line.visibleLine.attr({ x1: x, x2: x });
        reference_line.hoverLine.attr({ x1: x, x2: x });

        //Update reference line text label and table.
        updateText.call(context, reference_line);
        updateTable.call(context, reference_line);
    }).on('dragend', function () {
        d3$1.select(this).classed('ct-active', false);
    });

    reference_line.hoverLine.call(drag);
 }

 function drawReferenceLine(reference_line, i) {
    reference_line.g = this.referenceLinesGroup.append('g').classed('ct-reference-line', true).attr('id', 'ct-reference-line-' + i);
    reference_line.timepointN = this.config.time_function(reference_line.timepoint);
    reference_line.lineDatum = {
        x1: this.x(reference_line.timepointN),
        x2: this.x(reference_line.timepointN),
        y1: 0,
        y2: this.plot_height + (this.config.y.column === this.config.id_col ? this.y.rangeBand() : 0)
    };

    //Visible reference line, drawn between the overlay and the marks
    addVisibleLine.call(this, reference_line);

    //Invisible reference line, without a dasharray and much thicker to make hovering easier
    addHoverLine.call(this, reference_line);

    //Reference line text label
    addText.call(this, reference_line);

    //Display reference line label on hover.
    addHover.call(this, reference_line);

    //Make line draggable.
    if (!this.parent) addDrag.call(this, reference_line);
 }

 function drawReferenceTable(reference_line, i) {
    //Add reference line table container.
    if (reference_line.tableContainer) reference_line.tableContainer.remove();
    reference_line.tableContainer = this.clinicalTimelines.containers.leftColumn.append('div').classed('ct-reference-line-table-container', true).attr('id', 'ct-reference-line-table-container-' + i);

    //Add reference line table header.
    reference_line.tableHeader = reference_line.tableContainer.append('h3').classed('ct-reference-line-header', true);

    //Add reference line table.
    reference_line.table = reference_line.tableContainer.append('div').classed('ct-reference-line-table-body', true).append('table').append('tbody');

    //Add table data.
    updateTable.call(this, reference_line);
 }

 function drawReferenceLines() {
    var _this = this;

    if (this.config.reference_lines) {
        //Remove previously reference lines and tables.
        this.svg.select('.ct-reference-lines').remove();
        this.clinicalTimelines.containers.leftColumn.selectAll('.ct-reference-line-label-container').remove();

        //Add group for reference lines.
        this.svg.select('.ct-reference-lines').remove();
        if (!this.parent) this.clinicalTimelines.containers.leftColumn.selectAll('.ct-reference-line-table-container').remove();
        this.referenceLinesGroup = this.svg.insert('g', '#clinical-timelines .wc-chart .wc-svg .line-supergroup').classed('ct-reference-lines', true);

        //Append reference line for each item in config.reference_lines.
        this.config.reference_lines.filter(function (reference_line) {
            return reference_line.time_scale === _this.config.time_scale;
        }).filter(function (reference_line) {
            return _this.x_dom[0] <= _this.config.time_function(reference_line.timepoint) && _this.x_dom[1] >= _this.config.time_function(reference_line.timepoint);
        }).forEach(function (reference_line, i) {
            //Draw reference line.
            drawReferenceLine.call(_this, reference_line, i);

            //Draw reference line frequency table.
            if (!_this.parent) drawReferenceTable.call(_this, reference_line, i);
        });
    }
 }

 function IEsucks() {
    var inIE = !!this.clinicalTimelines.document.documentMode;
    if (inIE) this.svg.selectAll('.line,.point').each(function (d) {
        var mark = d3$1.select(this);
        var tooltip = mark.select('title');
        var text = tooltip.text().split('\n');
        tooltip.text(text.join('--|--'));
    });
 }

 function setClipPath() {
    var _this = this;

    this.marks.forEach(function (mark) {
        mark.groups.selectAll('circle,line,path,polygon,rect,text').attr('clip-path', 'url(#' + _this.id + ')');
    });
 }

 function onResize() {
    //Add filter functionality to legend.
    legendFilter.call(this);

    //Add second legend to differentiate timepoints, time intervals, and ongoing events.
    addSecondLegend.call(this);

    //Draw second x-axis at top of chart.
    drawTopXaxis.call(this);

    //Add tick lines that display the tick label on hover.
    addTooltip.call(this);

    //Draw second chart when y-axis tick label is clicked.
    tickClick.call(this);

    //Annotate grouping.
    annotateGrouping.call(this);

    //Distinguish each timeline with striping.
    addStriping.call(this);

    //Offset overlapping marks.
    offsetOverlappingMarks.call(this);

    //Draw ongoing marks.
    drawOngoingMarks.call(this);

    //Add symbols.
    addSymbols.call(this);

    //Highlight marks.
    highlightMarks.call(this);

    //Draw circles at beginning and end of each line.
    addStartStopCircles.call(this);

    //Add symbols to legend.
    addSymbolsToLegend.call(this);

    //Offset bottom x-axis to prevent overlap with final ID.
    offsetBottomXaxis.call(this);

    //Draw reference lines.
    drawReferenceLines.call(this);

    //Replace newline characters with html line break entities to cater to Internet Explorer.
    IEsucks.call(this);

    //Set clip-path of all svg elements to the ID of the current chart.
    setClipPath.call(this);
 }

 function onDestroy() {}

 var callbacks = {
    onInit: onInit,
    onLayout: onLayout,
    onPreprocess: onPreprocess,
    onDatatransform: onDatatransform,
    onDraw: onDraw,
    onResize: onResize,
    onDestroy: onDestroy
 };

 function timelines() {
    //Create timelines.
    this.timelines = webcharts.createChart(this.containers.timelines.node(), this.settings.synced, this.controls);

    for (var callback in callbacks) {
        this.timelines.on(callback.substring(2).toLowerCase(), callbacks[callback]);
    }this.timelines.clinicalTimelines = this;
 }

 function onInit$1() {
    this.clinicalTimelines = this.parent.clinicalTimelines;
    this.config.color_dom = this.parent.timelines.config.color_dom;
    this.config.legend.order = this.parent.timelines.config.legend.order;
    this.config.x.domain = null;
    this.config.y.sort = 'alphabetical-ascending';
 }

 function onLayout$1() {}

 function onPreprocess$1() {}

 function onDatatransform$1() {}

 function onDraw$1() {
    //Re-scale x-axis by misleading webcharts as to what the actual container width is.
    var wrapWidth = +this.wrap.style('width').replace(/[^\d.]/g, ''),
        newWidth = wrapWidth * 0.75;
    this.raw_width = newWidth;
 }

 function drawTimeRange() {
    var _this = this;

    this.svg.select('.time-range').remove();
    var x_dom = this.x_dom.map(function (x) {
        return x instanceof Date ? x.getTime() : x;
    });
    var timeRange = this.parent.timelines.config.time_scale === 'Date' ? this.parent.timelines.date_range.map(function (dt) {
        return dt.getTime();
    }) : this.parent.timelines.day_range;
    var timeRangeText = this.config.time_scale === 'Date' ? this.parent.timelines.date_range.map(function (dt) {
        return d3$1.time.format(_this.parent.timelines.config.date_display_format)(dt);
    }) : this.parent.timelines.day_range.map(function (dy) {
        return dy.toString();
    });

    if ((x_dom[0] !== timeRange[0] || x_dom[1] !== timeRange[1]) && (timeRange[0] >= x_dom[0] && timeRange[0] <= x_dom[1] || // left side of time range overlaps x-domain
    timeRange[1] >= x_dom[0] && timeRange[1] <= x_dom[1] || // right side of time range overlaps x-domain
    timeRange[0] <= x_dom[0] && timeRange[1] >= x_dom[1]) // time range fully encompassed x-domain
    ) {
            var timeRangeGroup = this.svg.insert('g', '#clinical-timelines .wc-chart .wc-svg .line-supergroup').classed('ct-time-range', true),
                x = this.x(Math.max(timeRange[0], x_dom[0])),
                width = Math.min(this.x(timeRange[1]) - x, this.plot_width - x),
                timeRangeRect = timeRangeGroup.append('rect').classed('ct-time-range-rect', true).attr({
                x: x,
                y: 0,
                width: width,
                height: this.plot_height
            }),
                timeRangeTooltip = timeRangeGroup.append('title').text(this.config.time_scale + ' range: ' + timeRangeText.join(' - '));
        }
 }

 function onResize$1() {
    var _this = this;

    //Hide legend.
    this.parent.wrap.select('.legend').classed('ct-hidden', true);

    //Draw ongoing marks.
    this.config.marks.forEach(function (mark, i) {
        var markData = _this.marks[i].data;

        //Identify marks which represent ongoing events.
        if (mark.type === 'line') {
            markData.forEach(function (d) {
                d.ongoing = d.values[0].values.raw[0][_this.config.ongo_col];
            });
        }
    });
    drawOngoingMarks.call(this);

    //Annotate time range.
    drawTimeRange.call(this);

    //Draw reference lines.
    drawReferenceLines.call(this);

    //Add circles to beginning and end of lines.
    addStartStopCircles.call(this);

    //Add symbols.
    addSymbols.call(this);

    //Highlight events.
    highlightMarks.call(this);

    //Replace newline characters with html line break entities to cater to Internet Explorer.
    IEsucks.call(this);
 }

 function onDestroy$1() {}

 var callbacks$1 = {
    onInit: onInit$1,
    onLayout: onLayout$1,
    onPreprocess: onPreprocess$1,
    onDatatransform: onDatatransform$1,
    onDraw: onDraw$1,
    onResize: onResize$1,
    onDestroy: onDestroy$1
 };

 function IDtimeline() {
    this.IDtimeline = webcharts.createChart(this.containers.IDtimeline.node(), this.settings.IDtimeline);

    for (var callback in callbacks$1) {
        this.IDtimeline.on(callback.substring(2).toLowerCase(), callbacks$1[callback]);
    }this.IDtimeline.clinicalTimelines = this;
 }

 function onInit$2() {}

 function onLayout$2() {}

 function onDraw$2() {}

 function onDestroy$2() {}

 var callbacks$2 = {
    onInit: onInit$2,
    onLayout: onLayout$2,
    onDraw: onDraw$2,
    onDestroy: onDestroy$2
 };

 function listing() {
    this.listing = webcharts.createTable(this.containers.listing.node(), this.settings.listing);

    for (var callback in callbacks$2) {
        this.listing.on(callback.substring(2).toLowerCase(), callbacks$2[callback]);
    }this.listing.clinicalTimelines = this;
 }

 function init(data) {
    this.data = {
        raw: data,
        variables: Object.keys(data[0])
    };
    this.timelines.init(data, this.test);
 }

 //polyfills and utility functions
 function clinicalTimelines() {
    var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
    var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var dom = arguments[2];

    var clinicalTimelines = {
        element: element,
        settings: {
            user: settings
        },
        containers: {},
        init: init,
        test: !!dom,
        document: dom ? dom.window.document : document
    };

    //Merge and sync settings.
    defineSettings.call(clinicalTimelines);

    //Define .css styles to avoid requiring a separate .css file.
    defineStyles.call(clinicalTimelines);

    //Define layout of HTML.
    defineLayout.call(clinicalTimelines);

    //Create controls.
    controls$1.call(clinicalTimelines);

    //Create timelines.
    timelines.call(clinicalTimelines);

    //Create ID timeline.
    IDtimeline.call(clinicalTimelines);

    //Create listing.
    listing.call(clinicalTimelines);

    //Recurse clinical timelines, ID timeline, and listing.
    recurse.call(clinicalTimelines);

    return clinicalTimelines;
 }

 return clinicalTimelines;

 })));
diff --git a/index.css b/index.css
 * {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 }
 #title {
    width: 96%;
    margin: 2%;
    border-bottom: 1px solid lightgray;
    font-weight: lighter;
    font-size: 250%;
 }
 #subtitle {
    width: 96%;
    margin: 2%;
    font-weight: lighter;
    font-size: 200%;
 }
 #container {
    width: 96%;
    margin: 2%;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Clinical Timelines: Treatment of MS</title>
        <div id = 'title'>Clinical Timelines</div>
        <div id = 'subtitle'>Treatment of MS</div>

        <meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>

        <script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
        <script type = 'text/javascript' src = './Webcharts/build/webcharts.js'></script>
        <script type = 'text/javascript' src = './clinical-timelines/build/clinicalTimelines.js'></script>

        <link type = 'text/css' rel = 'stylesheet' href = './Webcharts/css/webcharts.css'>
        <link type = 'text/css' rel = 'stylesheet' href = './index.css'>
    </head>

    <body>
        <div id = 'container'></div>
    </body>

    <script type = 'text/javascript' src = './index.js'></script>
 </html>
diff --git a/index.js b/index.js
 let settings = {
    time_scale: 'Day',
    day_range: [-50, 750],
    event_types: [
        'Screening',
        'Clinical Assessments',
        'Full Response',
        'Partial Response',
        'No Response',
    ],
    event_symbols: [
        {events: ['Screening'], symbol: 'triangle', direction: 'right'},
        {events: ['Full Response'], symbol: 'triangle', direction: 'up'},
        {events: ['Partial Response'], symbol: 'diamond'},
        {events: ['No Response'], symbol: 'triangle', direction: 'down'},
    ],

    id_characteristics: [
        {value_col: 'TRT', label: 'Treatment Group'},
        {value_col: 'response', label: 'Response'},
        {value_col: 'PP', label: 'Per-protocol'},
        {value_col: 'SEX', label: 'Sex'},
        {value_col: 'AGE', label: 'Age'},
    ],
    groupings: [
        {value_col: 'TRT', label: 'Treatment Group'},
        {value_col: 'response', label: 'Response'},
        {value_col: 'ITT', label: 'Intent-to-treat'},
        {value_col: 'PP', label: 'Per-protocol'},
        {value_col: 'SEX', label: 'Sex'},
    ],
    grouping_initial: 'TRT',
    //grouping_direction: 'vertical',

    filters: [
        {value_col: 'TRT', label: 'Treatment Group'},
        {value_col: 'response', label: 'Response'},
        {value_col: 'PP', label: 'Per-protocol', start: 'Yes'},
        {value_col: 'SEX', label: 'Sex'},
    ],
    reference_lines: [
        {
            label: 'Baseline',
            timepoint: 0,
        }
    ],
    mark_thickness: 8,
    range_band: 40,
    colors: [
        '#7570b3',
        '#1f78b4',
        '#35978f',
        '#f6e8c3',
        '#8c510a',
        '#d95f02',
        '#1b9e77',
    ],
 };

 d3.csv(
    './ADTIMELINES.csv',
    d => {
        return d;
    },
    data => {
        clinicalTimelines('#container', settings).init(data);
    }
 );
diff --git a/webcharts.css b/webcharts.css
 		@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300);
 /*------------------------------------------------------------------------------------------------\
  Small Multiple Layout
 \------------------------------------------------------------------------------------------------*/

 		div.wc-layout.wc-small-multiples::after {
 			content: "";
 			clear: both;
 			display: block;
 		}

 		.wc-layout.wc-small-multiples > .wc-chart {
 			float: left;
 			padding: 0 2em 2em 0;
 		}

 		.wc-layout.wc-small-multiples > .wc-chart > .wc-chart-title {
 			display: block;
 			font-weight: bold;
 			text-align: center;
 		}
 		.wc-small-multiples .wc-chart > .legend {
 		  display: none;
 		}

 /*------------------------------------------------------------------------------------------------\
  Charts
 \------------------------------------------------------------------------------------------------*/

    .wc-chart {
        position: relative;
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    }

    .wc-chart rect,
    .wc-chart line {
        shape-rendering: crispEdges;
    }

    /*next few are rules for d3 brushing stuff*/
    .wc-chart.brushable .overlay {
        cursor: crosshair;
    }

    .wc-chart rect.background {
        display: none;
    }

    .wc-chart rect.extent {
        fill: #ccc;
        fill-opacity: 0.4;
        shape-rendering: crispEdges;
    }

    .wc-chart .axis path.domain {
        fill: none;
        stroke: #ccc;
        shape-rendering: crispEdges;
    }

    .wc-chart .axis .tick line {
        stroke: #eee;
        shape-rendering: crispEdges;
    }

    .wc-chart .axis .tick text {
        font-size: .9em;
    }

    .wc-chart .axis .axis-title {
        fill: #555;
    }

    *[class*="wc-"] .legend {
        font-size: .9em;
        padding: 0;
        margin: 0;
    }

    *[class*="wc-"] .legend .legend-title {
        font-weight: bold;
        margin-right: 1em;
    }

    *[class*="wc-"] .legend .legend-item {
        display: inline-block;
        margin-right: 1em;
    }

    *[class*="wc-"] .legend .legend-item .legend-color-block {
        position: relative;
        top: .2em;
        right: .25em;
        display: inline-block;
    }
    *[class*="wc-"] .legend .legend-item .legend-mark-text {
        font-weight: bold;
        margin-right: .5em;
    }

    .wc-chart .ordinal.axis .tick line,
    .wc-chart .ordinal.axis path {
        display: none;
    }

    .wc-chart.gridlines .ordinal.axis .tick line {
        display: block;
    }

 /*------------------------------------------------------------------------------------------------\
  Controls
 \------------------------------------------------------------------------------------------------*/

    .wc-controls {
        display: block;
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        font-size: .9em;
        margin-bottom: 10px;
    }

    .wc-controls:empty {
        display: none;
    }

    .intro > .wc-controls {
        display: block;
    }

    .wc-controls .control-group {
        display: inline-table;
        max-width: 100%;
        margin: 0px 1em 1em 0;
    }
    .wc-controls.bottom .control-group {
        display: inline-table;
    }

    .wc-controls .control-group .wc-control-label {
        /*font-weight: bold;*/
        display: block;
    }

    .wc-controls .control-group.inline .wc-control-label {
        display: inline;
        margin-right: .5em;
    }
    .wc-controls .control-group.inline .changer {
        display: inline;
        margin-top: 0;
    }

    .wc-controls .control-group .wc-control-label + .changer {
        margin-top: 2px;
    }

    .wc-controls .control-group .wc-control-label.inline {
        display: inline;
        margin-right: .5em;
    }

    .wc-controls .control-group .wc-control-label .label-required {
        color: #de2d26;
        padding: 0 .25em;
        border: 1px solid;
        margin-left: .5em;
    }

    .wc-controls .span-description {
        display: block;
        font-size: .75em;
        color: #777;
        margin-bottom: 3px;
    }
    .wc-controls .span-description:empty {
        display: none;
    }
    .wc-controls .span-description.standout {
        font-style: italic;
        color: #d9534f;
    }

    .wc-controls .control-group label.radio,
    .wc-controls .control-group label.filter-values {
        display: inline-block;
        cursor: pointer;
        font-weight: normal;
        font-size: .9em;
        padding: 0;
        margin: 5px 10px 0 0;
    }

    .wc-controls .inline {
        display: inline;
    }

    .wc-controls .control-group input[type='text'],
    .wc-controls select {
        display: block;
        width: auto;
        max-width: 100%;
        padding: 0 2px;
        height: auto;
        border-radius: 0;
    }

    .wc-controls .control-group input[type='number'] {
        width: 70px;
        text-align: right;
        max-width: 100%;
    }

    .wc-controls .control-group input[type='checkbox'],
    .wc-controls .control-group input[type='radio'] {
        cursor: pointer;
        position: relative;
        top: .1em;
        float: none;
        margin: 0;
    }

    .wc-controls .control-group input[type='radio'] {
        vertical-align: bottom;
        margin-left: .25em;
    }

    .wc-controls .control-group input.inline {
        margin: 0 2px 2px 0;
    }

    .wc-controls .control-group .changer + .changer {
        margin-top: 2px;
    }

    .wc-controls .subsetter-ui {
        position: relative;
        display: inline-block;
        max-width: 100%;
        padding: 3px;
        border: 1px dashed #888;
        margin: 5px 5px 0 0;
    }

    .wc-controls .subsetter-ui .remove-btn {
        cursor: pointer;
        position: absolute;
        top: 2px;
        right: 2px;
    }

 /*------------------------------------------------------------------------------------------------\
  Tables
 \------------------------------------------------------------------------------------------------*/

    .wc-table {
        display: block;
    }
    .wc-table .hidden {
        display: none !important;
    }
    .wc-table .invisible {
        visibility: hidden !important;
    }
    .wc-table > * {
        display: block;
    }
    .wc-table .table-top {
    }

    .wc-table .table-bottom {
    }

    .wc-table .interactivity {
        display: inline-block;
        vertical-align: middle;
        margin: 10px 0;
        padding: 0;
    }
    .wc-table .interactivity .wc-button {
        display: inline-block;
        border: 2px solid gray;
        border-radius: 4px;
        padding: 2px 8px;
        margin: 0 2px;
        cursor: pointer;
        background: white;
        color: black;
    }
    .wc-table .interactivity .wc-button:hover {
        background: black;
        color: white;
    }

    /**-------------------------------------------------------------------------------------------\
      Searchable container
    \-------------------------------------------------------------------------------------------**/

        .wc-table .searchable-container {
            float: right;
            overflow: hidden;
        }
        .wc-table .searchable-container .nNrecords {
        }
        .wc-table .searchable-container input {
            margin: 0 10px 0 0;
            padding: 4px;
        }

    /**-------------------------------------------------------------------------------------------\
      Sortable container
    \-------------------------------------------------------------------------------------------**/

        .wc-table .sortable-container {
            margin-right: 10px;
        }
        .wc-table .sortable-container .instruction {
            margin-top: 4px;
        }
        .wc-table .sortable-container .sort-box {
            cursor: default;
            padding: 2px 4px;
        }
        .wc-table .sortable-container .sort-direction {
            font-weight: bold;
            margin: 3px;
        }
        .wc-table .sortable-container .sort-box .remove-sort {
            font-weight: bold;
            float: right;
            border: 1px solid gray;
            margin-top: 3px;
            padding: 2px 3px;
            font-size: 8px;
            background: white;
            color: red;
        }
        .wc-table .sortable-container .sort-box .remove-sort:hover {
            cursor: pointer;
            background: red;
            color: white;
        }

    /**-------------------------------------------------------------------------------------------\
      Table
    \-------------------------------------------------------------------------------------------**/

 		.wc-table table {
 			font-size: .9em;
 			border-collapse: collapse;
 		}

        /***--------------------------------------------------------------------------------------\
 		  Table header
        \--------------------------------------------------------------------------------------***/

            .wc-table table thead {
            }
            .wc-table table thead tr {
            }
            .wc-table table thead tr th {
                cursor: pointer;
                padding: 2px 5px;
                border-bottom: 2px solid black;
                text-align: left;
            }
            .wc-table table thead tr th:first-child {
            }
            .wc-table table thead tr th:last-child {
            }

        /***--------------------------------------------------------------------------------------\
 		  Table body
        \--------------------------------------------------------------------------------------***/

            .wc-table table tbody {
            }
            .wc-table table tbody tr {
            }
            .wc-table table tbody tr:nth-child(even) {
                background: #eee;
            }
            .wc-table table tbody tr:hover {
                background: #ccc;
            }
            .wc-table table tbody tr td {
                padding: 2px 5px;
            }
            .wc-table table tbody tr td:first-child {
            }
            .wc-table table tbody tr td:last-child {
            }

 						.wc-table table tbody tr:last-child {
 							border-bottom:1px solid black
 						}
            .wc-table table tbody tr.no-data td {
                color: red;
                font-weight: bold;
            }

    /**-------------------------------------------------------------------------------------------\
      Pagination container
    \-------------------------------------------------------------------------------------------**/

        .wc-table .pagination-container {
            float: right;
        }
        .wc-table .pagination-container a {
            text-decoration: none;
        }
        .wc-table .pagination-container a:not(.active) {
            border: none;
        }

    /**-------------------------------------------------------------------------------------------\
      Exportable container
    \-------------------------------------------------------------------------------------------**/

        .wc-table .exportable-container {
            float: left;
        }
        .wc-table .exportable-container a {
            text-decoration: none;
        }

 /*------------------------------------------------------------------------------------------------\
  Miscellaneous
 \------------------------------------------------------------------------------------------------*/

    .loader {
    position:relative;
    width:20px;
    height:25px}

    .blockG {
    position:absolute;
    background-color:#eee;
    width:3px;
    height:8px;
    -moz-border-radius:4px 4px 0 0;
    -moz-transform:scale(0.4);
    -moz-animation-name:fadeG;
    -moz-animation-duration:0.48s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -webkit-border-radius:4px 4px 0 0;
    -webkit-transform:scale(0.4);
    -webkit-animation-name:fadeG;
    -webkit-animation-duration:0.48s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -ms-border-radius:4px 4px 0 0;
    -ms-transform:scale(0.4);
    -ms-animation-name:fadeG;
    -ms-animation-duration:0.48s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -o-border-radius:4px 4px 0 0;
    -o-transform:scale(0.4);
    -o-animation-name:fadeG;
    -o-animation-duration:0.48s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    border-radius:4px 4px 0 0;
    transform:scale(0.4);
    animation-name:fadeG;
    animation-duration:0.48s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    }

    .rotate1 {
    left:0;
    top:9px;
    -moz-animation-delay:0.18s;
    -moz-transform:rotate(-90deg);
    -webkit-animation-delay:0.18s;
    -webkit-transform:rotate(-90deg);
    -ms-animation-delay:0.18s;
    -ms-transform:rotate(-90deg);
    -o-animation-delay:0.18s;
    -o-transform:rotate(-90deg);
    animation-delay:0.18s;
    transform:rotate(-90deg);
    }

    .rotate2 {
    left:3px;
    top:3px;
    -moz-animation-delay:0.24s;
    -moz-transform:rotate(-45deg);
    -webkit-animation-delay:0.24s;
    -webkit-transform:rotate(-45deg);
    -ms-animation-delay:0.24s;
    -ms-transform:rotate(-45deg);
    -o-animation-delay:0.24s;
    -o-transform:rotate(-45deg);
    animation-delay:0.24s;
    transform:rotate(-45deg);
    }

    .rotate3 {
    left:8px;
    top:1px;
    -moz-animation-delay:0.3s;
    -moz-transform:rotate(0deg);
    -webkit-animation-delay:0.3s;
    -webkit-transform:rotate(0deg);
    -ms-animation-delay:0.3s;
    -ms-transform:rotate(0deg);
    -o-animation-delay:0.3s;
    -o-transform:rotate(0deg);
    animation-delay:0.3s;
    transform:rotate(0deg);
    }

    .rotate4 {
    right:3px;
    top:3px;
    -moz-animation-delay:0.36s;
    -moz-transform:rotate(45deg);
    -webkit-animation-delay:0.36s;
    -webkit-transform:rotate(45deg);
    -ms-animation-delay:0.36s;
    -ms-transform:rotate(45deg);
    -o-animation-delay:0.36s;
    -o-transform:rotate(45deg);
    animation-delay:0.36s;
    transform:rotate(45deg);
    }

    .rotate5 {
    right:0;
    top:9px;
    -moz-animation-delay:0.42000000000000004s;
    -moz-transform:rotate(90deg);
    -webkit-animation-delay:0.42000000000000004s;
    -webkit-transform:rotate(90deg);
    -ms-animation-delay:0.42000000000000004s;
    -ms-transform:rotate(90deg);
    -o-animation-delay:0.42000000000000004s;
    -o-transform:rotate(90deg);
    animation-delay:0.42000000000000004s;
    transform:rotate(90deg);
    }

    .rotate6 {
    right:3px;
    bottom:2px;
    -moz-animation-delay:0.48s;
    -moz-transform:rotate(135deg);
    -webkit-animation-delay:0.48s;
    -webkit-transform:rotate(135deg);
    -ms-animation-delay:0.48s;
    -ms-transform:rotate(135deg);
    -o-animation-delay:0.48s;
    -o-transform:rotate(135deg);
    animation-delay:0.48s;
    transform:rotate(135deg);
    }

    .rotate7 {
    bottom:0;
    left:8px;
    -moz-animation-delay:0.5399999999999999s;
    -moz-transform:rotate(180deg);
    -webkit-animation-delay:0.5399999999999999s;
    -webkit-transform:rotate(180deg);
    -ms-animation-delay:0.5399999999999999s;
    -ms-transform:rotate(180deg);
    -o-animation-delay:0.5399999999999999s;
    -o-transform:rotate(180deg);
    animation-delay:0.5399999999999999s;
    transform:rotate(180deg);
    }

    .rotate8 {
    left:3px;
    bottom:2px;
    -moz-animation-delay:0.6s;
    -moz-transform:rotate(-135deg);
    -webkit-animation-delay:0.6s;
    -webkit-transform:rotate(-135deg);
    -ms-animation-delay:0.6s;
    -ms-transform:rotate(-135deg);
    -o-animation-delay:0.6s;
    -o-transform:rotate(-135deg);
    animation-delay:0.6s;
    transform:rotate(-135deg);
    }

    @-moz-keyframes fadeG {
    0% {
    background-color:#000000}

    100% {
    background-color:#eee}

    }

    @-webkit-keyframes fadeG {
    0% {
    background-color:#000000}

    100% {
    background-color:#eee}

    }

    @-ms-keyframes fadeG {
    0% {
    background-color:#000000}

    100% {
    background-color:#eee}

    }

    @-o-keyframes fadeG {
    0% {
    background-color:#000000}

    100% {
    background-color:#eee}

    }

    @keyframes fadeG {
    0% {
    background-color:#000000}

    100% {
    background-color:#eee}

    }
diff --git a/webcharts.js b/webcharts.js
 (function(global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined'
        ? (module.exports = factory(require('d3')))
        : typeof define === 'function' && define.amd
          ? define(['d3'], factory)
          : (global.webCharts = factory(global.d3));
 })(this, function(d3) {
    'use strict';
    var version = '1.11.0';

    function init(data) {
        var _this = this;

        var test = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

        if (d3.select(this.div).select('.loader').empty()) {
            d3
                .select(this.div)
                .insert('div', ':first-child')
                .attr('class', 'loader')
                .selectAll('.blockG')
                .data(d3.range(8))
                .enter()
                .append('div')
                .attr('class', function(d) {
                    return 'blockG rotate' + (d + 1);
                });
        }

        this.wrap.attr('class', 'wc-chart');

        this.setDefaults();

        this.raw_data = data;
        this.initial_data = data;

        var startup = function startup(data) {
            //connect this chart and its controls, if any
            if (_this.controls) {
                _this.controls.targets.push(_this);
                if (!_this.controls.ready) {
                    _this.controls.init(_this.raw_data);
                } else {
                    _this.controls.layout();
                }
            }

            //make sure container is visible (has height and width) before trying to initialize
            var visible = d3.select(_this.div).property('offsetWidth') > 0 || test;
            if (!visible) {
                console.warn(
                    'The chart cannot be initialized inside an element with 0 width. The chart will be initialized as soon as the container element is given a width > 0.'
                );
                var onVisible = setInterval(function(i) {
                    var visible_now = d3.select(_this.div).property('offsetWidth') > 0;
                    if (visible_now) {
                        _this.layout();
                        _this.draw();
                        clearInterval(onVisible);
                    }
                }, 500);
            } else {
                _this.layout();
                _this.draw();
            }
        };

        this.events.onInit.call(this);
        if (this.raw_data.length) {
            this.checkRequired(this.raw_data);
        }
        startup(data);

        return this;
    }

    function checkRequired(data) {
        var _this = this;

        var colnames = Object.keys(data[0]);
        var requiredVars = [];
        var requiredCols = [];
        if (this.config.x && this.config.x.column) {
            requiredVars.push('this.config.x.column');
            requiredCols.push(this.config.x.column);
        }
        if (this.config.y && this.config.y.column) {
            requiredVars.push('this.config.y.column');
            requiredCols.push(this.config.y.column);
        }
        if (this.config.color_by) {
            requiredVars.push('this.config.color_by');
            requiredCols.push(this.config.color_by);
        }
        if (this.config.marks)
            this.config.marks.forEach(function(e, i) {
                if (e.per && e.per.length) {
                    e.per.forEach(function(p, j) {
                        requiredVars.push('this.config.marks[' + i + '].per[' + j + ']');
                        requiredCols.push(p);
                    });
                }
                if (e.split) {
                    requiredVars.push('this.config.marks[' + i + '].split');
                    requiredCols.push(e.split);
                }
                if (e.values) {
                    for (var value in e.values) {
                        requiredVars.push('this.config.marks[' + i + "].values['" + value + "']");
                        requiredCols.push(value);
                    }
                }
            });

        var missingDataField = false;
        requiredCols.forEach(function(e, i) {
            if (colnames.indexOf(e) < 0) {
                missingDataField = true;
                d3.select(_this.div).select('.loader').remove();
                _this.wrap
                    .append('div')
                    .style('color', 'red')
                    .html(
                        'The value "' +
                            e +
                            '" for the <code>' +
                            requiredVars[i] +
                            '</code> setting does not match any column in the provided dataset.'
                    );
                throw new Error(
                    'Error in settings object: The value "' +
                        e +
                        '" for the ' +
                        requiredVars[i] +
                        ' setting does not match any column in the provided dataset.'
                );
            }
        });

        return {
            missingDataField: missingDataField,
            dataFieldArguments: requiredVars,
            requiredDataFields: requiredCols
        };
    }

    function layout() {
        this.svg = this.wrap
            .append('svg')
            .datum(function() {
                return null;
            }) // prevent data inheritance
            .attr({
                class: 'wc-svg',
                xmlns: 'http://www.w3.org/2000/svg',
                version: '1.1',
                xlink: 'http://www.w3.org/1999/xlink'
            })
            .append('g')
            .style('display', 'inline-block');

        var defs = this.svg.append('defs');
        defs
            .append('pattern')
            .attr({
                id: 'diagonal-stripes',
                x: 0,
                y: 0,
                width: 3,
                height: 8,
                patternUnits: 'userSpaceOnUse',
                patternTransform: 'rotate(30)'
            })
            .append('rect')
            .attr({ x: '0', y: '0', width: '2', height: '8', style: 'stroke:none; fill:black' });

        defs.append('clipPath').attr('id', this.id).append('rect').attr('class', 'plotting-area');

        //y axis
        this.svg
            .append('g')
            .attr('class', 'y axis')
            .append('text')
            .attr('class', 'axis-title')
            .attr('transform', 'rotate(-90)')
            .attr('dy', '.75em')
            .attr('text-anchor', 'middle');
        //x axis
        this.svg
            .append('g')
            .attr('class', 'x axis')
            .append('text')
            .attr('class', 'axis-title')
            .attr('dy', '-.35em')
            .attr('text-anchor', 'middle');
        //overlay
        this.svg
            .append('rect')
            .attr('class', 'overlay')
            .attr('opacity', 0)
            .attr('fill', 'none')
            .style('pointer-events', 'all');
        //add legend
        if (!this.parent)
            this.wrap
                .append('ul')
                .datum(function() {
                    return null;
                }) // prevent data inheritance
                .attr('class', 'legend')
                .style('vertical-align', 'top')
                .append('span')
                .attr('class', 'legend-title');

        d3.select(this.div).select('.loader').remove();

        this.events.onLayout.call(this);
    }

    function draw(raw_data, processed_data) {
        var _this = this;

        var chart = this;
        var config = this.config;

        //if pre-processing callback, run it now
        this.events.onPreprocess.call(this);

        /////////////////////////
        // Data prep  pipeline //
        /////////////////////////

        // if user passed raw_data to chart.draw(), use that, otherwise use chart.raw_data
        var raw = raw_data ? raw_data : this.raw_data ? this.raw_data : [];

        // warn the user about the perils of "processed_data"
        if (processed_data) {
            console.warn(
                "Drawing the chart using user-defined 'processed_data', this is an experimental, untested feature."
            );
        }

        //Call consolidateData - this applies filters from controls and prepares data for each set of marks.
        this.consolidateData(raw);

        /////////////////////////////
        // Prepare scales and axes //
        /////////////////////////////

        var div_width = parseInt(this.wrap.style('width'));

        this.setColorScale();

        var max_width = config.max_width ? config.max_width : div_width;
        this.raw_width = config.x.type === 'ordinal' && +config.x.range_band
            ? (+config.x.range_band + config.x.range_band * config.padding) * this.x_dom.length
            : config.resizable ? max_width : config.width ? config.width : div_width;
        this.raw_height = config.y.type === 'ordinal' && +config.y.range_band
            ? (+config.y.range_band + config.y.range_band * config.padding) * this.y_dom.length
            : config.resizable
              ? max_width * (1 / config.aspect)
              : config.height ? config.height : div_width * (1 / config.aspect);

        var pseudo_width = this.svg.select('.overlay').attr('width')
            ? this.svg.select('.overlay').attr('width')
            : this.raw_width;
        var pseudo_height = this.svg.select('.overlay').attr('height')
            ? this.svg.select('.overlay').attr('height')
            : this.raw_height;

        this.svg.select('.x.axis').select('.axis-title').text(function(d) {
            return typeof config.x.label === 'string'
                ? config.x.label
                : typeof config.x.label === 'function' ? config.x.label.call(_this) : null;
        });
        this.svg.select('.y.axis').select('.axis-title').text(function(d) {
            return typeof config.y.label === 'string'
                ? config.y.label
                : typeof config.y.label === 'function' ? config.y.label.call(_this) : null;
        });

        this.xScaleAxis(pseudo_width);
        this.yScaleAxis(pseudo_height);

        if (config.resizable && typeof window !== 'undefined') {
            d3.select(window).on('resize.' + this.element + this.id, function() {
                chart.resize();
            });
        } else if (typeof window !== 'undefined') {
            d3.select(window).on('resize.' + this.element + this.id, null);
        }

        this.events.onDraw.call(this);

        //////////////////////////////////////////////////////////////////////
        // Call resize - updates marks on the chart (amongst other things) //
        /////////////////////////////////////////////////////////////////////
        this.resize();
    }

    function naturalSorter(a, b) {
        //adapted from http://www.davekoelle.com/files/alphanum.js
        function chunkify(t) {
            var tz = [];
            var x = 0,
                y = -1,
                n = 0,
                i = void 0,
                j = void 0;

            while ((i = (j = t.charAt(x++)).charCodeAt(0))) {
                var m = i == 46 || (i >= 48 && i <= 57);
                if (m !== n) {
                    tz[++y] = '';
                    n = m;
                }
                tz[y] += j;
            }
            return tz;
        }

        var aa = chunkify(a.toLowerCase());
        var bb = chunkify(b.toLowerCase());

        for (var x = 0; aa[x] && bb[x]; x++) {
            if (aa[x] !== bb[x]) {
                var c = Number(aa[x]),
                    d = Number(bb[x]);
                if (c == aa[x] && d == bb[x]) {
                    return c - d;
                } else {
                    return aa[x] > bb[x] ? 1 : -1;
                }
            }
        }

        return aa.length - bb.length;
    }

    function setDomain(axis) {
        var _this = this;

        var otherAxis = axis === 'x' ? 'y' : 'x';

        if (this.config[axis].type === 'ordinal') {
            //ordinal domains
            if (this.config[axis].domain) {
                //user-defined domain
                this[axis + '_dom'] = this.config[axis].domain;
            } else if (this.config[axis].order) {
                //data-driven domain with user-defined domain order
                this[axis + '_dom'] = d3
                    .set(
                        d3.merge(
                            this.marks.map(function(mark) {
                                return mark[axis + '_dom'];
                            })
                        )
                    )
                    .values()
                    .sort(function(a, b) {
                        return d3.ascending(
                            _this.config[axis].order.indexOf(a),
                            _this.config[axis].order.indexOf(b)
                        );
                    });
            } else if (
                this.config[axis].sort &&
                this.config[axis].sort === 'alphabetical-ascending'
            ) {
                //data-driven domain with user-defined domain sort algorithm that sorts the axis
                //alphanumerically, first to last
                this[axis + '_dom'] = d3
                    .set(
                        d3.merge(
                            this.marks.map(function(mark) {
                                return mark[axis + '_dom'];
                            })
                        )
                    )
                    .values()
                    .sort(naturalSorter)
                    .reverse();
            } else if (
                ['time', 'linear'].indexOf(this.config[otherAxis].type) > -1 &&
                this.config[axis].sort === 'earliest'
            ) {
                //data-driven domain plotted against a time or linear axis that sorts the axis values
                //by earliest event/datum; generally used with timeline charts
                this[axis + '_dom'] = d3
                    .nest()
                    .key(function(d) {
                        return d[_this.config[axis].column];
                    })
                    .rollup(function(d) {
                        return d
                            .map(function(m) {
                                return m[_this.config[otherAxis].column];
                            })
                            .filter(function(f) {
                                return f instanceof Date;
                            });
                    })
                    .entries(this.raw_data)
                    .sort(function(a, b) {
                        return min(b.values) - min(a.values);
                    })
                    .map(function(m) {
                        return m.key;
                    });
            } else if (
                !this.config[axis].sort ||
                this.config[axis].sort === 'alphabetical-descending'
            ) {
                //data-driven domain with default/user-defined domain sort algorithm that sorts the
                //axis alphanumerically, last to first
                this[axis + '_dom'] = d3
                    .set(
                        d3.merge(
                            this.marks.map(function(mark) {
                                return mark[axis + '_dom'];
                            })
                        )
                    )
                    .values()
                    .sort(naturalSorter);
            } else {
                //data-driven domain with an invalid user-defined sort algorithm that captures a unique
                //set of values as they appear in the data
                this[axis + '_dom'] = d3
                    .set(
                        d3.merge(
                            this.marks.map(function(mark) {
                                return mark[axis + '_dom'];
                            })
                        )
                    )
                    .values();
            }
        } else if (
            this.config.marks
                .map(function(m) {
                    return m['summarize' + otherAxis.toUpperCase()] === 'percent';
                })
                .indexOf(true) > -1
        ) {
            //rate domains run from 0 to 1
            this[axis + '_dom'] = [0, 1];
        } else {
            //continuous domains run from the minimum to the maximum raw value
            //TODO: they should really run from the minimum to the maximum summarized value, e.g. a
            //TODO: means over time chart should plot over the range of the means, not the range of the
            //TODO: raw data
            this[axis + '_dom'] = d3.extent(
                d3.merge(
                    this.marks.map(function(mark) {
                        return mark[axis + '_dom'];
                    })
                )
            );
        }

        //Give the domain a range when the range of the variable is 0.
        if (
            this.config[axis].type === 'linear' &&
            this[axis + '_dom'][0] === this[axis + '_dom'][1]
        )
            this[axis + '_dom'] = this[axis + '_dom'][0] !== 0
                ? [
                      this[axis + '_dom'][0] - this[axis + '_dom'][0] * 0.01,
                      this[axis + '_dom'][1] + this[axis + '_dom'][1] * 0.01
                  ]
                : [-1, 1];

        return this[axis + '_dom'];
    }

    function consolidateData(raw) {
        var _this = this;

        this.setDefaults();

        //Apply filters from associated controls objects to raw data.
        this.filtered_data = raw;
        if (this.filters.length) {
            this.filters.forEach(function(filter) {
                _this.filtered_data = _this.filtered_data.filter(function(d) {
                    return filter.val === 'All'
                        ? d
                        : filter.val instanceof Array
                          ? filter.val.indexOf(d[filter.col]) > -1
                          : d[filter.col] === filter.val;
                });
            });
        }

        //Summarize data for each mark.
        this.config.marks.forEach(function(mark, i) {
            if (mark.type !== 'bar') {
                mark.arrange = null;
                mark.split = null;
            }

            var mark_info = mark.per
                ? _this.transformData(raw, mark)
                : {
                      data: [],
                      x_dom: [],
                      y_dom: []
                  };

            _this.marks[i] = {
                id: mark.id,
                type: mark.type,
                per: mark.per,
                data: mark_info.data,
                x_dom: mark_info.x_dom,
                y_dom: mark_info.y_dom,
                split: mark.split,
                text: mark.text,
                arrange: mark.arrange,
                order: mark.order,
                summarizeX: mark.summarizeX,
                summarizeY: mark.summarizeY,
                tooltip: mark.tooltip,
                radius: mark.radius,
                attributes: mark.attributes,
                values: mark.values
            };
        });

        //Set domains given extents of summarized mark data.
        setDomain.call(this, 'x');
        setDomain.call(this, 'y');
    }

    function setDefaults() {
        this.config.x = this.config.x || {};
        this.config.y = this.config.y || {};

        this.config.x.label = this.config.x.label !== undefined
            ? this.config.x.label
            : this.config.x.column;
        this.config.y.label = this.config.y.label !== undefined
            ? this.config.y.label
            : this.config.y.column;

        this.config.x.sort = this.config.x.sort || 'alphabetical-ascending';
        this.config.y.sort = this.config.y.sort || 'alphabetical-descending';

        this.config.x.type = this.config.x.type || 'linear';
        this.config.y.type = this.config.y.type || 'linear';

        this.config.x.range_band = this.config.x.range_band || this.config.range_band;
        this.config.y.range_band = this.config.y.range_band || this.config.range_band;

        this.config.margin = this.config.margin || {};
        this.config.legend = this.config.legend || {};
        this.config.legend.label = this.config.legend.label !== undefined
            ? this.config.legend.label
            : this.config.color_by;
        this.config.legend.location = this.config.legend.location !== undefined
            ? this.config.legend.location
            : 'bottom';
        this.config.marks = this.config.marks && this.config.marks.length
            ? this.config.marks
            : [{}];
        this.config.marks.forEach(function(m, i) {
            m.id = m.id ? m.id : 'mark' + (i + 1);
        });

        this.config.date_format = this.config.date_format || '%x';

        this.config.padding = this.config.padding !== undefined ? this.config.padding : 0.3;
        this.config.outer_pad = this.config.outer_pad !== undefined ? this.config.outer_pad : 0.1;

        this.config.resizable = this.config.resizable !== undefined ? this.config.resizable : true;

        this.config.aspect = this.config.aspect || 1.33;

        this.config.colors = this.config.colors || [
            'rgb(102,194,165)',
            'rgb(252,141,98)',
            'rgb(141,160,203)',
            'rgb(231,138,195)',
            'rgb(166,216,84)',
            'rgb(255,217,47)',
            'rgb(229,196,148)',
            'rgb(179,179,179)'
        ];

        this.config.scale_text = this.config.scale_text === undefined
            ? true
            : this.config.scale_text;
        this.config.transitions = this.config.transitions === undefined
            ? true
            : this.config.transitions;
    }

    function cleanData(mark, raw) {
        var _this = this;

        var dateConvert = d3.time.format(this.config.date_format);
        var clean = raw;
        // only use data for the current mark
        clean = mark.per && mark.per.length
            ? clean.filter(function(f) {
                  return f[mark.per[0]] !== undefined;
              })
            : clean;

        // Make sure data has x and y values
        if (this.config.x.column) {
            clean = clean.filter(function(f) {
                return [undefined, null].indexOf(f[_this.config.x.column]) < 0;
            });
        }
        if (this.config.y.column) {
            clean = clean.filter(function(f) {
                return [undefined, null].indexOf(f[_this.config.y.column]) < 0;
            });
        }

        //check that x and y have the correct formats
        if (this.config.x.type === 'time') {
            clean = clean.filter(function(f) {
                return f[_this.config.x.column] instanceof Date
                    ? f[_this.config.x.column]
                    : dateConvert.parse(f[_this.config.x.column]);
            });
            clean.forEach(function(e) {
                return (e[_this.config.x.column] = e[_this.config.x.column] instanceof Date
                    ? e[_this.config.x.column]
                    : dateConvert.parse(e[_this.config.x.column]));
            });
        }
        if (this.config.y.type === 'time') {
            clean = clean.filter(function(f) {
                return f[_this.config.y.column] instanceof Date
                    ? f[_this.config.y.column]
                    : dateConvert.parse(f[_this.config.y.column]);
            });
            clean.forEach(function(e) {
                return (e[_this.config.y.column] = e[_this.config.y.column] instanceof Date
                    ? e[_this.config.y.column]
                    : dateConvert.parse(e[_this.config.y.column]));
            });
        }

        if (
            (this.config.x.type === 'linear' || this.config.x.type === 'log') &&
            this.config.x.column
        ) {
            clean = clean.filter(function(f) {
                return mark.summarizeX !== 'count' && mark.summarizeX !== 'percent'
                    ? !(isNaN(f[_this.config.x.column]) || /^\s*$/.test(f[_this.config.x.column])) // is or coerces to a number and is not a string that coerces to 0
                    : f;
            });
        }
        if (
            (this.config.y.type === 'linear' || this.config.y.type === 'log') &&
            this.config.y.column
        ) {
            clean = clean.filter(function(f) {
                return mark.summarizeY !== 'count' && mark.summarizeY !== 'percent'
                    ? !(isNaN(f[_this.config.y.column]) || /^\s*$/.test(f[_this.config.y.column])) // is or coerces to a number and is not a string that coerces to 0
                    : f;
            });
        }

        return clean;
    }

    var stats = {
        mean: d3.mean,
        min: d3.min,
        max: d3.max,
        median: d3.median,
        sum: d3.sum
    };

    function summarize(vals) {
        var operation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'mean';

        var nvals = vals
            .filter(function(f) {
                return +f || +f === 0;
            })
            .map(function(m) {
                return +m;
            });

        if (operation === 'cumulative') {
            return null;
        }

        var mathed = operation === 'count'
            ? vals.length
            : operation === 'percent' ? vals.length : stats[operation](nvals);

        return mathed;
    }

    function makeNest(mark, entries, sublevel) {
        var _this = this;

        var dom_xs = [];
        var dom_ys = [];
        var this_nest = d3.nest();
        var totalOrder = void 0;

        if (
            (this.config.x.type === 'linear' && this.config.x.bin) ||
            (this.config.y.type === 'linear' && this.config.y.bin)
        ) {
            var xy = this.config.x.type === 'linear' && this.config.x.bin ? 'x' : 'y';
            var quant = d3.scale
                .quantile()
                .domain(
                    d3.extent(
                        entries.map(function(m) {
                            return +m[_this.config[xy].column];
                        })
                    )
                )
                .range(d3.range(+this.config[xy].bin));

            entries.forEach(function(e) {
                return (e.wc_bin = quant(e[_this.config[xy].column]));
            });

            this_nest.key(function(d) {
                return quant.invertExtent(d.wc_bin);
            });
        } else {
            this_nest.key(function(d) {
                return mark.per
                    .map(function(m) {
                        return d[m];
                    })
                    .join(' ');
            });
        }

        if (sublevel) {
            this_nest.key(function(d) {
                return d[sublevel];
            });
            this_nest.sortKeys(function(a, b) {
                return _this.config.x.type === 'time'
                    ? d3.ascending(new Date(a), new Date(b))
                    : _this.config.x.order
                      ? d3.ascending(
                            _this.config.x.order.indexOf(a),
                            _this.config.x.order.indexOf(b)
                        )
                      : sublevel === _this.config.color_by && _this.config.legend.order
                        ? d3.ascending(
                              _this.config.legend.order.indexOf(a),
                              _this.config.legend.order.indexOf(b)
                          )
                        : _this.config.x.type === 'ordinal' || _this.config.y.type === 'ordinal'
                          ? naturalSorter(a, b)
                          : d3.ascending(+a, +b);
            });
        }
        this_nest.rollup(function(r) {
            var obj = { raw: r };
            var y_vals = r
                .map(function(m) {
                    return m[_this.config.y.column];
                })
                .sort(d3.ascending);
            var x_vals = r
                .map(function(m) {
                    return m[_this.config.x.column];
                })
                .sort(d3.ascending);
            obj.x = _this.config.x.type === 'ordinal'
                ? r[0][_this.config.x.column]
                : summarize(x_vals, mark.summarizeX);
            obj.y = _this.config.y.type === 'ordinal'
                ? r[0][_this.config.y.column]
                : summarize(y_vals, mark.summarizeY);

            obj.x_q25 = _this.config.error_bars && _this.config.y.type === 'ordinal'
                ? d3.quantile(x_vals, 0.25)
                : obj.x;
            obj.x_q75 = _this.config.error_bars && _this.config.y.type === 'ordinal'
                ? d3.quantile(x_vals, 0.75)
                : obj.x;
            obj.y_q25 = _this.config.error_bars ? d3.quantile(y_vals, 0.25) : obj.y;
            obj.y_q75 = _this.config.error_bars ? d3.quantile(y_vals, 0.75) : obj.y;
            dom_xs.push([obj.x_q25, obj.x_q75, obj.x]);
            dom_ys.push([obj.y_q25, obj.y_q75, obj.y]);

            if (mark.summarizeY === 'cumulative') {
                var interm = entries.filter(function(f) {
                    return _this.config.x.type === 'time'
                        ? new Date(f[_this.config.x.column]) <=
                              new Date(r[0][_this.config.x.column])
                        : +f[_this.config.x.column] <= +r[0][_this.config.x.column];
                });
                if (mark.per.length) {
                    interm = interm.filter(function(f) {
                        return f[mark.per[0]] === r[0][mark.per[0]];
                    });
                }

                var cumul = _this.config.x.type === 'time'
                    ? interm.length
                    : d3.sum(
                          interm.map(function(m) {
                              return +m[_this.config.y.column] || +m[_this.config.y.column] === 0
                                  ? +m[_this.config.y.column]
                                  : 1;
                          })
                      );
                dom_ys.push([cumul]);
                obj.y = cumul;
            }
            if (mark.summarizeX === 'cumulative') {
                var _interm = entries.filter(function(f) {
                    return _this.config.y.type === 'time'
                        ? new Date(f[_this.config.y.column]) <=
                              new Date(r[0][_this.config.y.column])
                        : +f[_this.config.y.column] <= +r[0][_this.config.y.column];
                });
                if (mark.per.length) {
                    _interm = _interm.filter(function(f) {
                        return f[mark.per[0]] === r[0][mark.per[0]];
                    });
                }
                dom_xs.push([_interm.length]);
                obj.x = _interm.length;
            }

            return obj;
        });

        var test = this_nest.entries(entries);

        var dom_x = d3.extent(d3.merge(dom_xs));
        var dom_y = d3.extent(d3.merge(dom_ys));

        if (sublevel && mark.type === 'bar' && mark.split) {
            //calculate percentages in bars
            test.forEach(function(e) {
                var axis = _this.config.x.type === 'ordinal' ||
                    (_this.config.x.type === 'linear' && _this.config.x.bin)
                    ? 'y'
                    : 'x';
                e.total = d3.sum(
                    e.values.map(function(m) {
                        return +m.values[axis];
                    })
                );
                var counter = 0;
                e.values.forEach(function(v, i) {
                    if (
                        _this.config.x.type === 'ordinal' ||
                        (_this.config.x.type === 'linear' && _this.config.x.bin)
                    ) {
                        v.values.y = mark.summarizeY === 'percent'
                            ? v.values.y / e.total
                            : v.values.y || 0;
                        counter += +v.values.y;
                        v.values.start = e.values[i - 1] ? counter : v.values.y;
                    } else {
                        v.values.x = mark.summarizeX === 'percent'
                            ? v.values.x / e.total
                            : v.values.x || 0;
                        v.values.start = counter;
                        counter += +v.values.x;
                    }
                });
            });

            if (mark.arrange === 'stacked') {
                if (
                    this.config.x.type === 'ordinal' ||
                    (this.config.x.type === 'linear' && this.config.x.bin)
                ) {
                    dom_y = d3.extent(
                        test.map(function(m) {
                            return m.total;
                        })
                    );
                }
                if (
                    this.config.y.type === 'ordinal' ||
                    (this.config.y.type === 'linear' && this.config.y.bin)
                ) {
                    dom_x = d3.extent(
                        test.map(function(m) {
                            return m.total;
                        })
                    );
                }
            }
        } else {
            var axis = this.config.x.type === 'ordinal' ||
                (this.config.x.type === 'linear' && this.config.x.bin)
                ? 'y'
                : 'x';
            test.forEach(function(e) {
                return (e.total = e.values[axis]);
            });
        }

        if (
            (this.config.x.sort === 'total-ascending' && this.config.x.type == 'ordinal') ||
            (this.config.y.sort === 'total-descending' && this.config.y.type == 'ordinal')
        ) {
            totalOrder = test
                .sort(function(a, b) {
                    return d3.ascending(a.total, b.total);
                })
                .map(function(m) {
                    return m.key;
                });
        } else if (
            (this.config.x.sort === 'total-descending' && this.config.x.type == 'ordinal') ||
            (this.config.y.sort === 'total-ascending' && this.config.y.type == 'ordinal')
        ) {
            totalOrder = test
                .sort(function(a, b) {
                    return d3.descending(+a.total, +b.total);
                })
                .map(function(m) {
                    return m.key;
                });
        }

        return { nested: test, dom_x: dom_x, dom_y: dom_y, totalOrder: totalOrder };
    }

    //////////////////////////////////////////////////////////
    // transformData(raw, mark) provides specifications and data for
    // each set of marks. As such, it is called once for each
    // item specified in the config.marks array.
    //
    // parameters
    // raw - the raw data for use in the mark. Filters from controls
    //       are typically already applied.
    // mark - a single mark object from config.marks
    ////////////////////////////////////////////////////////

    function transformData(raw, mark) {
        var _this = this;

        //convenience mappings
        var config = this.config;
        var x_behavior = config.x.behavior || 'raw';
        var y_behavior = config.y.behavior || 'raw';
        var sublevel = mark.type === 'line'
            ? config.x.column
            : mark.type === 'bar' && mark.split ? mark.split : null;

        //////////////////////////////////////////////////////////////////////////////////
        // DATA PREP
        // prepare data based on the properties of the mark - drop missing records, etc
        //////////////////////////////////////////////////////////////////////////////////
        var cleaned = cleanData.call(this, mark, raw);

        //prepare nested data required for bar charts
        var raw_nest = void 0;
        if (mark.type === 'bar') {
            raw_nest = mark.arrange !== 'stacked'
                ? makeNest.call(this, mark, cleaned, sublevel)
                : makeNest.call(this, mark, cleaned);
        } else if (mark.summarizeX === 'count' || mark.summarizeY === 'count') {
            raw_nest = makeNest.call(this, mark, cleaned);
        }

        // Get the domain for the mark based on the raw data
        var raw_dom_x = mark.summarizeX === 'cumulative'
            ? [0, cleaned.length]
            : config.x.type === 'ordinal'
              ? d3
                    .set(
                        cleaned.map(function(m) {
                            return m[config.x.column];
                        })
                    )
                    .values()
                    .filter(function(f) {
                        return f;
                    })
              : mark.split && mark.arrange !== 'stacked'
                ? d3.extent(
                      d3.merge(
                          raw_nest.nested.map(function(m) {
                              return m.values.map(function(p) {
                                  return p.values.raw.length;
                              });
                          })
                      )
                  )
                : mark.summarizeX === 'count'
                  ? d3.extent(
                        raw_nest.nested.map(function(m) {
                            return m.values.raw.length;
                        })
                    )
                  : d3.extent(
                        cleaned
                            .map(function(m) {
                                return +m[config.x.column];
                            })
                            .filter(function(f) {
                                return +f || +f === 0;
                            })
                    );

        var raw_dom_y = mark.summarizeY === 'cumulative'
            ? [0, cleaned.length]
            : config.y.type === 'ordinal'
              ? d3
                    .set(
                        cleaned.map(function(m) {
                            return m[config.y.column];
                        })
                    )
                    .values()
                    .filter(function(f) {
                        return f;
                    })
              : mark.split && mark.arrange !== 'stacked'
                ? d3.extent(
                      d3.merge(
                          raw_nest.nested.map(function(m) {
                              return m.values.map(function(p) {
                                  return p.values.raw.length;
                              });
                          })
                      )
                  )
                : mark.summarizeY === 'count'
                  ? d3.extent(
                        raw_nest.nested.map(function(m) {
                            return m.values.raw.length;
                        })
                    )
                  : d3.extent(
                        cleaned
                            .map(function(m) {
                                return +m[config.y.column];
                            })
                            .filter(function(f) {
                                return +f || +f === 0;
                            })
                    );

        var filtered = cleaned;

        var filt1_xs = [];
        var filt1_ys = [];
        if (this.filters.length) {
            this.filters.forEach(function(e) {
                filtered = filtered.filter(function(d) {
                    return e.val === 'All'
                        ? d
                        : e.val instanceof Array
                          ? e.val.indexOf(d[e.col]) > -1
                          : d[e.col] === e.val;
                });
            });
            //get domain for all non-All values of first filter
            if (config.x.behavior === 'firstfilter' || config.y.behavior === 'firstfilter') {
                this.filters[0].choices
                    .filter(function(f) {
                        return f !== 'All';
                    })
                    .forEach(function(e) {
                        var perfilter = cleaned.filter(function(f) {
                            return f[_this.filters[0].col] === e;
                        });
                        var filt_nested = makeNest.call(_this, mark, perfilter, sublevel);
                        filt1_xs.push(filt_nested.dom_x);
                        filt1_ys.push(filt_nested.dom_y);
                    });
            }
        }

        //filter on mark-specific instructions
        if (mark.values) {
            var _loop = function _loop(a) {
                filtered = filtered.filter(function(f) {
                    return mark.values[a].indexOf(f[a]) > -1;
                });
            };

            for (var a in mark.values) {
                _loop(a);
            }
        }
        var filt1_dom_x = d3.extent(d3.merge(filt1_xs));
        var filt1_dom_y = d3.extent(d3.merge(filt1_ys));

        var current_nested = makeNest.call(this, mark, filtered, sublevel);

        var flex_dom_x = current_nested.dom_x;
        var flex_dom_y = current_nested.dom_y;

        if (mark.type === 'bar') {
            if (config.y.type === 'ordinal' && mark.summarizeX === 'count') {
                config.x.domain = config.x.domain ? [0, config.x.domain[1]] : [0, null];
            } else if (config.x.type === 'ordinal' && mark.summarizeY === 'count') {
                config.y.domain = config.y.domain ? [0, config.y.domain[1]] : [0, null];
            }
        }

        //several criteria must be met in order to use the 'firstfilter' domain
        var nonall = Boolean(
            this.filters.length &&
                this.filters[0].val !== 'All' &&
                this.filters.slice(1).filter(function(f) {
                    return f.val === 'All';
                }).length ===
                    this.filters.length - 1
        );

        var pre_x_dom = !this.filters.length
            ? flex_dom_x
            : x_behavior === 'raw'
              ? raw_dom_x
              : nonall && x_behavior === 'firstfilter' ? filt1_dom_x : flex_dom_x;
        var pre_y_dom = !this.filters.length
            ? flex_dom_y
            : y_behavior === 'raw'
              ? raw_dom_y
              : nonall && y_behavior === 'firstfilter' ? filt1_dom_y : flex_dom_y;

        var x_dom = config.x_dom
            ? config.x_dom
            : config.x.type === 'ordinal' && config.x.behavior === 'flex'
              ? d3
                    .set(
                        filtered.map(function(m) {
                            return m[config.x.column];
                        })
                    )
                    .values()
              : config.x.type === 'ordinal'
                ? d3
                      .set(
                          cleaned.map(function(m) {
                              return m[config.x.column];
                          })
                      )
                      .values()
                : pre_x_dom;

        var y_dom = config.y_dom
            ? config.y_dom
            : config.y.type === 'ordinal' && config.y.behavior === 'flex'
              ? d3
                    .set(
                        filtered.map(function(m) {
                            return m[config.y.column];
                        })
                    )
                    .values()
              : config.y.type === 'ordinal'
                ? d3
                      .set(
                          cleaned.map(function(m) {
                              return m[config.y.column];
                          })
                      )
                      .values()
                : pre_y_dom;

        //set lower limit of linear domain to 0 when other axis is ordinal and mark type is set to 'bar', provided no values are negative
        if (mark.type === 'bar') {
            if (
                config.x.behavior !== 'flex' &&
                config.x.type === 'linear' &&
                config.y.type === 'ordinal' &&
                raw_dom_x[0] >= 0
            )
                x_dom[0] = 0;

            if (
                config.y.behavior !== 'flex' &&
                config.x.type === 'ordinal' &&
                config.y.type === 'linear' &&
                raw_dom_y[0] >= 0
            )
                y_dom[0] = 0;
        }

        //update domains with those specified in the config
        if (config.x.domain && (config.x.domain[0] || config.x.domain[0] === 0)) {
            x_dom[0] = config.x.domain[0];
        }
        if (config.x.domain && (config.x.domain[1] || config.x.domain[1] === 0)) {
            x_dom[1] = config.x.domain[1];
        }
        if (config.y.domain && (config.y.domain[0] || config.y.domain[0] === 0)) {
            y_dom[0] = config.y.domain[0];
        }
        if (config.y.domain && (config.y.domain[1] || config.y.domain[1] === 0)) {
            y_dom[1] = config.y.domain[1];
        }

        if (config.x.type === 'ordinal' && !config.x.order) {
            config.x.order = current_nested.totalOrder;
        }
        if (config.y.type === 'ordinal' && !config.y.order) {
            config.y.order = current_nested.totalOrder;
        }

        this.current_data = current_nested.nested;

        this.events.onDatatransform.call(this);

        return { config: mark, data: current_nested.nested, x_dom: x_dom, y_dom: y_dom };
    }

    function setColorScale() {
        var config = this.config;
        var data = config.legend.behavior === 'flex' ? this.filtered_data : this.raw_data;
        var colordom = Array.isArray(config.color_dom) && config.color_dom.length
            ? config.color_dom.slice()
            : d3
                  .set(
                      data.map(function(m) {
                          return m[config.color_by];
                      })
                  )
                  .values()
                  .filter(function(f) {
                      return f && f !== 'undefined';
                  });

        if (config.legend.order)
            colordom.sort(function(a, b) {
                return d3.ascending(config.legend.order.indexOf(a), config.legend.order.indexOf(b));
            });
        else colordom.sort(naturalSorter);

        this.colorScale = d3.scale.ordinal().domain(colordom).range(config.colors);
    }

    function xScaleAxis(max_range, domain, type) {
        if (max_range === undefined) {
            max_range = this.plot_width;
        }
        if (domain === undefined) {
            domain = this.x_dom;
        }
        if (type === undefined) {
            type = this.config.x.type;
        }
        var config = this.config;
        var x = void 0;

        if (type === 'log') {
            x = d3.scale.log();
        } else if (type === 'ordinal') {
            x = d3.scale.ordinal();
        } else if (type === 'time') {
            x = d3.time.scale();
        } else {
            x = d3.scale.linear();
        }

        x.domain(domain);

        if (type === 'ordinal') {
            x.rangeBands([0, +max_range], config.padding, config.outer_pad);
        } else {
            x.range([0, +max_range]).clamp(Boolean(config.x.clamp));
        }

        var xFormat = config.x.format
            ? config.x.format
            : config.marks
                  .map(function(m) {
                      return m.summarizeX === 'percent';
                  })
                  .indexOf(true) > -1
              ? '0%'
              : type === 'time' ? '%x' : '.0f';
        var tick_count = Math.max(2, Math.min(max_range / 80, 8));
        var xAxis = d3.svg
            .axis()
            .scale(x)
            .orient(config.x.location)
            .ticks(tick_count)
            .tickFormat(
                type === 'ordinal'
                    ? null
                    : type === 'time' ? d3.time.format(xFormat) : d3.format(xFormat)
            )
            .tickValues(config.x.ticks ? config.x.ticks : null)
            .innerTickSize(6)
            .outerTickSize(3);

        this.svg.select('g.x.axis').attr('class', 'x axis ' + type);
        this.x = x;
        this.xAxis = xAxis;
    }

    function yScaleAxis(max_range, domain, type) {
        if (max_range === undefined) {
            max_range = this.plot_height;
        }
        if (domain === undefined) {
            domain = this.y_dom;
        }
        if (type === undefined) {
            type = this.config.y.type;
        }
        var config = this.config;
        var y = void 0;
        if (type === 'log') {
            y = d3.scale.log();
        } else if (type === 'ordinal') {
            y = d3.scale.ordinal();
        } else if (type === 'time') {
            y = d3.time.scale();
        } else {
            y = d3.scale.linear();
        }

        y.domain(domain);

        if (type === 'ordinal') {
            y.rangeBands([+max_range, 0], config.padding, config.outer_pad);
        } else {
            y.range([+max_range, 0]).clamp(Boolean(config.y_clamp));
        }

        var yFormat = config.y.format
            ? config.y.format
            : config.marks
                  .map(function(m) {
                      return m.summarizeY === 'percent';
                  })
                  .indexOf(true) > -1
              ? '0%'
              : '.0f';
        var tick_count = Math.max(2, Math.min(max_range / 80, 8));
        var yAxis = d3.svg
            .axis()
            .scale(y)
            .orient('left')
            .ticks(tick_count)
            .tickFormat(
                type === 'ordinal'
                    ? null
                    : type === 'time' ? d3.time.format(yFormat) : d3.format(yFormat)
            )
            .tickValues(config.y.ticks ? config.y.ticks : null)
            .innerTickSize(6)
            .outerTickSize(3);

        this.svg.select('g.y.axis').attr('class', 'y axis ' + type);

        this.y = y;
        this.yAxis = yAxis;
    }

    function resize() {
        var config = this.config;

        var aspect2 = 1 / config.aspect;
        var div_width = parseInt(this.wrap.style('width'));
        var max_width = config.max_width ? config.max_width : div_width;
        var preWidth = !config.resizable
            ? config.width
            : !max_width || div_width < max_width ? div_width : this.raw_width;

        this.textSize(preWidth);

        this.margin = this.setMargins();

        var svg_width = config.x.type === 'ordinal' && +config.x.range_band
            ? this.raw_width + this.margin.left + this.margin.right
            : !config.resizable
              ? this.raw_width
              : !config.max_width || div_width < config.max_width ? div_width : this.raw_width;
        this.plot_width = svg_width - this.margin.left - this.margin.right;
        var svg_height = config.y.type === 'ordinal' && +config.y.range_band
            ? this.raw_height + this.margin.top + this.margin.bottom
            : !config.resizable && config.height
              ? config.height
              : !config.resizable ? svg_width * aspect2 : this.plot_width * aspect2;
        this.plot_height = svg_height - this.margin.top - this.margin.bottom;

        d3
            .select(this.svg.node().parentNode)
            .attr('width', svg_width)
            .attr('height', svg_height)
            .select('g')
            .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        this.svg
            .select('.overlay')
            .attr('width', this.plot_width)
            .attr('height', this.plot_height)
            .classed('zoomable', config.zoomable);

        this.svg
            .select('.plotting-area')
            .attr('width', this.plot_width)
            .attr('height', this.plot_height + 1)
            .attr('transform', 'translate(0, -1)');

        this.xScaleAxis();
        this.yScaleAxis();

        var g_x_axis = this.svg.select('.x.axis');
        var g_y_axis = this.svg.select('.y.axis');
        var x_axis_label = g_x_axis.select('.axis-title');
        var y_axis_label = g_y_axis.select('.axis-title');

        if (config.x_location !== 'top') {
            g_x_axis.attr('transform', 'translate(0,' + this.plot_height + ')');
        }
        var gXAxisTrans = config.transitions ? g_x_axis.transition() : g_x_axis;
        gXAxisTrans.call(this.xAxis);
        var gYAxisTrans = config.transitions ? g_y_axis.transition() : g_y_axis;
        gYAxisTrans.call(this.yAxis);

        x_axis_label.attr(
            'transform',
            'translate(' + this.plot_width / 2 + ',' + (this.margin.bottom - 2) + ')'
        );
        y_axis_label.attr('x', -1 * this.plot_height / 2).attr('y', -1 * this.margin.left);

        this.svg
            .selectAll('.axis .domain')
            .attr({
                fill: 'none',
                stroke: '#ccc',
                'stroke-width': 1,
                'shape-rendering': 'crispEdges'
            });
        this.svg
            .selectAll('.axis .tick line')
            .attr({ stroke: '#eee', 'stroke-width': 1, 'shape-rendering': 'crispEdges' });

        this.drawGridlines();

        //update legend - margins need to be set first
        this.makeLegend();

        //update the chart's specific marks
        this.updateDataMarks();

        //call .on("resize") function, if any
        this.events.onResize.call(this);
    }

    function textSize(width) {
        var font_size = '14px';
        var point_size = 4;
        var stroke_width = 2;

        if (!this.config.scale_text) {
            font_size = this.config.font_size;
            point_size = this.config.point_size || 4;
            stroke_width = this.config.stroke_width || 2;
        } else if (width >= 600) {
            font_size = '14px';
            point_size = 4;
            stroke_width = 2;
        } else if (width > 450 && width < 600) {
            font_size = '12px';
            point_size = 3;
            stroke_width = 2;
        } else if (width > 300 && width < 450) {
            font_size = '10px';
            point_size = 2;
            stroke_width = 2;
        } else if (width <= 300) {
            font_size = '10px';
            point_size = 2;
            stroke_width = 1;
        }

        this.wrap.style('font-size', font_size);
        this.config.flex_point_size = point_size;
        this.config.flex_stroke_width = stroke_width;
    }

    function setMargins() {
        var _this = this;

        var y_ticks = this.yAxis.tickFormat()
            ? this.y.domain().map(function(m) {
                  return _this.yAxis.tickFormat()(m);
              })
            : this.y.domain();

        var max_y_text_length = d3.max(
            y_ticks.map(function(m) {
                return String(m).length;
            })
        );
        if (this.config.y_format && this.config.y_format.indexOf('%') > -1) {
            max_y_text_length += 1;
        }
        max_y_text_length = Math.max(2, max_y_text_length);
        var x_label_on = this.config.x.label ? 1.5 : 0;
        var y_label_on = this.config.y.label ? 1.5 : 0.25;
        var font_size = parseInt(this.wrap.style('font-size'));
        var x_second = this.config.x2_interval ? 1 : 0;
        var y_margin = max_y_text_length * font_size * 0.5 + font_size * y_label_on * 1.5 || 8;
        var x_margin =
            font_size + font_size / 1.5 + font_size * x_label_on + font_size * x_second || 8;

        y_margin += 6;
        x_margin += 3;

        return {
            top: this.config.margin && this.config.margin.top ? this.config.margin.top : 8,
            right: this.config.margin && this.config.margin.right ? this.config.margin.right : 16,
            bottom: this.config.margin && this.config.margin.bottom
                ? this.config.margin.bottom
                : x_margin,
            left: this.config.margin && this.config.margin.left ? this.config.margin.left : y_margin
        };
    }

    function drawGridLines() {
        this.wrap.classed('gridlines', this.config.gridlines);
        if (this.config.gridlines) {
            this.svg.select('.y.axis').selectAll('.tick line').attr('x1', 0);
            this.svg.select('.x.axis').selectAll('.tick line').attr('y1', 0);
            if (this.config.gridlines === 'y' || this.config.gridlines === 'xy')
                this.svg.select('.y.axis').selectAll('.tick line').attr('x1', this.plot_width);
            if (this.config.gridlines === 'x' || this.config.gridlines === 'xy')
                this.svg.select('.x.axis').selectAll('.tick line').attr('y1', -this.plot_height);
        } else {
            this.svg.select('.y.axis').selectAll('.tick line').attr('x1', 0);
            this.svg.select('.x.axis').selectAll('.tick line').attr('y1', 0);
        }
    }

    function makeLegend() {
        var scale$$1 = arguments.length > 0 && arguments[0] !== undefined
            ? arguments[0]
            : this.colorScale;
        var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
        var custom_data = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

        var config = this.config;

        config.legend.mark = config.legend.mark
            ? config.legend.mark
            : config.marks.length && config.marks[0].type === 'bar'
              ? 'square'
              : config.marks.length ? config.marks[0].type : 'square';

        var legend_label = label
            ? label
            : typeof config.legend.label === 'string' ? config.legend.label : '';

        var legendOriginal = this.legend || this.wrap.select('.legend');
        var legend = legendOriginal;

        if (!this.parent) {
            //singular chart
            if (this.config.legend.location === 'top' || this.config.legend.location === 'left') {
                this.wrap.node().insertBefore(legendOriginal.node(), this.svg.node().parentNode);
            } else {
                this.wrap.node().appendChild(legendOriginal.node());
            }
        } else {
            //multiples - keep legend outside of individual charts' wraps
            if (this.config.legend.location === 'top' || this.config.legend.location === 'left') {
                this.parent.wrap
                    .node()
                    .insertBefore(
                        legendOriginal.node(),
                        this.parent.wrap.select('.wc-chart').node()
                    );
            } else {
                this.parent.wrap.node().appendChild(legendOriginal.node());
            }
        }

        legend.style('padding', 0);

        var legend_data =
            custom_data ||
            scale$$1
                .domain()
                .slice(0)
                .filter(function(f) {
                    return f !== undefined && f !== null;
                })
                .map(function(m) {
                    return { label: m, mark: config.legend.mark };
                });

        legend
            .select('.legend-title')
            .text(legend_label)
            .style('display', legend_label ? 'inline' : 'none')
            .style('margin-right', '1em');

        var leg_parts = legend.selectAll('.legend-item').data(legend_data, function(d) {
            return d.label + d.mark;
        });

        leg_parts.exit().remove();

        var legendPartDisplay = this.config.legend.location === 'bottom' ||
            this.config.legend.location === 'top'
            ? 'inline-block'
            : 'block';
        var new_parts = leg_parts
            .enter()
            .append('li')
            .attr('class', 'legend-item')
            .style({ 'list-style-type': 'none', 'margin-right': '1em' });
        new_parts.append('span').attr('class', 'legend-mark-text').style('color', function(d) {
            return scale$$1(d.label);
        });
        new_parts
            .append('svg')
            .attr('class', 'legend-color-block')
            .attr('width', '1.1em')
            .attr('height', '1.1em')
            .style({
                position: 'relative',
                top: '0.2em'
            });

        leg_parts.style('display', legendPartDisplay);

        if (config.legend.order) {
            leg_parts.sort(function(a, b) {
                return d3.ascending(
                    config.legend.order.indexOf(a.label),
                    config.legend.order.indexOf(b.label)
                );
            });
        }

        leg_parts.selectAll('.legend-color-block').select('.legend-mark').remove();
        leg_parts.selectAll('.legend-color-block').each(function(e) {
            var svg$$1 = d3.select(this);
            if (e.mark === 'circle') {
                svg$$1
                    .append('circle')
                    .attr({ cx: '.5em', cy: '.5em', r: '.45em', class: 'legend-mark' });
            } else if (e.mark === 'line') {
                svg$$1.append('line').attr({
                    x1: 0,
                    y1: '.5em',
                    x2: '1em',
                    y2: '.5em',
                    'stroke-width': 2,
                    'shape-rendering': 'crispEdges',
                    class: 'legend-mark'
                });
            } else if (e.mark === 'square') {
                svg$$1.append('rect').attr({
                    height: '1em',
                    width: '1em',
                    class: 'legend-mark',
                    'shape-rendering': 'crispEdges'
                });
            }
        });
        leg_parts
            .selectAll('.legend-color-block')
            .select('.legend-mark')
            .attr('fill', function(d) {
                return d.color || scale$$1(d.label);
            })
            .attr('stroke', function(d) {
                return d.color || scale$$1(d.label);
            })
            .each(function(e) {
                d3.select(this).attr(e.attributes);
            });

        new_parts
            .append('span')
            .attr('class', 'legend-label')
            .style('margin-left', '0.25em')
            .text(function(d) {
                return d.label;
            });

        if (scale$$1.domain().length > 0) {
            var legendDisplay = this.config.legend.location === 'bottom' ||
                this.config.legend.location === 'top'
                ? 'block'
                : 'inline-block';
            legend.style('display', legendDisplay);
        } else {
            legend.style('display', 'none');
        }

        this.legend = legend;
    }

    function updateDataMarks() {
        this.drawBars(
            this.marks.filter(function(f) {
                return f.type === 'bar';
            })
        );
        this.drawLines(
            this.marks.filter(function(f) {
                return f.type === 'line';
            })
        );
        this.drawPoints(
            this.marks.filter(function(f) {
                return f.type === 'circle';
            })
        );
        this.drawText(
            this.marks.filter(function(f) {
                return f.type === 'text';
            })
        );

        this.marks.supergroups = this.svg.selectAll('g.supergroup');
    }

    function drawArea(area_drawer, area_data, datum_accessor) {
        var class_match = arguments.length > 3 && arguments[3] !== undefined
            ? arguments[3]
            : 'chart-area';

        var _this = this;

        var bind_accessor = arguments[4];
        var attr_accessor = arguments.length > 5 && arguments[5] !== undefined
            ? arguments[5]
            : function(d) {
                  return d;
              };

        var area_grps = this.svg.selectAll('.' + class_match).data(area_data, bind_accessor);
        area_grps.exit().remove();
        area_grps
            .enter()
            .append('g')
            .attr('class', function(d) {
                return class_match + ' ' + d.key;
            })
            .append('path');

        var areaPaths = area_grps
            .select('path')
            .datum(datum_accessor)
            .attr('fill', function(d) {
                var d_attr = attr_accessor(d);
                return d_attr ? _this.colorScale(d_attr[_this.config.color_by]) : null;
            })
            .attr(
                'fill-opacity',
                this.config.fill_opacity || this.config.fill_opacity === 0
                    ? this.config.fill_opacity
                    : 0.3
            );

        //don't transition if config says not to
        var areaPathTransitions = this.config.transitions ? areaPaths.transition() : areaPaths;

        areaPathTransitions.attr('d', area_drawer);

        return area_grps;
    }

    function drawBars(marks) {
        var _this = this;

        var rawData = this.raw_data;
        var config = this.config;

        var bar_supergroups = this.svg.selectAll('.bar-supergroup').data(marks, function(d, i) {
            return i + '-' + d.per.join('-');
        });

        bar_supergroups.enter().append('g').attr('class', function(d) {
            return 'supergroup bar-supergroup ' + d.id;
        });

        bar_supergroups.exit().remove();

        var bar_groups = bar_supergroups.selectAll('.bar-group').data(
            function(d) {
                return d.data;
            },
            function(d) {
                return d.key;
            }
        );
        var old_bar_groups = bar_groups.exit();

        var nu_bar_groups = void 0;
        var bars = void 0;

        var oldBarsTrans = config.transitions
            ? old_bar_groups.selectAll('.bar').transition()
            : old_bar_groups.selectAll('.bar');
        var oldBarGroupsTrans = config.transitions ? old_bar_groups.transition() : old_bar_groups;

        if (config.x.type === 'ordinal') {
            oldBarsTrans.attr('y', this.y(0)).attr('height', 0);

            oldBarGroupsTrans.remove();

            nu_bar_groups = bar_groups.enter().append('g').attr('class', function(d) {
                return 'bar-group ' + d.key;
            });
            nu_bar_groups.append('title');

            bars = bar_groups.selectAll('rect').data(
                function(d) {
                    return d.values instanceof Array
                        ? d.values.sort(function(a, b) {
                              return (
                                  _this.colorScale.domain().indexOf(b.key) -
                                  _this.colorScale.domain().indexOf(a.key)
                              );
                          })
                        : [d];
                },
                function(d) {
                    return d.key;
                }
            );

            var exitBars = config.transitions ? bars.exit().transition() : bars.exit();
            exitBars.attr('y', this.y(0)).attr('height', 0).remove();
            bars
                .enter()
                .append('rect')
                .attr('class', function(d) {
                    return 'wc-data-mark bar ' + d.key;
                })
                .style('clip-path', 'url(#' + this.id + ')')
                .attr('y', this.y(0))
                .attr('height', 0)
                .append('title');

            bars
                .attr('shape-rendering', 'crispEdges')
                .attr('stroke', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                })
                .attr('fill', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                });

            bars.each(function(d) {
                var mark = d3.select(this.parentNode.parentNode).datum();
                d.tooltip = mark.tooltip;
                d.arrange = mark.split && mark.arrange
                    ? mark.arrange
                    : mark.split ? 'grouped' : null;
                d.subcats = config.legend.order
                    ? config.legend.order.slice().reverse()
                    : mark.values && mark.values[mark.split]
                      ? mark.values[mark.split]
                      : d3
                            .set(
                                rawData.map(function(m) {
                                    return m[mark.split];
                                })
                            )
                            .values();
                d3.select(this).attr(mark.attributes);
            });

            var xformat = config.marks
                .map(function(m) {
                    return m.summarizeX === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.x.format);
            var yformat = config.marks
                .map(function(m) {
                    return m.summarizeY === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.y.format);
            bars.select('title').text(function(d) {
                var tt = d.tooltip || '';
                return tt
                    .replace(/\$x/g, xformat(d.values.x))
                    .replace(/\$y/g, yformat(d.values.y))
                    .replace(/\[(.+?)\]/g, function(str, orig) {
                        return d.values.raw[0][orig];
                    });
            });

            var barsTrans = config.transitions ? bars.transition() : bars;
            barsTrans
                .attr('x', function(d) {
                    var position = void 0;
                    if (!d.arrange || d.arrange === 'stacked') {
                        return _this.x(d.values.x);
                    } else if (d.arrange === 'nested') {
                        var _position = d.subcats.indexOf(d.key);
                        var offset = _position
                            ? _this.x.rangeBand() / (d.subcats.length * 0.75) / _position
                            : _this.x.rangeBand();
                        return _this.x(d.values.x) + (_this.x.rangeBand() - offset) / 2;
                    } else {
                        position = d.subcats.indexOf(d.key);
                        return (
                            _this.x(d.values.x) + _this.x.rangeBand() / d.subcats.length * position
                        );
                    }
                })
                .attr('y', function(d) {
                    if (d.arrange !== 'stacked') {
                        return _this.y(d.values.y);
                    } else {
                        return _this.y(d.values.start);
                    }
                })
                .attr('width', function(d) {
                    if (!d.arrange || d.arrange === 'stacked') {
                        return _this.x.rangeBand();
                    } else if (d.arrange === 'nested') {
                        var position = d.subcats.indexOf(d.key);
                        return position
                            ? _this.x.rangeBand() / (d.subcats.length * 0.75) / position
                            : _this.x.rangeBand();
                    } else {
                        return _this.x.rangeBand() / d.subcats.length;
                    }
                })
                .attr('height', function(d) {
                    return _this.y(0) - _this.y(d.values.y);
                });
        } else if (config.y.type === 'ordinal') {
            oldBarsTrans.attr('x', this.x(0)).attr('width', 0);

            oldBarGroupsTrans.remove();

            nu_bar_groups = bar_groups.enter().append('g').attr('class', function(d) {
                return 'bar-group ' + d.key;
            });
            nu_bar_groups.append('title');

            bars = bar_groups.selectAll('rect').data(
                function(d) {
                    return d.values instanceof Array
                        ? d.values.sort(function(a, b) {
                              return (
                                  _this.colorScale.domain().indexOf(b.key) -
                                  _this.colorScale.domain().indexOf(a.key)
                              );
                          })
                        : [d];
                },
                function(d) {
                    return d.key;
                }
            );

            var _exitBars = config.transitions ? bars.exit().transition() : bars.exit();
            _exitBars.attr('x', this.x(0)).attr('width', 0).remove();
            bars
                .enter()
                .append('rect')
                .attr('class', function(d) {
                    return 'wc-data-mark bar ' + d.key;
                })
                .style('clip-path', 'url(#' + this.id + ')')
                .attr('x', this.x(0))
                .attr('width', 0)
                .append('title');

            bars
                .attr('shape-rendering', 'crispEdges')
                .attr('stroke', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                })
                .attr('fill', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                });

            bars.each(function(d) {
                var mark = d3.select(this.parentNode.parentNode).datum();
                d.arrange = mark.split && mark.arrange
                    ? mark.arrange
                    : mark.split ? 'grouped' : null;
                d.subcats = config.legend.order
                    ? config.legend.order.slice().reverse()
                    : mark.values && mark.values[mark.split]
                      ? mark.values[mark.split]
                      : d3
                            .set(
                                rawData.map(function(m) {
                                    return m[mark.split];
                                })
                            )
                            .values();
                d.tooltip = mark.tooltip;
                d3.select(this).attr(mark.attributes);
            });

            var _xformat = config.marks
                .map(function(m) {
                    return m.summarizeX === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.x.format);
            var _yformat = config.marks
                .map(function(m) {
                    return m.summarizeY === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.y.format);
            bars.select('title').text(function(d) {
                var tt = d.tooltip || '';
                return tt
                    .replace(/\$x/g, _xformat(d.values.x))
                    .replace(/\$y/g, _yformat(d.values.y))
                    .replace(/\[(.+?)\]/g, function(str, orig) {
                        return d.values.raw[0][orig];
                    });
            });

            var _barsTrans = config.transitions ? bars.transition() : bars;
            _barsTrans
                .attr('x', function(d) {
                    if (d.arrange === 'stacked' || !d.arrange) {
                        return d.values.start !== undefined ? _this.x(d.values.start) : _this.x(0);
                    } else {
                        return _this.x(0);
                    }
                })
                .attr('y', function(d) {
                    if (d.arrange === 'nested') {
                        var position = d.subcats.indexOf(d.key);
                        var offset = position
                            ? _this.y.rangeBand() / (d.subcats.length * 0.75) / position
                            : _this.y.rangeBand();
                        return _this.y(d.values.y) + (_this.y.rangeBand() - offset) / 2;
                    } else if (d.arrange === 'grouped') {
                        var _position2 = d.subcats.indexOf(d.key);
                        return (
                            _this.y(d.values.y) +
                            _this.y.rangeBand() / d.subcats.length * _position2
                        );
                    } else {
                        return _this.y(d.values.y);
                    }
                })
                .attr('width', function(d) {
                    return _this.x(d.values.x) - _this.x(0);
                })
                .attr('height', function(d) {
                    if (config.y.type === 'quantile') {
                        return 20;
                    } else if (d.arrange === 'nested') {
                        var position = d.subcats.indexOf(d.key);
                        return position
                            ? _this.y.rangeBand() / (d.subcats.length * 0.75) / position
                            : _this.y.rangeBand();
                    } else if (d.arrange === 'grouped') {
                        return _this.y.rangeBand() / d.subcats.length;
                    } else {
                        return _this.y.rangeBand();
                    }
                });
        } else if (['linear', 'log'].indexOf(config.x.type) > -1 && config.x.bin) {
            oldBarsTrans.attr('y', this.y(0)).attr('height', 0);

            oldBarGroupsTrans.remove();

            nu_bar_groups = bar_groups.enter().append('g').attr('class', function(d) {
                return 'bar-group ' + d.key;
            });
            nu_bar_groups.append('title');

            bars = bar_groups.selectAll('rect').data(
                function(d) {
                    return d.values instanceof Array ? d.values : [d];
                },
                function(d) {
                    return d.key;
                }
            );

            var _exitBars2 = config.transitions ? bars.exit().transition() : bars.exit();
            _exitBars2.attr('y', this.y(0)).attr('height', 0).remove();
            bars
                .enter()
                .append('rect')
                .attr('class', function(d) {
                    return 'wc-data-mark bar ' + d.key;
                })
                .style('clip-path', 'url(#' + this.id + ')')
                .attr('y', this.y(0))
                .attr('height', 0)
                .append('title');

            bars
                .attr('shape-rendering', 'crispEdges')
                .attr('stroke', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                })
                .attr('fill', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                });

            bars.each(function(d) {
                var mark = d3.select(this.parentNode.parentNode).datum();
                d.arrange = mark.split ? mark.arrange : null;
                d.subcats = config.legend.order
                    ? config.legend.order.slice().reverse()
                    : mark.values && mark.values[mark.split]
                      ? mark.values[mark.split]
                      : d3
                            .set(
                                rawData.map(function(m) {
                                    return m[mark.split];
                                })
                            )
                            .values();
                d3.select(this).attr(mark.attributes);
                var parent = d3.select(this.parentNode).datum();
                var rangeSet = parent.key.split(',').map(function(m) {
                    return +m;
                });
                d.rangeLow = d3.min(rangeSet);
                d.rangeHigh = d3.max(rangeSet);
                d.tooltip = mark.tooltip;
            });

            var _xformat2 = config.marks
                .map(function(m) {
                    return m.summarizeX === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.x.format);
            var _yformat2 = config.marks
                .map(function(m) {
                    return m.summarizeY === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.y.format);
            bars.select('title').text(function(d) {
                var tt = d.tooltip || '';
                return tt
                    .replace(/\$x/g, _xformat2(d.values.x))
                    .replace(/\$y/g, _yformat2(d.values.y))
                    .replace(/\[(.+?)\]/g, function(str, orig) {
                        return d.values.raw[0][orig];
                    });
            });

            var _barsTrans2 = config.transitions ? bars.transition() : bars;
            _barsTrans2
                .attr('x', function(d) {
                    return _this.x(d.rangeLow);
                })
                .attr('y', function(d) {
                    if (d.arrange !== 'stacked') {
                        return _this.y(d.values.y);
                    } else {
                        return _this.y(d.values.start);
                    }
                })
                .attr('width', function(d) {
                    return _this.x(d.rangeHigh) - _this.x(d.rangeLow);
                })
                .attr('height', function(d) {
                    return _this.y(0) - _this.y(d.values.y);
                });
        } else if (
            ['linear', 'log'].indexOf(config.y.type) > -1 &&
            config.y.type === 'linear' &&
            config.y.bin
        ) {
            oldBarsTrans.attr('x', this.x(0)).attr('width', 0);
            oldBarGroupsTrans.remove();

            nu_bar_groups = bar_groups.enter().append('g').attr('class', function(d) {
                return 'bar-group ' + d.key;
            });
            nu_bar_groups.append('title');

            bars = bar_groups.selectAll('rect').data(
                function(d) {
                    return d.values instanceof Array ? d.values : [d];
                },
                function(d) {
                    return d.key;
                }
            );

            var _exitBars3 = config.transitions ? bars.exit().transition() : bars.exit();
            _exitBars3.attr('x', this.x(0)).attr('width', 0).remove();
            bars
                .enter()
                .append('rect')
                .attr('class', function(d) {
                    return 'wc-data-mark bar ' + d.key;
                })
                .style('clip-path', 'url(#' + this.id + ')')
                .attr('x', this.x(0))
                .attr('width', 0)
                .append('title');

            bars
                .attr('shape-rendering', 'crispEdges')
                .attr('stroke', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                })
                .attr('fill', function(d) {
                    return _this.colorScale(d.values.raw[0][config.color_by]);
                });

            bars.each(function(d) {
                var mark = d3.select(this.parentNode.parentNode).datum();
                d.arrange = mark.split ? mark.arrange : null;
                d.subcats = config.legend.order
                    ? config.legend.order.slice().reverse()
                    : mark.values && mark.values[mark.split]
                      ? mark.values[mark.split]
                      : d3
                            .set(
                                rawData.map(function(m) {
                                    return m[mark.split];
                                })
                            )
                            .values();
                var parent = d3.select(this.parentNode).datum();
                var rangeSet = parent.key.split(',').map(function(m) {
                    return +m;
                });
                d.rangeLow = d3.min(rangeSet);
                d.rangeHigh = d3.max(rangeSet);
                d.tooltip = mark.tooltip;
            });

            var _xformat3 = config.marks
                .map(function(m) {
                    return m.summarizeX === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.x.format);
            var _yformat3 = config.marks
                .map(function(m) {
                    return m.summarizeY === 'percent';
                })
                .indexOf(true) > -1
                ? d3.format('0%')
                : d3.format(config.y.format);
            bars.select('title').text(function(d) {
                var tt = d.tooltip || '';
                return tt
                    .replace(/\$x/g, _xformat3(d.values.x))
                    .replace(/\$y/g, _yformat3(d.values.y))
                    .replace(/\[(.+?)\]/g, function(str, orig) {
                        return d.values.raw[0][orig];
                    });
            });

            var _barsTrans3 = config.transitions ? bars.transition() : bars;
            _barsTrans3
                .attr('x', function(d) {
                    if (d.arrange === 'stacked') {
                        return _this.x(d.values.start);
                    } else {
                        return _this.x(0);
                    }
                })
                .attr('y', function(d) {
                    return _this.y(d.rangeHigh);
                })
                .attr('width', function(d) {
                    return _this.x(d.values.x);
                })
                .attr('height', function(d) {
                    return _this.y(d.rangeLow) - _this.y(d.rangeHigh);
                });
        } else {
            oldBarsTrans.attr('y', this.y(0)).attr('height', 0);
            oldBarGroupsTrans.remove();
            bar_supergroups.remove();
        }

        //Link to the d3.selection from the data
        bar_supergroups.each(function(d) {
            d.supergroup = d3.select(this);
            d.groups = d.supergroup.selectAll('.bar-group');
        });
    }

    function drawLines(marks) {
        var _this = this;

        var config = this.config;
        var line = d3.svg
            .line()
            .interpolate(config.interpolate)
            .x(function(d) {
                return config.x.type === 'linear' || config.x.type == 'log'
                    ? _this.x(+d.values.x)
                    : config.x.type === 'time'
                      ? _this.x(new Date(d.values.x))
                      : _this.x(d.values.x) + _this.x.rangeBand() / 2;
            })
            .y(function(d) {
                return config.y.type === 'linear' || config.y.type == 'log'
                    ? _this.y(+d.values.y)
                    : config.y.type === 'time'
                      ? _this.y(new Date(d.values.y))
                      : _this.y(d.values.y) + _this.y.rangeBand() / 2;
            });

        var line_supergroups = this.svg.selectAll('.line-supergroup').data(marks, function(d, i) {
            return i + '-' + d.per.join('-');
        });

        line_supergroups.enter().append('g').attr('class', function(d) {
            return 'supergroup line-supergroup ' + d.id;
        });

        line_supergroups.exit().remove();

        var line_grps = line_supergroups.selectAll('.line').data(
            function(d) {
                return d.data;
            },
            function(d) {
                return d.key;
            }
        );
        line_grps.exit().remove();
        var nu_line_grps = line_grps.enter().append('g').attr('class', function(d) {
            return d.key + ' line';
        });
        nu_line_grps.append('path');
        nu_line_grps.append('title');

        var linePaths = line_grps
            .select('path')
            .attr('class', 'wc-data-mark')
            .datum(function(d) {
                return d.values;
            })
            .attr('stroke', function(d) {
                return _this.colorScale(d[0].values.raw[0][config.color_by]);
            })
            .attr(
                'stroke-width',
                config.stroke_width ? config.stroke_width : config.flex_stroke_width
            )
            .attr('stroke-linecap', 'round')
            .attr('fill', 'none');
        var linePathsTrans = config.transitions ? linePaths.transition() : linePaths;
        linePathsTrans.attr('d', line);

        line_grps.each(function(d) {
            var mark = d3.select(this.parentNode).datum();
            d.tooltip = mark.tooltip;
            d3.select(this).select('path').attr(mark.attributes);
        });

        line_grps.select('title').text(function(d) {
            var tt = d.tooltip || '';
            var xformat = config.x.summary === 'percent'
                ? d3.format('0%')
                : d3.format(config.x.format);
            var yformat = config.y.summary === 'percent'
                ? d3.format('0%')
                : d3.format(config.y.format);
            return tt
                .replace(/\$x/g, xformat(d.values.x))
                .replace(/\$y/g, yformat(d.values.y))
                .replace(/\[(.+?)\]/g, function(str, orig) {
                    return d.values[0].values.raw[0][orig];
                });
        });

        //Link to the d3.selection from the data
        line_supergroups.each(function(d) {
            d.supergroup = d3.select(this);
            d.groups = d.supergroup.selectAll('g.line');
            d.paths = d.groups.select('path');
        });
        return line_grps;
    }

    function drawPoints(marks) {
        var _this = this;

        var config = this.config;

        var point_supergroups = this.svg.selectAll('.point-supergroup').data(marks, function(d, i) {
            return i + '-' + d.per.join('-');
        });

        point_supergroups.enter().append('g').attr('class', function(d) {
            return 'supergroup point-supergroup ' + d.id;
        });

        point_supergroups.exit().remove();

        var points = point_supergroups.selectAll('.point').data(
            function(d) {
                return d.data;
            },
            function(d) {
                return d.key;
            }
        );
        var oldPoints = points.exit();

        var oldPointsTrans = config.transitions
            ? oldPoints.selectAll('circle').transition()
            : oldPoints.selectAll('circle');
        oldPointsTrans.attr('r', 0);

        var oldPointGroupTrans = config.transitions ? oldPoints.transition() : oldPoints;
        oldPointGroupTrans.remove();

        var nupoints = points.enter().append('g').attr('class', function(d) {
            return d.key + ' point';
        });
        nupoints.append('circle').attr('class', 'wc-data-mark').attr('r', 0);
        nupoints.append('title');
        //static attributes
        points
            .select('circle')
            .attr(
                'fill-opacity',
                config.fill_opacity || config.fill_opacity === 0 ? config.fill_opacity : 0.6
            )
            .attr('fill', function(d) {
                return _this.colorScale(d.values.raw[0][config.color_by]);
            })
            .attr('stroke', function(d) {
                return _this.colorScale(d.values.raw[0][config.color_by]);
            });
        //attach mark info
        points.each(function(d) {
            var mark = d3.select(this.parentNode).datum();
            d.mark = mark;
            d3.select(this).select('circle').attr(mark.attributes);
        });
        //animated attributes
        var pointsTrans = config.transitions
            ? points.select('circle').transition()
            : points.select('circle');
        pointsTrans
            .attr('r', function(d) {
                return d.mark.radius || config.flex_point_size;
            })
            .attr('cx', function(d) {
                var x_pos = _this.x(d.values.x) || 0;
                return config.x.type === 'ordinal' ? x_pos + _this.x.rangeBand() / 2 : x_pos;
            })
            .attr('cy', function(d) {
                var y_pos = _this.y(d.values.y) || 0;
                return config.y.type === 'ordinal' ? y_pos + _this.y.rangeBand() / 2 : y_pos;
            });

        points.select('title').text(function(d) {
            var tt = d.mark.tooltip || '';
            var xformat = config.x.summary === 'percent'
                ? d3.format('0%')
                : config.x.type === 'time'
                  ? d3.time.format(config.x.format)
                  : d3.format(config.x.format);
            var yformat = config.y.summary === 'percent'
                ? d3.format('0%')
                : config.y.type === 'time'
                  ? d3.time.format(config.y.format)
                  : d3.format(config.y.format);
            return tt
                .replace(
                    /\$x/g,
                    config.x.type === 'time' ? xformat(new Date(d.values.x)) : xformat(d.values.x)
                )
                .replace(
                    /\$y/g,
                    config.y.type === 'time' ? yformat(new Date(d.values.y)) : yformat(d.values.y)
                )
                .replace(/\[(.+?)\]/g, function(str, orig) {
                    return d.values.raw[0][orig];
                });
        });

        //Link to the d3.selection from the data
        point_supergroups.each(function(d) {
            d.supergroup = d3.select(this);
            d.groups = d.supergroup.selectAll('g.point');
            d.circles = d.groups.select('circle');
        });

        return points;
    }

    function drawText(marks) {
        var _this = this;

        var config = this.config;

        var textSupergroups = this.svg.selectAll('.text-supergroup').data(marks, function(d, i) {
            return i + '-' + d.per.join('-');
        });

        textSupergroups.enter().append('g').attr('class', function(d) {
            return 'supergroup text-supergroup ' + d.id;
        });

        textSupergroups.exit().remove();

        var texts = textSupergroups.selectAll('.text').data(
            function(d) {
                return d.data;
            },
            function(d) {
                return d.key;
            }
        );
        var oldTexts = texts.exit();

        // don't need to transition position of outgoing text
        // const oldTextsTrans = config.transitions ? oldTexts.selectAll('text').transition() : oldTexts.selectAll('text');

        var oldTextGroupTrans = config.transitions ? oldTexts.transition() : oldTexts;
        oldTextGroupTrans.remove();

        var nutexts = texts.enter().append('g').attr('class', function(d) {
            return d.key + ' text';
        });
        nutexts.append('text').attr('class', 'wc-data-mark');
        // don't need to set initial location for incoming text

        // attach mark info
        function attachMarks(d) {
            d.mark = d3.select(this.parentNode).datum();
            d3.select(this).select('text').attr(d.mark.attributes);
        }
        texts.each(attachMarks);

        // parse text like tooltips
        texts.select('text').text(function(d) {
            var tt = d.mark.text || '';
            var xformat = config.x.summary === 'percent'
                ? d3.format('0%')
                : config.x.type === 'time'
                  ? d3.time.format(config.x.format)
                  : d3.format(config.x.format);
            var yformat = config.y.summary === 'percent'
                ? d3.format('0%')
                : config.y.type === 'time'
                  ? d3.time.format(config.y.format)
                  : d3.format(config.y.format);
            return tt
                .replace(
                    /\$x/g,
                    config.x.type === 'time' ? xformat(new Date(d.values.x)) : xformat(d.values.x)
                )
                .replace(
                    /\$y/g,
                    config.y.type === 'time' ? yformat(new Date(d.values.y)) : yformat(d.values.y)
                )
                .replace(/\[(.+?)\]/g, function(str, orig) {
                    return d.values.raw[0][orig];
                });
        });
        // animated attributes
        var textsTrans = config.transitions
            ? texts.select('text').transition()
            : texts.select('text');
        textsTrans
            .attr('x', function(d) {
                var xPos = _this.x(d.values.x) || 0;
                return config.x.type === 'ordinal' ? xPos + _this.x.rangeBand() / 2 : xPos;
            })
            .attr('y', function(d) {
                var yPos = _this.y(d.values.y) || 0;
                return config.y.type === 'ordinal' ? yPos + _this.y.rangeBand() / 2 : yPos;
            });
        //add a reference to the selection from it's data
        textSupergroups.each(function(d) {
            d.supergroup = d3.select(this);
            d.groups = d.supergroup.selectAll('g.text');
            d.texts = d.groups.select('text');
        });
        return texts;
    }

    function destroy() {
        var destroyControls = arguments.length > 0 && arguments[0] !== undefined
            ? arguments[0]
            : true;

        //run onDestroy callback
        this.events.onDestroy.call(this);

        //remove resize event listener
        var context = this;
        d3.select(window).on('resize.' + context.element + context.id, null);

        //destroy controls
        if (destroyControls && this.controls) {
            this.controls.destroy();
        }

        //unmount chart wrapper
        this.wrap.remove();
    }

    var chartProto = {
        raw_data: [],
        config: {}
    };

    var chart = Object.create(chartProto, {
        checkRequired: { value: checkRequired },
        consolidateData: { value: consolidateData },
        draw: { value: draw },
        destroy: { value: destroy },
        drawArea: { value: drawArea },
        drawBars: { value: drawBars },
        drawGridlines: { value: drawGridLines },
        drawLines: { value: drawLines },
        drawPoints: { value: drawPoints },
        drawText: { value: drawText },
        init: { value: init },
        layout: { value: layout },
        makeLegend: { value: makeLegend },
        resize: { value: resize },
        setColorScale: { value: setColorScale },
        setDefaults: { value: setDefaults },
        setMargins: { value: setMargins },
        textSize: { value: textSize },
        transformData: { value: transformData },
        updateDataMarks: { value: updateDataMarks },
        xScaleAxis: { value: xScaleAxis },
        yScaleAxis: { value: yScaleAxis }
    });

    var chartCount = 0;

    function createChart() {
        var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        var controls = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

        var thisChart = Object.create(chart);

        thisChart.div = element;

        thisChart.config = Object.create(config);

        thisChart.controls = controls;

        thisChart.raw_data = [];

        thisChart.filters = [];

        thisChart.marks = [];

        thisChart.wrap = d3.select(thisChart.div).append('div').datum(thisChart);

        thisChart.events = {
            onInit: function onInit() {},
            onLayout: function onLayout() {},
            onPreprocess: function onPreprocess() {},
            onDatatransform: function onDatatransform() {},
            onDraw: function onDraw() {},
            onResize: function onResize() {},
            onDestroy: function onDestroy() {}
        };

        thisChart.on = function(event, callback) {
            var possible_events = [
                'init',
                'layout',
                'preprocess',
                'datatransform',
                'draw',
                'resize',
                'destroy'
            ];
            if (possible_events.indexOf(event) < 0) {
                return;
            }
            if (callback) {
                thisChart.events['on' + event.charAt(0).toUpperCase() + event.slice(1)] = callback;
            }
        };

        //increment thisChart count to get unique thisChart id
        chartCount++;

        thisChart.id = chartCount;

        return thisChart;
    }

    function changeOption(option, value, callback) {
        var _this = this;

        this.targets.forEach(function(e) {
            if (option instanceof Array) {
                option.forEach(function(o) {
                    return _this.stringAccessor(e.config, o, value);
                });
            } else {
                _this.stringAccessor(e.config, option, value);
            }
            //call callback function if provided
            if (callback) {
                callback();
            }
            e.draw();
        });
    }

    function checkRequired$1(dataset) {
        if (!dataset[0] || !this.config.inputs) {
            return;
        }
        var colnames = d3.keys(dataset[0]);
        this.config.inputs.forEach(function(e, i) {
            if (e.type === 'subsetter' && colnames.indexOf(e.value_col) === -1) {
                throw new Error(
                    'Error in settings object: the value "' +
                        e.value_col +
                        '" does not match any column in the provided dataset.'
                );
            }
        });
    }

    function controlUpdate() {
        var _this = this;

        if (this.config.inputs && this.config.inputs.length && this.config.inputs[0]) {
            this.config.inputs.forEach(function(e) {
                return _this.makeControlItem(e);
            });
        }
    }

    function destroy$1() {
        //unmount controls wrapper
        this.wrap.remove();
    }

    function init$1(data) {
        this.data = data;
        if (!this.config.builder) {
            this.checkRequired(this.data);
        }
        this.layout();
    }

    function layout$1() {
        this.wrap.selectAll('*').remove();
        this.ready = true;
        this.controlUpdate();
    }

    function makeControlItem(control) {
        var control_wrap = this.wrap
            .append('div')
            .attr('class', 'control-group')
            .classed('inline', control.inline)
            .datum(control);
        var ctrl_label = control_wrap
            .append('span')
            .attr('class', 'wc-control-label')
            .text(control.label);
        if (control.required) {
            ctrl_label.append('span').attr('class', 'label label-required').text('Required');
        }
        control_wrap.append('span').attr('class', 'span-description').text(control.description);

        if (control.type === 'text') {
            this.makeTextControl(control, control_wrap);
        } else if (control.type === 'number') {
            this.makeNumberControl(control, control_wrap);
        } else if (control.type === 'list') {
            this.makeListControl(control, control_wrap);
        } else if (control.type === 'dropdown') {
            this.makeDropdownControl(control, control_wrap);
        } else if (control.type === 'btngroup') {
            this.makeBtnGroupControl(control, control_wrap);
        } else if (control.type === 'checkbox') {
            this.makeCheckboxControl(control, control_wrap);
        } else if (control.type === 'radio') {
            this.makeRadioControl(control, control_wrap);
        } else if (control.type === 'subsetter') {
            this.makeSubsetterControl(control, control_wrap);
        } else {
            throw new Error(
                'Each control must have a type! Choose from: "text", "number", "list", "dropdown", "btngroup", "checkbox", "radio", "subsetter"'
            );
        }
    }

    function makeBtnGroupControl(control, control_wrap) {
        var _this = this;

        var option_data = control.values ? control.values : d3.keys(this.data[0]);

        var btn_wrap = control_wrap.append('div').attr('class', 'btn-group');

        var changers = btn_wrap
            .selectAll('button')
            .data(option_data)
            .enter()
            .append('button')
            .attr('class', 'btn btn-default btn-sm')
            .text(function(d) {
                return d;
            })
            .classed('btn-primary', function(d) {
                return _this.stringAccessor(_this.targets[0].config, control.option) === d;
            });

        changers.on('click', function(d) {
            changers.each(function(e) {
                d3.select(this).classed('btn-primary', e === d);
            });
            _this.changeOption(control.option, d, control.callback);
        });
    }

    function makeCheckboxControl(control, control_wrap) {
        var _this = this;

        var changer = control_wrap
            .append('input')
            .attr('type', 'checkbox')
            .attr('class', 'changer')
            .datum(control)
            .property('checked', function(d) {
                return _this.stringAccessor(_this.targets[0].config, control.option);
            });

        changer.on('change', function(d) {
            var value = changer.property('checked');
            _this.changeOption(d.option, value, control.callback);
        });
    }

    function makeDropdownControl(control, control_wrap) {
        var _this = this;

        var mainOption = control.option || control.options[0];
        var changer = control_wrap
            .append('select')
            .attr('class', 'changer')
            .attr('multiple', control.multiple ? true : null)
            .datum(control);

        var opt_values = control.values && control.values instanceof Array
            ? control.values
            : control.values
              ? d3
                    .set(
                        this.data.map(function(m) {
                            return m[_this.targets[0].config[control.values]];
                        })
                    )
                    .values()
              : d3.keys(this.data[0]);

        if (!control.require || control.none) {
            opt_values.unshift('None');
        }

        var options = changer
            .selectAll('option')
            .data(opt_values)
            .enter()
            .append('option')
            .text(function(d) {
                return d;
            })
            .property('selected', function(d) {
                return _this.stringAccessor(_this.targets[0].config, mainOption) === d;
            });

        changer.on('change', function(d) {
            var value = changer.property('value') === 'None' ? null : changer.property('value');

            if (control.multiple) {
                value = options
                    .filter(function(f) {
                        return d3.select(this).property('selected');
                    })[0]
                    .map(function(m) {
                        return d3.select(m).property('value');
                    })
                    .filter(function(f) {
                        return f !== 'None';
                    });
            }

            if (control.options) {
                _this.changeOption(control.options, value, control.callback);
            } else {
                _this.changeOption(control.option, value, control.callback);
            }
        });

        return changer;
    }

    function makeListControl(control, control_wrap) {
        var _this = this;

        var changer = control_wrap
            .append('input')
            .attr('type', 'text')
            .attr('class', 'changer')
            .datum(control)
            .property('value', function(d) {
                return _this.stringAccessor(_this.targets[0].config, control.option);
            });

        changer.on('change', function(d) {
            var value = changer.property('value')
                ? changer.property('value').split(',').map(function(m) {
                      return m.trim();
                  })
                : null;
            _this.changeOption(control.option, value, control.callback);
        });
    }

    function makeNumberControl(control, control_wrap) {
        var _this = this;

        var changer = control_wrap
            .append('input')
            .attr('type', 'number')
            .attr('min', control.min !== undefined ? control.min : 0)
            .attr('max', control.max)
            .attr('step', control.step || 1)
            .attr('class', 'changer')
            .datum(control)
            .property('value', function(d) {
                return _this.stringAccessor(_this.targets[0].config, control.option);
            });

        changer.on('change', function(d) {
            var value = +changer.property('value');
            _this.changeOption(control.option, value, control.callback);
        });
    }

    function makeRadioControl(control, control_wrap) {
        var _this = this;

        var changers = control_wrap
            .selectAll('label')
            .data(control.values || d3.keys(this.data[0]))
            .enter()
            .append('label')
            .attr('class', 'radio')
            .text(function(d, i) {
                return control.relabels ? control.relabels[i] : d;
            })
            .append('input')
            .attr('type', 'radio')
            .attr('class', 'changer')
            .attr('name', control.option.replace('.', '-') + '-' + this.targets[0].id)
            .property('value', function(d) {
                return d;
            })
            .property('checked', function(d) {
                return _this.stringAccessor(_this.targets[0].config, control.option) === d;
            });

        changers.on('change', function(d) {
            var value = null;
            changers.each(function(c) {
                if (d3.select(this).property('checked')) {
                    value = d3.select(this).property('value') === 'none' ? null : c;
                }
            });
            _this.changeOption(control.option, value, control.callback);
        });
    }

    function makeSubsetterControl(control, control_wrap) {
        var targets = this.targets;
        var changer = control_wrap
            .append('select')
            .attr('class', 'changer')
            .attr('multiple', control.multiple ? true : null)
            .datum(control);

        var option_data = control.values
            ? control.values
            : d3
                  .set(
                      this.data
                          .map(function(m) {
                              return m[control.value_col];
                          })
                          .filter(function(f) {
                              return f;
                          })
                  )
                  .values();
        option_data.sort(naturalSorter);

        control.start = control.start ? control.start : control.loose ? option_data[0] : null;

        if (!control.multiple && !control.start) {
            option_data.unshift('All');
        }

        control.loose = !control.loose && control.start ? true : control.loose;

        var options = changer
            .selectAll('option')
            .data(option_data)
            .enter()
            .append('option')
            .text(function(d) {
                return d;
            })
            .property('selected', function(d) {
                return d === control.start;
            });

        targets.forEach(function(e) {
            var match = e.filters
                .slice()
                .map(function(m) {
                    return m.col === control.value_col;
                })
                .indexOf(true);
            if (match > -1) {
                e.filters[match] = {
                    col: control.value_col,
                    val: control.start ? control.start : 'All',
                    choices: option_data,
                    loose: control.loose
                };
            } else {
                e.filters.push({
                    col: control.value_col,
                    val: control.start ? control.start : 'All',
                    choices: option_data,
                    loose: control.loose
                });
            }
        });

        function setSubsetter(target, obj) {
            var match = -1;
            target.filters.forEach(function(e, i) {
                if (e.col === obj.col) {
                    match = i;
                }
            });
            if (match > -1) {
                target.filters[match] = obj;
            }
        }

        changer.on('change', function(d) {
            if (control.multiple) {
                var values = options
                    .filter(function(f) {
                        return d3.select(this).property('selected');
                    })[0]
                    .map(function(m) {
                        return d3.select(m).property('text');
                    });

                var new_filter = {
                    col: control.value_col,
                    val: values,
                    choices: option_data,
                    loose: control.loose
                };
                targets.forEach(function(e) {
                    setSubsetter(e, new_filter);
                    //call callback function if provided
                    if (control.callback) {
                        control.callback();
                    }
                    e.draw();
                });
            } else {
                var value = d3.select(this).select('option:checked').property('text');
                var _new_filter = {
                    col: control.value_col,
                    val: value,
                    choices: option_data,
                    loose: control.loose
                };
                targets.forEach(function(e) {
                    setSubsetter(e, _new_filter);
                    //call callback function if provided
                    if (control.callback) {
                        control.callback();
                    }
                    e.draw();
                });
            }
        });
    }

    function makeTextControl(control, control_wrap) {
        var _this = this;

        var changer = control_wrap
            .append('input')
            .attr('type', 'text')
            .attr('class', 'changer')
            .datum(control)
            .property('value', function(d) {
                return _this.stringAccessor(_this.targets[0].config, control.option);
            });

        changer.on('change', function(d) {
            var value = changer.property('value');
            _this.changeOption(control.option, value, control.callback);
        });
    }

    function stringAccessor(o, s, v) {
        //adapted from http://jsfiddle.net/alnitak/hEsys/
        s = s.replace(/\[(\w+)\]/g, '.$1');
        s = s.replace(/^\./, '');
        var a = s.split('.');
        for (var i = 0, n = a.length; i < n; ++i) {
            var k = a[i];
            if (k in o) {
                if (i == n - 1 && v !== undefined) o[k] = v;
                o = o[k];
            } else {
                return;
            }
        }
        return o;
    }

    var controls = {
        changeOption: changeOption,
        checkRequired: checkRequired$1,
        controlUpdate: controlUpdate,
        destroy: destroy$1,
        init: init$1,
        layout: layout$1,
        makeControlItem: makeControlItem,
        makeBtnGroupControl: makeBtnGroupControl,
        makeCheckboxControl: makeCheckboxControl,
        makeDropdownControl: makeDropdownControl,
        makeListControl: makeListControl,
        makeNumberControl: makeNumberControl,
        makeRadioControl: makeRadioControl,
        makeSubsetterControl: makeSubsetterControl,
        makeTextControl: makeTextControl,
        stringAccessor: stringAccessor
    };

    function createControls() {
        var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

        var thisControls = Object.create(controls);

        thisControls.div = element;

        thisControls.config = Object.create(config);
        thisControls.config.inputs = thisControls.config.inputs || [];

        thisControls.targets = [];

        if (config.location === 'bottom') {
            thisControls.wrap = d3.select(element).append('div').attr('class', 'wc-controls');
        } else {
            thisControls.wrap = d3
                .select(element)
                .insert('div', ':first-child')
                .attr('class', 'wc-controls');
        }

        thisControls.wrap.datum(thisControls);

        return thisControls;
    }

    var _typeof = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'
        ? function(obj) {
              return typeof obj;
          }
        : function(obj) {
              return obj &&
                  typeof Symbol === 'function' &&
                  obj.constructor === Symbol &&
                  obj !== Symbol.prototype
                  ? 'symbol'
                  : typeof obj;
          };

    function clone(obj) {
        var copy = void 0;

        //boolean, number, string, null, undefined
        if ('object' != (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) || null == obj)
            return obj;

        //date
        if (obj instanceof Date) {
            copy = new Date();
            copy.setTime(obj.getTime());
            return copy;
        }

        //array
        if (obj instanceof Array) {
            copy = [];
            for (var i = 0, len = obj.length; i < len; i++) {
                copy[i] = clone(obj[i]);
            }
            return copy;
        }

        //object
        if (obj instanceof Object) {
            copy = {};
            for (var attr in obj) {
                if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
            }
            return copy;
        }

        throw new Error('Unable to copy [obj]! Its type is not supported.');
    }

    function applyFilters() {
        var _this = this;

        //If there are filters, return a filtered data array of the raw data.
        //Otherwise return the raw data.
        this.data.filtered = this.filters
            ? clone(this.data.raw).filter(function(d) {
                  var match = true;

                  _this.filters.forEach(function(filter) {
                      if (match === true && filter.val !== 'All')
                          match = filter.val instanceof Array
                              ? filter.val.indexOf(d[filter.col]) > -1
                              : filter.val === d[filter.col];
                  });

                  return match;
              })
            : clone(this.data.raw);
    }

    function updateDataObject() {
        this.data.raw = this.data.passed;
        this.data.filtered = this.data.passed;
        this.config.activePage = 0;
        this.config.startIndex = this.config.activePage * this.config.nRowsPerPage; // first row shown
        this.config.endIndex = this.config.startIndex + this.config.nRowsPerPage; // last row shown
    }

    function applySearchTerm(data) {
        var _this = this;

        if (this.searchable.searchTerm) {
            //Determine which rows contain input text.
            this.data.searched = this.data.filtered.filter(function(d) {
                var match = false;

                Object.keys(d)
                    .filter(function(key) {
                        return _this.config.cols.indexOf(key) > -1;
                    })
                    .forEach(function(var_name) {
                        if (match === false) {
                            var cellText = '' + d[var_name];
                            match =
                                cellText.toLowerCase().indexOf(_this.searchable.searchTerm) > -1;
                        }
                    });

                return match;
            });
            this.data.processing = this.data.searched;
        } else {
            //Otherwise delete previously searched data and set data to filtered data.
            delete this.data.searched;
            this.data.processing = this.data.filtered;
        }
    }

    /*------------------------------------------------------------------------------------------------\
  Check equality of two arrays (https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript)
 \------------------------------------------------------------------------------------------------*/

    // Warn if overriding existing method
    if (Array.prototype.equals)
        console.warn(
            "Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code."
        );
    // attach the .equals method to Array's prototype to call it on any array
    Array.prototype.equals = function(array) {
        // if the other array is a falsy value, return
        if (!array) return false;

        // compare lengths - can save a lot of time
        if (this.length != array.length) return false;

        for (var i = 0, l = this.length; i < l; i++) {
            // Check if we have nested arrays
            if (this[i] instanceof Array && array[i] instanceof Array) {
                // recurse into the nested arrays
                if (!this[i].equals(array[i])) return false;
            } else if (this[i] != array[i]) {
                // Warning - two different object instances will never be equal: {x:20} != {x:20}
                return false;
            }
        }
        return true;
    };
    // Hide method from for-in loops
    Object.defineProperty(Array.prototype, 'equals', { enumerable: false });

    function checkFilters() {
        if (this.filters) {
            this.currentFilters = this.filters.map(function(filter) {
                return filter.val;
            });

            //Reset pagination if filters have changed.
            if (!this.currentFilters.equals(this.previousFilters)) {
                this.config.activePage = 0;
                this.config.startIndex = this.config.activePage * this.config.nRowsPerPage; // first row shown
                this.config.endIndex = this.config.startIndex + this.config.nRowsPerPage; // last row shown
            }

            this.previousFilters = this.currentFilters;
        }
    }

    function updateTableHeaders() {
        var _this = this;

        this.thead_cells = this.thead
            .select('tr')
            .selectAll('th')
            .data(this.config.headers, function(d) {
                return d;
            });
        this.thead_cells.exit().remove();
        this.thead_cells.enter().append('th');
        this.thead_cells
            .sort(function(a, b) {
                return _this.config.headers.indexOf(a) - _this.config.headers.indexOf(b);
            })
            .attr('class', function(d) {
                return _this.config.cols[_this.config.headers.indexOf(d)];
            }) // associate column header with column name
            .text(function(d) {
                return d;
            });
    }

    function drawTableBody() {
        var _this = this;

        var table = this;

        //Define table body rows.
        var rows = this.tbody.selectAll('tr').data(this.data.processing).enter().append('tr');

        //Define table body cells.
        var cells = rows.selectAll('td').data(function(d) {
            return _this.config.cols.map(function(key) {
                return { col: key, text: d[key] };
            });
        });
        cells.exit().remove();
        cells.enter().append('td');
        cells
            .sort(function(a, b) {
                return _this.config.cols.indexOf(a.col) - _this.config.cols.indexOf(b.col);
            })
            .attr('class', function(d) {
                return d.col;
            })
            .each(function(d) {
                var cell = d3.select(this);

                //Apply text in data as html or as plain text.
                if (table.config.as_html) {
                    cell.html(d.text);
                } else {
                    cell.text(d.text);
                }
            });
    }

    function dynamicLayout() {
        var widths = {
            table: this.table.select('thead').node().offsetWidth,
            top:
                this.wrap.select('.table-top .searchable-container').node().offsetWidth +
                    this.wrap.select('.table-top .sortable-container').node().offsetWidth,
            bottom:
                this.wrap.select('.table-bottom .pagination-container').node().offsetWidth +
                    this.wrap.select('.table-bottom .exportable-container').node().offsetWidth
        };

        if (
            widths.table < Math.max(widths.top, widths.bottom) &&
            this.config.layout === 'horizontal'
        ) {
            this.config.layout = 'vertical';
            this.wrap
                .style('display', 'inline-block')
                .selectAll('.table-top,.table-bottom')
                .style('display', 'inline-block')
                .selectAll('.interactivity')
                .style({
                    display: 'block',
                    clear: 'both'
                });
        } else if (
            widths.table >= Math.max(widths.top, widths.bottom) &&
            this.config.layout === 'vertical'
        ) {
            this.config.layout = 'horizontal';
            this.wrap
                .style('display', 'table')
                .selectAll('.table-top,.table-bottom')
                .style('display', 'block')
                .selectAll('.interactivity')
                .style({
                    display: 'inline-block',
                    float: function float() {
                        return select(this).classed('searchable-container') ||
                            select(this).classed('pagination-container')
                            ? 'right'
                            : null;
                    },
                    clear: null
                });
        }
    }

    function draw$1(passed_data) {
        var _this = this;

        var table = this;
        var config = this.config;

        this.data.passed = passed_data; // make passed data available on preprocess
        this.events.onPreprocess.call(this);

        if (!passed_data)
            //Apply filters if data is not passed to table.draw().
            applyFilters.call(this);
        else
            //Otherwise update data object.
            updateDataObject.call(this);

        //Compare current filter settings to previous filter settings, if any.
        checkFilters.call(this);

        //Filter data on search term if it exists and set data to searched data.
        applySearchTerm.call(this);

        this.searchable.wrap
            .select('.nNrecords')
            .text(
                this.data.processing.length === this.data.raw.length
                    ? this.data.raw.length + ' records displayed'
                    : this.data.processing.length +
                          '/' +
                          this.data.raw.length +
                          ' records displayed'
            );

        //Update table headers.
        updateTableHeaders.call(this);

        //Clear table body rows.
        this.tbody.selectAll('tr').remove();

        //Print a note that no data was selected for empty tables.
        if (this.data.processing.length === 0) {
            this.tbody
                .append('tr')
                .classed('no-data', true)
                .append('td')
                .attr('colspan', this.config.cols.length)
                .text('No data selected.');

            //Bind table filtered/searched data to table container.
            this.data.current = clone(this.data.processing);
            this.table.datum(this.table.current);

            //Add export.
            if (this.config.exportable)
                this.config.exports.forEach(function(fmt) {
                    _this.exportable.exports[fmt].call(_this, _this.data.processing);
                });

            //Add pagination.
            if (this.config.pagination)
                this.pagination.addPagination.call(this, this.data.processing);
        } else {
            //Sort data.
            if (this.config.sortable) {
                this.thead.selectAll('th').on('click', function(header) {
                    table.sortable.onClick.call(table, this, header);
                });

                if (this.sortable.order.length)
                    this.sortable.sortData.call(this, this.data.processing);
            }

            //Bind table filtered/searched data to table container.
            this.data.current = clone(this.data.processing);
            this.table.datum(this.data.current);

            //Add export.
            if (this.config.exportable)
                this.config.exports.forEach(function(fmt) {
                    _this.exportable.exports[fmt].call(_this, _this.data.processing);
                });

            //Add pagination.
            if (this.config.pagination) {
                this.pagination.addPagination.call(this, this.data.processing);

                //Apply pagination.
                this.data.processing = this.data.processing.filter(function(d, i) {
                    return _this.config.startIndex <= i && i < _this.config.endIndex;
                });
            }

            //Define table body rows.
            drawTableBody.call(this);
        }

        //Alter table layout if table is narrower than table top or bottom.
        dynamicLayout.call(this);

        this.events.onDraw.call(this);
    }

    function layout$2() {
        var context = this;

        this.searchable.wrap = this.wrap
            .select('.table-top')
            .append('div')
            .classed('interactivity searchable-container', true)
            .classed('hidden', !this.config.searchable);
        this.searchable.wrap.append('div').classed('search', true);
        this.searchable.wrap
            .select('.search')
            .append('input')
            .classed('search-box', true)
            .attr('placeholder', 'Search')
            .on('input', function() {
                context.searchable.searchTerm = this.value.toLowerCase() || null;
                context.config.activePage = 0;
                context.config.startIndex = context.config.activePage * context.config.nRowsPerPage; // first row shown
                context.config.endIndex = context.config.startIndex + context.config.nRowsPerPage; // last row shown
                context.draw();
            });
        this.searchable.wrap.select('.search').append('span').classed('nNrecords', true);
    }

    function searchable() {
        return {
            layout: layout$2
        };
    }

    function layout$3() {
        var _this = this;

        this.exportable.wrap = this.wrap
            .select('.table-bottom')
            .append('div')
            .classed('interactivity exportable-container', true)
            .classed('hidden', !this.config.exportable);

        this.exportable.wrap.append('span').text('Export:');

        if (this.config.exports && this.config.exports.length)
            this.config.exports.forEach(function(fmt) {
                _this.exportable.wrap
                    .append('a')
                    .classed('wc-button export', true)
                    .attr({
                        id: fmt
                    })
                    .text(fmt.toUpperCase());
            });
    }

    function csv(data) {
        var _this = this;

        var CSVarray = [];

        //add headers to CSV array
        var headers = this.config.headers.map(function(header) {
            return '"' + header.replace(/"/g, '""') + '"';
        });
        CSVarray.push(headers);

        //add rows to CSV array
        data.forEach(function(d, i) {
            var row = _this.config.cols.map(function(col) {
                var value = d[col];

                if (typeof value === 'string') value = value.replace(/"/g, '""');

                return '"' + value + '"';
            });

            CSVarray.push(row);
        });

        //transform CSV array into CSV string
        var CSV = new Blob([CSVarray.join('\n')], { type: 'text/csv;charset=utf-8;' }),
            fileName =
                'webchartsTableExport_' + d3.time.format('%Y-%m-%dT%H-%M-%S')(new Date()) + '.csv',
            link = this.wrap.select('.export#csv');

        if (navigator.msSaveBlob) {
            // IE 10+
            link.style({
                cursor: 'pointer',
                'text-decoration': 'underline',
                color: 'blue'
            });
            link.on('click', function() {
                navigator.msSaveBlob(CSV, fileName);
            });
        } else {
            // Browsers that support HTML5 download attribute
            if (link.node().download !== undefined) {
                var url = URL.createObjectURL(CSV);
                link.node().setAttribute('href', url);
                link.node().setAttribute('download', fileName);
            }
        }
    }

    function xlsx(data) {
        var _this = this;

        var sheetName = 'Selected Data',
            options = {
                bookType: 'xlsx',
                bookSST: true,
                type: 'binary'
            },
            arrayOfArrays = data.map(function(d) {
                return Object.keys(d)
                    .filter(function(key) {
                        return _this.config.cols.indexOf(key) > -1;
                    })
                    .map(function(key) {
                        return d[key];
                    });
            }),
            // convert data from array of objects to array of arrays.
            workbook = {
                SheetNames: [sheetName],
                Sheets: {}
            },
            cols = [];

        //Convert headers and data from array of arrays to sheet.
        workbook.Sheets[sheetName] = XLSX.utils.aoa_to_sheet(
            [this.config.headers].concat(arrayOfArrays)
        );

        //Add filters to spreadsheet.
        workbook.Sheets[sheetName]['!autofilter'] = {
            ref: 'A1:' + String.fromCharCode(64 + this.config.cols.length) + (data.length + 1)
        };

        //Define column widths in spreadsheet.
        this.table.selectAll('thead tr th').each(function() {
            cols.push({ wpx: this.offsetWidth });
        });
        workbook.Sheets[sheetName]['!cols'] = cols;

        var xlsx = XLSX.write(workbook, options),
            s2ab = function s2ab(s) {
                var buffer = new ArrayBuffer(s.length),
                    view = new Uint8Array(buffer);

                for (var i = 0; i !== s.length; ++i) {
                    view[i] = s.charCodeAt(i) & 0xff;
                }
                return buffer;
            }; // convert spreadsheet to binary or something, i don't know

        //transform CSV array into CSV string
        var blob = new Blob([s2ab(xlsx)], { type: 'application/octet-stream;' }),
            fileName =
                'webchartsTableExport_' + d3.time.format('%Y-%m-%dT%H-%M-%S')(new Date()) + '.xlsx',
            link = this.wrap.select('.export#xlsx');

        if (navigator.msSaveBlob) {
            // IE 10+
            link.style({
                cursor: 'pointer',
                'text-decoration': 'underline',
                color: 'blue'
            });
            link.on('click', function() {
                navigator.msSaveBlob(blob, fileName);
            });
        } else {
            // Browsers that support HTML5 download attribute
            if (link.node().download !== undefined) {
                var url = URL.createObjectURL(blob);
                link.node().setAttribute('href', url);
                link.node().setAttribute('download', fileName);
            }
        }
    }

    var exports$1 = {
        csv: csv,
        xlsx: xlsx
    };

    function exportable() {
        return {
            layout: layout$3,
            exports: exports$1
        };
    }

    function layout$4() {
        this.sortable.wrap = this.wrap
            .select('.table-top')
            .append('div')
            .classed('interactivity sortable-container', true)
            .classed('hidden', !this.config.sortable);
        this.sortable.wrap
            .append('div')
            .classed('instruction', true)
            .text('Click column headers to sort.');
    }

    function onClick(th, header) {
        var context = this,
            selection = d3.select(th),
            col = this.config.cols[this.config.headers.indexOf(header)];

        //Check if column is already a part of current sort order.
        var sortItem = this.sortable.order.filter(function(item) {
            return item.col === col;
        })[0];

        //If it isn't, add it to sort order.
        if (!sortItem) {
            sortItem = {
                col: col,
                direction: 'ascending',
                wrap: this.sortable.wrap
                    .append('div')
                    .datum({ key: col })
                    .classed('wc-button sort-box', true)
                    .text(header)
            };
            sortItem.wrap.append('span').classed('sort-direction', true).html('&darr;');
            sortItem.wrap.append('span').classed('remove-sort', true).html('&#10060;');
            this.sortable.order.push(sortItem);
        } else {
            //Otherwise reverse its sort direction.
            sortItem.direction = sortItem.direction === 'ascending' ? 'descending' : 'ascending';
            sortItem.wrap
                .select('span.sort-direction')
                .html(sortItem.direction === 'ascending' ? '&darr;' : '&uarr;');
        }

        //Hide sort instructions.
        this.sortable.wrap.select('.instruction').classed('hidden', true);

        //Add sort container deletion functionality.
        this.sortable.order.forEach(function(item, i) {
            item.wrap.on('click', function(d) {
                //Remove column's sort container.
                d3.select(this).remove();

                //Remove column from sort.
                context.sortable.order.splice(
                    context.sortable.order
                        .map(function(d) {
                            return d.col;
                        })
                        .indexOf(d.key),
                    1
                );

                //Display sorting instruction.
                context.sortable.wrap
                    .select('.instruction')
                    .classed('hidden', context.sortable.order.length);

                //Redraw chart.
                context.draw();
            });
        });

        //Redraw chart.
        this.draw();
    }

    function sortData(data) {
        var _this = this;

        data = data.sort(function(a, b) {
            var order = 0;

            _this.sortable.order.forEach(function(item) {
                var aCell = a[item.col],
                    bCell = b[item.col];

                if (order === 0) {
                    if (
                        (item.direction === 'ascending' && aCell < bCell) ||
                        (item.direction === 'descending' && aCell > bCell)
                    )
                        order = -1;
                    else if (
                        (item.direction === 'ascending' && aCell > bCell) ||
                        (item.direction === 'descending' && aCell < bCell)
                    )
                        order = 1;
                }
            });

            return order;
        });
    }

    function sortable() {
        return {
            layout: layout$4,
            onClick: onClick,
            sortData: sortData,
            order: []
        };
    }

    function layout$5() {
        this.pagination.wrap = this.wrap
            .select('.table-bottom')
            .append('div')
            .classed('interactivity pagination-container', true)
            .classed('hidden', !this.config.pagination);
    }

    function updatePagination() {
        var _this = this;

        //Reset pagination.
        this.pagination.links.classed('active', false);

        //Set to active the selected page link.
        var activePage = this.pagination.links
            .filter(function(link) {
                return +link.rel === +_this.config.activePage;
            })
            .classed('active', true);

        //Define and draw selected page.
        this.config.startIndex = this.config.activePage * this.config.nRowsPerPage;
        this.config.endIndex = this.config.startIndex + this.config.nRowsPerPage;

        //Redraw table.
        this.draw();
    }

    function addLinks() {
        var _this = this;

        //Count rows.

        this.pagination.wrap.selectAll('a,span').remove();

        var _loop = function _loop(i) {
            _this.pagination.wrap
                .append('a')
                .datum({ rel: i })
                .attr({
                    rel: i
                })
                .text(i + 1)
                .classed('wc-button page-link', true)
                .classed('active', function(d) {
                    return d.rel == _this.config.activePage;
                })
                .classed('hidden', function() {
                    return _this.config.activePage < _this.config.nPageLinksDisplayed
                        ? i >= _this.config.nPageLinksDisplayed // first nPageLinksDisplayed pages
                        : _this.config.activePage >=
                              _this.config.nPages - _this.config.nPageLinksDisplayed
                          ? i < _this.config.nPages - _this.config.nPageLinksDisplayed // last nPageLinksDisplayed pages
                          : i <
                                _this.config.activePage -
                                    (Math.ceil(_this.config.nPageLinksDisplayed / 2) - 1) ||
                                _this.config.activePage + _this.config.nPageLinksDisplayed / 2 < i; // nPageLinksDisplayed < activePage or activePage < (nPages - nPageLinksDisplayed)
                });
        };

        for (var i = 0; i < this.config.nPages; i++) {
            _loop(i);
        }

        this.pagination.links = this.pagination.wrap.selectAll('a.page-link');
    }

    function addArrows() {
        var prev = this.config.activePage - 1,
            next = this.config.activePage + 1;
        if (prev < 0) prev = 0; // nothing before the first page
        if (next >= this.config.nPages) next = this.config.nPages - 1; // nothing after the last page

        /**-------------------------------------------------------------------------------------------\
      Left side
    \-------------------------------------------------------------------------------------------**/

        this.pagination.wrap
            .insert('span', ':first-child')
            .classed('dot-dot-dot', true)
            .text('...')
            .classed('hidden', this.config.activePage < this.config.nPageLinksDisplayed);

        this.pagination.prev = this.pagination.wrap
            .insert('a', ':first-child')
            .classed('wc-button arrow-link wc-left', true)
            .classed('hidden', this.config.activePage == 0)
            .attr({
                rel: prev
            })
            .text('<');

        this.pagination.doublePrev = this.pagination.wrap
            .insert('a', ':first-child')
            .classed('wc-button arrow-link wc-left double', true)
            .classed('hidden', this.config.activePage == 0)
            .attr({
                rel: 0
            })
            .text('<<');

        /**-------------------------------------------------------------------------------------------\
      Right side
    \-------------------------------------------------------------------------------------------**/

        this.pagination.wrap
            .append('span')
            .classed('dot-dot-dot', true)
            .text('...')
            .classed(
                'hidden',
                this.config.activePage >=
                    Math.max(
                        this.config.nPageLinksDisplayed,
                        this.config.nPages - this.config.nPageLinksDisplayed
                    ) || this.config.nPages <= this.config.nPageLinksDisplayed
            );
        this.pagination.next = this.pagination.wrap
            .append('a')
            .classed('wc-button arrow-link wc-right', true)
            .classed(
                'hidden',
                this.config.activePage == this.config.nPages - 1 || this.config.nPages == 0
            )
            .attr({
                rel: next
            })
            .text('>');

        this.pagination.doubleNext = this.pagination.wrap
            .append('a')
            .classed('wc-button arrow-link wc-right double', true)
            .classed(
                'hidden',
                this.config.activePage == this.config.nPages - 1 || this.config.nPages == 0
            )
            .attr({
                rel: this.config.nPages - 1
            })
            .text('>>');

        this.pagination.arrows = this.pagination.wrap.selectAll('a.arrow-link');
        this.pagination.doubleArrows = this.pagination.wrap.selectAll('a.double-arrow-link');
    }

    function addPagination(data) {
        var context = this;

        //Calculate number of pages needed and create a link for each page.
        this.config.nRows = data.length;
        this.config.nPages = Math.ceil(this.config.nRows / this.config.nRowsPerPage);

        //hide the pagination if there is only one page
        this.config.paginationHidden = this.config.nPages === 1;
        this.pagination.wrap.classed('hidden', this.config.paginationHidden);

        //Render page links.
        addLinks.call(this);

        //Render a different page on click.
        this.pagination.links.on('click', function() {
            context.config.activePage = +d3.select(this).attr('rel');
            updatePagination.call(context);
        });

        //Render arrow links.
        addArrows.call(this);

        //Render a different page on click.
        this.pagination.arrows.on('click', function() {
            if (context.config.activePage !== +d3.select(this).attr('rel')) {
                context.config.activePage = +d3.select(this).attr('rel');
                context.pagination.prev.attr(
                    'rel',
                    context.config.activePage > 0 ? context.config.activePage - 1 : 0
                );
                context.pagination.next.attr(
                    'rel',
                    context.config.activePage < context.config.nPages
                        ? context.config.activePage + 1
                        : context.config.nPages - 1
                );
                updatePagination.call(context);
            }
        });

        //Render a different page on click.
        this.pagination.doubleArrows.on('click', function() {
            context.config.activePage = +d3.select(this).attr('rel');
            updatePagination.call(context);
        });

        return {
            addLinks: addLinks,
            addArrows: addArrows,
            updatePagination: updatePagination
        };
    }

    function pagination() {
        this.config.nRows = this.data.raw.length; // total number of rows, i.e. the length of the data file
        this.config.nPages = Math.ceil(this.config.nRows / this.config.nRowsPerPage); // total number of pages given number of rows
        this.config.activePage = 0; // current page, 0-indexed
        this.config.startIndex = this.config.activePage * this.config.nRowsPerPage; // first row shown
        this.config.endIndex = this.config.startIndex + this.config.nRowsPerPage; // last row shown
        this.config.paginationHidden = this.config.nPages == 1;
        return {
            layout: layout$5,
            addPagination: addPagination
        };
    }

    function init$2(data) {
        var _this = this;

        var test = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

        if (d3.select(this.div).select('.loader').empty()) {
            d3
                .select(this.div)
                .insert('div', ':first-child')
                .attr('class', 'loader')
                .selectAll('.blockG')
                .data(d3.range(8))
                .enter()
                .append('div')
                .attr('class', function(d) {
                    return 'blockG rotate' + (d + 1);
                });
        }

        //Define default settings.
        this.setDefaults.call(this, data[0]);

        //Assign classes to container element.
        this.wrap.classed('wc-chart', true).classed('wc-table', this.config.applyCSS);

        //Define data object.
        this.data = {
            raw: data
        };

        //Attach searchable object to table object.
        this.searchable = searchable.call(this);

        //Attach sortable object to table object.
        this.sortable = sortable.call(this);

        //Attach pagination object to table object.
        this.pagination = pagination.call(this);

        //Attach pagination object to table object.
        this.exportable = exportable.call(this);

        var startup = function startup(data) {
            //connect this table and its controls, if any
            if (_this.controls) {
                _this.controls.targets.push(_this);
                if (!_this.controls.ready) {
                    _this.controls.init(_this.data.raw);
                } else {
                    _this.controls.layout();
                }
            }

            //make sure container is visible (has height and width) before trying to initialize
            var visible = d3.select(_this.div).property('offsetWidth') > 0 || test;
            if (!visible) {
                console.warn(
                    'The table cannot be initialized inside an element with 0 width. The table will be initialized as soon as the container element is given a width > 0.'
                );
                var onVisible = setInterval(function(i) {
                    var visible_now = d3.select(_this.div).property('offsetWidth') > 0;
                    if (visible_now) {
                        _this.layout();
                        _this.wrap.datum(_this);
                        _this.draw();
                        clearInterval(onVisible);
                    }
                }, 500);
            } else {
                _this.layout();
                _this.wrap.datum(_this);
                _this.draw();
            }
        };

        this.events.onInit.call(this);
        if (this.data.raw.length) {
            this.checkRequired(this.data.raw);
        }
        startup(data);

        return this;
    }

    function layout$6() {
        //Clear loading indicator.
        d3.select(this.div).select('.loader').remove();

        //Attach container before table.
        this.wrap.append('div').classed('table-top', true);

        //Attach search container.
        this.searchable.layout.call(this);

        //Attach sort container.
        this.sortable.layout.call(this);

        //Attach table to DOM.
        this.table = this.wrap.append('table').classed('table', this.config.bootstrap); // apply class to incorporate bootstrap styling
        this.thead = this.table.append('thead');
        this.thead.append('tr');
        this.tbody = this.table.append('tbody');

        //Attach container after table.
        this.wrap.append('div').classed('table-bottom', true);

        //Attach pagination container.
        this.pagination.layout.call(this);

        //Attach data export container.
        this.exportable.layout.call(this);

        //Call layout callback.
        this.events.onLayout.call(this);
    }

    function destroy$2() {
        var destroyControls = arguments.length > 0 && arguments[0] !== undefined
            ? arguments[0]
            : false;

        //run onDestroy callback
        this.events.onDestroy.call(this);

        //destroy controls
        if (destroyControls && this.controls) {
            this.controls.destroy();
        }

        //unmount chart wrapper
        this.wrap.remove();
    }

    function setDefault(setting) {
        var _default_ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

        this.config[setting] = this.config[setting] !== undefined
            ? this.config[setting]
            : _default_;
    }

    function setDefaults$1(firstItem) {
        //Set data-driven defaults.
        if (this.config.cols instanceof Array && this.config.headers instanceof Array) {
            if (this.config.cols.length === 0) delete this.config.cols;
            if (
                this.config.headers.length === 0 ||
                this.config.headers.length !== this.config.cols.length
            )
                delete this.config.headers;
        }

        this.config.cols = this.config.cols || d3.keys(firstItem);
        this.config.headers = this.config.headers || this.config.cols;
        this.config.layout = 'horizontal'; // placeholder setting to align table components vertically or horizontally

        //Set all other defaults.
        setDefault.call(this, 'searchable');
        setDefault.call(this, 'exportable');
        setDefault.call(this, 'exports', ['csv']);
        setDefault.call(this, 'sortable');
        setDefault.call(this, 'pagination');
        setDefault.call(this, 'nRowsPerPage', 10);
        setDefault.call(this, 'nPageLinksDisplayed', 5);
        setDefault.call(this, 'applyCSS');
    }

    function transformData$1(processed_data) {
        var _this = this;

        //Transform data.
        this.data.processed = this.transformData(this.wrap.datum);

        if (!data) {
            return;
        }

        this.config.cols = this.config.cols || d3.keys(data[0]);
        this.config.headers = this.config.headers || this.config.cols;

        if (this.config.keep) {
            this.config.keep.forEach(function(e) {
                if (_this.config.cols.indexOf(e) === -1) {
                    _this.config.cols.unshift(e);
                }
            });
        }

        var filtered = data;

        if (this.filters.length) {
            this.filters.forEach(function(e) {
                var is_array = e.val instanceof Array;
                filtered = filtered.filter(function(d) {
                    if (is_array) {
                        return e.val.indexOf(d[e.col]) !== -1;
                    } else {
                        return e.val !== 'All' ? d[e.col] === e.val : d;
                    }
                });
            });
        }

        var slimmed = d3
            .nest()
            .key(function(d) {
                if (_this.config.row_per) {
                    return _this.config.row_per
                        .map(function(m) {
                            return d[m];
                        })
                        .join(' ');
                } else {
                    return d;
                }
            })
            .rollup(function(r) {
                if (_this.config.dataManipulate) {
                    r = _this.config.dataManipulate(r);
                }
                var nuarr = r.map(function(m) {
                    var arr = [];
                    for (var x in m) {
                        arr.push({ col: x, text: m[x] });
                    }
                    arr.sort(function(a, b) {
                        return _this.config.cols.indexOf(a.col) - _this.config.cols.indexOf(b.col);
                    });
                    return { cells: arr, raw: m };
                });
                return nuarr;
            })
            .entries(filtered);

        this.data.current = slimmed.length ? slimmed : [{ key: null, values: [] }]; // dummy nested data array

        //Reset pagination.
        this.pagination.wrap.selectAll('*').remove();

        this.events.onDatatransform.call(this);

        /**-------------------------------------------------------------------------------------------\
       Code below associated with the former paradigm of a d3.nest() data array.
    \-------------------------------------------------------------------------------------------**/

        if (config.row_per) {
            var rev_order = config.row_per.slice(0).reverse();
            rev_order.forEach(function(e) {
                tbodies.sort(function(a, b) {
                    return a.values[0].raw[e] - b.values[0].raw[e];
                });
            });
        }

        //Delete text from columns with repeated values?
        if (config.row_per) {
            rows
                .filter(function(f, i) {
                    return i > 0;
                })
                .selectAll('td')
                .filter(function(f) {
                    return config.row_per.indexOf(f.col) > -1;
                })
                .text('');
        }

        return this.data.current;
    }

    var table = Object.create(chart, {
        draw: { value: draw$1 },
        init: { value: init$2 },
        layout: { value: layout$6 },
        setDefaults: { value: setDefaults$1 },
        transformData: { value: transformData$1 },
        destroy: { value: destroy$2 }
    });

    function createTable() {
        var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'body';
        var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        var controls = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

        var thisTable = Object.create(table);

        thisTable.div = element;

        thisTable.config = Object.create(config);

        thisTable.controls = controls;

        thisTable.filters = [];

        thisTable.required_cols = [];

        thisTable.wrap = d3.select(thisTable.div).append('div').datum(thisTable);

        thisTable.events = {
            onInit: function onInit() {},
            onLayout: function onLayout() {},
            onPreprocess: function onPreprocess() {},
            onDraw: function onDraw() {},
            onDestroy: function onDestroy() {}
        };

        thisTable.on = function(event, callback) {
            var possible_events = ['init', 'layout', 'preprocess', 'draw', 'destroy'];
            if (possible_events.indexOf(event) < 0) {
                return;
            }
            if (callback) {
                thisTable.events['on' + event.charAt(0).toUpperCase() + event.slice(1)] = callback;
            }
        };

        return thisTable;
    }

    function multiply(chart, data, split_by, order) {
        var test = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

        chart.wrap.classed('wc-layout wc-small-multiples', true).classed('wc-chart', false);

        //Define container for legend that overrides multiples' legends.
        chart.master_legend = chart.wrap.append('ul').attr('class', 'legend');
        chart.master_legend.append('span').classed('legend-title', true);

        //Instantiate multiples array.
        chart.multiples = [];

        function goAhead(data) {
            var split_vals = d3
                .set(
                    data.map(function(m) {
                        return m[split_by];
                    })
                )
                .values()
                .filter(function(f) {
                    return f;
                });
            if (order) {
                split_vals = split_vals.sort(function(a, b) {
                    return d3.ascending(order.indexOf(a), order.indexOf(b));
                });
            }
            split_vals.forEach(function(e) {
                var mchart = createChart(chart.wrap.node(), chart.config, chart.controls);
                chart.multiples.push(mchart);
                mchart.parent = chart;
                mchart.events = chart.events;
                mchart.legend = chart.master_legend;
                mchart.filters.unshift({ col: split_by, val: e, choices: split_vals });
                mchart.wrap.insert('span', 'svg').attr('class', 'wc-chart-title').text(e);
                mchart.init(data, test);
            });
        }

        goAhead(data);
    }

    function getValType(data, variable) {
        var var_vals = d3
            .set(
                data.map(function(m) {
                    return m[variable];
                })
            )
            .values();
        var vals_numbers = var_vals.filter(function(f) {
            return +f || +f === 0;
        });

        if (var_vals.length === vals_numbers.length && var_vals.length > 4) {
            return 'continuous';
        } else {
            return 'categorical';
        }
    }

    function lengthenRaw(data, columns) {
        var my_data = [];

        data.forEach(function(e) {
            columns.forEach(function(g) {
                var obj = Object.create(e);
                obj.wc_category = g;
                obj.wc_value = e[g];
                my_data.push(obj);
            });
        });

        return my_data;
    }

    var dataOps = {
        getValType: getValType,
        lengthenRaw: lengthenRaw,
        naturalSorter: naturalSorter,
        summarize: summarize
    };

    var index = {
        version: version,
        createChart: createChart,
        createControls: createControls,
        createTable: createTable,
        multiply: multiply,
        dataOps: dataOps
    };

    return index;
 });
	* {
	padding: 0;
	margin: 0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	}
	#title {
	width: 96%;
	margin: 2%;
	border-bottom: 1px solid lightgray;
	font-weight: lighter;
	font-size: 250%;
	}
	#subtitle {
	width: 96%;
	margin: 2%;
	font-weight: lighter;
	font-size: 200%;
	}
	#container {
	width: 96%;
	margin: 2%;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Clinical Timelines: Treatment of MS</title>
	<div id = 'title'>Clinical Timelines</div>
	<div id = 'subtitle'>Treatment of MS</div>

	<meta http-equiv = 'Content-Type' content = 'text/html; charset = utf-8'>

	<script type = 'text/javascript' src = 'https://d3js.org/d3.v3.min.js'></script>
	<script type = 'text/javascript' src = './Webcharts/build/webcharts.js'></script>
	<script type = 'text/javascript' src = './clinical-timelines/build/clinicalTimelines.js'></script>

	<link type = 'text/css' rel = 'stylesheet' href = './Webcharts/css/webcharts.css'>
	<link type = 'text/css' rel = 'stylesheet' href = './index.css'>
	</head>

	<body>
	<div id = 'container'></div>
	</body>

	<script type = 'text/javascript' src = './index.js'></script>
	</html>
	let settings = {
	time_scale: 'Day',
	day_range: [-50, 750],
	event_types: [
	'Screening',
	'Clinical Assessments',
	'Full Response',
	'Partial Response',
	'No Response',
	],
	event_symbols: [
	{events: ['Screening'], symbol: 'triangle', direction: 'right'},
	{events: ['Full Response'], symbol: 'triangle', direction: 'up'},
	{events: ['Partial Response'], symbol: 'diamond'},
	{events: ['No Response'], symbol: 'triangle', direction: 'down'},
	],

	id_characteristics: [
	{value_col: 'TRT', label: 'Treatment Group'},
	{value_col: 'response', label: 'Response'},
	{value_col: 'PP', label: 'Per-protocol'},
	{value_col: 'SEX', label: 'Sex'},
	{value_col: 'AGE', label: 'Age'},
	],
	groupings: [
	{value_col: 'TRT', label: 'Treatment Group'},
	{value_col: 'response', label: 'Response'},
	{value_col: 'ITT', label: 'Intent-to-treat'},
	{value_col: 'PP', label: 'Per-protocol'},
	{value_col: 'SEX', label: 'Sex'},
	],
	grouping_initial: 'TRT',
	//grouping_direction: 'vertical',

	filters: [
	{value_col: 'TRT', label: 'Treatment Group'},
	{value_col: 'response', label: 'Response'},
	{value_col: 'PP', label: 'Per-protocol', start: 'Yes'},
	{value_col: 'SEX', label: 'Sex'},
	],
	reference_lines: [
	{
	label: 'Baseline',
	timepoint: 0,
	}
	],
	mark_thickness: 8,
	range_band: 40,
	colors: [
	'#7570b3',
	'#1f78b4',
	'#35978f',
	'#f6e8c3',
	'#8c510a',
	'#d95f02',
	'#1b9e77',
	],
	};

	d3.csv(
	'./ADTIMELINES.csv',
	d => {
	return d;
	},
	data => {
	clinicalTimelines('#container', settings).init(data);
	}
	);
	@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300);
	/*------------------------------------------------------------------------------------------------\
	Small Multiple Layout
	\------------------------------------------------------------------------------------------------*/

	div.wc-layout.wc-small-multiples::after {
	content: "";
	clear: both;
	display: block;
	}

	.wc-layout.wc-small-multiples > .wc-chart {
	float: left;
	padding: 0 2em 2em 0;
	}

	.wc-layout.wc-small-multiples > .wc-chart > .wc-chart-title {
	display: block;
	font-weight: bold;
	text-align: center;
	}
	.wc-small-multiples .wc-chart > .legend {
	display: none;
	}

	/*------------------------------------------------------------------------------------------------\
	Charts
	\------------------------------------------------------------------------------------------------*/

	.wc-chart {
	position: relative;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	}

	.wc-chart rect,
	.wc-chart line {
	shape-rendering: crispEdges;
	}

	/next few are rules for d3 brushing stuff/
	.wc-chart.brushable .overlay {
	cursor: crosshair;
	}

	.wc-chart rect.background {
	display: none;
	}

	.wc-chart rect.extent {
	fill: #ccc;
	fill-opacity: 0.4;
	shape-rendering: crispEdges;
	}

	.wc-chart .axis path.domain {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.wc-chart .axis .tick line {
	stroke: #eee;
	shape-rendering: crispEdges;
	}

	.wc-chart .axis .tick text {
	font-size: .9em;
	}

	.wc-chart .axis .axis-title {
	fill: #555;
	}

	[class="wc-"] .legend {
	font-size: .9em;
	padding: 0;
	margin: 0;
	}

	[class="wc-"] .legend .legend-title {
	font-weight: bold;
	margin-right: 1em;
	}

	[class="wc-"] .legend .legend-item {
	display: inline-block;
	margin-right: 1em;
	}

	[class="wc-"] .legend .legend-item .legend-color-block {
	position: relative;
	top: .2em;
	right: .25em;
	display: inline-block;
	}
	[class="wc-"] .legend .legend-item .legend-mark-text {
	font-weight: bold;
	margin-right: .5em;
	}

	.wc-chart .ordinal.axis .tick line,
	.wc-chart .ordinal.axis path {
	display: none;
	}

	.wc-chart.gridlines .ordinal.axis .tick line {
	display: block;
	}

	/*------------------------------------------------------------------------------------------------\
	Controls
	\------------------------------------------------------------------------------------------------*/

	.wc-controls {
	display: block;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: .9em;
	margin-bottom: 10px;
	}

	.wc-controls:empty {
	display: none;
	}

	.intro > .wc-controls {
	display: block;
	}

	.wc-controls .control-group {
	display: inline-table;
	max-width: 100%;
	margin: 0px 1em 1em 0;
	}
	.wc-controls.bottom .control-group {
	display: inline-table;
	}

	.wc-controls .control-group .wc-control-label {
	/font-weight: bold;/
	display: block;
	}

	.wc-controls .control-group.inline .wc-control-label {
	display: inline;
	margin-right: .5em;
	}
	.wc-controls .control-group.inline .changer {
	display: inline;
	margin-top: 0;
	}

	.wc-controls .control-group .wc-control-label + .changer {
	margin-top: 2px;
	}

	.wc-controls .control-group .wc-control-label.inline {
	display: inline;
	margin-right: .5em;
	}

	.wc-controls .control-group .wc-control-label .label-required {
	color: #de2d26;
	padding: 0 .25em;
	border: 1px solid;
	margin-left: .5em;
	}

	.wc-controls .span-description {
	display: block;
	font-size: .75em;
	color: #777;
	margin-bottom: 3px;
	}
	.wc-controls .span-description:empty {
	display: none;
	}
	.wc-controls .span-description.standout {
	font-style: italic;
	color: #d9534f;
	}

	.wc-controls .control-group label.radio,
	.wc-controls .control-group label.filter-values {
	display: inline-block;
	cursor: pointer;
	font-weight: normal;
	font-size: .9em;
	padding: 0;
	margin: 5px 10px 0 0;
	}

	.wc-controls .inline {
	display: inline;
	}

	.wc-controls .control-group input[type='text'],
	.wc-controls select {
	display: block;
	width: auto;
	max-width: 100%;
	padding: 0 2px;
	height: auto;
	border-radius: 0;
	}

	.wc-controls .control-group input[type='number'] {
	width: 70px;
	text-align: right;
	max-width: 100%;
	}

	.wc-controls .control-group input[type='checkbox'],
	.wc-controls .control-group input[type='radio'] {
	cursor: pointer;
	position: relative;
	top: .1em;
	float: none;
	margin: 0;
	}

	.wc-controls .control-group input[type='radio'] {
	vertical-align: bottom;
	margin-left: .25em;
	}

	.wc-controls .control-group input.inline {
	margin: 0 2px 2px 0;
	}

	.wc-controls .control-group .changer + .changer {
	margin-top: 2px;
	}

	.wc-controls .subsetter-ui {
	position: relative;
	display: inline-block;
	max-width: 100%;
	padding: 3px;
	border: 1px dashed #888;
	margin: 5px 5px 0 0;
	}

	.wc-controls .subsetter-ui .remove-btn {
	cursor: pointer;
	position: absolute;
	top: 2px;
	right: 2px;
	}

	/*------------------------------------------------------------------------------------------------\
	Tables
	\------------------------------------------------------------------------------------------------*/

	.wc-table {
	display: block;
	}
	.wc-table .hidden {
	display: none !important;
	}
	.wc-table .invisible {
	visibility: hidden !important;
	}
	.wc-table > * {
	display: block;
	}
	.wc-table .table-top {
	}

	.wc-table .table-bottom {
	}

	.wc-table .interactivity {
	display: inline-block;
	vertical-align: middle;
	margin: 10px 0;
	padding: 0;
	}
	.wc-table .interactivity .wc-button {
	display: inline-block;
	border: 2px solid gray;
	border-radius: 4px;
	padding: 2px 8px;
	margin: 0 2px;
	cursor: pointer;
	background: white;
	color: black;
	}
	.wc-table .interactivity .wc-button:hover {
	background: black;
	color: white;
	}

	/**-------------------------------------------------------------------------------------------\
	Searchable container
	\-------------------------------------------------------------------------------------------**/

	.wc-table .searchable-container {
	float: right;
	overflow: hidden;
	}
	.wc-table .searchable-container .nNrecords {
	}
	.wc-table .searchable-container input {
	margin: 0 10px 0 0;
	padding: 4px;
	}

	/**-------------------------------------------------------------------------------------------\
	Sortable container
	\-------------------------------------------------------------------------------------------**/

	.wc-table .sortable-container {
	margin-right: 10px;
	}
	.wc-table .sortable-container .instruction {
	margin-top: 4px;
	}
	.wc-table .sortable-container .sort-box {
	cursor: default;
	padding: 2px 4px;
	}
	.wc-table .sortable-container .sort-direction {
	font-weight: bold;
	margin: 3px;
	}
	.wc-table .sortable-container .sort-box .remove-sort {
	font-weight: bold;
	float: right;
	border: 1px solid gray;
	margin-top: 3px;
	padding: 2px 3px;
	font-size: 8px;
	background: white;
	color: red;
	}
	.wc-table .sortable-container .sort-box .remove-sort:hover {
	cursor: pointer;
	background: red;
	color: white;
	}

	/**-------------------------------------------------------------------------------------------\
	Table
	\-------------------------------------------------------------------------------------------**/

	.wc-table table {
	font-size: .9em;
	border-collapse: collapse;
	}

	/***--------------------------------------------------------------------------------------\
	Table header
	\--------------------------------------------------------------------------------------***/

	.wc-table table thead {
	}
	.wc-table table thead tr {
	}
	.wc-table table thead tr th {
	cursor: pointer;
	padding: 2px 5px;
	border-bottom: 2px solid black;
	text-align: left;
	}
	.wc-table table thead tr th:first-child {
	}
	.wc-table table thead tr th:last-child {
	}

	/***--------------------------------------------------------------------------------------\
	Table body
	\--------------------------------------------------------------------------------------***/

	.wc-table table tbody {
	}
	.wc-table table tbody tr {
	}
	.wc-table table tbody tr:nth-child(even) {
	background: #eee;
	}
	.wc-table table tbody tr:hover {
	background: #ccc;
	}
	.wc-table table tbody tr td {
	padding: 2px 5px;
	}
	.wc-table table tbody tr td:first-child {
	}
	.wc-table table tbody tr td:last-child {
	}

	.wc-table table tbody tr:last-child {
	border-bottom:1px solid black
	}
	.wc-table table tbody tr.no-data td {
	color: red;
	font-weight: bold;
	}

	/**-------------------------------------------------------------------------------------------\
	Pagination container
	\-------------------------------------------------------------------------------------------**/

	.wc-table .pagination-container {
	float: right;
	}
	.wc-table .pagination-container a {
	text-decoration: none;
	}
	.wc-table .pagination-container a:not(.active) {
	border: none;
	}

	/**-------------------------------------------------------------------------------------------\
	Exportable container
	\-------------------------------------------------------------------------------------------**/

	.wc-table .exportable-container {
	float: left;
	}
	.wc-table .exportable-container a {
	text-decoration: none;
	}

	/*------------------------------------------------------------------------------------------------\
	Miscellaneous
	\------------------------------------------------------------------------------------------------*/

	.loader {
	position:relative;
	width:20px;
	height:25px}

	.blockG {
	position:absolute;
	background-color:#eee;
	width:3px;
	height:8px;
	-moz-border-radius:4px 4px 0 0;
	-moz-transform:scale(0.4);
	-moz-animation-name:fadeG;
	-moz-animation-duration:0.48s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	-webkit-border-radius:4px 4px 0 0;
	-webkit-transform:scale(0.4);
	-webkit-animation-name:fadeG;
	-webkit-animation-duration:0.48s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-ms-border-radius:4px 4px 0 0;
	-ms-transform:scale(0.4);
	-ms-animation-name:fadeG;
	-ms-animation-duration:0.48s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	-o-border-radius:4px 4px 0 0;
	-o-transform:scale(0.4);
	-o-animation-name:fadeG;
	-o-animation-duration:0.48s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	border-radius:4px 4px 0 0;
	transform:scale(0.4);
	animation-name:fadeG;
	animation-duration:0.48s;
	animation-iteration-count:infinite;
	animation-direction:linear;
	}

	.rotate1 {
	left:0;
	top:9px;
	-moz-animation-delay:0.18s;
	-moz-transform:rotate(-90deg);
	-webkit-animation-delay:0.18s;
	-webkit-transform:rotate(-90deg);
	-ms-animation-delay:0.18s;
	-ms-transform:rotate(-90deg);
	-o-animation-delay:0.18s;
	-o-transform:rotate(-90deg);
	animation-delay:0.18s;
	transform:rotate(-90deg);
	}

	.rotate2 {
	left:3px;
	top:3px;
	-moz-animation-delay:0.24s;
	-moz-transform:rotate(-45deg);
	-webkit-animation-delay:0.24s;
	-webkit-transform:rotate(-45deg);
	-ms-animation-delay:0.24s;
	-ms-transform:rotate(-45deg);
	-o-animation-delay:0.24s;
	-o-transform:rotate(-45deg);
	animation-delay:0.24s;
	transform:rotate(-45deg);
	}

	.rotate3 {
	left:8px;
	top:1px;
	-moz-animation-delay:0.3s;
	-moz-transform:rotate(0deg);
	-webkit-animation-delay:0.3s;
	-webkit-transform:rotate(0deg);
	-ms-animation-delay:0.3s;
	-ms-transform:rotate(0deg);
	-o-animation-delay:0.3s;
	-o-transform:rotate(0deg);
	animation-delay:0.3s;
	transform:rotate(0deg);
	}

	.rotate4 {
	right:3px;
	top:3px;
	-moz-animation-delay:0.36s;
	-moz-transform:rotate(45deg);
	-webkit-animation-delay:0.36s;
	-webkit-transform:rotate(45deg);
	-ms-animation-delay:0.36s;
	-ms-transform:rotate(45deg);
	-o-animation-delay:0.36s;
	-o-transform:rotate(45deg);
	animation-delay:0.36s;
	transform:rotate(45deg);
	}

	.rotate5 {
	right:0;
	top:9px;
	-moz-animation-delay:0.42000000000000004s;
	-moz-transform:rotate(90deg);
	-webkit-animation-delay:0.42000000000000004s;
	-webkit-transform:rotate(90deg);
	-ms-animation-delay:0.42000000000000004s;
	-ms-transform:rotate(90deg);
	-o-animation-delay:0.42000000000000004s;
	-o-transform:rotate(90deg);
	animation-delay:0.42000000000000004s;
	transform:rotate(90deg);
	}

	.rotate6 {
	right:3px;
	bottom:2px;
	-moz-animation-delay:0.48s;
	-moz-transform:rotate(135deg);
	-webkit-animation-delay:0.48s;
	-webkit-transform:rotate(135deg);
	-ms-animation-delay:0.48s;
	-ms-transform:rotate(135deg);
	-o-animation-delay:0.48s;
	-o-transform:rotate(135deg);
	animation-delay:0.48s;
	transform:rotate(135deg);
	}

	.rotate7 {
	bottom:0;
	left:8px;
	-moz-animation-delay:0.5399999999999999s;
	-moz-transform:rotate(180deg);
	-webkit-animation-delay:0.5399999999999999s;
	-webkit-transform:rotate(180deg);
	-ms-animation-delay:0.5399999999999999s;
	-ms-transform:rotate(180deg);
	-o-animation-delay:0.5399999999999999s;
	-o-transform:rotate(180deg);
	animation-delay:0.5399999999999999s;
	transform:rotate(180deg);
	}

	.rotate8 {
	left:3px;
	bottom:2px;
	-moz-animation-delay:0.6s;
	-moz-transform:rotate(-135deg);
	-webkit-animation-delay:0.6s;
	-webkit-transform:rotate(-135deg);
	-ms-animation-delay:0.6s;
	-ms-transform:rotate(-135deg);
	-o-animation-delay:0.6s;
	-o-transform:rotate(-135deg);
	animation-delay:0.6s;
	transform:rotate(-135deg);
	}

	@-moz-keyframes fadeG {
	0% {
	background-color:#000000}

	100% {
	background-color:#eee}

	}

	@-webkit-keyframes fadeG {
	0% {
	background-color:#000000}

	100% {
	background-color:#eee}

	}

	@-ms-keyframes fadeG {
	0% {
	background-color:#000000}

	100% {
	background-color:#eee}

	}

	@-o-keyframes fadeG {
	0% {
	background-color:#000000}

	100% {
	background-color:#eee}

	}

	@keyframes fadeG {
	0% {
	background-color:#000000}

	100% {
	background-color:#eee}

	}