timelyportfolio · September 30, 2023 02:44
diff --git a/BarChart.js b/BarChart.js
 BarChart.prototype = new DexComponent();
 BarChart.constructor = BarChart;

 function BarChart(userConfig)
 {
  DexComponent.call(this, userConfig,
  {
    parent             : null,
    labels             : [ "X", "Y" ],
    id                 : "BarChart",
    data               : [[0,0],[1,1],[2,4],[3,9],[4,16]],
    width              : 600,
    height             : 400,
    xi                 : 0,
    yi                 : [1],
    xoffset            : 0,
    yoffset            : 0,
    barColors          : d3.scale.category20(),
    yaxisLabel         : "Y",
    yaxisLabelFontSize : 10,
    xaxisLabel         : "X",
    xaxisLabelFontSize : 10,
    yaxisFormat        : ".f",
    xmin : null,
    ymin : null
  });

  // Ugly, but my JavaScript is weak.  When in handler functions
  // this seems to be the only way to get linked back to the
  // this.x variables.
  this.chart = this;
 }

 BarChart.prototype.render = function()
 {
  this.update();
 };

 BarChart.prototype.update = function()
 {
  // If we need to call super:
 	//DexComponent.prototype.update.call(this);
 	var chart = this.chart;
  var config = this.config;

  var yaxisFormat = d3.format(config.yaxisFormat);

  // X domain across groups.
  var x = d3.scale.ordinal()
    .domain(d3.range(config.data.length))
    .rangeBands([0, config.width], .1);

  // X domain within groups.
  var x1 = d3.scale.ordinal()
    .domain(d3.range(config.yi.length))
    .rangeBands([0, x.rangeBand()]);

  // Y domain.
  var y = d3.scale.linear()
    .range([config.height, 0]);

  var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(yaxisFormat);

  var chartContainer = config.parent.append("g")
    .attr("id", config.id)
    .attr("transform", "translate(" + config.xoffset + "," + config.yoffset + ")");

  var data = config.data;  

  // Translate all of the y data columns to numerics.
  data.forEach(function(d)
  {
  	config.yi.forEach(function(c)
  	{
  		d[c] = +d[c];
  	});
  });

  var yextent = dex.matrix.extent(data, config.yi);
  x.domain(data.map(function(d) { return d[config.xi]; }));
  //y.domain([0, d3.max(data, function(d) { return d[1]; })]);

  if (config.ymin != null)
  {
    yextent[0] = config.ymin;
  }
  if (config.ymax != null)
  {
    yextent[1] = config.ymax;
  }

  // Establish the domain of the y axis.
  y.domain(yextent);

  // X Axis
  chartContainer.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + config.height + ")")
      .call(xAxis)
    .append("text")
      .attr("y", 20)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style("font-size", config.xaxisLabelFontSize)
      .text(config.xaxisLabel);

  // Y Axis
  chartContainer.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .style("font-size", config.yaxisLabelFontSize)
      .text(config.yaxisLabel);

  var barData = dex.matrix.combine(
      	dex.matrix.slice(data, [config.xi]),
      	dex.matrix.slice(data, config.yi)
     );

  console.log("BarChart().BarData()")
  console.dir(barData);

  //console.dir(dex.matrix.slice(data, config.yi));
  //console.dir(x.rangeBand());

  chartContainer.selectAll(".bar")
      .data(barData)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { //console.dir(d);
      	 return x(d[0]) + x1(d[3]) })
      .style("fill", function(d) { return config.barColors(d[3]);})
      .attr("width", x.rangeBand()/config.yi.length)
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return config.height - y(d[1]); });
      
  // Add Text Labels
  /*
  chartContainer.selectAll(".label")
    .data(barData)
    .enter().append("text")
    .attr("x", function(d) { return x(d[0]) + x1(d[3]) })
    .attr("y", function(d) { return y(d[1]); })
    .attr("text-anchor", "end")
    //.attr("transform", "rotate(90)")
    .attr("dy", ".71em")
    .style("font-size", 12)
    .text(function(d) { console.log("TEXTD: " + d); return config.labels[d[3]]; });
  */
 };
diff --git a/DexComponent.js b/DexComponent.js
 function DexComponent(userConfig, defaultConfig)
 {
  // This holds our event registry.
 	this.registry = {};
 	this.debug = false;

 	//console.log("Instantiating dex component...");

 	// Instantiate from another component
 	if (userConfig instanceof DexComponent)
 	{
 		this.config = getConfig(userConfig.config, defaultConfig);
 	}
 	else
 	{
    this.config = getConfig(userConfig, defaultConfig);
    //console.dir(this.config);
  }
 }

 DexComponent.prototype.attr = function(name, value)
 {
  if (arguments.length == 1)
  {
    return this.config[name];
  }
  else if (arguments.length == 2)
  {
    this.config[name] = value;
  }
  return this;
 };

 DexComponent.prototype.dump = function(message)
 {
 	console.log("========================");
 	if (arguments.length == 1)
 	{ 	
 	  console.log(message);
 	  console.log("========================");
 	}
 	console.log("=== CONFIG ===");
 	console.dir(this.config);
 	console.log("=== REGISTRY ===");
 	console.dir(this.registry);
 };

 DexComponent.prototype.addListener = function(eventType, target, method)
 {
  var targets;

  if (this.debug)
  {
    console.log("REGISTERING TARGET: " + eventType + "="+ target);
  }
  if (!this.registry.hasOwnProperty(eventType))
  {
    this.registry[eventType] = [];
  }

  this.registry[eventType].push({ target : target, method : method });
  //console.log("this.registry");	
  //console.dir(eventthis.registry);
 };

 DexComponent.prototype.notify = function(event)
 {
  var targets;

  if (this.debug)
  {
    console.log("notify: " + event.type);
  }
  
  if (!this.registry.hasOwnProperty(event.type))
  {
    return;
  }

  event.source = this;
  targets = this.registry[event.type];
  //console.log("TARGETS: " + targets.length);
  //console.dir(targets);
  for (var i=0; i<targets.length; i++)
  {
    //console.dir("Calling Target: " + targets[i]["target"]);
 	  targets[i]["method"](event, targets[i]["target"]);
  }
 };

 DexComponent.prototype.render = function()
 {
  console.log("Rendering component...");
 };

 DexComponent.prototype.update = function()
 {
 	console.log("Updating component...");
 };
diff --git a/DexUtils.js b/DexUtils.js
 var dex =
 {
  version : "0.6",
 	matrix  : {},
 	array   : {},
 	csv     : {}
 };

 function getConfig(userConfig, defaultConfig)
 {
  var config = clone(defaultConfig);
  //console.dir(config);
  //console.dir(defaultConfig);
 	// If we have parameters, override the defaults.
  if (userConfig !== 'undefined')
  {
    for (var option in userConfig)
    {
      config[option] = userConfig[option];
    }
  }

  //console.dir(config);
  return config;
 }

 dex.array.slice = function(array, rows)
 {
 	var slice = [];
 	
 	for (var i = 0; i<rows.length; i++)
 	{
 		slice.push(array[rows[i]]);
 	}

 	return slice;
 }

 dex.matrix.slice = function(matrix, columns, rows)
 {
 	var slice = [];
 	
 	if (arguments.length === 3)
 	{
    for (var ri=0; ri < rows.length; ri++)
 	  {
 		  slice.push(dex.array.slice(matrix[rows[ri]]));
 	  }
 	}
 	else
 	{
 		for (var ri=0; ri < matrix.length; ri++)
 	  {
 	  	//console.log("RI: " + ri);
 	  	//console.dir(dex.array.slice(matrix[ri], columns));
 		  slice.push(dex.array.slice(matrix[ri], columns));
 	  }
 	}
 	return slice;
 }

 dex.matrix.flatten = function(matrix)
 {
 	var array = [];
 	for (var ri=0; ri<matrix.length; ri++)
 	{
 		for (var ci=0; ci<matrix[ri].length;ci++)
 		{
 			array.push(matrix[ri][ci]);
 		}
 	}
  return array;
 }

 dex.matrix.extent = function(data, indices)
 {
 	var values = data;
 	if (arguments.length === 2)
 	{
 		values = dex.matrix.slice(data, indices);
 		return d3.extent(dex.matrix.flatten(values));
 	}
 }

 // Combine each column in matrix1 with each column in matrix2. 
 dex.matrix.combine = function(matrix1, matrix2)
 {
 	var result = [];
 	
 	// Iterate over the rows in matrix1:
 	for (var ri=0; ri<matrix1.length; ri++)
 	{
 		// Iterate over the columns in matrix2:
 		for (var oci=0; oci<matrix1[ri].length; oci++)
 		{
 			// Iterate over the columns in matrix2:
 			for (var ici=0; ici<matrix2[ri].length; ici++)
 			{
 				result.push([matrix1[ri][oci], matrix2[ri][ici], oci, ici]);
 			}
 		}
 	}
 	return result;
 }

 dex.csv.createMap = function(header, data, keyIndex)
 {
 	var map = {};
 	
 	for (var ri=0; ri<data.length; ri++)
 	{
 		if (data[ri].length == header.length)
 		{
 			var rowMap = {};
 			for (var ci=0; ci<header.length; ci++)
 			{
 				rowMap[header[ci]] = data[ri][ci];
 			}
 			map[data[ri][keyIndex]] = rowMap;
 		}
 	}
 	return map;
 }

 dex.csv.createRowMap = function(header, data, keyIndex)
 {
 	var map = {};
 	
 	for (var ri=0; ri<data.length; ri++)
 	{
 		if (data[ri].length == header.length)
 		{
 			map[data[ri][keyIndex]] = data[ri];
    }
 	}
 	return map;
 }

 function getExtent(array, indices)
 {
 	var values = getArrayValues(array, indices);
 	var max = Math.max.apply(null, values);
 	var min = Math.min.apply(null, values);
 	console.log("EXTENT:");
 	console.dir(values);
 	console.dir([min, max]);
 	return [ min, max ];
 }

 function clone(obj)
 {
  if (obj === null || typeof obj !== 'object')
  {
    return obj;
  }

  var temp = obj.constructor();
  // give temp the original obj's constructor
  for (var key in obj)
  {
    temp[key] = clone(obj[key]);
  }

  return temp;
 }

 /* Dex Utilities */
 function colorToHex(color)
 {
  if (color.substr(0, 1) === '#')
  {
    return color;
  }
  //console.log("COLOR: " + color)
  var digits = /rgb\((\d+),(\d+),(\d+)\)/.exec(color);
  //console.log("DIGITS: " + digits);
  var red = parseInt(digits[1]);
  var green = parseInt(digits[2]);
  var blue = parseInt(digits[3]);
    
  var rgb = blue | (green << 8) | (red << 16);
  return '#' + rgb.toString(16);
 };

 function isNumber(n)
 {
  return !isNaN(parseFloat(n)) && isFinite(n);
 }

 function getHeader(data)
 {
  return data[0];
 }

 function getColumn(data, columnNumber)
 {
  var values = [];
  
  for (var i=1; i<data.length; i++)
  {
    values.push(data[i][columnNumber]);
  }
  
  return values;
 }

 function getNumericHeaders(data)
 {
  var header = getHeader(data);
  var possibleNumeric = {};
  var i, j;
  var numericHeaders = [];

  for (i=0; i<header.length; i++)
  {
    possibleNumeric[header[i]] = true;
  }
  
  // Iterate thru the data, skip the header.
  for (i=1; i<data.length; i++)
  {
 	for (j=0; j<data[i].length && j<header.length; j++)
 	{
 	  if (possibleNumeric[header[j]] && !isNumber(data[i][j]))
 	  {
 		possibleNumeric[header[j]] = false;
 	  }
 	}
  }
  
  for (i=0; i<header.length; i++)
  {
 	if (possibleNumeric[header[i]])
 	{
 	  numericHeaders.push(header[i]);
 	}
  }

  return numericHeaders;
 }

 function getNumericIndices(data)
 {
  var header = getHeader(data);
  var possibleNumeric = {};
  var i, j;
  var numericIndices = [];

  for (i=0; i<header.length; i++)
  {
    possibleNumeric[header[i]] = true;
  }
  
  // Iterate thru the data, skip the header.
  for (i=1; i<data.length; i++)
  {
 	for (j=0; j<data[i].length && j<header.length; j++)
 	{
 	  if (possibleNumeric[header[j]] && !isNumber(data[i][j]))
 	  {
 		possibleNumeric[header[j]] = false;
 	  }
 	}
  }
  
  for (i=0; i<header.length; i++)
  {
 	if (possibleNumeric[header[i]])
 	{
 	  numericIndices.push(i);
 	}
  }

  return numericIndices;
 }

 function isNumericColumn(data, columnNum)
 {
  for (var i=1; i<data.length; i++)
  {
 	if (!isNumber(data[i][columnNum]))
 	{
 	  return false;
 	}
  }
  return true;
 }

 function getMax(data, columnNum)
 {
  var maxValue = data[1][columnNum];

  if (isNumericColumn(data, columnNum))
  {
 	maxValue = parseFloat(data[1][columnNum]);
 	for (var i=2; i<data.length; i++)
    {
      if (maxValue < parseFloat(data[i][columnNum]))
      {
        maxValue = parseFloat(data[i][columnNum]);
      }
    }
  }
  else
  {
    for (var i=2; i<data.length; i++)
    {
      if (maxValue < data[i][columnNum])
      {
        maxValue = data[i][columnNum];
      }
    }
  }
  
  return maxValue;
 }

 function getMin(data, columnNum)
 {
  var minValue = data[1][columnNum];

  if (isNumericColumn(data, columnNum))
  {
 	minValue = parseFloat(data[1][columnNum]);
 	for (var i=2; i<data.length; i++)
    {
      if (minValue > parseFloat(data[i][columnNum]))
      {
        minValue = parseFloat(data[i][columnNum]);
      }
    }
  }
  else
  {
    for (var i=2; i<data.length; i++)
    {
      if (minValue > data[i][columnNum])
      {
        minValue = data[i][columnNum];
      }
    }
  }
  
  return minValue;
 }

 function getJsonFromCsv(data)
 {
  var header = getHeader(data);
  var i,j;
  var json = [];

  for (i=1;i<data.length;i++)
  {
 	var row = {};
 	for (j=0;j<data[i].length && j<header.length;j++)
 	{
 	  row[header[j]] = data[i][j];
 	}
 	json.push(row);
  }
  
  return json;
 }

 function getFill(colorScheme, numColors)
 {
  if (colorScheme == "1")
  {
   return d3.scale.category10();
  }
  else if (colorScheme == "2")
  {
    return d3.scale.category20();
  }
  else if (colorScheme == "3")
  {
    return d3.scale.category20b();
  }
  else if (colorScheme == "4")
  {
    return d3.scale.category20c();
  }
  else if (colorScheme == "HiContrast")
  {
    return d3.scale.ordinal().range(colorbrewer[colorScheme][9]);
  }
  else if (colorScheme in colorbrewer)
  {
    //console.log("LENGTH: " + len);
    
    var effColors = Math.pow(2, Math.ceil(Math.log(numColors) / Math.log(2)));
    //console.log("EFF LENGTH: " + len);

    // Find the best cmap:
    if (effColors > 128)
    {
      effColors = 256;
    }

    for (var c=effColors; c >= 2; c--)
    {
      if (colorbrewer[colorScheme][c])
      {
        return d3.scale.ordinal().range(colorbrewer[colorScheme][c]);
      }
    }
    for (var c=effColors; c <= 256; c++)
    {
      if (colorbrewer[colorScheme][c])
      {
        return d3.scale.ordinal().range(colorbrewer[colorScheme][c]);
      }
    }
    return d3.scale.category20();
  }
  else
  {
    return d3.scale.category20();
  }
 }

 function OrdinalHorizontalLegend(config)
 {
  // Default parameters.
  var p =
  {
    labels          : [ "A", "B", "C" ],
    parent          : null,
    xoffset         : 10,
    yoffset         : 20,
    cellWidth       : 30,
    cellHeight      : 20,
    tickLength      : 25,
    caption         : "Legend",
    color           : d3.scale.category20c(),
    captionFontSize : 14,
    captionXOffset  : 0,
    captionYOffset  : -6
  };

  // If we have parameters, override the defaults.
  if (config !== 'undefined')
  {
    for (var prop in config)
    {
      p[prop] = config[prop];
    }
  }
  
  function chart()
  {
    // Create our x scale
    var x = d3.scale.ordinal()
      .domain(p.labels)
      .range(d3.range(p.labels.length).map(function(i) { return i * p.cellWidth; }));

    // Create the x axis.
    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(p.tickLength)
      .tickPadding(10)
      .tickValues(p.labels)
      .tickFormat(function(d) { return d; });

    // Append a graphics node to the supplied svg node.
    var g = p.parent.append("g")
      .attr("class", "key")
      .attr("transform", "translate(" + p.xoffset + "," + p.yoffset + ")");

    // Draw a colored rectangle for each ordinal range.
    g.selectAll("rect")
      .data(p.labels)
      .enter().append("rect")
      .attr("height", p.cellHeight)
      .attr("x", function(d, i) { return x(i); })
      .attr("width", function(d) { return p.cellWidth; })
      .style("fill", function(d, i)
      {
        return p.color(i);
      });

    // Add the caption.
    g.call(xAxis).append("text")
      .attr("class", "caption")
      .attr("y", p.captionYOffset)
      .attr("x", p.captionXOffset)
      .text(p.caption)
      .style("font-size", p.captionFontSize);

  };

  // Use this routine to retrieve and update attributes.
  chart.attr = function(name, value)
  {
 	if (arguments.length == 1)
 	{
 	  return p[name];
 	}
 	else if (arguments.length == 2)
 	{
 	  p[name] = value;
 	}
 	return chart;
  }
 	
  chart.update = function()
  {
  }

  return chart;
 }

 function VerticalLegend(config)
 {
  // Default parameters.
  var p =
  {
    labels          : [ "A", "B", "C" ],
    parent          : null,
    xoffset         : 50,
    yoffset         : 30,
    cellWidth       : 30,
    cellHeight      : 20,
    tickLength      : 5,
    caption         : "Legend",
    color           : d3.scale.category20c(),
    captionFontSize : 14,
    captionXOffset  : -30,
    captionYOffset  : -20
  };

  // If we have parameters, override the defaults.
  if (config !== 'undefined')
  {
    for (var prop in config)
    {
      p[prop] = config[prop];
    }
  }
  
  function chart()
  {
    // Create our x scale
    var y = d3.scale.ordinal()
      .domain(p.labels)
      .range(d3.range(p.labels.length).map(function(i) { return i * p.cellHeight; }));

    // Create the x axis.
    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickSize(p.tickLength)
      .tickPadding(10)
      .tickValues(p.labels)
      .tickFormat(function(d) { return d; });

    // Append a graphics node to the supplied svg node.
    var g = p.parent.append("g")
      .attr("class", "key")
      .attr("transform", "translate(" + p.xoffset + "," + p.yoffset + ")");

    // Draw a colored rectangle for each ordinal range.
    g.selectAll("rect")
      .data(p.labels)
      .enter().append("rect")
      .attr("height", p.cellHeight)
      .attr("y", function(d, i) { return y(i); })
      .attr("width", p.cellWidth)
      .style("fill", function(d, i)
      {
        return p.color(i);
      });

      // Add the caption.
      g.call(yAxis).append("text")
        .attr("class", "caption")
        .attr("y", p.captionYOffset)
        .attr("x", p.captionXOffset)
        .text(p.caption)
        .style("font-size", p.captionFontSize);
  };

  // Use this routine to retrieve and update attributes.
  chart.attr = function(name, value)
  {
 	if (arguments.length == 1)
 	{
      return p[name];
 	}
 	else if (arguments.length == 2)
 	{
      p[name] = value;
 	}
 	return chart;
  }
 	
  chart.update = function()
  {
  }

  return chart;
 }

 function csvToMapArray(header, data)
 {
  var mapArray = [];
  
  for (var i=0; i<data.length; i++)
  {
 	var row = {};
    for (var j=0; j<header.length; j++)
  	{
      row[header[j]] = data[i][j]
    }
    mapArray.push(row);
  }
  
  return mapArray;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
 }

 path:hover {
  fill: red;
 }

 <link href="nv.d3.css" rel="stylesheet" type="text/css">

 </style>
 <body>
 <script src="http://d3js.org/d3.v2.js"></script>
 <script src="http://d3js.org/topojson.v0.min.js"></script>
 <script src="DexUtils.js"></script>
 <script src="DexComponent.js"></script>
 <script src="VerticalLegend.js"></script>
 <script src="BarChart.js"></script>
 <script src="USStateMap.js"></script>
 <script src="nv.d3.js"/></script>
 <script src="src/utils.js"></script>
 <script src="src/tooltip.js"></script>
 <script src="src/models/legend.js"></script>
 <script src="src/models/axis.js"></script>
 <script src="src/models/multiBarHorizontal.js"></script>
 <script src="src/models/multiBarHorizontalChart.js"></script>
 <script src="stream_layers.js"></script>
 <center><h1>State Taxes For Q3 2012</h1></center>
 <script>

    // Create an SVG for our chart.
    var svg = d3.select("body").append("svg")
          .attr("width", 1500)
          .attr("height", 800)
          .append("g")
          .attr("transform", "translate(40,20)");

    // Configure a chart.
    var map = new USStateMap(
          {
              'parent': svg,
              'xoffset': 200
          }
        );



    var labels = [
        "State", "Property Tax", "Sales Tax", "Alcohol", "Amusement", "Insurance", "Gas", "Pari-Mutuels", "Utilities",
        "Tobacco", "Other Sales", "Alcoholic Lic", "Amusement Lic", "Corp Lic", "Hunt/Fish Lic", "Vehicle Lic", "Drivers Lic", "Util Lic",
        "Occ/Biz Lic", "Other Lic", "Income Tax", "Corp Net Inc Tax", "Death/Gift Tax",
        "Doc/Stock Txfer Tax", "Severance Taxes", "Other Taxes", "Total Taxes"];

    var stateData =
        [
        ["Alabama", 12, 562, 44, 0, 108, 146, 0, 194, 34, 79, 0, 0, 10, 5, 47, 6, 3, 27, 0, 743, 76, 0, 10, 26, 0, 2134],
        ["Alaska", 0, 0, 9, 0, 14, 10, 0, 0, 19, 2, 0, 0, 0, 10, 28, 0, 0, 5, 3, 0, 242, 0, 0, 744, 0, 1088],
        ["Arizona", 194, 1193, 15, 0, 109, 199, 0, 5, 81, 25, 1, 0, 17, 6, 44, 8, 5, 30, 0, 893, 176, 0, 0, 7, 0, 3009],
        ["Arkansas", 109, 713, 12, 8, 23, 120, 1, 0, 61, 59, 1, 0, 2, 8, 38, 4, 19, 31, 0, 659, 96, 0, 8, 16, 6, 1993],
        ["California", 494, 7431, 68, 0, 528, 1403, 4, 160, 162, 1024, 16, 4, 13, 23, 773, 67, 98, 1055, 1, 11565, 1080, 1, 0, 8, 0, 25977],
        ["District of Columbia", 934, 261, 1, 0, 2, 6, 0, 36, 10, 16, 0, 0, 0, 0, 9, 2, 0, 7, 12, 369, 84, 10, 99, 0, 0, 1857],
        ["Florida", 0, 5031, 103, 34, 5, 828, 3, 714, 96, 158, 2, 0, 25, 3, 272, 84, 14, 48, 2, 0, 440, 0, 433, 11, 0, 8308],
    // This is a test row...
    //["Florida",0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],
        ["Georgia", 2, 1315, 37, 0, 95, 238, 0, 0, 54, 0, 0, 4, 12, 6, 81, 16, 0, 18, 2, 2276, 105, 0, 0, 0, 0, 4262],
        ["Illinois", 11, 1994, 74, 168, 66, 330, 2, 389, 156, 435, 3, 5, 74, 10, 425, 25, 9, 83, 5, 3620, 562, 97, 13, 0, 0, 8555],
        ["Indiana", 0, 1726, 12, 168, 56, 203, 1, 5, 111, 3, 3, 1, 2, 3, 24, 44, 0, 8, 2, 1180, 238, 41, 0, 0, 0, 3831],
        ["Kansas", 5, 729, 30, 0, 4, 113, 0, 0, 25, 10, 1, 0, 5, 3, 38, 6, 1, 0, 1, 704, 64, 1, 0, 29, 0, 1768],
        ["Kentucky", 66, 761, 30, 0, 31, 207, 1, 17, 66, 164, 2, 0, -2, 7, 39, 4, 0, 2, 1, 902, 160, 9, 1, 74, 0, 2543],
        ["Louisiana", 12, 689, 14, 176, 175, 175, 1, 2, 47, 17, 0, 0, 25, 8, 7, 2, 2, 17, 1, 697, 78, 0, 0, 201, 0, 2346],
        ["Maine", 21, 210, 5, 14, 13, 46, 1, 12, 37, 14, 1, 0, 1, 4, 25, 3, 0, 24, 2, 312, 37, 6, 3, 0, 0, 792],
        ["Maryland", 486, 685, 5, 2, 113, 85, 0, 33, 83, 317, 0, 0, 9, 5, 107, 7, 0, 36, 0, 1109, 245, 48, 34, 0, 10, 3419],
        ["Massachusetts", 1, 1323, 22, 1, 90, 176, 0, 5, 143, 114, 0, 0, 2, 1, 67, 17, 0, 57, 21, 2908, 495, 73, 40, 0, 28, 5584],
        ["Michigan", 507, 2923, 44, 39, 137, 439, 1, 12, 330, 350, -2, 0, 4, 18, 224, 16, 3, 58, 48, 2454, 195, 0, 79, 20, 0, 7899],
        ["Minnesota", 16, 1239, 15, 9, 76, 240, 0, 0, 85, 673, 0, 1, 2, 13, 150, 11, 0, 73, 17, 2015, 251, 38, 26, 10, 0, 4961],
        ["Mississippi", 0, 645, 11, 33, 26, 108, 0, 3, 39, 26, 1, 4, 24, 2, 36, 8, 9, 19, 9, 361, 67, 0, 0, 25, 0, 1456],
        ["Missouri", 1, 808, 9, 101, 58, 183, 0, 0, 26, 34, 0, 0, 10, 5, 59, 5, 6, 37, 19, 1206, 70, 0, 1, 0, 0, 2637],
        ["Montana", 12, 0, 7, 14, 15, 41, 0, 12, 24, 9, 0, 4, 0, 9, 25, 2, 0, 14, 1, 232, 42, 0, 0, 69, 0, 533],
        ["Nebraska", 0, 379, 8, 1, 18, 90, 0, 14, 17, 43, 0, 0, 0, 3, 18, 1, 0, 3, 0, 475, 50, 0, 2, 1, 0, 1122],
        ["Nevada", 11, 286, 3, 179, 2, 25, 0, 4, 10, 3, 0, 3, 15, 1, 29, 5, 0, 42, 0, 0, 0, 0, 2, 0, 0, 618],
        ["New Hampshire", 7, 0, 4, 0, 0, 36, 0, 20, 56, 93, 1, 0, 0, 2, 22, 3, 2, 29, 0, 15, 124, 0, 26, 0, 0, 441],
        ["New Jersey", 0, 1307, 21, 62, 15, 90, 0, 98, 184, 110, 1, 21, 49, 1, 148, 13, 0, 112, 0, 1807, 443, 137, 56, 0, 0, 4676],
        ["New Mexico", 17, 152, 7, 5, 3, 17, 0, 3, 8, 25, 0, 0, 4, 6, 3, 1, 0, 5, 19, 78, 3, 0, 0, 106, 1, 463],
        ["North Dakota", 0, 335, 2, 1, 8, 57, 0, 3, 8, 37, 0, 0, 0, 2, 22, 1, 0, 14, 0, 98, 40, 0, 0, 513, 0, 1142],
        ["Ohio", 0, 1900, 26, 0, 9, 447, 2, 292, 162, 2, 12, 105, 413, 5, 138, 63, 1, 124, 3, 2492, 47, 2, 0, 4, 0, 6249],
        ["Oregon", 8, 0, 5, 0, 20, 181, 1, 2, 65, 0, 1, 0, 7, 13, 163, 6, 2, 65, 1, 1518, 114, 26, 1, 2, 0, 2200],
        ["Pennsylvania", 4, 2327, 79, 365, 5, 539, 3, 36, 287, 30, 4, 6, 129, 31, 198, 16, 23, 218, 3, 2342, 401, 181, 105, 0, 4, 7337],
        ["Rhode Island", 0, 233, 3, 0, 2, 25, 0, 3, 37, 138, 0, 0, 1, 0, 14, 1, 0, 9, 0, 267, 21, 7, 2, 0, 2, 767],
        ["South Carolina", 0, 517, 28, 9, 37, 135, 0, 25, 4, 91, 3, 0, 13, 9, 21, 9, 0, 36, 3, 529, 53, 0, 5, 0, 0, 1526],
        ["Vermont", 10, 88, 6, 0, 8, 27, 0, 0, 20, 91, 0, 0, 0, 1, 17, 2, 0, 2, 0, 147, 24, 7, 2, 0, 1, 456],
        ["Virginia", 0, 794, 24, 0, 107, 293, 0, 27, 47, 170, 3, 0, 19, 7, 112, 17, 0, 58, 1, 2580, 162, 0, 91, 0, 25, 4535],
        ["Washington", 575, 2788, 62, 0, 106, 260, 1, 82, 122, 109, 3, 2, 7, 10, 115, 19, 1, 73, 109, 0, 0, 22, 129, 7, 0, 4602],
        ["West Virginia", 2, 314, 5, 17, 36, 112, 1, 37, 27, 120, 0, 1, 1, 0, 1, 27, 0, 3, 1, 434, 68, 0, 2, 116, 0, 1326],
        ["Wisconsin", 0, 762, 9, 0, 22, 183, 0, 41, 118, 114, 0, 0, 4, 15, 96, 11, 0, 74, 1, 1535, 236, 0, 8, 0, 2, 3231],
        ["Wyoming", 14, 191, 1, 0, 4, 16, 0, 2, 7, 0, 0, 0, 3, 20, 20, 1, 0, 6, 0, 0, 0, 0, 0, 0, 1, 287],
        ["Colorado", 0, 617, 10, 16, 46, 166, 0, 3, 52, 8, 2, 0, 4, 16, 121, 8, 0, 9, 0, 1220, 155, 0, 0, 33, 0, 2489],
        ["Connecticut", 0, 482, 8, 99, 39, 84, 2, 5, 89, 8, 2, 0, 7, 1, 49, 11, 0, 28, 0, 978, 65, 31, 24, 0, 1, 2014],
        ["Hawaii", 0, 739, 11, 0, 32, 24, 0, 42, 29, 39, 0, 0, 0, 0, 36, 0, 10, 5, 0, 435, 26, 1, 12, 0, 0, 1443],
        ["Idaho", 0, 350, 2, 0, 12, 64, 0, 1, 13, 3, 0, 0, 0, 10, 28, 3, 8, 11, 1, 288, 39, 0, 0, 2, 1, 837],
        ["Iowa", 0, 436, 3, 56, 47, 41, 1, 0, 51, 0, 3, 6, 5, 4, 120, 3, 4, 28, 0, 572, 38, 5, 2, 0, 0, 1428],
        ["New York", 0, 3055, 67, 0, 285, 420, 6, 214, 409, 1289, 14, 0, 18, 28, 317, 32, 3, 57, 0, 8737, 922, 258, 227, 0, 306, 16666],
        ["North Carolina", 0, 1446, 86, 4, 8, 496, 0, 104, 74, 163, 1, 0, 74, 5, 143, 29, 0, 45, 2, 2688, 294, 18, 11, 0, 0, 5693],
        ["Oklahoma", 0, 642, 30, 6, 55, 106, 0, 11, 75, 4, 0, 1, 27, 3, 174, 4, 0, 0, 9, 704, 123, 0, 4, 111, 17, 2105],
        ["South Dakota", 0, 207, 4, 0, 15, 42, 0, 2, 17, 18, 0, 0, 1, 8, 17, 1, 0, 20, 9, 0, 11, 0, 0, 3, 0, 377],
        ["Tennessee", 0, 1759, 31, 0, 150, 213, 0, 10, 71, 37, 3, 0, 143, 4, 63, 11, 0, 38, 1, 4, 256, 26, 42, 1, 9, 2874],
        ["Texas", 0, 6392, 239, 8, 627, 818, 2, 191, 371, 1469, 16, 3, 242, 44, 484, 67, 4, 144, 40, 0, 0, 29, 0, 855, 0, 12044],
        ["Utah", 0, 494, 10, 0, 26, 86, 0, 6, 32, 42, 0, 0, 0, 7, 41, 4, 0, 12, 0, 592, 68, 0, 0, 20, 0, 1441],
        ["Delaware", 0, 0, 5, 0, 15, 24, 0, 14, 30, 20, 0, 0, 112, 1, 13, 2, 0, 84, 16, 273, 63, 2, 76, 0, 1, 749]
        ];

    stateMap = dex.csv.createRowMap(labels, stateData, 0);

    //now get totals for each type of tax
    var taxTotals = [];
    labels.slice(1, labels.length - 1).forEach(function (d, i) { taxTotals.push(d3.sum(stateData, function (dd) { return dd[i] })) })


    //get the data from dexvis in format similar to the nvd3 example
    //this is an intermediate step to get structure
    //key: State
    //values: array
    stateNest = d3.nest()
                .key(function (d) { return d[0]; })
                .rollup(function (d) { return d; })
                .entries(stateData);
    //now get the values in proper structure
    //label : labels[i] from labels array
    //value : amount of taxes
    //eliminate State Name at 0 and Total at last
    stateNest.forEach(function (d) {
        var oldvalues = d.values[0].slice(1, d.values[0].length - 1);
        oldvalues.forEach(function (dd, ii) { d.values[ii] = { "label": labels[ii + 1], "value": dd, "pcttotal": dd / d3.sum(oldvalues) - taxTotals[ii + 1] / d3.sum(taxTotals) }; })
    })
    //end of replacement


    var barChart = new BarChart(
          {
              'parent': svg,
              'height': 200,
              'width': 900,
              'id': "StateStatisticsBarChart",
              'yaxisLabel': "",
              'labels': labels,
              'data': [],
              'xi': 0,
              'yi': d3.range(26).map(function (i) { return i + 1; }),
              'yaxisLabelFontSize': 18,
              'yaxisLabel': 'Taxes',
              'yaxisFormat': ",d",
              'xoffset': 220,
              'yoffset': 500
          }
        );

    //---------------------------------------------------------
    var chart;
    nv.addGraph(function () {
        chart = nv.models.multiBarHorizontalChart()
                .x(function (d) { return d.label })
                .y(function (d) { return d.value })
                .margin({ top: 30, right: 20, bottom: 50, left: 175 })
                .height(500)
                .width(400)
        .showValues(true)
        //.tooltips(true)
        //.barColor(d3.scale.category20().range())
                .showControls(false)
                .showLegend(false)
                .stacked(true);

        chart.yAxis
                .tickFormat(d3.format(',.2f'));

        d3.select('svg').append('g')
                .datum(stateNest)
                .attr("class", "horizontalbar")
            .transition().duration(500)
                .call(chart);

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });
    //------------------------------------------------------------


    map.addListener("click", barChart, function (chartEvent) {
        if (stateMap[chartEvent.state] != null) {
            d3.selectAll("#StateStatisticsBarChart").remove();
            var bcData = [stateMap[chartEvent.state]];
            barChart.attr("data", bcData)
            barChart.update();

            d3.selectAll('.horizontalbar').remove();
            nv.addGraph(function () {
                chart = nv.models.multiBarHorizontalChart()
                    .x(function (d) { return d.label })
                    .y(function (d) { return d.pcttotal })
                    .margin({ top: 30, right: 20, bottom: 50, left: 175 })
                    .height(500)
                    .width(400)
                //.showValues(true)
                //.tooltips(true)
                    .barColor(d3.scale.category20())
                    .showControls(false)
                    .showLegend(false)
                    .stacked(false);

                chart.yAxis
                    .tickFormat(d3.format(',.2f'));

                d3.select('svg').append('g')
                    .datum(stateNest.filter(function (d) { return d.key == chartEvent.state }))
                    .attr("class", "horizontalbar")
                .transition().duration(500)
                    .call(chart);

                nv.utils.windowResize(chart.update);

                chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

                return chart;
            });
        }


    });


    var legend = new VerticalLegend(
          {
              parent: svg,
              labels: labels.slice(1),
              caption: "",
              xoffset: 120,
              yoffset: 0,
              cellHeight: 25
          });




    barChart.render();
    map.render();
 </script>
diff --git a/nv.d3.css b/nv.d3.css

 /********************
 * HTML CSS
 */


 .chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
 }


 /********************
 * TOOLTIP CSS
 */

 .nvtooltip {
  position: absolute;
  background-color: rgba(255,255,255,1);
  padding: 1px;
  border: 1px solid rgba(0,0,0,.2);
  z-index: 10000;

  font-family: Arial;
  font-size: 13px;

  transition: opacity 500ms linear;
  -moz-transition: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear;

  transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;

  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  pointer-events: none;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }

 .nvtooltip.x-nvtooltip,
 .nvtooltip.y-nvtooltip {
  padding: 8px;
 }

 .nvtooltip h3 {
  margin: 0;
  padding: 4px 14px;
  line-height: 18px;
  font-weight: normal;
  background-color: #f7f7f7;
  text-align: center;

  border-bottom: 1px solid #ebebeb;

  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
 }

 .nvtooltip p {
  margin: 0;
  padding: 5px 14px;
  text-align: center;
 }

 .nvtooltip span {
  display: inline-block;
  margin: 2px 0;
 }

 .nvtooltip-pending-removal {
  position: absolute;
  pointer-events: none;
 }


 /********************
 * SVG CSS
 */


 svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Trying to get SVG to act like a greedy block in all browsers */
  display: block;
  width:100%;
  height:100%;
 }


 svg text {
  font: normal 12px Arial;
 }

 svg .title {
 font: bold 14px Arial;
 }

 .nvd3 .nv-background {
  fill: white;
  fill-opacity: 0;
  /*
  pointer-events: none;
  */
 }

 .nvd3.nv-noData {
  font-size: 18px;
  font-weight: bold;
 }


 /**********
 *  Brush
 */

 .nv-brush .extent {
  fill-opacity: .125;
  shape-rendering: crispEdges;
 }



 /**********
 *  Legend
 */

 .nvd3 .nv-legend .nv-series {
  cursor: pointer;
 }

 .nvd3 .nv-legend .disabled circle {
  fill-opacity: 0;
 }



 /**********
 *  Axes
 */

 .nvd3 .nv-axis path {
  fill: none;
  stroke: #000;
  stroke-opacity: .75;
  shape-rendering: crispEdges;
 }

 .nvd3 .nv-axis path.domain {
  stroke-opacity: .75;
 }

 .nvd3 .nv-axis.nv-x path.domain {
  stroke-opacity: 0;
 }

 .nvd3 .nv-axis line {
  fill: none;
  stroke: #000;
  stroke-opacity: .25;
  shape-rendering: crispEdges;
 }

 .nvd3 .nv-axis line.zero {
  stroke-opacity: .75;
 }

 .nvd3 .nv-axis .nv-axisMaxMin text {
  font-weight: bold;
 }

 .nvd3 .x  .nv-axis .nv-axisMaxMin text,
 .nvd3 .x2 .nv-axis .nv-axisMaxMin text,
 .nvd3 .x3 .nv-axis .nv-axisMaxMin text {
  text-anchor: middle
 }



 /**********
 *  Brush
 */

 .nv-brush .resize path {
  fill: #eee;
  stroke: #666;
 }



 /**********
 *  Bars
 */

 .nvd3 .nv-bars .negative rect {
    zfill: brown;
 }

 .nvd3 .nv-bars rect {
  zfill: steelblue;
  fill-opacity: .75;

  transition: fill-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear;
  -webkit-transition: fill-opacity 250ms linear;
 }

 .nvd3 .nv-bars rect:hover {
  fill-opacity: 1;
 }

 .nvd3 .nv-bars .hover rect {
  fill: lightblue;
 }

 .nvd3 .nv-bars text {
  fill: rgba(0,0,0,0);
 }

 .nvd3 .nv-bars .hover text {
  fill: rgba(0,0,0,1);
 }


 /**********
 *  Bars
 */

 .nvd3 .nv-multibar .nv-groups rect,
 .nvd3 .nv-multibarHorizontal .nv-groups rect,
 .nvd3 .nv-discretebar .nv-groups rect {
  stroke-opacity: 0;

  transition: fill-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear;
  -webkit-transition: fill-opacity 250ms linear;
 }

 .nvd3 .nv-multibar .nv-groups rect:hover,
 .nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
 .nvd3 .nv-discretebar .nv-groups rect:hover {
  fill-opacity: 1;
 }

 .nvd3 .nv-discretebar .nv-groups text,
 .nvd3 .nv-multibarHorizontal .nv-groups text {
  font-weight: bold;
  fill: rgba(0,0,0,1);
  stroke: rgba(0,0,0,0);
 }

 /***********
 *  Pie Chart
 */

 .nvd3.nv-pie path {
  stroke-opacity: 0;

  transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
  -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;

 }

 .nvd3.nv-pie .nv-slice text {
  stroke: #000;
  stroke-width: 0;
 }

 .nvd3.nv-pie path {
  stroke: #fff;
  stroke-width: 1px;
  stroke-opacity: 1;
 }

 .nvd3.nv-pie .hover path {
  fill-opacity: .7;
 /*
  stroke-width: 6px;
  stroke-opacity: 1;
 */
 }

 .nvd3.nv-pie .nv-label rect {
  fill-opacity: 0;
  stroke-opacity: 0;
 }

 /**********
 * Lines
 */

 .nvd3 .nv-groups path.nv-line {
  fill: none;
  stroke-width: 2.5px;
  /*
  stroke-linecap: round;
  shape-rendering: geometricPrecision;

  transition: stroke-width 250ms linear;
  -moz-transition: stroke-width 250ms linear;
  -webkit-transition: stroke-width 250ms linear;

  transition-delay: 250ms
  -moz-transition-delay: 250ms;
  -webkit-transition-delay: 250ms;
  */
 }

 .nvd3 .nv-groups path.nv-area {
  stroke: none;
  /*
  stroke-linecap: round;
  shape-rendering: geometricPrecision;

  stroke-width: 2.5px;
  transition: stroke-width 250ms linear;
  -moz-transition: stroke-width 250ms linear;
  -webkit-transition: stroke-width 250ms linear;

  transition-delay: 250ms
  -moz-transition-delay: 250ms;
  -webkit-transition-delay: 250ms;
  */
 }

 .nvd3 .nv-line.hover path {
  stroke-width: 6px;
 }

 /*
 .nvd3.scatter .groups .point {
  fill-opacity: 0.1;
  stroke-opacity: 0.1;
 }
  */

 .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
  fill-opacity: 0;
  stroke-opacity: 0;
 }

 .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
  fill-opacity: .5 !important;
  stroke-opacity: .5 !important;
 }


 .nvd3 .nv-groups .nv-point {
  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 }

 .nvd3.nv-scatter .nv-groups .nv-point.hover,
 .nvd3 .nv-groups .nv-point.hover {
  stroke-width: 20px;
  fill-opacity: .5 !important;
  stroke-opacity: .5 !important;
 }


 .nvd3 .nv-point-paths path {
  stroke: #aaa;
  stroke-opacity: 0;
  fill: #eee;
  fill-opacity: 0;
 }



 .nvd3 .nv-indexLine {
  cursor: ew-resize;
 }


 /**********
 * Distribution
 */

 .nvd3 .nv-distribution {
  pointer-events: none;
 }



 /**********
 *  Scatter
 */

 /* **Attempting to remove this for useVoronoi(false), need to see if it's required anywhere
 .nvd3 .nv-groups .nv-point {
  pointer-events: none;
 }
 */

 .nvd3 .nv-groups .nv-point.hover {
  stroke-width: 20px;
  stroke-opacity: .5;
 }

 .nvd3 .nv-scatter .nv-point.hover {
  fill-opacity: 1;
 }

 /*
 .nv-group.hover .nv-point {
  fill-opacity: 1;
 }
 */


 /**********
 *  Stacked Area
 */

 .nvd3.nv-stackedarea path.nv-area {
  fill-opacity: .7;
  /*
  stroke-opacity: .65;
  fill-opacity: 1;
  */
  stroke-opacity: 0;

  transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
  -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;

  /*
  transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;
  */

 }

 .nvd3.nv-stackedarea path.nv-area.hover {
  fill-opacity: .9;
  /*
  stroke-opacity: .85;
  */
 }
 /*
 .d3stackedarea .groups path {
  stroke-opacity: 0;
 }
  */



 .nvd3.nv-stackedarea .nv-groups .nv-point {
  stroke-opacity: 0;
  fill-opacity: 0;
 }

 .nvd3.nv-stackedarea .nv-groups .nv-point.hover {
  stroke-width: 20px;
  stroke-opacity: .75;
  fill-opacity: 1;
 }



 /**********
 *  Line Plus Bar
 */

 .nvd3.nv-linePlusBar .nv-bar rect {
  fill-opacity: .75;
 }

 .nvd3.nv-linePlusBar .nv-bar rect:hover {
  fill-opacity: 1;
 }


 /**********
 *  Bullet
 */

 .nvd3.nv-bullet { font: 10px sans-serif; }
 .nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
 .nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
 .nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
 .nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
 .nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
 .nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
 .nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
 .nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
 .nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
 .nvd3.nv-bullet .nv-subtitle { fill: #999; }


 .nvd3.nv-bullet .nv-range {
  fill: #999;
  fill-opacity: .4;
 }
 .nvd3.nv-bullet .nv-range:hover {
  fill-opacity: .7;
 }



 /**********
 * Sparkline
 */

 .nvd3.nv-sparkline path {
  fill: none;
 }

 .nvd3.nv-sparklineplus g.nv-hoverValue {
  pointer-events: none;
 }

 .nvd3.nv-sparklineplus .nv-hoverValue line {
  stroke: #333;
  stroke-width: 1.5px;
 }

 .nvd3.nv-sparklineplus,
 .nvd3.nv-sparklineplus g {
  pointer-events: all;
 }

 .nvd3 .nv-hoverArea {
  fill-opacity: 0;
  stroke-opacity: 0;
 }

 .nvd3.nv-sparklineplus .nv-xValue,
 .nvd3.nv-sparklineplus .nv-yValue {
  /*
  stroke: #666;
  */
  stroke-width: 0;
  font-size: .9em;
  font-weight: normal;
 }

 .nvd3.nv-sparklineplus .nv-yValue {
  stroke: #f66;
 }

 .nvd3.nv-sparklineplus .nv-maxValue {
  stroke: #2ca02c;
  fill: #2ca02c;
 }

 .nvd3.nv-sparklineplus .nv-minValue {
  stroke: #d62728;
  fill: #d62728;
 }

 .nvd3.nv-sparklineplus .nv-currentValue {
  /*
  stroke: #444;
  fill: #000;
  */
  font-weight: bold;
  font-size: 1.1em;
 }

 /**********
 * historical stock
 */

 .nvd3.nv-ohlcBar .nv-ticks .nv-tick {
  stroke-width: 2px;
 }

 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
  stroke-width: 4px;
 }

 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
 stroke: #2ca02c;
 }

 .nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
 stroke: #d62728;
 }

 .nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
  font-weight: bold;
 }

 .nvd3.nv-historicalStockChart .nv-dragTarget {
  fill-opacity: 0;
  stroke: none;
  cursor: move;
 }

 .nvd3 .nv-brush .extent {
  /*
  cursor: ew-resize !important;
  */
  fill-opacity: 0 !important;
 }

 .nvd3 .nv-brushBackground rect {
  stroke: #000;
  stroke-width: .4;
  fill: #fff;
  fill-opacity: .7;
 }



 /**********
 * Indented Tree
 */


 /**
 * TODO: the following 3 selectors are based on classes used in the example.  I should either make them standard and leave them here, or move to a CSS file not included in the library
 */
 .nvd3.nv-indentedtree .name {
  margin-left: 5px;
 }

 .nvd3.nv-indentedtree .clickable {
  color: #08C;
  cursor: pointer;
 }

 .nvd3.nv-indentedtree span.clickable:hover {
  color: #005580;
  text-decoration: underline;
 }


 .nvd3.nv-indentedtree .nv-childrenCount {
  display: inline-block;
  margin-left: 5px;
 }

 .nvd3.nv-indentedtree .nv-treeicon {
  cursor: pointer;
  /*
  cursor: n-resize;
  */
 }

 .nvd3.nv-indentedtree .nv-treeicon.nv-folded {
  cursor: pointer;
  /*
  cursor: s-resize;
  */
 }


diff --git a/nv.d3.js b/nv.d3.js
 (function(){

 var nv = window.nv || {};

 nv.version = '0.0.1a';
 nv.dev = true //set false when in production

 window.nv = nv;

 nv.tooltip = {}; // For the tooltip system
 nv.utils = {}; // Utility subsystem
 nv.models = {}; //stores all the possible models/components
 nv.charts = {}; //stores all the ready to use charts
 nv.graphs = []; //stores all the graphs currently on the page
 nv.logs = {}; //stores some statistics and potential error messages

 nv.dispatch = d3.dispatch('render_start', 'render_end');

 // *************************************************************************
 //  Development render timers - disabled if dev = false

 if (nv.dev) {
  nv.dispatch.on('render_start', function(e) {
    nv.logs.startTime = +new Date();
  });

  nv.dispatch.on('render_end', function(e) {
    nv.logs.endTime = +new Date();
    nv.logs.totalTime = nv.logs.endTime - nv.logs.startTime;
    nv.log('total', nv.logs.totalTime); // used for development, to keep track of graph generation times
  });
 }

 // ********************************************
 //  Public Core NV functions

 // Logs all arguments, and returns the last so you can test things in place
 nv.log = function() {
  if (nv.dev && console.log && console.log.apply)
    console.log.apply(console, arguments)
  else if (nv.dev && console.log && Function.prototype.bind) {
    var log = Function.prototype.bind.call(console.log, console);
    log.apply(console, arguments);
  }
  return arguments[arguments.length - 1];
 };


 nv.render = function render(step) {
  step = step || 1; // number of graphs to generate in each timeout loop

  nv.render.active = true;
  nv.dispatch.render_start();

  setTimeout(function() {
    var chart, graph;

    for (var i = 0; i < step && (graph = nv.render.queue[i]); i++) {
      chart = graph.generate();
      if (typeof graph.callback == typeof(Function)) graph.callback(chart);
      nv.graphs.push(chart);
    }

    nv.render.queue.splice(0, i);

    if (nv.render.queue.length) setTimeout(arguments.callee, 0);
    else { nv.render.active = false; nv.dispatch.render_end(); }
  }, 0);
 };

 nv.render.active = false;
 nv.render.queue = [];

 nv.addGraph = function(obj) {
  if (typeof arguments[0] === typeof(Function))
    obj = {generate: arguments[0], callback: arguments[1]};

  nv.render.queue.push(obj);

  if (!nv.render.active) nv.render();
 };

 nv.identity = function(d) { return d; };

 nv.strip = function(s) { return s.replace(/(\s|&)/g,''); };

 function daysInMonth(month,year) {
  return (new Date(year, month+1, 0)).getDate();
 }

 function d3_time_range(floor, step, number) {
  return function(t0, t1, dt) {
    var time = floor(t0), times = [];
    if (time < t0) step(time);
    if (dt > 1) {
      while (time < t1) {
        var date = new Date(+time);
        if ((number(date) % dt === 0)) times.push(date);
        step(time);
      }
    } else {
      while (time < t1) { times.push(new Date(+time)); step(time); }
    }
    return times;
  };
 }

 d3.time.monthEnd = function(date) {
  return new Date(date.getFullYear(), date.getMonth(), 0);
 };

 d3.time.monthEnds = d3_time_range(d3.time.monthEnd, function(date) {
    date.setUTCDate(date.getUTCDate() + 1);
    date.setDate(daysInMonth(date.getMonth() + 1, date.getFullYear()));
  }, function(date) {
    return date.getMonth();
  }
 );


 /*****
 * A no-frills tooltip implementation.
 *****/


 (function() {

  var nvtooltip = window.nv.tooltip = {};

  nvtooltip.show = function(pos, content, gravity, dist, parentContainer, classes) {

    var container = document.createElement('div');
        container.className = 'nvtooltip ' + (classes ? classes : 'xy-tooltip');

    gravity = gravity || 's';
    dist = dist || 20;

    var body = parentContainer ? parentContainer : document.getElementsByTagName('body')[0];

    container.innerHTML = content;
    container.style.left = 0;
    container.style.top = 0;
    container.style.opacity = 0;

    body.appendChild(container);

    var height = parseInt(container.offsetHeight),
        width = parseInt(container.offsetWidth),
        windowWidth = nv.utils.windowSize().width,
        windowHeight = nv.utils.windowSize().height,
        scrollTop = window.scrollY,
        scrollLeft = window.scrollX,
        left, top;

    windowHeight = window.innerWidth >= document.body.scrollWidth ? windowHeight : windowHeight - 16;
    windowWidth = window.innerHeight >= document.body.scrollHeight ? windowWidth : windowWidth - 16;

    var tooltipTop = function ( Elem ) {
        var offsetTop = top;
        do {
            if( !isNaN( Elem.offsetTop ) ) {
                offsetTop += (Elem.offsetTop);
            }
        } while( Elem = Elem.offsetParent );
        return offsetTop;
    }

    var tooltipLeft = function ( Elem ) {
        var offsetLeft = left;
        do {
            if( !isNaN( Elem.offsetLeft ) ) {
                offsetLeft += (Elem.offsetLeft);
            }
        } while( Elem = Elem.offsetParent );
        return offsetLeft;
    }

    switch (gravity) {
      case 'e':
        left = pos[0] - width - dist;
        top = pos[1] - (height / 2);
        var tLeft = tooltipLeft(container);
        var tTop = tooltipTop(container);
        if (tLeft < scrollLeft) left = pos[0] + dist > scrollLeft ? pos[0] + dist : scrollLeft - tLeft + left;
        if (tTop < scrollTop) top = scrollTop - tTop + top;
        if (tTop + height > scrollTop + windowHeight) top = scrollTop + windowHeight - tTop + top - height;
        break;
      case 'w':
        left = pos[0] + dist;
        top = pos[1] - (height / 2);
        if (tLeft + width > windowWidth) left = pos[0] - width - dist;
        if (tTop < scrollTop) top = scrollTop + 5;
        if (tTop + height > scrollTop + windowHeight) top = scrollTop - height - 5;
        break;
      case 'n':
        left = pos[0] - (width / 2) - 5;
        top = pos[1] + dist;
        var tLeft = tooltipLeft(container);
        var tTop = tooltipTop(container);
        if (tLeft < scrollLeft) left = scrollLeft + 5;
        if (tLeft + width > windowWidth) left = left - width/2 + 5;
        if (tTop + height > scrollTop + windowHeight) top = scrollTop + windowHeight - tTop + top - height;
        break;
      case 's':
        left = pos[0] - (width / 2);
        top = pos[1] - height - dist;
        var tLeft = tooltipLeft(container);
        var tTop = tooltipTop(container);
        if (tLeft < scrollLeft) left = scrollLeft + 5;
        if (tLeft + width > windowWidth) left = left - width/2 + 5;
        if (scrollTop > tTop) top = scrollTop;
        break;
    }


    container.style.left = left+'px';
    container.style.top = top+'px';
    container.style.opacity = 1;
    container.style.position = 'absolute'; //fix scroll bar issue
    container.style.pointerEvents = 'none'; //fix scroll bar issue

    return container;
  };

  nvtooltip.cleanup = function() {

      // Find the tooltips, mark them for removal by this class (so others cleanups won't find it)
      var tooltips = document.getElementsByClassName('nvtooltip');
      var purging = [];
      while(tooltips.length) {
        purging.push(tooltips[0]);
        tooltips[0].style.transitionDelay = '0 !important';
        tooltips[0].style.opacity = 0;
        tooltips[0].className = 'nvtooltip-pending-removal';
      }


      setTimeout(function() {

          while (purging.length) {
             var removeMe = purging.pop();
              removeMe.parentNode.removeChild(removeMe);
          }
    }, 500);
  };


 })();

 nv.utils.windowSize = function() {
    // Sane defaults
    var size = {width: 640, height: 480};

    // Earlier IE uses Doc.body
    if (document.body && document.body.offsetWidth) {
        size.width = document.body.offsetWidth;
        size.height = document.body.offsetHeight;
    }

    // IE can use depending on mode it is in
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
        size.width = document.documentElement.offsetWidth;
        size.height = document.documentElement.offsetHeight;
    }

    // Most recent browsers use
    if (window.innerWidth && window.innerHeight) {
        size.width = window.innerWidth;
        size.height = window.innerHeight;
    }
    return (size);
 };



 // Easy way to bind multiple functions to window.onresize
 // TODO: give a way to remove a function after its bound, other than removing all of them
 nv.utils.windowResize = function(fun){
  var oldresize = window.onresize;

  window.onresize = function(e) {
    if (typeof oldresize == 'function') oldresize(e);
    fun(e);
  }
 }

 // Backwards compatible way to implement more d3-like coloring of graphs.
 // If passed an array, wrap it in a function which implements the old default
 // behavior
 nv.utils.getColor = function(color) {
    if (!arguments.length) return nv.utils.defaultColor(); //if you pass in nothing, get default colors back

    if( Object.prototype.toString.call( color ) === '[object Array]' )
        return function(d, i) { return d.color || color[i % color.length]; };
    else
        return color;
        //can't really help it if someone passes rubbish as color
 }

 // Default color chooser uses the index of an object as before.
 nv.utils.defaultColor = function() {
    var colors = d3.scale.category20().range();
    return function(d, i) { return d.color || colors[i % colors.length] };
 }


 // Returns a color function that takes the result of 'getKey' for each series and
 // looks for a corresponding color from the dictionary,
 nv.utils.customTheme = function(dictionary, getKey, defaultColors) {
  getKey = getKey || function(series) { return series.key }; // use default series.key if getKey is undefined
  defaultColors = defaultColors || d3.scale.category20().range(); //default color function

  var defIndex = defaultColors.length; //current default color (going in reverse)

  return function(series, index) {
    var key = getKey(series);

    if (!defIndex) defIndex = defaultColors.length; //used all the default colors, start over

    if (typeof dictionary[key] !== "undefined")
      return (typeof dictionary[key] === "function") ? dictionary[key]() : dictionary[key];
    else
      return defaultColors[--defIndex]; // no match in dictionary, use default color
  }
 }



 // From the PJAX example on d3js.org, while this is not really directly needed
 // it's a very cool method for doing pjax, I may expand upon it a little bit,
 // open to suggestions on anything that may be useful
 nv.utils.pjax = function(links, content) {
  d3.selectAll(links).on("click", function() {
    history.pushState(this.href, this.textContent, this.href);
    load(this.href);
    d3.event.preventDefault();
  });

  function load(href) {
    d3.html(href, function(fragment) {
      var target = d3.select(content).node();
      target.parentNode.replaceChild(d3.select(fragment).select(content).node(), target);
      nv.utils.pjax(links, content);
    });
  }

  d3.select(window).on("popstate", function() {
    if (d3.event.state) load(d3.event.state);
  });
 }

 nv.models.axis = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var axis = d3.svg.axis()
    ;

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 75 //only used for tickLabel currently
    , height = 60 //only used for tickLabel currently
    , scale = d3.scale.linear()
    , axisLabelText = null
    , showMaxMin = true //TODO: showMaxMin should be disabled on all ordinal scaled axes
    , highlightZero = true
    , rotateLabels = 0
    , rotateYLabel = true
    , staggerLabels = false
    , isOrdinal = false
    , ticks = null
    ;

  axis
    .scale(scale)
    .orient('bottom')
    .tickFormat(function(d) { return d })
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var scale0;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this);


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-axis').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-axis');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g')

      //------------------------------------------------------------


      if (ticks !== null)
        axis.ticks(ticks);
      else if (axis.orient() == 'top' || axis.orient() == 'bottom')
        axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);


      //TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component


      d3.transition(g)
          .call(axis);

      scale0 = scale0 || axis.scale();

      var fmt = axis.tickFormat();
      if (fmt == null) {
        fmt = scale0.tickFormat();
      }

      var axisLabel = g.selectAll('text.nv-axislabel')
          .data([axisLabelText || null]);
      axisLabel.exit().remove();
      switch (axis.orient()) {
        case 'top':
          axisLabel.enter().append('text').attr('class', 'nv-axislabel')
              .attr('text-anchor', 'middle')
              .attr('y', 0);
          var w = (scale.range().length==2) ? scale.range()[1] : (scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]));
          axisLabel
              .attr('x', w/2);
          if (showMaxMin) {
            var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
                           .data(scale.domain());
            axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text');
            axisMaxMin.exit().remove();
            axisMaxMin
                .attr('transform', function(d,i) {
                  return 'translate(' + scale(d) + ',0)'
                })
              .select('text')
                .attr('dy', '0em')
                .attr('y', -axis.tickPadding())
                .attr('text-anchor', 'middle')
                .text(function(d,i) {
                  var v = fmt(d);
                  return ('' + v).match('NaN') ? '' : v;
                });
            d3.transition(axisMaxMin)
                .attr('transform', function(d,i) {
                  return 'translate(' + scale.range()[i] + ',0)'
                });
          }
          break;
        case 'bottom':
          var xLabelMargin = 36;
          var maxTextWidth = 30;
          var xTicks = g.selectAll('g').select("text");
          if (rotateLabels%360) {
            //Calculate the longest xTick width
            xTicks.each(function(d,i){
              var width = this.getBBox().width;
              if(width > maxTextWidth) maxTextWidth = width;
            });
            //Convert to radians before calculating sin. Add 30 to margin for healthy padding.
            var sin = Math.abs(Math.sin(rotateLabels*Math.PI/180));
            var xLabelMargin = (sin ? sin*maxTextWidth : maxTextWidth)+30;
            //Rotate all xTicks
            xTicks
              .attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
              .attr('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end');
          }
          axisLabel.enter().append('text').attr('class', 'nv-axislabel')
            .attr('text-anchor', 'middle')
            .attr('y', xLabelMargin);
          var w = (scale.range().length==2) ? scale.range()[1] : (scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]));
          axisLabel
              .attr('x', w/2);
          if (showMaxMin) {
          //if (showMaxMin && !isOrdinal) {
            var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
                           //.data(scale.domain())
                           .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]);
            axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text');
            axisMaxMin.exit().remove();
            axisMaxMin
                .attr('transform', function(d,i) {
                  return 'translate(' + (scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0)) + ',0)'
                })
              .select('text')
                .attr('dy', '.71em')
                .attr('y', axis.tickPadding())
                .attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
                .attr('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ? 'start' : 'end') : 'middle')
                .text(function(d,i) {
                  var v = fmt(d);
                  return ('' + v).match('NaN') ? '' : v;
                });
            d3.transition(axisMaxMin)
                .attr('transform', function(d,i) {
                  //return 'translate(' + scale.range()[i] + ',0)'
                  //return 'translate(' + scale(d) + ',0)'
                  return 'translate(' + (scale(d) + (isOrdinal ? scale.rangeBand() / 2 : 0)) + ',0)'
                });
          }
          if (staggerLabels)
            xTicks
                .attr('transform', function(d,i) { return 'translate(0,' + (i % 2 == 0 ? '0' : '12') + ')' });

          break;
        case 'right':
          axisLabel.enter().append('text').attr('class', 'nv-axislabel')
              .attr('text-anchor', rotateYLabel ? 'middle' : 'begin')
              .attr('transform', rotateYLabel ? 'rotate(90)' : '')
              .attr('y', rotateYLabel ? (-Math.max(margin.right,width) + 12) : -10); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
          axisLabel
              .attr('x', rotateYLabel ? (scale.range()[0] / 2) : axis.tickPadding());
          if (showMaxMin) {
            var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
                           .data(scale.domain());
            axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text')
                .style('opacity', 0);
            axisMaxMin.exit().remove();
            axisMaxMin
                .attr('transform', function(d,i) {
                  return 'translate(0,' + scale(d) + ')'
                })
              .select('text')
                .attr('dy', '.32em')
                .attr('y', 0)
                .attr('x', axis.tickPadding())
                .attr('text-anchor', 'start')
                .text(function(d,i) {
                  var v = fmt(d);
                  return ('' + v).match('NaN') ? '' : v;
                });
            d3.transition(axisMaxMin)
                .attr('transform', function(d,i) {
                  return 'translate(0,' + scale.range()[i] + ')'
                })
              .select('text')
                .style('opacity', 1);
          }
          break;
        case 'left':
          /*
          //For dynamically placing the label. Can be used with dynamically-sized chart axis margins
          var yTicks = g.selectAll('g').select("text");
          yTicks.each(function(d,i){
            var labelPadding = this.getBBox().width + axis.tickPadding() + 16;
            if(labelPadding > width) width = labelPadding;
          });
          */
          axisLabel.enter().append('text').attr('class', 'nv-axislabel')
              .attr('text-anchor', rotateYLabel ? 'middle' : 'end')
              .attr('transform', rotateYLabel ? 'rotate(-90)' : '')
              .attr('y', rotateYLabel ? (-Math.max(margin.left,width) + 12) : -10); //TODO: consider calculating this based on largest tick width... OR at least expose this on chart
          axisLabel
              .attr('x', rotateYLabel ? (-scale.range()[0] / 2) : -axis.tickPadding());
          if (showMaxMin) {
            var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
                           .data(scale.domain());
            axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text')
                .style('opacity', 0);
            axisMaxMin.exit().remove();
            axisMaxMin
                .attr('transform', function(d,i) {
                  return 'translate(0,' + scale0(d) + ')'
                })
              .select('text')
                .attr('dy', '.32em')
                .attr('y', 0)
                .attr('x', -axis.tickPadding())
                .attr('text-anchor', 'end')
                .text(function(d,i) {
                  var v = fmt(d);
                  return ('' + v).match('NaN') ? '' : v;
                });
            d3.transition(axisMaxMin)
                .attr('transform', function(d,i) {
                  return 'translate(0,' + scale.range()[i] + ')'
                })
              .select('text')
                .style('opacity', 1);
          }
          break;
      }
      axisLabel
          .text(function(d) { return d });


      if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {
        //check if max and min overlap other values, if so, hide the values that overlap
        g.selectAll('g') // the g's wrapping each tick
            .each(function(d,i) {
              d3.select(this).select('text').attr('opacity', 1);
              if (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10) { // 10 is assuming text height is 16... if d is 0, leave it!
                if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL
                  d3.select(this).attr('opacity', 0);
                
                d3.select(this).select('text').attr('opacity', 0); // Don't remove the ZERO line!!
              }
            });

        //if Max and Min = 0 only show min, Issue #281
        if (scale.domain()[0] == scale.domain()[1] && scale.domain()[0] == 0)
          wrap.selectAll('g.nv-axisMaxMin')
            .style('opacity', function(d,i) { return !i ? 1 : 0 });

      }

      if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
        var maxMinRange = [];
        wrap.selectAll('g.nv-axisMaxMin')
            .each(function(d,i) {
              try {
                  if (i) // i== 1, max position
                      maxMinRange.push(scale(d) - this.getBBox().width - 4)  //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
                  else // i==0, min position
                      maxMinRange.push(scale(d) + this.getBBox().width + 4)
              }catch (err) {
                  if (i) // i== 1, max position
                      maxMinRange.push(scale(d) - 4)  //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case)
                  else // i==0, min position
                      maxMinRange.push(scale(d) + 4)
              }
            });
        g.selectAll('g') // the g's wrapping each tick
            .each(function(d,i) {
              if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) {
                if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL
                  d3.select(this).remove();
                else
                  d3.select(this).select('text').remove(); // Don't remove the ZERO line!!
              }
            });
      }


      //highlight zero line ... Maybe should not be an option and should just be in CSS?
      if (highlightZero)
        g.selectAll('line.tick')
          .filter(function(d) { return !parseFloat(Math.round(d*100000)/1000000) }) //this is because sometimes the 0 tick is a very small fraction, TODO: think of cleaner technique
            .classed('zero', true);

      //store old scales for use in transitions on update
      scale0 = scale.copy();

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.axis = axis;

  d3.rebind(chart, axis, 'orient', 'tickValues', 'tickSubdivide', 'tickSize', 'tickPadding', 'tickFormat');
  d3.rebind(chart, scale, 'domain', 'range', 'rangeBand', 'rangeBands'); //these are also accessible by chart.scale(), but added common ones directly for ease of use

  chart.margin = function(_) {
    if(!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  }

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.ticks = function(_) {
    if (!arguments.length) return ticks;
    ticks = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.axisLabel = function(_) {
    if (!arguments.length) return axisLabelText;
    axisLabelText = _;
    return chart;
  }

  chart.showMaxMin = function(_) {
    if (!arguments.length) return showMaxMin;
    showMaxMin = _;
    return chart;
  }

  chart.highlightZero = function(_) {
    if (!arguments.length) return highlightZero;
    highlightZero = _;
    return chart;
  }

  chart.scale = function(_) {
    if (!arguments.length) return scale;
    scale = _;
    axis.scale(scale);
    isOrdinal = typeof scale.rangeBands === 'function';
    d3.rebind(chart, scale, 'domain', 'range', 'rangeBand', 'rangeBands');
    return chart;
  }

  chart.rotateYLabel = function(_) {
    if(!arguments.length) return rotateYLabel;
    rotateYLabel = _;
    return chart;
  }

  chart.rotateLabels = function(_) {
    if(!arguments.length) return rotateLabels;
    rotateLabels = _;
    return chart;
  }

  chart.staggerLabels = function(_) {
    if (!arguments.length) return staggerLabels;
    staggerLabels = _;
    return chart;
  };


  //============================================================


  return chart;
 }
 //TODO: consider deprecating and using multibar with single series for this
 nv.models.historicalBar = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , x = d3.scale.linear()
    , y = d3.scale.linear()
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , forceX = []
    , forceY = [0]
    , padData = false
    , clipEdge = true
    , color = nv.utils.defaultColor()
    , xDomain
    , yDomain
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);


      //------------------------------------------------------------
      // Setup Scales

      x   .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ))

      if (padData)
        x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5)  / data[0].values.length ]);
      else
        x.range([0, availableWidth]);

      y   .domain(yDomain || d3.extent(data[0].values.map(getY).concat(forceY) ))
          .range([availableHeight, 0]);

      // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
      if (x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1]) singlePoint = true;
      if (x.domain()[0] === x.domain()[1])
        x.domain()[0] ?
            x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
          : x.domain([-1,1]);

      if (y.domain()[0] === y.domain()[1])
        y.domain()[0] ?
            y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
          : y.domain([-1,1]);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-bar').data([data[0].values]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bar');
      var defsEnter = wrapEnter.append('defs');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-bars');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      container
          .on('click', function(d,i) {
            dispatch.chartClick({
                data: d,
                index: i,
                pos: d3.event,
                id: id
            });
          });


      defsEnter.append('clipPath')
          .attr('id', 'nv-chart-clip-path-' + id)
        .append('rect');

      wrap.select('#nv-chart-clip-path-' + id + ' rect')
          .attr('width', availableWidth)
          .attr('height', availableHeight);

      g   .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');



      var bars = wrap.select('.nv-bars').selectAll('.nv-bar')
          .data(function(d) { return d });

      bars.exit().remove();


      var barsEnter = bars.enter().append('rect')
          //.attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
          .attr('x', 0 )
          .attr('y', function(d,i) {  return y(Math.max(0, getY(d,i))) })
          .attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) })
          .on('mouseover', function(d,i) {
            d3.select(this).classed('hover', true);
            dispatch.elementMouseover({
                point: d,
                series: data[0],
                pos: [x(getX(d,i)), y(getY(d,i))],  // TODO: Figure out why the value appears to be shifted
                pointIndex: i,
                seriesIndex: 0,
                e: d3.event
            });

          })
          .on('mouseout', function(d,i) {
                d3.select(this).classed('hover', false);
                dispatch.elementMouseout({
                    point: d,
                    series: data[0],
                    pointIndex: i,
                    seriesIndex: 0,
                    e: d3.event
                });
          })
          .on('click', function(d,i) {
                dispatch.elementClick({
                    //label: d[label],
                    value: getY(d,i),
                    data: d,
                    index: i,
                    pos: [x(getX(d,i)), y(getY(d,i))],
                    e: d3.event,
                    id: id
                });
              d3.event.stopPropagation();
          })
          .on('dblclick', function(d,i) {
              dispatch.elementDblClick({
                  //label: d[label],
                  value: getY(d,i),
                  data: d,
                  index: i,
                  pos: [x(getX(d,i)), y(getY(d,i))],
                  e: d3.event,
                  id: id
              });
              d3.event.stopPropagation();
          });

      bars
          .attr('fill', function(d,i) { return color(d, i); })
          .attr('class', function(d,i,j) { return (getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive') + ' nv-bar-' + j + '-' + i })
          .attr('transform', function(d,i) { return 'translate(' + (x(getX(d,i)) - availableWidth / data[0].values.length * .45) + ',0)'; })  //TODO: better width calculations that don't assume always uniform data spacing;w
          .attr('width', (availableWidth / data[0].values.length) * .9 )


      d3.transition(bars)
          //.attr('y', function(d,i) {  return y(Math.max(0, getY(d,i))) })
          .attr('y', function(d,i) {
            return getY(d,i) < 0 ?
                    y(0) :
                    y(0) - y(getY(d,i)) < 1 ?
                      y(0) - 1 :
                      y(getY(d,i))
          })
          .attr('height', function(d,i) { return Math.max(Math.abs(y(getY(d,i)) - y(0)),1) });
          //.order();  // not sure if this makes any sense for this model

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.xScale = function(_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };

  chart.yScale = function(_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };

  chart.xDomain = function(_) {
    if (!arguments.length) return xDomain;
    xDomain = _;
    return chart;
  };

  chart.yDomain = function(_) {
    if (!arguments.length) return yDomain;
    yDomain = _;
    return chart;
  };

  chart.forceX = function(_) {
    if (!arguments.length) return forceX;
    forceX = _;
    return chart;
  };

  chart.forceY = function(_) {
    if (!arguments.length) return forceY;
    forceY = _;
    return chart;
  };

  chart.padData = function(_) {
    if (!arguments.length) return padData;
    padData = _;
    return chart;
  };

  chart.clipEdge = function(_) {
    if (!arguments.length) return clipEdge;
    clipEdge = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 // Chart design based on the recommendations of Stephen Few. Implementation
 // based on the work of Clint Ivy, Jamie Love, and Jason Davies.
 // http://projects.instantcognition.com/protovis/bulletchart/

 nv.models.bullet = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , orient = 'left' // TODO top & bottom
    , reverse = false
    , ranges = function(d) { return d.ranges }
    , markers = function(d) { return d.markers }
    , measures = function(d) { return d.measures }
    , forceX = [0] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
    , width = 380
    , height = 30
    , tickFormat = null
    , color = nv.utils.getColor(['#1f77b4'])
    , dispatch = d3.dispatch('elementMouseover', 'elementMouseout')
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(d, i) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);

      var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
          markerz = markers.call(this, d, i).slice().sort(d3.descending),
          measurez = measures.call(this, d, i).slice().sort(d3.descending);


      //------------------------------------------------------------
      // Setup Scales

      // Compute the new x-scale.
      var x1 = d3.scale.linear()
          .domain( d3.extent(d3.merge([forceX, rangez])) )
          .range(reverse ? [availableWidth, 0] : [0, availableWidth]);

      // Retrieve the old x-scale, if this is an update.
      var x0 = this.__chart__ || d3.scale.linear()
          .domain([0, Infinity])
          .range(x1.range());

      // Stash the new scale.
      this.__chart__ = x1;


      var rangeMin = d3.min(rangez), //rangez[2]
          rangeMax = d3.max(rangez), //rangez[0]
          rangeAvg = rangez[1];

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-bullet').data([d]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bullet');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('rect').attr('class', 'nv-range nv-rangeMax');
      gEnter.append('rect').attr('class', 'nv-range nv-rangeAvg');
      gEnter.append('rect').attr('class', 'nv-range nv-rangeMin');
      gEnter.append('rect').attr('class', 'nv-measure');
      gEnter.append('path').attr('class', 'nv-markerTriangle');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------



      var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)
          w1 = function(d) { return Math.abs(x1(d) - x1(0)) };
      var xp0 = function(d) { return d < 0 ? x0(d) : x0(0) },
          xp1 = function(d) { return d < 0 ? x1(d) : x1(0) };


      g.select('rect.nv-rangeMax')
          .attr('height', availableHeight)
          .attr('width', w1(rangeMax > 0 ? rangeMax : rangeMin))
          .attr('x', xp1(rangeMax > 0 ? rangeMax : rangeMin))
          .datum(rangeMax > 0 ? rangeMax : rangeMin)
          /*
          .attr('x', rangeMin < 0 ?
                         rangeMax > 0 ?
                             x1(rangeMin)
                           : x1(rangeMax)
                       : x1(0))
                      */

      g.select('rect.nv-rangeAvg')
          .attr('height', availableHeight)
          .attr('width', w1(rangeAvg))
          .attr('x', xp1(rangeAvg))
          .datum(rangeAvg)
          /*
          .attr('width', rangeMax <= 0 ?
                             x1(rangeMax) - x1(rangeAvg)
                           : x1(rangeAvg) - x1(rangeMin))
          .attr('x', rangeMax <= 0 ?
                         x1(rangeAvg)
                       : x1(rangeMin))
                      */

      g.select('rect.nv-rangeMin')
          .attr('height', availableHeight)
          .attr('width', w1(rangeMax))
          .attr('x', xp1(rangeMax))
          .attr('width', w1(rangeMax > 0 ? rangeMin : rangeMax))
          .attr('x', xp1(rangeMax > 0 ? rangeMin : rangeMax))
          .datum(rangeMax > 0 ? rangeMin : rangeMax)
          /*
          .attr('width', rangeMax <= 0 ?
                             x1(rangeAvg) - x1(rangeMin)
                           : x1(rangeMax) - x1(rangeAvg))
          .attr('x', rangeMax <= 0 ?
                         x1(rangeMin)
                       : x1(rangeAvg))
                      */

      g.select('rect.nv-measure')
          .style('fill', color)
          .attr('height', availableHeight / 3)
          .attr('y', availableHeight / 3)
          .attr('width', measurez < 0 ?
                             x1(0) - x1(measurez[0])
                           : x1(measurez[0]) - x1(0))
          .attr('x', xp1(measurez))
          .on('mouseover', function() {
              dispatch.elementMouseover({
                value: measurez[0],
                label: 'Current',
                pos: [x1(measurez[0]), availableHeight/2]
              })
          })
          .on('mouseout', function() {
              dispatch.elementMouseout({
                value: measurez[0],
                label: 'Current'
              })
          })

      var h3 =  availableHeight / 6;
      if (markerz[0]) {
        g.selectAll('path.nv-markerTriangle')
            .attr('transform', function(d) { return 'translate(' + x1(markerz[0]) + ',' + (availableHeight / 2) + ')' })
            .attr('d', 'M0,' + h3 + 'L' + h3 + ',' + (-h3) + ' ' + (-h3) + ',' + (-h3) + 'Z')
            .on('mouseover', function() {
              dispatch.elementMouseover({
                value: markerz[0],
                label: 'Previous',
                pos: [x1(markerz[0]), availableHeight/2]
              })
            })
            .on('mouseout', function() {
              dispatch.elementMouseout({
                value: markerz[0],
                label: 'Previous'
              })
            });
      } else {
        g.selectAll('path.nv-markerTriangle').remove();
      }


      wrap.selectAll('.nv-range')
          .on('mouseover', function(d,i) {
            var label = !i ? "Maximum" : i == 1 ? "Mean" : "Minimum";

            dispatch.elementMouseover({
              value: d,
              label: label,
              pos: [x1(d), availableHeight/2]
            })
          })
          .on('mouseout', function(d,i) {
            var label = !i ? "Maximum" : i == 1 ? "Mean" : "Minimum";

            dispatch.elementMouseout({
              value: d,
              label: label
            })
          })

 /* // THIS IS THE PREVIOUS BULLET IMPLEMENTATION, WILL REMOVE SHORTLY
      // Update the range rects.
      var range = g.selectAll('rect.nv-range')
          .data(rangez);

      range.enter().append('rect')
          .attr('class', function(d, i) { return 'nv-range nv-s' + i; })
          .attr('width', w0)
          .attr('height', availableHeight)
          .attr('x', reverse ? x0 : 0)
          .on('mouseover', function(d,i) { 
              dispatch.elementMouseover({
                value: d,
                label: (i <= 0) ? 'Maximum' : (i > 1) ? 'Minimum' : 'Mean', //TODO: make these labels a variable
                pos: [x1(d), availableHeight/2]
              })
          })
          .on('mouseout', function(d,i) { 
              dispatch.elementMouseout({
                value: d,
                label: (i <= 0) ? 'Minimum' : (i >=1) ? 'Maximum' : 'Mean' //TODO: make these labels a variable
              })
          })

      d3.transition(range)
          .attr('x', reverse ? x1 : 0)
          .attr('width', w1)
          .attr('height', availableHeight);


      // Update the measure rects.
      var measure = g.selectAll('rect.nv-measure')
          .data(measurez);

      measure.enter().append('rect')
          .attr('class', function(d, i) { return 'nv-measure nv-s' + i; })
          .style('fill', function(d,i) { return color(d,i ) })
          .attr('width', w0)
          .attr('height', availableHeight / 3)
          .attr('x', reverse ? x0 : 0)
          .attr('y', availableHeight / 3)
          .on('mouseover', function(d) { 
              dispatch.elementMouseover({
                value: d,
                label: 'Current', //TODO: make these labels a variable
                pos: [x1(d), availableHeight/2]
              })
          })
          .on('mouseout', function(d) { 
              dispatch.elementMouseout({
                value: d,
                label: 'Current' //TODO: make these labels a variable
              })
          })

      d3.transition(measure)
          .attr('width', w1)
          .attr('height', availableHeight / 3)
          .attr('x', reverse ? x1 : 0)
          .attr('y', availableHeight / 3);



      // Update the marker lines.
      var marker = g.selectAll('path.nv-markerTriangle')
          .data(markerz);

      var h3 =  availableHeight / 6;
      marker.enter().append('path')
          .attr('class', 'nv-markerTriangle')
          .attr('transform', function(d) { return 'translate(' + x0(d) + ',' + (availableHeight / 2) + ')' })
          .attr('d', 'M0,' + h3 + 'L' + h3 + ',' + (-h3) + ' ' + (-h3) + ',' + (-h3) + 'Z')
          .on('mouseover', function(d,i) {
              dispatch.elementMouseover({
                value: d,
                label: 'Previous',
                pos: [x1(d), availableHeight/2]
              })
          })
          .on('mouseout', function(d,i) {
              dispatch.elementMouseout({
                value: d,
                label: 'Previous'
              })
          });

      d3.transition(marker)
          .attr('transform', function(d) { return 'translate(' + (x1(d) - x1(0)) + ',' + (availableHeight / 2) + ')' });

      marker.exit().remove();
 */

    });

    // d3.timer.flush();  // Not needed?

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  // left, right, top, bottom
  chart.orient = function(_) {
    if (!arguments.length) return orient;
    orient = _;
    reverse = orient == 'right' || orient == 'bottom';
    return chart;
  };

  // ranges (bad, satisfactory, good)
  chart.ranges = function(_) {
    if (!arguments.length) return ranges;
    ranges = _;
    return chart;
  };

  // markers (previous, goal)
  chart.markers = function(_) {
    if (!arguments.length) return markers;
    markers = _;
    return chart;
  };

  // measures (actual, forecast)
  chart.measures = function(_) {
    if (!arguments.length) return measures;
    measures = _;
    return chart;
  };

  chart.forceX = function(_) {
    if (!arguments.length) return forceX;
    forceX = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.tickFormat = function(_) {
    if (!arguments.length) return tickFormat;
    tickFormat = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  //============================================================


  return chart;
 };



 // Chart design based on the recommendations of Stephen Few. Implementation
 // based on the work of Clint Ivy, Jamie Love, and Jason Davies.
 // http://projects.instantcognition.com/protovis/bulletchart/
 nv.models.bulletChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var bullet = nv.models.bullet()
    ;

  var orient = 'left' // TODO top & bottom
    , reverse = false
    , margin = {top: 5, right: 40, bottom: 20, left: 120}
    , ranges = function(d) { return d.ranges }
    , markers = function(d) { return d.markers }
    , measures = function(d) { return d.measures }
    , width = null
    , height = 55
    , tickFormat = null
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + x + '</h3>' +
               '<p>' + y + '</p>'
      }
    , noData = 'No Data Available.'
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ) + margin.left,
        top = e.pos[1] + ( offsetElement.offsetTop || 0) + margin.top,
        content = tooltip(e.key, e.label, e.value, e, chart);

    nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w', null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(d, i) {
      var container = d3.select(this);

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          that = this;


      chart.update = function() { chart(selection) };
      chart.container = this;

      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!d || !ranges.call(this, d, i)) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', 18 + margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------



      var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
          markerz = markers.call(this, d, i).slice().sort(d3.descending),
          measurez = measures.call(this, d, i).slice().sort(d3.descending);


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-bulletChart').data([d]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-bulletChart');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-bulletWrap');
      gEnter.append('g').attr('class', 'nv-titles');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      // Compute the new x-scale.
      var x1 = d3.scale.linear()
          .domain([0, Math.max(rangez[0], markerz[0], measurez[0])])  // TODO: need to allow forceX and forceY, and xDomain, yDomain
          .range(reverse ? [availableWidth, 0] : [0, availableWidth]);

      // Retrieve the old x-scale, if this is an update.
      var x0 = this.__chart__ || d3.scale.linear()
          .domain([0, Infinity])
          .range(x1.range());

      // Stash the new scale.
      this.__chart__ = x1;

      /*
      // Derive width-scales from the x-scales.
      var w0 = bulletWidth(x0),
          w1 = bulletWidth(x1);

      function bulletWidth(x) {
        var x0 = x(0);
        return function(d) {
          return Math.abs(x(d) - x(0));
        };
      }

      function bulletTranslate(x) {
        return function(d) {
          return 'translate(' + x(d) + ',0)';
        };
      }
      */

      var w0 = function(d) { return Math.abs(x0(d) - x0(0)) }, // TODO: could optimize by precalculating x0(0) and x1(0)
          w1 = function(d) { return Math.abs(x1(d) - x1(0)) };


      var title = gEnter.select('.nv-titles').append('g')
          .attr('text-anchor', 'end')
          .attr('transform', 'translate(-6,' + (height - margin.top - margin.bottom) / 2 + ')');
      title.append('text')
          .attr('class', 'nv-title')
          .text(function(d) { return d.title; });

      title.append('text')
          .attr('class', 'nv-subtitle')
          .attr('dy', '1em')
          .text(function(d) { return d.subtitle; });



      bullet
        .width(availableWidth)
        .height(availableHeight)

      var bulletWrap = g.select('.nv-bulletWrap');

      d3.transition(bulletWrap).call(bullet);



      // Compute the tick format.
      var format = tickFormat || x1.tickFormat( availableWidth / 100 );

      // Update the tick groups.
      var tick = g.selectAll('g.nv-tick')
          .data(x1.ticks( availableWidth / 50 ), function(d) {
            return this.textContent || format(d);
          });

      // Initialize the ticks with the old scale, x0.
      var tickEnter = tick.enter().append('g')
          .attr('class', 'nv-tick')
          .attr('transform', function(d) { return 'translate(' + x0(d) + ',0)' })
          .style('opacity', 1e-6);

      tickEnter.append('line')
          .attr('y1', availableHeight)
          .attr('y2', availableHeight * 7 / 6);

      tickEnter.append('text')
          .attr('text-anchor', 'middle')
          .attr('dy', '1em')
          .attr('y', availableHeight * 7 / 6)
          .text(format);


      // Transition the updating ticks to the new scale, x1.
      var tickUpdate = d3.transition(tick)
          .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
          .style('opacity', 1);

      tickUpdate.select('line')
          .attr('y1', availableHeight)
          .attr('y2', availableHeight * 7 / 6);

      tickUpdate.select('text')
          .attr('y', availableHeight * 7 / 6);

      // Transition the exiting ticks to the new scale, x1.
      d3.transition(tick.exit())
          .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
          .style('opacity', 1e-6)
          .remove();


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      dispatch.on('tooltipShow', function(e) {
        e.key = data[0].title;
        if (tooltips) showTooltip(e, that.parentNode);
      });

      //============================================================

    });

    d3.timer.flush();

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  bullet.dispatch.on('elementMouseover.tooltip', function(e) {
    dispatch.tooltipShow(e);
  });

  bullet.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;
  chart.bullet = bullet;

  d3.rebind(chart, bullet, 'color');

  // left, right, top, bottom
  chart.orient = function(x) {
    if (!arguments.length) return orient;
    orient = x;
    reverse = orient == 'right' || orient == 'bottom';
    return chart;
  };

  // ranges (bad, satisfactory, good)
  chart.ranges = function(x) {
    if (!arguments.length) return ranges;
    ranges = x;
    return chart;
  };

  // markers (previous, goal)
  chart.markers = function(x) {
    if (!arguments.length) return markers;
    markers = x;
    return chart;
  };

  // measures (actual, forecast)
  chart.measures = function(x) {
    if (!arguments.length) return measures;
    measures = x;
    return chart;
  };

  chart.width = function(x) {
    if (!arguments.length) return width;
    width = x;
    return chart;
  };

  chart.height = function(x) {
    if (!arguments.length) return height;
    height = x;
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.tickFormat = function(x) {
    if (!arguments.length) return tickFormat;
    tickFormat = x;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 };



 nv.models.cumulativeLineChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var lines = nv.models.line()
    , xAxis = nv.models.axis()
    , yAxis = nv.models.axis()
    , legend = nv.models.legend()
    , controls = nv.models.legend()
    ;

  var margin = {top: 30, right: 30, bottom: 50, left: 60}
    , color = nv.utils.defaultColor()
    , width = null
    , height = null
    , showLegend = true
    , tooltips = true
    , showControls = true
    , rescaleY = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' at ' + x + '</p>'
      }
    , x //can be accessed via chart.xScale()
    , y //can be accessed via chart.yScale()
    , id = lines.id()
    , state = { index: 0, rescaleY: rescaleY }
    , noData = 'No Data Available.'
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    ;

  xAxis
    .orient('bottom')
    .tickPadding(7)
    ;
  yAxis
    .orient('left')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

   var dx = d3.scale.linear()
     , index = {i: 0, x: 0}
     ;

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
        y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, null, null, offsetElement);
  };

 /*
  //Moved to see if we can get better behavior to fix issue #315
  var indexDrag = d3.behavior.drag()
                    .on('dragstart', dragStart)
                    .on('drag', dragMove)
                    .on('dragend', dragEnd);

  function dragStart(d,i) {
    d3.select(chart.container)
        .style('cursor', 'ew-resize');
  }

  function dragMove(d,i) {
    d.x += d3.event.dx;
    d.i = Math.round(dx.invert(d.x));

    d3.select(this).attr('transform', 'translate(' + dx(d.i) + ',0)');
    chart.update();
  }

  function dragEnd(d,i) {
    d3.select(chart.container)
        .style('cursor', 'auto');
    chart.update();
  }
 */

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this).classed('nv-chart-' + id, true),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;


      chart.update = function() { chart(selection) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });

      var indexDrag = d3.behavior.drag()
                        .on('dragstart', dragStart)
                        .on('drag', dragMove)
                        .on('dragend', dragEnd);


      function dragStart(d,i) {
        d3.select(chart.container)
            .style('cursor', 'ew-resize');
      }

      function dragMove(d,i) {
        index.x = d3.event.x;
        index.i = Math.round(dx.invert(index.x));
        updateZero();
      }

      function dragEnd(d,i) {
        d3.select(chart.container)
            .style('cursor', 'auto');

        // update state and send stateChange with new index
        state.index = index.i;
        dispatch.stateChange(state);
      }




      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = lines.xScale();
      y = lines.yScale();


      if (!rescaleY) {
        var seriesDomains = data
          .filter(function(series) { return !series.disabled })
          .map(function(series,i) {
            var initialDomain = d3.extent(series.values, lines.y());

            //account for series being disabled when losing 95% or more
            if (initialDomain[0] < -.95) initialDomain[0] = -.95;

            return [
              (initialDomain[0] - initialDomain[1]) / (1 + initialDomain[1]),
              (initialDomain[1] - initialDomain[0]) / (1 + initialDomain[0])
            ];
          });

        var completeDomain = [
          d3.min(seriesDomains, function(d) { return d[0] }),
          d3.max(seriesDomains, function(d) { return d[1] })
        ]

        lines.yDomain(completeDomain);
      } else {
        lines.yDomain(null);
      }


      dx  .domain([0, data[0].values.length - 1]) //Assumes all series have same length
          .range([0, availableWidth])
          .clamp(true);

      //------------------------------------------------------------


      var data = indexify(index.i, data);


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-cumulativeLine').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-cumulativeLine').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-background');
      gEnter.append('g').attr('class', 'nv-linesWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');
      gEnter.append('g').attr('class', 'nv-controlsWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width(availableWidth);

        g.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        g.select('.nv-legendWrap')
            .attr('transform', 'translate(0,' + (-margin.top) +')')
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Controls

      if (showControls) {
        var controlsData = [
          { key: 'Re-scale y-axis', disabled: !rescaleY }
        ];

        controls.width(140).color(['#444', '#444', '#444']);
        g.select('.nv-controlsWrap')
            .datum(controlsData)
            .attr('transform', 'translate(0,' + (-margin.top) +')')
            .call(controls);
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      // Show error if series goes below 100%
      var tempDisabled = data.filter(function(d) { return d.tempDisabled });

      wrap.select('.tempDisabled').remove(); //clean-up and prevent duplicates
      if (tempDisabled.length) {
        wrap.append('text').attr('class', 'tempDisabled')
            .attr('x', availableWidth / 2)
            .attr('y', '-.71em')
            .style('text-anchor', 'end')
            .text(tempDisabled.map(function(d) { return d.key }).join(', ') + ' values cannot be calculated for this time period.');
      }



      //------------------------------------------------------------
      // Main Chart Component(s)

      gEnter.select('.nv-background')
        .append('rect');

      g.select('.nv-background rect')
          .attr('width', availableWidth)
          .attr('height', availableHeight);

      lines
        //.x(function(d) { return d.x })
        .y(function(d) { return d.display.y })
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color(d, i);
        }).filter(function(d,i) { return !data[i].disabled && !data[i].tempDisabled }));



      var linesWrap = g.select('.nv-linesWrap')
          .datum(data.filter(function(d) { return !d.disabled && !d.tempDisabled }));

      //d3.transition(linesWrap).call(lines);
      linesWrap.call(lines);


      var indexLine = linesWrap.selectAll('.nv-indexLine')
          .data([index]);
      indexLine.enter().append('rect').attr('class', 'nv-indexLine')
          .attr('width', 3)
          .attr('x', -2)
          .attr('fill', 'red')
          .attr('fill-opacity', .5)
          .call(indexDrag)

      indexLine
          .attr('transform', function(d) { return 'translate(' + dx(d.i) + ',0)' })
          .attr('height', availableHeight)

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
        .scale(x)
        //Suggest how many ticks based on the chart width and D3 should listen (70 is the optimal number for MM/DD/YY dates)
        .ticks( Math.min(data[0].values.length,availableWidth/70) )
        .tickSize(-availableHeight, 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y.range()[0] + ')');
      d3.transition(g.select('.nv-x.nv-axis'))
          .call(xAxis);


      yAxis
        .scale(y)
        .ticks( availableHeight / 36 )
        .tickSize( -availableWidth, 0);

      d3.transition(g.select('.nv-y.nv-axis'))
          .call(yAxis);

      //------------------------------------------------------------


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------


      function updateZero() {
        indexLine
          .data([index]);

        chart.update();
      }

      g.select('.nv-background rect')
          .on('click', function() {
            index.x = d3.mouse(this)[0];
            index.i = Math.round(dx.invert(index.x));

            // update state and send stateChange with new index
            state.index = index.i;
            dispatch.stateChange(state);

            updateZero();
          });

      lines.dispatch.on('elementClick', function(e) {
        index.i = e.pointIndex;
        index.x = dx(index.i);

        // update state and send stateChange with new index
        state.index = index.i;
        dispatch.stateChange(state);

        updateZero();
      });

      controls.dispatch.on('legendClick', function(d,i) { 
        d.disabled = !d.disabled;
        rescaleY = !d.disabled;

        state.rescaleY = rescaleY;
        dispatch.stateChange(state);

        //selection.transition().call(chart);
        selection.call(chart);
      });


      legend.dispatch.on('legendClick', function(d,i) { 
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        //selection.transition().call(chart);
        selection.call(chart);
      });

 /*
      //
      legend.dispatch.on('legendMouseover', function(d, i) {
        d.hover = true;
        selection.transition().call(chart)
      });

      legend.dispatch.on('legendMouseout', function(d, i) {
        d.hover = false;
        selection.transition().call(chart)
      });
 */

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });


      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }


        if (typeof e.index !== 'undefined') {
          index.i = e.index;
          index.x = dx(index.i);

          state.index = e.index;

          indexLine
            .data([index]);
        }


        if (typeof e.rescaleY !== 'undefined') {
          rescaleY = e.rescaleY;
        }

        selection.call(chart);
      });

      //============================================================

    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  lines.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.lines = lines;
  chart.legend = legend;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;

  d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    return chart;
  };

  chart.rescaleY = function(_) {
    if (!arguments.length) return rescaleY;
    rescaleY = _
    return rescaleY;
  };

  chart.showControls = function(_) {
    if (!arguments.length) return showControls;
    showControls = _;
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  //============================================================
  // Functions
  //------------------------------------------------------------

  /* Normalize the data according to an index point. */
  function indexify(idx, data) {
    return data.map(function(line, i) {
      var v = lines.y()(line.values[idx], idx);

      //TODO: implement check below, and disable series if series loses 100% or more cause divide by 0 issue
      if (v < -.95) {
        //if a series loses more than 100%, calculations fail.. anything close can cause major distortion (but is mathematically correct till it hits 100)
        line.tempDisabled = true;
        return line;
      }

      line.tempDisabled = false;

      line.values = line.values.map(function(point, pointIndex) {
        point.display = {'y': (lines.y()(point, pointIndex) - v) / (1 + v) };
        return point;
      })

      return line;
    })
  }

  //============================================================


  return chart;
 }
 //TODO: consider deprecating by adding necessary features to multiBar model
 nv.models.discreteBar = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , x = d3.scale.ordinal()
    , y = d3.scale.linear()
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
    , color = nv.utils.defaultColor()
    , showValues = false
    , valueFormat = d3.format(',.2f')
    , xDomain
    , yDomain
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    , rectClass = 'discreteBar'
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var x0, y0;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);


      //add series index to each data point for reference
      data = data.map(function(series, i) {
        series.values = series.values.map(function(point) {
          point.series = i;
          return point;
        });
        return series;
      });


      //------------------------------------------------------------
      // Setup Scales

      // remap and flatten the data for use in calculating the scales' domains
      var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
            data.map(function(d) {
              return d.values.map(function(d,i) {
                return { x: getX(d,i), y: getY(d,i), y0: d.y0 }
              })
            });

      x   .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
          .rangeBands([0, availableWidth], .1);

      y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY)));


      // If showValues, pad the Y axis range to account for label height
      if (showValues) y.range([availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);
      else y.range([availableHeight, 0]);

      //store old scales if they exist
      x0 = x0 || x;
      y0 = y0 || y.copy().range([y(0),y(0)]);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-discretebar').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discretebar');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-groups');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------



      //TODO: by definition, the discrete bar should not have multiple groups, will modify/remove later
      var groups = wrap.select('.nv-groups').selectAll('.nv-group')
          .data(function(d) { return d }, function(d) { return d.key });
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
      d3.transition(groups.exit())
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6)
          .remove();
      groups
          .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
          .classed('hover', function(d) { return d.hover });
      d3.transition(groups)
          .style('stroke-opacity', 1)
          .style('fill-opacity', .75);


      var bars = groups.selectAll('g.nv-bar')
          .data(function(d) { return d.values });

      bars.exit().remove();


      var barsEnter = bars.enter().append('g')
          .attr('transform', function(d,i,j) {
              return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05 ) + ', ' + y(0) + ')' 
          })
          .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
            d3.select(this).classed('hover', true);
            dispatch.elementMouseover({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
          })
          .on('mouseout', function(d,i) {
            d3.select(this).classed('hover', false);
            dispatch.elementMouseout({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
          })
          .on('click', function(d,i) {
            dispatch.elementClick({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
            d3.event.stopPropagation();
          })
          .on('dblclick', function(d,i) {
            dispatch.elementDblClick({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
            d3.event.stopPropagation();
          });

      barsEnter.append('rect')
          .attr('height', 0)
          .attr('width', x.rangeBand() * .9 / data.length )

      if (showValues) {
        barsEnter.append('text')
          .attr('text-anchor', 'middle')
        bars.select('text')
          .attr('x', x.rangeBand() * .9 / 2)
          .attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 })
          .text(function(d,i) { return valueFormat(getY(d,i)) });
      } else {
        bars.selectAll('text').remove();
      }

      bars
          .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive' })
          .style('fill', function(d,i) { return d.color || color(d,i) })
          .style('stroke', function(d,i) { return d.color || color(d,i) })
        .select('rect')
          .attr('class', rectClass)
          .attr('width', x.rangeBand() * .9 / data.length);
      d3.transition(bars)
        //.delay(function(d,i) { return i * 1200 / data[0].values.length })
          .attr('transform', function(d,i) {
            var left = x(getX(d,i)) + x.rangeBand() * .05,
                top = getY(d,i) < 0 ?
                        y(0) :
                        y(0) - y(getY(d,i)) < 1 ?
                          y(0) - 1 : //make 1 px positive bars show up above y=0
                          y(getY(d,i));

              return 'translate(' + left + ', ' + top + ')'
          })
        .select('rect')
          .attr('height', function(d,i) {
            return  Math.max(Math.abs(y(getY(d,i)) - y(0)) || 1)
          });


      //store old scales for use in transitions on update
      x0 = x.copy();
      y0 = y.copy();

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.xScale = function(_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };

  chart.yScale = function(_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };

  chart.xDomain = function(_) {
    if (!arguments.length) return xDomain;
    xDomain = _;
    return chart;
  };

  chart.yDomain = function(_) {
    if (!arguments.length) return yDomain;
    yDomain = _;
    return chart;
  };

  chart.forceY = function(_) {
    if (!arguments.length) return forceY;
    forceY = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  chart.showValues = function(_) {
    if (!arguments.length) return showValues;
    showValues = _;
    return chart;
  };

  chart.valueFormat= function(_) {
    if (!arguments.length) return valueFormat;
    valueFormat = _;
    return chart;
  };

  chart.rectClass= function(_) {
    if (!arguments.length) return rectClass;
    rectClass = _;
    return chart;
  }
  //============================================================


  return chart;
 }

 nv.models.discreteBarChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var discretebar = nv.models.discreteBar()
    , xAxis = nv.models.axis()
    , yAxis = nv.models.axis()
    ;

  var margin = {top: 15, right: 10, bottom: 50, left: 60}
    , width = null
    , height = null
    , color = nv.utils.getColor()
    , staggerLabels = false
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + x + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , x
    , y
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'beforeUpdate')
    ;

  xAxis
    .orient('bottom')
    .highlightZero(false)
    .showMaxMin(false)
    .tickFormat(function(d) { return d })
    ;
  yAxis
    .orient('left')
    .tickFormat(d3.format(',.1f'))
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(discretebar.x()(e.point, e.pointIndex)),
        y = yAxis.tickFormat()(discretebar.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;


      chart.update = function() { dispatch.beforeUpdate(); selection.transition().call(chart); };
      chart.container = this;


      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = discretebar.xScale();
      y = discretebar.yScale();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-discreteBarWithAxes').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-discreteBarWithAxes').append('g');
      var defsEnter = gEnter.append('defs');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-barsWrap');

      g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Main Chart Component(s)

      discretebar
        .width(availableWidth)
        .height(availableHeight);


      var barsWrap = g.select('.nv-barsWrap')
          .datum(data.filter(function(d) { return !d.disabled }))

      d3.transition(barsWrap).call(discretebar);

      //------------------------------------------------------------



      defsEnter.append('clipPath')
          .attr('id', 'nv-x-label-clip-' + discretebar.id())
        .append('rect');

      g.select('#nv-x-label-clip-' + discretebar.id() + ' rect')
          .attr('width', x.rangeBand() * (staggerLabels ? 2 : 1))
          .attr('height', 16)
          .attr('x', -x.rangeBand() / (staggerLabels ? 1 : 2 ));


      //------------------------------------------------------------
      // Setup Axes

      xAxis
        .scale(x)
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight, 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + (y.range()[0] + ((discretebar.showValues() && y.domain()[0] < 0) ? 16 : 0)) + ')');
      //d3.transition(g.select('.nv-x.nv-axis'))
      g.select('.nv-x.nv-axis').transition().duration(0)
          .call(xAxis);


      var xTicks = g.select('.nv-x.nv-axis').selectAll('g');

      if (staggerLabels) {
        xTicks
            .selectAll('text')
            .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '5' : '17') + ')' })
      }

      yAxis
        .scale(y)
        .ticks( availableHeight / 36 )
        .tickSize( -availableWidth, 0);

      d3.transition(g.select('.nv-y.nv-axis'))
          .call(yAxis);

      //------------------------------------------------------------


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });

      //============================================================


    });

    return chart;
  }

  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  discretebar.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  discretebar.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.discretebar = discretebar;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;

  d3.rebind(chart, discretebar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'id', 'showValues', 'valueFormat');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    discretebar.color(color);
    return chart;
  };

  chart.staggerLabels = function(_) {
    if (!arguments.length) return staggerLabels;
    staggerLabels = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.distribution = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 400 //technically width or height depending on x or y....
    , size = 8
    , axis = 'x' // 'x' or 'y'... horizontal or vertical
    , getData = function(d) { return d[axis] }  // defaults d.x or d.y
    , color = nv.utils.defaultColor()
    , scale = d3.scale.linear()
    , domain
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var scale0;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableLength = width - (axis === 'x' ? margin.left + margin.right : margin.top + margin.bottom),
          naxis = axis == 'x' ? 'y' : 'x',
          container = d3.select(this);


      //------------------------------------------------------------
      // Setup Scales

      scale0 = scale0 || scale;

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-distribution').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-distribution');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

      //------------------------------------------------------------


      var distWrap = g.selectAll('g.nv-dist')
          .data(function(d) { return d }, function(d) { return d.key });

      distWrap.enter().append('g');
      distWrap
          .attr('class', function(d,i) { return 'nv-dist nv-series-' + i })
          .style('stroke', function(d,i) { return color(d, i) });

      var dist = distWrap.selectAll('line.nv-dist' + axis)
          .data(function(d) { return d.values })
      dist.enter().append('line')
          .attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })
          .attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })
      d3.transition(distWrap.exit().selectAll('line.nv-dist' + axis))
          .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
          .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
          .style('stroke-opacity', 0)
          .remove();
      dist
          .attr('class', function(d,i) { return 'nv-dist' + axis + ' nv-dist' + axis + '-' + i })
          .attr(naxis + '1', 0)
          .attr(naxis + '2', size);
      d3.transition(dist)
          .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
          .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })


      scale0 = scale.copy();

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.axis = function(_) {
    if (!arguments.length) return axis;
    axis = _;
    return chart;
  };

  chart.size = function(_) {
    if (!arguments.length) return size;
    size = _;
    return chart;
  };

  chart.getData = function(_) {
    if (!arguments.length) return getData;
    getData = d3.functor(_);
    return chart;
  };

  chart.scale = function(_) {
    if (!arguments.length) return scale;
    scale = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.indentedTree = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0} //TODO: implement, maybe as margin on the containing div
    , width = 960
    , height = 500
    , color = nv.utils.defaultColor()
    , id = Math.floor(Math.random() * 10000)
    , header = true
    , noData = "No Data Available."
    , childIndent = 20
    , columns = [{key:'key', label: 'Name', type:'text'}] //TODO: consider functions like chart.addColumn, chart.removeColumn, instead of a block like this
    , tableClass = null
    , iconOpen = 'images/grey-plus.png' //TODO: consider removing this and replacing with a '+' or '-' unless user defines images
    , iconClose = 'images/grey-minus.png'
    , dispatch = d3.dispatch('elementClick', 'elementDblclick', 'elementMouseover', 'elementMouseout')
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var i = 0,
          depth = 1;

      var tree = d3.layout.tree()
          .children(function(d) { return d.values })
          .size([height, childIndent]); //Not sure if this is needed now that the result is HTML

      chart.update = function() { selection.transition().call(chart) };
      chart.container = this;


      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.
      if (!data[0]) data[0] = {key: noData};

      //------------------------------------------------------------


      var nodes = tree.nodes(data[0]);


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = d3.select(this).selectAll('div').data([[nodes]]);
      var wrapEnter = wrap.enter().append('div').attr('class', 'nvd3 nv-wrap nv-indentedtree');
      var tableEnter = wrapEnter.append('table');
      var table = wrap.select('table').attr('width', '100%').attr('class', tableClass);

      //------------------------------------------------------------


      if (header) {
        var thead = tableEnter.append('thead');

        var theadRow1 = thead.append('tr');

        columns.forEach(function(column) {
          theadRow1
            .append('th')
              .attr('width', column.width ? column.width : '10%')
              .style('text-align', column.type == 'numeric' ? 'right' : 'left')
            .append('span')
              .text(column.label);
        });
      }


      var tbody = table.selectAll('tbody')
                    .data(function(d) {return d });
      tbody.enter().append('tbody');



      //compute max generations
      depth = d3.max(nodes, function(node) { return node.depth });
      tree.size([height, depth * childIndent]); //TODO: see if this is necessary at all


      // Update the nodes…
      var node = tbody.selectAll('tr')
          .data(function(d) { return d }, function(d) { return d.id || (d.id == ++i)});
          //.style('display', 'table-row'); //TODO: see if this does anything

      node.exit().remove();


      node.select('img.nv-treeicon')
          .attr('src', icon)
          .classed('folded', folded);

      var nodeEnter = node.enter().append('tr');


      columns.forEach(function(column, index) {

        var nodeName = nodeEnter.append('td')
            .style('padding-left', function(d) { return (index ? 0 : d.depth * childIndent + 12 + (icon(d) ? 0 : 16)) + 'px' }, 'important') //TODO: check why I did the ternary here
            .style('text-align', column.type == 'numeric' ? 'right' : 'left');


        if (index == 0) {
          nodeName.append('img')
              .classed('nv-treeicon', true)
              .classed('nv-folded', folded)
              .attr('src', icon)
              .style('width', '14px')
              .style('height', '14px')
              .style('padding', '0 1px')
              .style('display', function(d) { return icon(d) ? 'inline-block' : 'none'; })
              .on('click', click);
        }


        nodeName.append('span')
            .attr('class', d3.functor(column.classes) )
            .text(function(d) { return column.format ? column.format(d) :
                                        (d[column.key] || '-') });

        if  (column.showCount)
          nodeName.append('span')
              .attr('class', 'nv-childrenCount')
              .text(function(d) {
                return ((d.values && d.values.length) || (d._values && d._values.length)) ?
                    '(' + ((d.values && d.values.length) || (d._values && d._values.length)) + ')'
                  : ''
              });


        if (column.click)
          nodeName.select('span').on('click', column.click);

      });


      node
        .order()
        .on('click', function(d) { 
          dispatch.elementClick({
            row: this, //TODO: decide whether or not this should be consistent with scatter/line events or should be an html link (a href)
            data: d,
            pos: [d.x, d.y]
          });
        })
        .on('dblclick', function(d) { 
          dispatch.elementDblclick({
            row: this,
            data: d,
            pos: [d.x, d.y]
          });
        })
        .on('mouseover', function(d) { 
          dispatch.elementMouseover({
            row: this,
            data: d,
            pos: [d.x, d.y]
          });
        })
        .on('mouseout', function(d) { 
          dispatch.elementMouseout({
            row: this,
            data: d,
            pos: [d.x, d.y]
          });
        });




      // Toggle children on click.
      function click(d, _, unshift) {
        d3.event.stopPropagation();

        if(d3.event.shiftKey && !unshift) {
          //If you shift-click, it'll toggle fold all the children, instead of itself
          d3.event.shiftKey = false;
          d.values && d.values.forEach(function(node){
            if (node.values || node._values) {
              click(node, 0, true);
            }
          });
          return true;
        }
        if(!hasChildren(d)) {
          //download file
          //window.location.href = d.url;
          return true;
        }
        if (d.values) {
          d._values = d.values;
          d.values = null;
        } else {
          d.values = d._values;
          d._values = null;
        }
        chart.update();
      }


      function icon(d) {
        return (d._values && d._values.length) ? iconOpen : (d.values && d.values.length) ? iconClose : '';
      }

      function folded(d) {
        return (d._values && d._values.length);
      }

      function hasChildren(d) {
        var values = d.values || d._values;

        return (values && values.length);
      }


    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    scatter.color(color);
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  chart.header = function(_) {
    if (!arguments.length) return header;
    header = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  chart.columns = function(_) {
    if (!arguments.length) return columns;
    columns = _;
    return chart;
  };

  chart.tableClass = function(_) {
    if (!arguments.length) return tableClass;
    tableClass = _;
    return chart;
  };

  chart.iconOpen = function(_){
     if (!arguments.length) return iconOpen;
    iconOpen = _;
    return chart;
  }

  chart.iconClose = function(_){
     if (!arguments.length) return iconClose;
    iconClose = _;
    return chart;
  }

  //============================================================


  return chart;
 }
 nv.models.legend = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 5, right: 0, bottom: 5, left: 0}
    , width = 400
    , height = 20
    , getKey = function(d) { return d.key }
    , color = nv.utils.defaultColor()
    , align = true
    , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout')
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          container = d3.select(this);


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-legend').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-legend').append('g');
      var g = wrap.select('g');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      var series = g.selectAll('.nv-series')
          .data(function(d) { return d });
      var seriesEnter = series.enter().append('g').attr('class', 'nv-series')
          .on('mouseover', function(d,i) {
            dispatch.legendMouseover(d,i);  //TODO: Make consistent with other event objects
          })
          .on('mouseout', function(d,i) {
            dispatch.legendMouseout(d,i);
          })
          .on('click', function(d,i) {
            dispatch.legendClick(d,i);
          })
          .on('dblclick', function(d,i) {
            dispatch.legendDblclick(d,i);
          });
      seriesEnter.append('circle')
          .style('stroke-width', 2)
          .attr('r', 5);
      seriesEnter.append('text')
          .attr('text-anchor', 'start')
          .attr('dy', '.32em')
          .attr('dx', '8');
      series.classed('disabled', function(d) { return d.disabled });
      series.exit().remove();
      series.select('circle')
          .style('fill', function(d,i) { return d.color || color(d,i)})
          .style('stroke', function(d,i) { return d.color || color(d, i) });
      series.select('text').text(getKey);


      //TODO: implement fixed-width and max-width options (max-width is especially useful with the align option)

      // NEW ALIGNING CODE, TODO: clean up
      if (align) {
        var seriesWidths = [];
        series.each(function(d,i) {
              seriesWidths.push(d3.select(this).select('text').node().getComputedTextLength() + 28); // 28 is ~ the width of the circle plus some padding
            });

        //nv.log('Series Widths: ', JSON.stringify(seriesWidths));

        var seriesPerRow = 0;
        var legendWidth = 0;
        var columnWidths = [];

        while ( legendWidth < availableWidth && seriesPerRow < seriesWidths.length) {
          columnWidths[seriesPerRow] = seriesWidths[seriesPerRow];
          legendWidth += seriesWidths[seriesPerRow++];
        }


        while ( legendWidth > availableWidth && seriesPerRow > 1 ) {
          columnWidths = [];
          seriesPerRow--;

          for (k = 0; k < seriesWidths.length; k++) {
            if (seriesWidths[k] > (columnWidths[k % seriesPerRow] || 0) )
              columnWidths[k % seriesPerRow] = seriesWidths[k];
          }

          legendWidth = columnWidths.reduce(function(prev, cur, index, array) {
                          return prev + cur;
                        });
        }
        //console.log(columnWidths, legendWidth, seriesPerRow);

        var xPositions = [];
        for (var i = 0, curX = 0; i < seriesPerRow; i++) {
            xPositions[i] = curX;
            curX += columnWidths[i];
        }

        series
            .attr('transform', function(d, i) {
              return 'translate(' + xPositions[i % seriesPerRow] + ',' + (5 + Math.floor(i / seriesPerRow) * 20) + ')';
            });

        //position legend as far right as possible within the total width
        g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');

        height = margin.top + margin.bottom + (Math.ceil(seriesWidths.length / seriesPerRow) * 20);

      } else {

        var ypos = 5,
            newxpos = 5,
            maxwidth = 0,
            xpos;
        series
            .attr('transform', function(d, i) {
              var length = d3.select(this).select('text').node().getComputedTextLength() + 28;
              xpos = newxpos;

              if (width < margin.left + margin.right + xpos + length) {
                newxpos = xpos = 5;
                ypos += 20;
              }

              newxpos += length;
              if (newxpos > maxwidth) maxwidth = newxpos;

              return 'translate(' + xpos + ',' + ypos + ')';
            });

        //position legend as far right as possible within the total width
        g.attr('transform', 'translate(' + (width - margin.right - maxwidth) + ',' + margin.top + ')');

        height = margin.top + margin.bottom + ypos + 15;

      }

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.key = function(_) {
    if (!arguments.length) return getKey;
    getKey = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.align = function(_) {
    if (!arguments.length) return align;
    align = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.line = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var  scatter = nv.models.scatter()
    ;

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , color = nv.utils.defaultColor() // a function that returns a color
    , getX = function(d) { return d.x } // accessor to get the x value from a data point
    , getY = function(d) { return d.y } // accessor to get the y value from a data point
    , defined = function(d,i) { return !isNaN(getY(d,i)) && getY(d,i) !== null } // allows a line to be not continuous when it is not defined
    , isArea = function(d) { return d.area } // decides if a line is an area or just a line
    , clipEdge = false // if true, masks lines within x and y scale
    , x //can be accessed via chart.xScale()
    , y //can be accessed via chart.yScale()
    , interpolate = "linear" // controls the line interpolation
    ;

  scatter
    .size(16) // default size
    .sizeDomain([16,256]) //set to speed up calculation, needs to be unset if there is a custom size accessor
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var x0, y0 //used to store previous scales
      ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);

      //------------------------------------------------------------
      // Setup Scales

      x = scatter.xScale();
      y = scatter.yScale();

      x0 = x0 || x;
      y0 = y0 || y;

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-line').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-line');
      var defsEnter = wrapEnter.append('defs');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g')

      gEnter.append('g').attr('class', 'nv-groups');
      gEnter.append('g').attr('class', 'nv-scatterWrap');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------




      scatter
        .width(availableWidth)
        .height(availableHeight)

      var scatterWrap = wrap.select('.nv-scatterWrap');
          //.datum(data); // Data automatically trickles down from the wrap

      d3.transition(scatterWrap).call(scatter);



      defsEnter.append('clipPath')
          .attr('id', 'nv-edge-clip-' + scatter.id())
        .append('rect');

      wrap.select('#nv-edge-clip-' + scatter.id() + ' rect')
          .attr('width', availableWidth)
          .attr('height', availableHeight);

      g   .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');
      scatterWrap
          .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + scatter.id() + ')' : '');




      var groups = wrap.select('.nv-groups').selectAll('.nv-group')
          .data(function(d) { return d }, function(d) { return d.key });
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
      d3.transition(groups.exit())
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6)
          .remove();
      groups
          .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
          .classed('hover', function(d) { return d.hover })
          .style('fill', function(d,i){ return color(d, i) })
          .style('stroke', function(d,i){ return color(d, i)});
      d3.transition(groups)
          .style('stroke-opacity', 1)
          .style('fill-opacity', .5);



      var areaPaths = groups.selectAll('path.nv-area')
          .data(function(d) { return isArea(d) ? [d] : [] }); // this is done differently than lines because I need to check if series is an area
      areaPaths.enter().append('path')
          .attr('class', 'nv-area')
          .attr('d', function(d) {
            return d3.svg.area()
                .interpolate(interpolate)
                .defined(defined)
                .x(function(d,i) { return x0(getX(d,i)) })
                .y0(function(d,i) { return y0(getY(d,i)) })
                .y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
                //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
                .apply(this, [d.values])
          });
      d3.transition(groups.exit().selectAll('path.nv-area'))
          .attr('d', function(d) {
            return d3.svg.area()
                .interpolate(interpolate)
                .defined(defined)
                .x(function(d,i) { return x0(getX(d,i)) })
                .y0(function(d,i) { return y0(getY(d,i)) })
                .y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
                //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
                .apply(this, [d.values])
          });
      d3.transition(areaPaths)
          .attr('d', function(d) {
            return d3.svg.area()
                .interpolate(interpolate)
                .defined(defined)
                .x(function(d,i) { return x0(getX(d,i)) })
                .y0(function(d,i) { return y0(getY(d,i)) })
                .y1(function(d,i) { return y0( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
                //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
                .apply(this, [d.values])
          });



      var linePaths = groups.selectAll('path.nv-line')
          .data(function(d) { return [d.values] });
      linePaths.enter().append('path')
          .attr('class', 'nv-line')
          .attr('d',
            d3.svg.line()
              .interpolate(interpolate)
              .defined(defined)
              .x(function(d,i) { return x0(getX(d,i)) })
              .y(function(d,i) { return y0(getY(d,i)) })
          );
      d3.transition(groups.exit().selectAll('path.nv-line'))
          .attr('d',
            d3.svg.line()
              .interpolate(interpolate)
              .defined(defined)
              .x(function(d,i) { return x(getX(d,i)) })
              .y(function(d,i) { return y(getY(d,i)) })
          );
      d3.transition(linePaths)
          .attr('d',
            d3.svg.line()
              .interpolate(interpolate)
              .defined(defined)
              .x(function(d,i) { return x(getX(d,i)) })
              .y(function(d,i) { return y(getY(d,i)) })
          );



      //store old scales for use in transitions on update
      x0 = x.copy();
      y0 = y.copy();

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = scatter.dispatch;
  chart.scatter = scatter;

  d3.rebind(chart, scatter, 'id', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'padData');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    scatter.x(_);
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    scatter.y(_);
    return chart;
  };

  chart.clipEdge = function(_) {
    if (!arguments.length) return clipEdge;
    clipEdge = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    scatter.color(color);
    return chart;
  };

  chart.interpolate = function(_) {
    if (!arguments.length) return interpolate;
    interpolate = _;
    return chart;
  };

  chart.defined = function(_) {
    if (!arguments.length) return defined;
    defined = _;
    return chart;
  };

  chart.isArea = function(_) {
    if (!arguments.length) return isArea;
    isArea = d3.functor(_);
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.lineChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var lines = nv.models.line()
    , xAxis = nv.models.axis()
    , yAxis = nv.models.axis()
    , legend = nv.models.legend()
    ;

 //set margin.right to 23 to fit dates on the x-axis within the chart
  var margin = {top: 30, right: 20, bottom: 50, left: 60}
    , color = nv.utils.defaultColor()
    , width = null
    , height = null
    , showLegend = true
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' at ' + x + '</p>'
      }
    , x
    , y
    , state = {}
    , noData = 'No Data Available.'
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    ;

  xAxis
    .orient('bottom')
    .tickPadding(7)
    ;
  yAxis
    .orient('left')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {

    // New addition to calculate position if SVG is scaled with viewBox, may move TODO: consider implementing everywhere else
    if (offsetElement) {
      var svg = d3.select(offsetElement).select('svg');
      var viewBox = svg.attr('viewBox');
      if (viewBox) {
        viewBox = viewBox.split(' ');
        var ratio = parseInt(svg.style('width')) / viewBox[2];
        e.pos[0] = e.pos[0] * ratio;
        e.pos[1] = e.pos[1] * ratio;
      }
    }

    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
        y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, null, null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;


      chart.update = function() { chart(selection) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });


      //------------------------------------------------------------
      // Display noData message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = lines.xScale();
      y = lines.yScale();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-lineChart').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineChart').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-linesWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width(availableWidth);

        g.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        wrap.select('.nv-legendWrap')
            .attr('transform', 'translate(0,' + (-margin.top) +')')
      }

      //------------------------------------------------------------

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)

      lines
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color(d, i);
        }).filter(function(d,i) { return !data[i].disabled }));


      var linesWrap = g.select('.nv-linesWrap')
          .datum(data.filter(function(d) { return !d.disabled }))

      d3.transition(linesWrap).call(lines);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
        .scale(x)
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight, 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y.range()[0] + ')');
      d3.transition(g.select('.nv-x.nv-axis'))
          .call(xAxis);


      yAxis
        .scale(y)
        .ticks( availableHeight / 36 )
        .tickSize( -availableWidth, 0);

      d3.transition(g.select('.nv-y.nv-axis'))
          .call(yAxis);

      //------------------------------------------------------------


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      legend.dispatch.on('legendClick', function(d,i) { 
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        selection.transition().call(chart);
      });

 /*
      legend.dispatch.on('legendMouseover', function(d, i) {
        d.hover = true;
        selection.transition().call(chart)
      });

      legend.dispatch.on('legendMouseout', function(d, i) {
        d.hover = false;
        selection.transition().call(chart)
      });
 */

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });


      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        selection.call(chart);
      });

      //============================================================

    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  lines.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.lines = lines;
  chart.legend = legend;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;

  d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id', 'interpolate');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.linePlusBarChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var lines = nv.models.line()
    , bars = nv.models.historicalBar()
    , xAxis = nv.models.axis()
    , y1Axis = nv.models.axis()
    , y2Axis = nv.models.axis()
    , legend = nv.models.legend()
    ;

  var margin = {top: 30, right: 60, bottom: 50, left: 60}
    , width = null
    , height = null
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , color = nv.utils.defaultColor()
    , showLegend = true
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' at ' + x + '</p>';
      }
    , x
    , y1
    , y2
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    ;

  bars
    .padData(true)
    ;
  lines
    .clipEdge(false)
    .padData(true)
    ;
  xAxis
    .orient('bottom')
    .tickPadding(7)
    .highlightZero(false)
    ;
  y1Axis
    .orient('left')
    ;
  y2Axis
    .orient('right')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var state = {},
      showTooltip = function(e, offsetElement) {
        var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
            top = e.pos[1] + ( offsetElement.offsetTop || 0),
            x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
            y = (e.series.bar ? y1Axis : y2Axis).tickFormat()(lines.y()(e.point, e.pointIndex)),
            content = tooltip(e.series.key, x, y, e, chart);

        nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
      }
      ;

  //------------------------------------------------------------



  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      chart.update = function() { chart(selection) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });


      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      var dataBars = data.filter(function(d) { return !d.disabled && d.bar });
      var dataLines = data.filter(function(d) { return !d.bar }); // removed the !d.disabled clause here to fix Issue #240

      //x = xAxis.scale();
       x = dataLines.filter(function(d) { return !d.disabled; }).length && dataLines.filter(function(d) { return !d.disabled; })[0].values.length ? lines.xScale() : bars.xScale();
      //x = dataLines.filter(function(d) { return !d.disabled; }).length ? lines.xScale() : bars.xScale(); //old code before change above
      y1 = bars.yScale();
      y2 = lines.yScale();

      //------------------------------------------------------------

      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = d3.select(this).selectAll('g.nv-wrap.nv-linePlusBar').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-linePlusBar').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y1 nv-axis');
      gEnter.append('g').attr('class', 'nv-y2 nv-axis');
      gEnter.append('g').attr('class', 'nv-barsWrap');
      gEnter.append('g').attr('class', 'nv-linesWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width( availableWidth / 2 );

        g.select('.nv-legendWrap')
            .datum(data.map(function(series) {
              series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;
              series.key = series.originalKey + (series.bar ? ' (left axis)' : ' (right axis)');
              return series;
            }))
          .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        g.select('.nv-legendWrap')
            .attr('transform', 'translate(' + ( availableWidth / 2 ) + ',' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)


      lines
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color(d, i);
        }).filter(function(d,i) { return !data[i].disabled && !data[i].bar }))

      bars
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color(d, i);
        }).filter(function(d,i) { return !data[i].disabled && data[i].bar }))



      var barsWrap = g.select('.nv-barsWrap')
          .datum(dataBars.length ? dataBars : [{values:[]}])

      var linesWrap = g.select('.nv-linesWrap')
          .datum(!dataLines[0].disabled ? dataLines : [{values:[]}] );
          //.datum(!dataLines[0].disabled ? dataLines : [{values:dataLines[0].values.map(function(d) { return [d[0], null] }) }] );

      d3.transition(barsWrap).call(bars);
      d3.transition(linesWrap).call(lines);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
        .scale(x)
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight, 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y1.range()[0] + ')');
      d3.transition(g.select('.nv-x.nv-axis'))
          .call(xAxis);


      y1Axis
        .scale(y1)
        .ticks( availableHeight / 36 )
        .tickSize(-availableWidth, 0);

      d3.transition(g.select('.nv-y1.nv-axis'))
          .style('opacity', dataBars.length ? 1 : 0)
          .call(y1Axis);


      y2Axis
        .scale(y2)
        .ticks( availableHeight / 36 )
        .tickSize(dataBars.length ? 0 : -availableWidth, 0); // Show the y2 rules only if y1 has none

      g.select('.nv-y2.nv-axis')
          .style('opacity', dataLines.length ? 1 : 0)
          .attr('transform', 'translate(' + availableWidth + ',0)');
          //.attr('transform', 'translate(' + x.range()[1] + ',0)');

      d3.transition(g.select('.nv-y2.nv-axis'))
          .call(y2Axis);

      //------------------------------------------------------------


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      legend.dispatch.on('legendClick', function(d,i) { 
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        selection.transition().call(chart);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });


      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        selection.call(chart);
      });

      //============================================================


    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  lines.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  bars.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  bars.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.legend = legend;
  chart.lines = lines;
  chart.bars = bars;
  chart.xAxis = xAxis;
  chart.y1Axis = y1Axis;
  chart.y2Axis = y2Axis;

  d3.rebind(chart, lines, 'defined', 'size', 'clipVoronoi', 'interpolate');
  //TODO: consider rebinding x, y and some other stuff, and simply do soemthign lile bars.x(lines.x()), etc.
  //d3.rebind(chart, lines, 'x', 'y', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    lines.x(_);
    bars.x(_);
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    lines.y(_);
    bars.y(_);
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.lineWithFocusChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var lines = nv.models.line()
    , lines2 = nv.models.line()
    , xAxis = nv.models.axis()
    , yAxis = nv.models.axis()
    , x2Axis = nv.models.axis()
    , y2Axis = nv.models.axis()
    , legend = nv.models.legend()
    , brush = d3.svg.brush()
    ;

  var margin = {top: 30, right: 30, bottom: 30, left: 60}
    , margin2 = {top: 0, right: 30, bottom: 20, left: 60}
    , color = nv.utils.defaultColor()
    , width = null
    , height = null
    , height2 = 100
    , x
    , y
    , x2
    , y2
    , showLegend = true
    , brushExtent = null
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' at ' + x + '</p>'
      }
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'brush')
    ;

  lines
    .clipEdge(true)
    ;
  lines2
    .interactive(false)
    ;
  xAxis
    .orient('bottom')
    .tickPadding(5)
    ;
  yAxis
    .orient('left')
    ;
  x2Axis
    .orient('bottom')
    .tickPadding(5)
    ;
  y2Axis
    .orient('left')
    ;
  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
        y = yAxis.tickFormat()(lines.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, null, null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight1 = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom - height2,
          availableHeight2 = height2 - margin2.top - margin2.bottom;

      chart.update = function() { chart(selection) };
      chart.container = this;


      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight1 / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = lines.xScale();
      y = lines.yScale();
      x2 = lines2.xScale();
      y2 = lines2.yScale();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-lineWithFocusChart').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-lineWithFocusChart').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-legendWrap');

      var focusEnter = gEnter.append('g').attr('class', 'nv-focus');
      focusEnter.append('g').attr('class', 'nv-x nv-axis');
      focusEnter.append('g').attr('class', 'nv-y nv-axis');
      focusEnter.append('g').attr('class', 'nv-linesWrap');

      var contextEnter = gEnter.append('g').attr('class', 'nv-context');
      contextEnter.append('g').attr('class', 'nv-x nv-axis');
      contextEnter.append('g').attr('class', 'nv-y nv-axis');
      contextEnter.append('g').attr('class', 'nv-linesWrap');
      contextEnter.append('g').attr('class', 'nv-brushBackground');
      contextEnter.append('g').attr('class', 'nv-x nv-brush');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width(availableWidth);

        g.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight1 = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom - height2;
        }

        g.select('.nv-legendWrap')
            .attr('transform', 'translate(0,' + (-margin.top) +')')
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)

      lines
        .width(availableWidth)
        .height(availableHeight1)
        .color(
          data
            .map(function(d,i) {
              return d.color || color(d, i);
            })
            .filter(function(d,i) {
              return !data[i].disabled;
          })
        );

      lines2
        .defined(lines.defined())
        .width(availableWidth)
        .height(availableHeight2)
        .color(
          data
            .map(function(d,i) {
              return d.color || color(d, i);
            })
            .filter(function(d,i) {
              return !data[i].disabled;
          })
        );

      g.select('.nv-context')
          .attr('transform', 'translate(0,' + ( availableHeight1 + margin.bottom + margin2.top) + ')')

      var contextLinesWrap = g.select('.nv-context .nv-linesWrap')
          .datum(data.filter(function(d) { return !d.disabled }))

      d3.transition(contextLinesWrap).call(lines2);

      //------------------------------------------------------------


      /*
      var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')
          .datum(data.filter(function(d) { return !d.disabled }))

      d3.transition(focusLinesWrap).call(lines);
     */


      //------------------------------------------------------------
      // Setup Main (Focus) Axes

      xAxis
        .scale(x)
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight1, 0);

      yAxis
        .scale(y)
        .ticks( availableHeight1 / 36 )
        .tickSize( -availableWidth, 0);

      g.select('.nv-focus .nv-x.nv-axis')
          .attr('transform', 'translate(0,' + availableHeight1 + ')');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Brush

      brush
        .x(x2)
        .on('brush', onBrush);

      if (brushExtent) brush.extent(brushExtent);

      var brushBG = g.select('.nv-brushBackground').selectAll('g')
          .data([brushExtent || brush.extent()])

      var brushBGenter = brushBG.enter()
          .append('g');

      brushBGenter.append('rect')
          .attr('class', 'left')
          .attr('x', 0)
          .attr('y', 0)
          .attr('height', availableHeight2);

      brushBGenter.append('rect')
          .attr('class', 'right')
          .attr('x', 0)
          .attr('y', 0)
          .attr('height', availableHeight2);

      gBrush = g.select('.nv-x.nv-brush')
          .call(brush);
      gBrush.selectAll('rect')
          //.attr('y', -5)
          .attr('height', availableHeight2);
      gBrush.selectAll('.resize').append('path').attr('d', resizePath);

      onBrush();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Secondary (Context) Axes

      x2Axis
        .scale(x2)
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight2, 0);

      g.select('.nv-context .nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y2.range()[0] + ')');
      d3.transition(g.select('.nv-context .nv-x.nv-axis'))
          .call(x2Axis);


      y2Axis
        .scale(y2)
        .ticks( availableHeight2 / 36 )
        .tickSize( -availableWidth, 0);

      d3.transition(g.select('.nv-context .nv-y.nv-axis'))
          .call(y2Axis);

      g.select('.nv-context .nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y2.range()[0] + ')');

      //------------------------------------------------------------


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      legend.dispatch.on('legendClick', function(d,i) {
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        selection.transition().call(chart);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });

      //============================================================


      //============================================================
      // Functions
      //------------------------------------------------------------

      // Taken from crossfilter (http://square.github.com/crossfilter/)
      function resizePath(d) {
        var e = +(d == 'e'),
            x = e ? 1 : -1,
            y = availableHeight2 / 3;
        return 'M' + (.5 * x) + ',' + y
            + 'A6,6 0 0 ' + e + ' ' + (6.5 * x) + ',' + (y + 6)
            + 'V' + (2 * y - 6)
            + 'A6,6 0 0 ' + e + ' ' + (.5 * x) + ',' + (2 * y)
            + 'Z'
            + 'M' + (2.5 * x) + ',' + (y + 8)
            + 'V' + (2 * y - 8)
            + 'M' + (4.5 * x) + ',' + (y + 8)
            + 'V' + (2 * y - 8);
      }


      function updateBrushBG() {
        if (!brush.empty()) brush.extent(brushExtent);
        brushBG
            .data([brush.empty() ? x2.domain() : brushExtent])
            .each(function(d,i) {
              var leftWidth = x2(d[0]) - x.range()[0],
                  rightWidth = x.range()[1] - x2(d[1]);
              d3.select(this).select('.left')
                .attr('width',  leftWidth < 0 ? 0 : leftWidth);

              d3.select(this).select('.right')
                .attr('x', x2(d[1]))
                .attr('width', rightWidth < 0 ? 0 : rightWidth);
            });
      }


      function onBrush() {
        brushExtent = brush.empty() ? null : brush.extent();
        extent = brush.empty() ? x2.domain() : brush.extent();


        dispatch.brush({extent: extent, brush: brush});


        updateBrushBG();

        // Update Main (Focus)
        var focusLinesWrap = g.select('.nv-focus .nv-linesWrap')
            .datum(
              data
                .filter(function(d) { return !d.disabled })
                .map(function(d,i) {
                  return {
                    key: d.key,
                    values: d.values.filter(function(d,i) {
                      return lines.x()(d,i) >= extent[0] && lines.x()(d,i) <= extent[1];
                    })
                  }
                })
            );
        d3.transition(focusLinesWrap).call(lines);


        // Update Main (Focus) Axes
        d3.transition(g.select('.nv-focus .nv-x.nv-axis'))
            .call(xAxis);
        d3.transition(g.select('.nv-focus .nv-y.nv-axis'))
            .call(yAxis);
      }

      //============================================================


    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  lines.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.legend = legend;
  chart.lines = lines;
  chart.lines2 = lines2;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;
  chart.x2Axis = x2Axis;
  chart.y2Axis = y2Axis;

  d3.rebind(chart, lines, 'defined', 'isArea', 'size', 'xDomain', 'yDomain', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'id');

  chart.x = function(_) {
    if (!arguments.length) return lines.x;
    lines.x(_);
    lines2.x(_);
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return lines.y;
    lines.y(_);
    lines2.y(_);
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.margin2 = function(_) {
    if (!arguments.length) return margin2;
    margin2 = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.height2 = function(_) {
    if (!arguments.length) return height2;
    height2 = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color =nv.utils.getColor(_);
    legend.color(color);
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.interpolate = function(_) {
    if (!arguments.length) return lines.interpolate();
    lines.interpolate(_);
    lines2.interpolate(_);
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  // Chart has multiple similar Axes, to prevent code duplication, probably need to link all axis functions manually like below
  chart.xTickFormat = function(_) {
    if (!arguments.length) return xAxis.tickFormat();
    xAxis.tickFormat(_);
    x2Axis.tickFormat(_);
    return chart;
  };

  chart.yTickFormat = function(_) {
    if (!arguments.length) return yAxis.tickFormat();
    yAxis.tickFormat(_);
    y2Axis.tickFormat(_);
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.multiBar = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , x = d3.scale.ordinal()
    , y = d3.scale.linear()
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
    , clipEdge = true
    , stacked = false
    , color = nv.utils.defaultColor()
    , barColor = null // adding the ability to set the color for each rather than the whole group
    , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
    , delay = 1200
    , xDomain
    , yDomain
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var x0, y0 //used to store previous scales
      ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);

      if (stacked)
        data = d3.layout.stack()
                 .offset('zero')
                 .values(function(d){ return d.values })
                 .y(getY)
                 (data);


      //add series index to each data point for reference
      data = data.map(function(series, i) {
        series.values = series.values.map(function(point) {
          point.series = i;
          return point;
        });
        return series;
      });


      //------------------------------------------------------------
      // HACK for negative value stacking
      if (stacked)
        data[0].values.map(function(d,i) {
          var posBase = 0, negBase = 0;
          data.map(function(d) {
            var f = d.values[i]
            f.size = Math.abs(f.y);
            if (f.y<0)  {
              f.y1 = negBase;
              negBase = negBase - f.size;
            } else
            { 
              f.y1 = f.size + posBase;
              posBase = posBase + f.size;
            }
          });
        });

      //------------------------------------------------------------
      // Setup Scales

      // remap and flatten the data for use in calculating the scales' domains
      var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
            data.map(function(d) {
              return d.values.map(function(d,i) {
                return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1 }
              })
            });

      x   .domain(d3.merge(seriesData).map(function(d) { return d.x }))
          .rangeBands([0, availableWidth], .1);

      //y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y + (stacked ? d.y1 : 0) }).concat(forceY)))
      y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return stacked ? (d.y > 0 ? d.y1 : d.y1 + d.y ) : d.y }).concat(forceY)))
          .range([availableHeight, 0]);

      // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
      if (x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1]) singlePoint = true;
      if (x.domain()[0] === x.domain()[1])
        x.domain()[0] ?
            x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
          : x.domain([-1,1]);

      if (y.domain()[0] === y.domain()[1])
        y.domain()[0] ?
            y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
          : y.domain([-1,1]);


      x0 = x0 || x;
      y0 = y0 || y;

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-multibar').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibar');
      var defsEnter = wrapEnter.append('defs');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g')

      gEnter.append('g').attr('class', 'nv-groups');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------



      defsEnter.append('clipPath')
          .attr('id', 'nv-edge-clip-' + id)
        .append('rect');
      wrap.select('#nv-edge-clip-' + id + ' rect')
          .attr('width', availableWidth)
          .attr('height', availableHeight);

      g   .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');



      var groups = wrap.select('.nv-groups').selectAll('.nv-group')
          .data(function(d) { return d }, function(d) { return d.key });
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
      d3.transition(groups.exit())
          //.style('stroke-opacity', 1e-6)
          //.style('fill-opacity', 1e-6)
        .selectAll('rect.nv-bar')
        .delay(function(d,i) { return i * delay/ data[0].values.length })
          .attr('y', function(d) { return stacked ? y0(d.y0) : y0(0) })
          .attr('height', 0)
          .remove();
      groups
          .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
          .classed('hover', function(d) { return d.hover })
          .style('fill', function(d,i){ return color(d, i) })
          .style('stroke', function(d,i){ return color(d, i) });
      d3.transition(groups)
          .style('stroke-opacity', 1)
          .style('fill-opacity', .75);


      var bars = groups.selectAll('rect.nv-bar')
          .data(function(d) { return d.values });

      bars.exit().remove();


      var barsEnter = bars.enter().append('rect')
          .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
          .attr('x', function(d,i,j) {
              return stacked ? 0 : (j * x.rangeBand() / data.length )
          })
          .attr('y', function(d) { return y0(stacked ? d.y0 : 0) })
          .attr('height', 0)
          .attr('width', x.rangeBand() / (stacked ? 1 : data.length) );
      bars
          .style('fill', function(d,i,j){ return color(d, j, i);  })
          .style('stroke', function(d,i,j){ return color(d, j, i); })
          .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
            d3.select(this).classed('hover', true);
            dispatch.elementMouseover({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
          })
          .on('mouseout', function(d,i) {
            d3.select(this).classed('hover', false);
            dispatch.elementMouseout({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
          })
          .on('click', function(d,i) {
            dispatch.elementClick({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
            d3.event.stopPropagation();
          })
          .on('dblclick', function(d,i) {
            dispatch.elementDblClick({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
            d3.event.stopPropagation();
          });
      bars
          .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
          .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })

      if (barColor) {
        if (!disabled) disabled = data.map(function() { return true });
        bars
          //.style('fill', barColor)
          //.style('stroke', barColor)
          //.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
          //.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
          .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); })
          .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); });
      }


      if (stacked)
        d3.transition(bars)
            .delay(function(d,i) { return i * delay / data[0].values.length })
            .attr('y', function(d,i) {

              return y((stacked ? d.y1 : 0));
            })
            .attr('height', function(d,i) {
              return Math.max(Math.abs(y(d.y + (stacked ? d.y0 : 0)) - y((stacked ? d.y0 : 0))),1);
            })
            .each('end', function() {
              d3.transition(d3.select(this))
                .attr('x', function(d,i) {
                  return stacked ? 0 : (d.series * x.rangeBand() / data.length )
                })
                .attr('width', x.rangeBand() / (stacked ? 1 : data.length) );
            })
      else
        d3.transition(bars)
          .delay(function(d,i) { return i * delay/ data[0].values.length })
            .attr('x', function(d,i) {
              return d.series * x.rangeBand() / data.length
            })
            .attr('width', x.rangeBand() / data.length)
            .each('end', function() {
              d3.transition(d3.select(this))
                .attr('y', function(d,i) {
                  return getY(d,i) < 0 ?
                          y(0) :
                          y(0) - y(getY(d,i)) < 1 ?
                            y(0) - 1 :
                            y(getY(d,i))
                })
                .attr('height', function(d,i) {
                  return Math.max(Math.abs(y(getY(d,i)) - y(0)),1);
                });
            })


      //store old scales for use in transitions on update
      x0 = x.copy();
      y0 = y.copy();

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.xScale = function(_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };

  chart.yScale = function(_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };

  chart.xDomain = function(_) {
    if (!arguments.length) return xDomain;
    xDomain = _;
    return chart;
  };

  chart.yDomain = function(_) {
    if (!arguments.length) return yDomain;
    yDomain = _;
    return chart;
  };

  chart.forceY = function(_) {
    if (!arguments.length) return forceY;
    forceY = _;
    return chart;
  };

  chart.stacked = function(_) {
    if (!arguments.length) return stacked;
    stacked = _;
    return chart;
  };

  chart.clipEdge = function(_) {
    if (!arguments.length) return clipEdge;
    clipEdge = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.barColor = function(_) {
    if (!arguments.length) return barColor;
    barColor = nv.utils.getColor(_);
    return chart;
  };

  chart.disabled = function(_) {
    if (!arguments.length) return disabled;
    disabled = _;
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  chart.delay = function(_) {
    if (!arguments.length) return delay;
    delay = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.multiBarChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var multibar = nv.models.multiBar()
    , xAxis = nv.models.axis()
    , yAxis = nv.models.axis()
    , legend = nv.models.legend()
    , controls = nv.models.legend()
    ;

  var margin = {top: 30, right: 20, bottom: 30, left: 60}
    , width = null
    , height = null
    , color = nv.utils.defaultColor()
    , showControls = true
    , showLegend = true
    , reduceXTicks = true // if false a tick will show for every data point
    , rotateLabels = 0
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' on ' + x + '</p>'
      }
    , x //can be accessed via chart.xScale()
    , y //can be accessed via chart.yScale()
    , state = { stacked: false }
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    ;

  multibar
    .stacked(false)
    ;
  xAxis
    .orient('bottom')
    .tickPadding(7)
    .highlightZero(false)
    .showMaxMin(false)
    .tickFormat(function(d) { return d })
    ;
  yAxis
    .orient('left')
    .tickFormat(d3.format(',.1f'))
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
        y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      chart.update = function() { selection.transition().call(chart) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });


      //------------------------------------------------------------
      // Display noData message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = multibar.xScale();
      y = multibar.yScale();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-multiBarWithLegend').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarWithLegend').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-barsWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');
      gEnter.append('g').attr('class', 'nv-controlsWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width(availableWidth / 2);

        if (multibar.barColor())
          data.forEach(function(series,i) {
            series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
          })

        g.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        g.select('.nv-legendWrap')
            .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Controls

      if (showControls) {
        var controlsData = [
          { key: 'Grouped', disabled: multibar.stacked() },
          { key: 'Stacked', disabled: !multibar.stacked() }
        ];

        controls.width(180).color(['#444', '#444', '#444']);
        g.select('.nv-controlsWrap')
            .datum(controlsData)
            .attr('transform', 'translate(0,' + (-margin.top) +')')
            .call(controls);
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)

      multibar
        .disabled(data.map(function(series) { return series.disabled }))
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color(d, i);
        }).filter(function(d,i) { return !data[i].disabled }))


      var barsWrap = g.select('.nv-barsWrap')
          .datum(data.filter(function(d) { return !d.disabled }))

      d3.transition(barsWrap).call(multibar);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
        .scale(x)
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight, 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y.range()[0] + ')');
      d3.transition(g.select('.nv-x.nv-axis'))
          .call(xAxis);

      var xTicks = g.select('.nv-x.nv-axis > g').selectAll('g');

      xTicks
          .selectAll('line, text')
          .style('opacity', 1)

      if (reduceXTicks)
        xTicks
          .filter(function(d,i) {
              return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
            })
          .selectAll('text, line')
          .style('opacity', 0);

      if(rotateLabels)
        xTicks
            .selectAll('text')
            .attr('transform', function(d,i,j) { return 'rotate('+rotateLabels+' 0,0)' })
            .attr('text-transform', rotateLabels > 0 ? 'start' : 'end');

      g.select('.nv-x.nv-axis').selectAll('g.nv-axisMaxMin text')
          .style('opacity', 1);

      yAxis
        .scale(y)
        .ticks( availableHeight / 36 )
        .tickSize( -availableWidth, 0);

      d3.transition(g.select('.nv-y.nv-axis'))
          .call(yAxis);

      //------------------------------------------------------------



      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      legend.dispatch.on('legendClick', function(d,i) {
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        selection.transition().call(chart);
      });

      controls.dispatch.on('legendClick', function(d,i) {
        if (!d.disabled) return;
        controlsData = controlsData.map(function(s) {
          s.disabled = true;
          return s;
        });
        d.disabled = false;

        switch (d.key) {
          case 'Grouped':
            multibar.stacked(false);
            break;
          case 'Stacked':
            multibar.stacked(true);
            break;
        }

        state.stacked = multibar.stacked();
        dispatch.stateChange(state);

        selection.transition().call(chart);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode)
      });

      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        if (typeof e.stacked !== 'undefined') {
          multibar.stacked(e.stacked);
          state.stacked = e.stacked;
        }

        selection.call(chart);
      });

      //============================================================


    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  multibar.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  multibar.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });
  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.multibar = multibar;
  chart.legend = legend;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;

  d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'stacked', 'delay', 'barColor');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    return chart;
  };

  chart.showControls = function(_) {
    if (!arguments.length) return showControls;
    showControls = _;
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.reduceXTicks= function(_) {
    if (!arguments.length) return reduceXTicks;
    reduceXTicks = _;
    return chart;
  };

  chart.rotateLabels = function(_) {
    if (!arguments.length) return rotateLabels;
    rotateLabels = _;
    return chart;
  }

  chart.tooltip = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.multiBarHorizontal = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , x = d3.scale.ordinal()
    , y = d3.scale.linear()
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove
    , color = nv.utils.defaultColor()
    , barColor = null // adding the ability to set the color for each rather than the whole group
    , disabled // used in conjunction with barColor to communicate from multiBarHorizontalChart what series are disabled
    , stacked = false
    , showValues = false
    , valuePadding = 60
    , valueFormat = d3.format(',.2f')
    , delay = 1200
    , xDomain
    , yDomain
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var x0, y0 //used to store previous scales
      ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);


      if (stacked)
        data = d3.layout.stack()
                 .offset('zero')
                 .values(function(d){ return d.values })
                 .y(getY)
                 (data);


      //add series index to each data point for reference
      data = data.map(function(series, i) {
        series.values = series.values.map(function(point) {
          point.series = i;
          return point;
        });
        return series;
      });



      //------------------------------------------------------------
      // HACK for negative value stacking
      if (stacked)
        data[0].values.map(function(d,i) {
          var posBase = 0, negBase = 0;
          data.map(function(d) {
            var f = d.values[i]
            f.size = Math.abs(f.y);
            if (f.y<0)  {
              f.y1 = negBase - f.size;
              negBase = negBase - f.size;
            } else
            { 
              f.y1 = posBase;
              posBase = posBase + f.size;
            }
          });
        });



      //------------------------------------------------------------
      // Setup Scales

      // remap and flatten the data for use in calculating the scales' domains
      var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate
            data.map(function(d) {
              return d.values.map(function(d,i) {
                return { x: getX(d,i), y: getY(d,i), y0: d.y0, y1: d.y1 }
              })
            });

      x   .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x }))
          .rangeBands([0, availableHeight], .1);

      //y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y + (stacked ? d.y0 : 0) }).concat(forceY)))
      y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return stacked ? (d.y > 0 ? d.y1 + d.y : d.y1 ) : d.y }).concat(forceY)))

      if (showValues && !stacked)
        y.range([(y.domain()[0] < 0 ? valuePadding : 0), availableWidth - (y.domain()[1] > 0 ? valuePadding : 0) ]);
      else
        y.range([0, availableWidth]);

      x0 = x0 || x;
      y0 = y0 || d3.scale.linear().domain(y.domain()).range([y(0),y(0)]);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = d3.select(this).selectAll('g.nv-wrap.nv-multibarHorizontal').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multibarHorizontal');
      var defsEnter = wrapEnter.append('defs');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-groups');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------



      var groups = wrap.select('.nv-groups').selectAll('.nv-group')
          .data(function(d) { return d }, function(d) { return d.key });
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
      d3.transition(groups.exit())
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6)
          .remove();
      groups
          .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
          .classed('hover', function(d) { return d.hover })
          .style('fill', function(d,i){ return color(d, i) })
          .style('stroke', function(d,i){ return color(d, i) });
      d3.transition(groups)
          .style('stroke-opacity', 1)
          .style('fill-opacity', .75);


      var bars = groups.selectAll('g.nv-bar')
          .data(function(d) { return d.values });

      bars.exit().remove();


      var barsEnter = bars.enter().append('g')
          .attr('transform', function(d,i,j) {
              return 'translate(' + y0(stacked ? d.y0 : 0) + ',' + (stacked ? 0 : (j * x.rangeBand() / data.length ) + x(getX(d,i))) + ')'
          });

      barsEnter.append('rect')
          .attr('width', 0)
          .attr('height', x.rangeBand() / (stacked ? 1 : data.length) )

      bars
          .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here
            d3.select(this).classed('hover', true);
            dispatch.elementMouseover({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [ y(getY(d,i) + (stacked ? d.y0 : 0)), x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length) ],
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
          })
          .on('mouseout', function(d,i) {
            d3.select(this).classed('hover', false);
            dispatch.elementMouseout({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
          })
          .on('click', function(d,i) {
            dispatch.elementClick({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
            d3.event.stopPropagation();
          })
          .on('dblclick', function(d,i) {
            dispatch.elementDblClick({
              value: getY(d,i),
              point: d,
              series: data[d.series],
              pos: [x(getX(d,i)) + (x.rangeBand() * (stacked ? data.length / 2 : d.series + .5) / data.length), y(getY(d,i) + (stacked ? d.y0 : 0))],  // TODO: Figure out why the value appears to be shifted
              pointIndex: i,
              seriesIndex: d.series,
              e: d3.event
            });
            d3.event.stopPropagation();
          });


      barsEnter.append('text');

      if (showValues && !stacked) {
        bars.select('text')
            .attr('text-anchor', function(d,i) { return getY(d,i) < 0 ? 'end' : 'start' })
            .attr('y', x.rangeBand() / (data.length * 2))
            .attr('dy', '.32em')
            .text(function(d,i) { return valueFormat(getY(d,i)) })
        d3.transition(bars)
            //.delay(function(d,i) { return i * delay / data[0].values.length })
          .select('text')
            .attr('x', function(d,i) { return getY(d,i) < 0 ? -4 : y(getY(d,i)) - y(0) + 4 })
      } else {
        //bars.selectAll('text').remove();
        bars.selectAll('text').text('');
      }

      bars
          .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})

      if (barColor) {
        if (!disabled) disabled = data.map(function() { return true });
        bars
          //.style('fill', barColor)
          //.style('stroke', barColor)
          //.style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
          //.style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(j).toString(); })
          .style('fill', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); })
          .style('stroke', function(d,i,j) { return d3.rgb(barColor(d,i)).darker(  disabled.map(function(d,i) { return i }).filter(function(d,i){ return !disabled[i]  })[j]   ).toString(); });
      }

      if (stacked)
        d3.transition(bars)
            //.delay(function(d,i) { return i * delay / data[0].values.length })
            .attr('transform', function(d,i) {
              //return 'translate(' + y(d.y0) + ',0)'
              //return 'translate(' + y(d.y0) + ',' + x(getX(d,i)) + ')'
              return 'translate(' + y(d.y1) + ',' + x(getX(d,i)) + ')'
            })
          .select('rect')
            .attr('width', function(d,i) {
              return Math.abs(y(getY(d,i) + d.y0) - y(d.y0))
            })
            .attr('height', x.rangeBand() );
      else
        d3.transition(bars)
          //.delay(function(d,i) { return i * delay / data[0].values.length })
            .attr('transform', function(d,i) {
              //TODO: stacked must be all positive or all negative, not both?
              return 'translate(' + 
              (getY(d,i) < 0 ? y(getY(d,i)) : y(0))
              + ',' +
              (d.series * x.rangeBand() / data.length
              +
              x(getX(d,i)) )
              + ')'
            })
          .select('rect')
            .attr('height', x.rangeBand() / data.length )
            .attr('width', function(d,i) {
              return Math.max(Math.abs(y(getY(d,i)) - y(0)),1)
            });


      //store old scales for use in transitions on update
      x0 = x.copy();
      y0 = y.copy();

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.xScale = function(_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };

  chart.yScale = function(_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };

  chart.xDomain = function(_) {
    if (!arguments.length) return xDomain;
    xDomain = _;
    return chart;
  };

  chart.yDomain = function(_) {
    if (!arguments.length) return yDomain;
    yDomain = _;
    return chart;
  };

  chart.forceY = function(_) {
    if (!arguments.length) return forceY;
    forceY = _;
    return chart;
  };

  chart.stacked = function(_) {
    if (!arguments.length) return stacked;
    stacked = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.barColor = function(_) {
    if (!arguments.length) return barColor;
    barColor = nv.utils.getColor(_);
    return chart;
  };

  chart.disabled = function(_) {
    if (!arguments.length) return disabled;
    disabled = _;
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  chart.delay = function(_) {
    if (!arguments.length) return delay;
    delay = _;
    return chart;
  };

  chart.showValues = function(_) {
    if (!arguments.length) return showValues;
    showValues = _;
    return chart;
  };

  chart.valueFormat= function(_) {
    if (!arguments.length) return valueFormat;
    valueFormat = _;
    return chart;
  };

  chart.valuePadding = function(_) {
    if (!arguments.length) return valuePadding;
    valuePadding = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.multiBarHorizontalChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var multibar = nv.models.multiBarHorizontal()
    , xAxis = nv.models.axis()
    , yAxis = nv.models.axis()
    , legend = nv.models.legend().height(30)
    , controls = nv.models.legend().height(30)
    ;

  var margin = {top: 30, right: 20, bottom: 50, left: 60}
    , width = null
    , height = null
    , color = nv.utils.defaultColor()
    , showControls = true
    , showLegend = true
    , stacked = false
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + ' - ' + x + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , x //can be accessed via chart.xScale()
    , y //can be accessed via chart.yScale()
    , state = { stacked: stacked }
    , noData = 'No Data Available.'
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    ;

  multibar
    .stacked(stacked)
    ;
  xAxis
    .orient('left')
    .tickPadding(5)
    .highlightZero(false)
    .showMaxMin(false)
    .tickFormat(function(d) { return d })
    ;
  yAxis
    .orient('bottom')
    .tickFormat(d3.format(',.1f'))
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
        y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w', null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      chart.update = function() { selection.transition().call(chart) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });


      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = multibar.xScale();
      y = multibar.yScale();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-multiBarHorizontalChart').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-multiBarHorizontalChart').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-barsWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');
      gEnter.append('g').attr('class', 'nv-controlsWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width(availableWidth / 2);

        if (multibar.barColor())
          data.forEach(function(series,i) {
            series.color = d3.rgb('#ccc').darker(i * 1.5).toString();
          })

        g.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        g.select('.nv-legendWrap')
            .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Controls

      if (showControls) {
        var controlsData = [
          { key: 'Grouped', disabled: multibar.stacked() },
          { key: 'Stacked', disabled: !multibar.stacked() }
        ];

        controls.width(180).color(['#444', '#444', '#444']);
        g.select('.nv-controlsWrap')
            .datum(controlsData)
            .attr('transform', 'translate(0,' + (-margin.top) +')')
            .call(controls);
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)

      multibar
        .disabled(data.map(function(series) { return series.disabled }))
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color(d, i);
        }).filter(function(d,i) { return !data[i].disabled }))


      var barsWrap = g.select('.nv-barsWrap')
          .datum(data.filter(function(d) { return !d.disabled }))

      d3.transition(barsWrap).call(multibar);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
        .scale(x)
        .ticks( availableHeight / 24 )
        .tickSize(-availableWidth, 0);

      d3.transition(g.select('.nv-x.nv-axis'))
          .call(xAxis);

      var xTicks = g.select('.nv-x.nv-axis').selectAll('g');

      xTicks
          .selectAll('line, text')
          .style('opacity', 1)


      yAxis
        .scale(y)
        .ticks( availableWidth / 100 )
        .tickSize( -availableHeight, 0);

      g.select('.nv-y.nv-axis')
          .attr('transform', 'translate(0,' + availableHeight + ')');
      d3.transition(g.select('.nv-y.nv-axis'))
          .call(yAxis);

      //------------------------------------------------------------



      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      legend.dispatch.on('legendClick', function(d,i) {
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        selection.transition().call(chart);
      });

      controls.dispatch.on('legendClick', function(d,i) {
        if (!d.disabled) return;
        controlsData = controlsData.map(function(s) {
          s.disabled = true;
          return s;
        });
        d.disabled = false;

        switch (d.key) {
          case 'Grouped':
            multibar.stacked(false);
            break;
          case 'Stacked':
            multibar.stacked(true);
            break;
        }

        state.stacked = multibar.stacked();
        dispatch.stateChange(state);

        selection.transition().call(chart);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });

      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        if (typeof e.stacked !== 'undefined') {
          multibar.stacked(e.stacked);
          state.stacked = e.stacked;
        }

        selection.call(chart);
      });
      //============================================================


    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  multibar.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  multibar.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });
  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.multibar = multibar;
  chart.legend = legend;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;

  d3.rebind(chart, multibar, 'x', 'y', 'xDomain', 'yDomain', 'forceX', 'forceY', 'clipEdge', 'id', 'delay', 'showValues', 'valueFormat', 'stacked', 'barColor');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    return chart;
  };

  chart.showControls = function(_) {
    if (!arguments.length) return showControls;
    showControls = _;
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltip = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }
 nv.models.multiChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 30, right: 20, bottom: 50, left: 60},
      color = d3.scale.category20().range(),
      width = null, 
      height = null,
      showLegend = true,
      tooltips = true,
      tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' at ' + x + '</p>'
      },
      x, y; //can be accessed via chart.lines.[x/y]Scale()

  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var x = d3.scale.linear(),
      yScale1 = d3.scale.linear(),
      yScale2 = d3.scale.linear(),

      lines1 = nv.models.line().yScale(yScale1),
      lines2 = nv.models.line().yScale(yScale2),

      bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
      bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),

      stack1 = nv.models.stackedArea().yScale(yScale1),
      stack2 = nv.models.stackedArea().yScale(yScale2),

      xAxis = nv.models.axis().scale(x).orient('bottom').tickPadding(5),
      yAxis1 = nv.models.axis().scale(yScale1).orient('left'),
      yAxis2 = nv.models.axis().scale(yScale2).orient('right'),

      legend = nv.models.legend().height(30),
      dispatch = d3.dispatch('tooltipShow', 'tooltipHide');

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(lines1.x()(e.point, e.pointIndex)),
        y = (e.series.bar ? yAxis1 : yAxis2).tickFormat()(lines1.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, undefined, undefined, offsetElement.offsetParent);
  };

  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      var dataLines1 = data.filter(function(d) {return !d.disabled && d.type == 'line' && d.yAxis == 1})
      var dataLines2 = data.filter(function(d) {return !d.disabled && d.type == 'line' && d.yAxis == 2})
      var dataBars1 = data.filter(function(d) {return !d.disabled && d.type == 'bar' && d.yAxis == 1})
      var dataBars2 = data.filter(function(d) {return !d.disabled && d.type == 'bar' && d.yAxis == 2})
      var dataStack1 = data.filter(function(d) {return !d.disabled && d.type == 'area' && d.yAxis == 1})
      var dataStack2 = data.filter(function(d) {return !d.disabled && d.type == 'area' && d.yAxis == 2})

      var series1 = data.filter(function(d) {return !d.disabled && d.yAxis == 1})
            .map(function(d) {
              return d.values.map(function(d,i) {
                return { x: d.x, y: d.y }
              })
            })

      var series2 = data.filter(function(d) {return !d.disabled && d.yAxis == 2})
            .map(function(d) {
              return d.values.map(function(d,i) {
                return { x: d.x, y: d.y }
              })
            })

      x   .domain(d3.extent(d3.merge(series1.concat(series2)), function(d) { return d.x } ))
          .range([0, availableWidth]);

      var wrap = container.selectAll('g.wrap.multiChart').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multiChart').append('g');

      gEnter.append('g').attr('class', 'x axis');
      gEnter.append('g').attr('class', 'y1 axis');
      gEnter.append('g').attr('class', 'y2 axis');
      gEnter.append('g').attr('class', 'lines1Wrap');
      gEnter.append('g').attr('class', 'lines2Wrap');
      gEnter.append('g').attr('class', 'bars1Wrap');
      gEnter.append('g').attr('class', 'bars2Wrap');
      gEnter.append('g').attr('class', 'stack1Wrap');
      gEnter.append('g').attr('class', 'stack2Wrap');
      gEnter.append('g').attr('class', 'legendWrap');

      var g = wrap.select('g');

      if (showLegend) {
        legend.width( availableWidth / 2 );

        g.select('.legendWrap')
            .datum(data.map(function(series) { 
              series.originalKey = series.originalKey === undefined ? series.key : series.originalKey;
              series.key = series.originalKey + (series.yAxis == 1 ? '' : ' (right axis)');
              return series;
            }))
          .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        g.select('.legendWrap')
            .attr('transform', 'translate(' + ( availableWidth / 2 ) + ',' + (-margin.top) +')');
      }


      lines1
        .width(availableWidth)
        .height(availableHeight)
        .interpolate("monotone")
        .color(data.map(function(d,i) {
          return d.color || color[i % color.length];
        }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'line'}));

      lines2
        .width(availableWidth)
        .height(availableHeight)
        .interpolate("monotone")
        .color(data.map(function(d,i) {
          return d.color || color[i % color.length];
        }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}));

      bars1
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color[i % color.length];
        }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'bar'}));

      bars2
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color[i % color.length];
        }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'bar'}));

      stack1
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color[i % color.length];
        }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'area'}));

      stack2
        .width(availableWidth)
        .height(availableHeight)
        .color(data.map(function(d,i) {
          return d.color || color[i % color.length];
        }).filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'area'}));

      g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      var lines1Wrap = g.select('.lines1Wrap')
          .datum(dataLines1)
      var bars1Wrap = g.select('.bars1Wrap')
          .datum(dataBars1)
      var stack1Wrap = g.select('.stack1Wrap')
          .datum(dataStack1)

      var lines2Wrap = g.select('.lines2Wrap')
          .datum(dataLines2)
      var bars2Wrap = g.select('.bars2Wrap')
          .datum(dataBars2)
      var stack2Wrap = g.select('.stack2Wrap')
          .datum(dataStack2)

      var extraValue1 = dataStack1.length ? dataStack1.map(function(a){return a.values}).reduce(function(a,b){
        return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})
      }).concat([{x:0, y:0}]) : []
      var extraValue2 = dataStack2.length ? dataStack2.map(function(a){return a.values}).reduce(function(a,b){
        return a.map(function(aVal,i){return {x: aVal.x, y: aVal.y + b[i].y}})
      }).concat([{x:0, y:0}]) : []

      yScale1 .domain(d3.extent(d3.merge(series1).concat(extraValue1), function(d) { return d.y } ))
              .range([0, availableHeight])

      yScale2 .domain(d3.extent(d3.merge(series2).concat(extraValue2), function(d) { return d.y } ))
              .range([0, availableHeight])

      lines1.yDomain(yScale1.domain())
      bars1.yDomain(yScale1.domain())
      stack1.yDomain(yScale1.domain())

      lines2.yDomain(yScale2.domain())
      bars2.yDomain(yScale2.domain())
      stack2.yDomain(yScale2.domain())

      if(dataStack1.length){d3.transition(stack1Wrap).call(stack1);}
      if(dataStack2.length){d3.transition(stack2Wrap).call(stack2);}

      if(dataBars1.length){d3.transition(bars1Wrap).call(bars1);}
      if(dataBars2.length){d3.transition(bars2Wrap).call(bars2);}

      if(dataLines1.length){d3.transition(lines1Wrap).call(lines1);}
      if(dataLines2.length){d3.transition(lines2Wrap).call(lines2);}
      


      xAxis
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight, 0);

      g.select('.x.axis')
          .attr('transform', 'translate(0,' + availableHeight + ')');
      d3.transition(g.select('.x.axis'))
          .call(xAxis);

      yAxis1
        .ticks( availableHeight / 36 )
        .tickSize( -availableWidth, 0);


      d3.transition(g.select('.y1.axis'))
          .call(yAxis1);

      yAxis2
        .ticks( availableHeight / 36 )
        .tickSize( -availableWidth, 0);

      d3.transition(g.select('.y2.axis'))
          .call(yAxis2);

      g.select('.y2.axis')
          .style('opacity', series2.length ? 1 : 0)
          .attr('transform', 'translate(' + x.range()[1] + ',0)');

      legend.dispatch.on('legendClick', function(d,i) { 
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.series').classed('disabled', false);
            return d;
          });
        }
        selection.transition().call(chart);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });

    });

    chart.update = function() { chart(selection) };
    chart.container = this;

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  lines1.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines1.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  lines2.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines2.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  bars1.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  bars1.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  bars2.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  bars2.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  stack1.dispatch.on('tooltipShow', function(e) {
    //disable tooltips when value ~= 0
    //// TODO: consider removing points from voronoi that have 0 value instead of this hack
    if (!Math.round(stack1.y()(e.point) * 100)) {  // 100 will not be good for very small numbers... will have to think about making this valu dynamic, based on data range
      setTimeout(function() { d3.selectAll('.point.hover').classed('hover', false) }, 0);
      return false;
    }

    e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
    dispatch.tooltipShow(e);
  });

  stack1.dispatch.on('tooltipHide', function(e) {
    dispatch.tooltipHide(e);
  });

  stack2.dispatch.on('tooltipShow', function(e) {
    //disable tooltips when value ~= 0
    //// TODO: consider removing points from voronoi that have 0 value instead of this hack
    if (!Math.round(stack2.y()(e.point) * 100)) {  // 100 will not be good for very small numbers... will have to think about making this valu dynamic, based on data range
      setTimeout(function() { d3.selectAll('.point.hover').classed('hover', false) }, 0);
      return false;
    }

    e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
    dispatch.tooltipShow(e);
  });

  stack2.dispatch.on('tooltipHide', function(e) {
    dispatch.tooltipHide(e);
  });

    lines1.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines1.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  lines2.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  lines2.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });



  //============================================================
  // Global getters and setters
  //------------------------------------------------------------

  chart.dispatch = dispatch;
  chart.lines1 = lines1;
  chart.lines2 = lines2;
  chart.bars1 = bars1;
  chart.bars2 = bars2;
  chart.stack1 = stack1;
  chart.stack2 = stack2;
  chart.xAxis = xAxis;
  chart.yAxis1 = yAxis1;
  chart.yAxis2 = yAxis2;

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    lines1.x(_);
    bars1.x(_);
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    lines1.y(_);
    bars1.y(_);
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = _;
    legend.color(_);
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  return chart;
 }


 nv.models.ohlcBar = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , x = d3.scale.linear()
    , y = d3.scale.linear()
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , getOpen = function(d) { return d.open }
    , getClose = function(d) { return d.close }
    , getHigh = function(d) { return d.high }
    , getLow = function(d) { return d.low }
    , forceX = []
    , forceY = []
    , padData     = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
    , clipEdge = true
    , color = nv.utils.defaultColor()
    , xDomain
    , yDomain
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    ;

  //============================================================

  //============================================================
  // Private Variables
  //------------------------------------------------------------

  //TODO: store old scales for transitions

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);


      //------------------------------------------------------------
      // Setup Scales

      x   .domain(xDomain || d3.extent(data[0].values.map(getX).concat(forceX) ));

      if (padData)
        x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5)  / data[0].values.length ]);
      else
        x.range([0, availableWidth]);

      y   .domain(yDomain || [
            d3.min(data[0].values.map(getLow).concat(forceY)),
            d3.max(data[0].values.map(getHigh).concat(forceY))
          ])
          .range([availableHeight, 0]);

      // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
      if (x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1]) singlePoint = true;
      if (x.domain()[0] === x.domain()[1])
        x.domain()[0] ?
            x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
          : x.domain([-1,1]);

      if (y.domain()[0] === y.domain()[1])
        y.domain()[0] ?
            y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
          : y.domain([-1,1]);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = d3.select(this).selectAll('g.nv-wrap.nv-ohlcBar').data([data[0].values]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-ohlcBar');
      var defsEnter = wrapEnter.append('defs');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-ticks');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      container
          .on('click', function(d,i) {
            dispatch.chartClick({
                data: d,
                index: i,
                pos: d3.event,
                id: id
            });
          });


      defsEnter.append('clipPath')
          .attr('id', 'nv-chart-clip-path-' + id)
        .append('rect');

      wrap.select('#nv-chart-clip-path-' + id + ' rect')
          .attr('width', availableWidth)
          .attr('height', availableHeight);

      g   .attr('clip-path', clipEdge ? 'url(#nv-chart-clip-path-' + id + ')' : '');



      var ticks = wrap.select('.nv-ticks').selectAll('.nv-tick')
          .data(function(d) { return d });

      ticks.exit().remove();


      var ticksEnter = ticks.enter().append('path')
          .attr('class', function(d,i,j) { return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i })
          .attr('d', function(d,i) {
            var w = (availableWidth / data[0].values.length) * .9;
            return 'm0,0l0,'
                 + (y(getOpen(d,i))
                 - y(getHigh(d,i)))
                 + 'l'
                 + (-w/2)
                 + ',0l'
                 + (w/2)
                 + ',0l0,'
                 + (y(getLow(d,i)) - y(getOpen(d,i)))
                 + 'l0,'
                 + (y(getClose(d,i))
                 - y(getLow(d,i)))
                 + 'l'
                 + (w/2)
                 + ',0l'
                 + (-w/2)
                 + ',0z';
          })
          .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })
          //.attr('fill', function(d,i) { return color[0]; })
          //.attr('stroke', function(d,i) { return color[0]; })
          //.attr('x', 0 )
          //.attr('y', function(d,i) {  return y(Math.max(0, getY(d,i))) })
          //.attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) })
          .on('mouseover', function(d,i) {
            d3.select(this).classed('hover', true);
            dispatch.elementMouseover({
                point: d,
                series: data[0],
                pos: [x(getX(d,i)), y(getY(d,i))],  // TODO: Figure out why the value appears to be shifted
                pointIndex: i,
                seriesIndex: 0,
                e: d3.event
            });

          })
          .on('mouseout', function(d,i) {
                d3.select(this).classed('hover', false);
                dispatch.elementMouseout({
                    point: d,
                    series: data[0],
                    pointIndex: i,
                    seriesIndex: 0,
                    e: d3.event
                });
          })
          .on('click', function(d,i) {
                dispatch.elementClick({
                    //label: d[label],
                    value: getY(d,i),
                    data: d,
                    index: i,
                    pos: [x(getX(d,i)), y(getY(d,i))],
                    e: d3.event,
                    id: id
                });
              d3.event.stopPropagation();
          })
          .on('dblclick', function(d,i) {
              dispatch.elementDblClick({
                  //label: d[label],
                  value: getY(d,i),
                  data: d,
                  index: i,
                  pos: [x(getX(d,i)), y(getY(d,i))],
                  e: d3.event,
                  id: id
              });
              d3.event.stopPropagation();
          });

      ticks
          .attr('class', function(d,i,j) { return (getOpen(d,i) > getClose(d,i) ? 'nv-tick negative' : 'nv-tick positive') + ' nv-tick-' + j + '-' + i })
      d3.transition(ticks)
          .attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',' + y(getHigh(d,i)) + ')'; })
          .attr('d', function(d,i) {
            var w = (availableWidth / data[0].values.length) * .9;
            return 'm0,0l0,'
                 + (y(getOpen(d,i))
                 - y(getHigh(d,i)))
                 + 'l'
                 + (-w/2)
                 + ',0l'
                 + (w/2)
                 + ',0l0,'
                 + (y(getLow(d,i))
                 - y(getOpen(d,i)))
                 + 'l0,'
                 + (y(getClose(d,i))
                 - y(getLow(d,i)))
                 + 'l'
                 + (w/2)
                 + ',0l'
                 + (-w/2)
                 + ',0z';
          })
          //.attr('width', (availableWidth / data[0].values.length) * .9 )


      //d3.transition(ticks)
          //.attr('y', function(d,i) {  return y(Math.max(0, getY(d,i))) })
          //.attr('height', function(d,i) { return Math.abs(y(getY(d,i)) - y(0)) });
          //.order();  // not sure if this makes any sense for this model

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = _;
    return chart;
  };

  chart.open = function(_) {
    if (!arguments.length) return getOpen;
    getOpen = _;
    return chart;
  };

  chart.close = function(_) {
    if (!arguments.length) return getClose;
    getClose = _;
    return chart;
  };

  chart.high = function(_) {
    if (!arguments.length) return getHigh;
    getHigh = _;
    return chart;
  };

  chart.low = function(_) {
    if (!arguments.length) return getLow;
    getLow = _;
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.xScale = function(_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };

  chart.yScale = function(_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };

  chart.xDomain = function(_) {
    if (!arguments.length) return xDomain;
    xDomain = _;
    return chart;
  };

  chart.yDomain = function(_) {
    if (!arguments.length) return yDomain;
    yDomain = _;
    return chart;
  };

  chart.forceX = function(_) {
    if (!arguments.length) return forceX;
    forceX = _;
    return chart;
  };

  chart.forceY = function(_) {
    if (!arguments.length) return forceY;
    forceY = _;
    return chart;
  };

  chart.padData = function(_) {
    if (!arguments.length) return padData;
    padData = _;
    return chart;
  };

  chart.clipEdge = function(_) {
    if (!arguments.length) return clipEdge;
    clipEdge = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.pie = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 500
    , height = 500
    , getValues = function(d) { return d.values }
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , color = nv.utils.defaultColor()
    , valueFormat = d3.format(',.2f')
    , showLabels = true
    , donutLabelsOutside = false
    , labelThreshold = .02 //if slice percentage is under this, don't show label
    , donut = false
    , labelSunbeamLayout = false
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout')
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          radius = Math.min(availableWidth, availableHeight) / 2,
          arcRadius = radius-(radius / 5),
          container = d3.select(this);


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      //var wrap = container.selectAll('.nv-wrap.nv-pie').data([data]);
      var wrap = container.selectAll('.nv-wrap.nv-pie').data([getValues(data[0])]);
      var wrapEnter = wrap.enter().append('g').attr('class','nvd3 nv-wrap nv-pie nv-chart-' + id);
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-pie');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
      g.select('.nv-pie').attr('transform', 'translate(' + availableWidth / 2 + ',' + availableHeight / 2 + ')');

      //------------------------------------------------------------


      container
          .on('click', function(d,i) {
              dispatch.chartClick({
                  data: d,
                  index: i,
                  pos: d3.event,
                  id: id
              });
          });


      var arc = d3.svg.arc()
                  .outerRadius(arcRadius);

      if (donut) arc.innerRadius(radius / 2);


      // Setup the Pie chart and choose the data element
      var pie = d3.layout.pie()
          .sort(null)
          .value(function(d) { return d.disabled ? 0 : getY(d) });

      var slices = wrap.select('.nv-pie').selectAll('.nv-slice')
          .data(pie);

      slices.exit().remove();

      var ae = slices.enter().append('g')
              .attr('class', 'nv-slice')
              .on('mouseover', function(d,i){
                d3.select(this).classed('hover', true);
                dispatch.elementMouseover({
                    label: getX(d.data),
                    value: getY(d.data),
                    point: d.data,
                    pointIndex: i,
                    pos: [d3.event.pageX, d3.event.pageY],
                    id: id
                });
              })
              .on('mouseout', function(d,i){
                d3.select(this).classed('hover', false);
                dispatch.elementMouseout({
                    label: getX(d.data),
                    value: getY(d.data),
                    point: d.data,
                    index: i,
                    id: id
                });
              })
              .on('click', function(d,i) {
                dispatch.elementClick({
                    label: getX(d.data),
                    value: getY(d.data),
                    point: d.data,
                    index: i,
                    pos: d3.event,
                    id: id
                });
                d3.event.stopPropagation();
              })
              .on('dblclick', function(d,i) {
                dispatch.elementDblClick({
                    label: getX(d.data),
                    value: getY(d.data),
                    point: d.data,
                    index: i,
                    pos: d3.event,
                    id: id
                });
                d3.event.stopPropagation();
              });

        slices
            .attr('fill', function(d,i) { return color(d, i); })
            .attr('stroke', function(d,i) { return color(d, i); });

        var paths = ae.append('path')
            .each(function(d) { this._current = d; });
            //.attr('d', arc);

        d3.transition(slices.select('path'))
            .attr('d', arc)
            .attrTween('d', arcTween);

        if (showLabels) {
          // This does the normal label
          var labelsArc = arc;
          if (donutLabelsOutside) {
            labelsArc = d3.svg.arc().outerRadius(arc.outerRadius())
          }

          ae.append("g").classed("nv-label", true)
            .each(function(d, i) {
              var group = d3.select(this);

              group
                .attr('transform', function(d) {
                     if (labelSunbeamLayout) {
                       d.outerRadius = arcRadius + 10; // Set Outer Coordinate
                       d.innerRadius = arcRadius + 15; // Set Inner Coordinate
                       var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
                       if ((d.startAngle+d.endAngle)/2 < Math.PI) {
                          rotateAngle -= 90;
                       } else {
                       	 rotateAngle += 90;
                       }
                       return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
                     } else {
                       d.outerRadius = radius + 10; // Set Outer Coordinate
                       d.innerRadius = radius + 15; // Set Inner Coordinate
                       return 'translate(' + labelsArc.centroid(d) + ')'
                     }
                });

              group.append('rect')
                  .style('stroke', '#fff')
                  .style('fill', '#fff')
                  .attr("rx", 3)
                  .attr("ry", 3);

              group.append('text')
                  .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
                  .style('fill', '#000')


          });

          slices.select(".nv-label").transition()
            .attr('transform', function(d) {
            	if (labelSunbeamLayout) {
                  d.outerRadius = arcRadius + 10; // Set Outer Coordinate
                  d.innerRadius = arcRadius + 15; // Set Inner Coordinate
                  var rotateAngle = (d.startAngle + d.endAngle) / 2 * (180 / Math.PI);
                  if ((d.startAngle+d.endAngle)/2 < Math.PI) {
                    rotateAngle -= 90;
                  } else {
                    rotateAngle += 90;
                  }
                  return 'translate(' + labelsArc.centroid(d) + ') rotate(' + rotateAngle + ')';
                } else {
                  d.outerRadius = radius + 10; // Set Outer Coordinate
                  d.innerRadius = radius + 15; // Set Inner Coordinate
                  return 'translate(' + labelsArc.centroid(d) + ')'
                }
            });

          slices.each(function(d, i) {
            var slice = d3.select(this);

            slice
              .select(".nv-label text")
                .style('text-anchor', labelSunbeamLayout ? ((d.startAngle + d.endAngle) / 2 < Math.PI ? 'start' : 'end') : 'middle') //center the text on it's origin or begin/end if orthogonal aligned
                .text(function(d, i) {
                  var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
                  return (d.value && percent > labelThreshold) ? getX(d.data) : '';
                });

            var textBox = slice.select('text').node().getBBox();
            slice.select(".nv-label rect")
              .attr("width", textBox.width + 10)
              .attr("height", textBox.height + 10)
              .attr("transform", function() {
                return "translate(" + [textBox.x - 5, textBox.y - 5] + ")";
              });
          });
        }


        // Computes the angle of an arc, converting from radians to degrees.
        function angle(d) {
          var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
          return a > 90 ? a - 180 : a;
        }

        function arcTween(a) {
          if (!donut) a.innerRadius = 0;
          var i = d3.interpolate(this._current, a);
          this._current = i(0);
          return function(t) {
            return arc(i(t));
          };
        }

        function tweenPie(b) {
          b.innerRadius = 0;
          var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
          return function(t) {
              return arc(i(t));
          };
        }

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.values = function(_) {
    if (!arguments.length) return getValues;
    getValues = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = _;
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = d3.functor(_);
    return chart;
  };

  chart.showLabels = function(_) {
    if (!arguments.length) return showLabels;
    showLabels = _;
    return chart;
  };
  
  chart.labelSunbeamLayout = function(_) {
    if (!arguments.length) return labelSunbeamLayout;
    labelSunbeamLayout = _;
    return chart;
  };

  chart.donutLabelsOutside = function(_) {
    if (!arguments.length) return donutLabelsOutside;
    donutLabelsOutside = _;
    return chart;
  };

  chart.donut = function(_) {
    if (!arguments.length) return donut;
    donut = _;
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.valueFormat = function(_) {
    if (!arguments.length) return valueFormat;
    valueFormat = _;
    return chart;
  };

  chart.labelThreshold = function(_) {
    if (!arguments.length) return labelThreshold;
    labelThreshold = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.pieChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var pie = nv.models.pie()
    , legend = nv.models.legend()
    ;

  var margin = {top: 30, right: 20, bottom: 20, left: 20}
    , width = null
    , height = null
    , showLegend = true
    , color = nv.utils.defaultColor()
    , tooltips = true
    , tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , state = {}
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( (offsetElement && offsetElement.offsetLeft) || 0 ),
        top = e.pos[1] + ( (offsetElement && offsetElement.offsetTop) || 0),
        y = pie.valueFormat()(pie.y()(e.point)),
        content = tooltip(pie.x()(e.point), y, e, chart);

    nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      chart.update = function() { chart(selection); };
      chart.container = this;

      //set state.disabled
      state.disabled = data[0].map(function(d) { return !!d.disabled });

      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-pieChart').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-pieChart').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-pieWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend
          .width( availableWidth )
          .key(pie.x());

        wrap.select('.nv-legendWrap')
            .datum(pie.values()(data[0]))
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        wrap.select('.nv-legendWrap')
            .attr('transform', 'translate(0,' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)

      pie
        .width(availableWidth)
        .height(availableHeight);


      var pieWrap = g.select('.nv-pieWrap')
          .datum(data);

      d3.transition(pieWrap).call(pie);

      //------------------------------------------------------------


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      legend.dispatch.on('legendClick', function(d,i, that) {
        d.disabled = !d.disabled;

        if (!pie.values()(data[0]).filter(function(d) { return !d.disabled }).length) {
          pie.values()(data[0]).map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data[0].map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        selection.transition().call(chart)
      });

      pie.dispatch.on('elementMouseout.tooltip', function(e) {
        dispatch.tooltipHide(e);
      });

      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data[0].forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        selection.call(chart);
      });

      //============================================================


    });

    return chart;
  }

  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  pie.dispatch.on('elementMouseover.tooltip', function(e) {
    e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
    dispatch.tooltipShow(e);
  });

  dispatch.on('tooltipShow', function(e) {
    if (tooltips) showTooltip(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.legend = legend;
  chart.dispatch = dispatch;
  chart.pie = pie;

  d3.rebind(chart, pie, 'valueFormat', 'values', 'x', 'y', 'id', 'showLabels', 'donutLabelsOutside', 'donut', 'labelThreshold');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    pie.color(color);
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.scatter = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin       = {top: 0, right: 0, bottom: 0, left: 0}
    , width        = 960
    , height       = 500
    , color        = nv.utils.defaultColor() // chooses color
    , id           = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't select one
    , x            = d3.scale.linear()
    , y            = d3.scale.linear()
    , z            = d3.scale.linear() //linear because d3.svg.shape.size is treated as area
    , getX         = function(d) { return d.x } // accessor to get the x value
    , getY         = function(d) { return d.y } // accessor to get the y value
    , getSize      = function(d) { return d.size || 1} // accessor to get the point size
    , getShape     = function(d) { return d.shape || 'circle' } // accessor to get point shape
    , onlyCircles  = true // Set to false to use shapes
    , forceX       = [] // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
    , forceY       = [] // List of numbers to Force into the Y scale
    , forceSize    = [] // List of numbers to Force into the Size scale
    , interactive  = true // If true, plots a voronoi overlay for advanced point intersection
    , pointActive  = function(d) { return !d.notActive } // any points that return false will be filtered out
    , padData      = false // If true, adds half a data points width to front and back, for lining up a line chart with a bar chart
    , padDataOuter = .1 //outerPadding to imitate ordinal scale outer padding
    , clipEdge     = false // if true, masks points within x and y scale
    , clipVoronoi  = true // if true, masks each point with a circle... can turn off to slightly increase performance
    , clipRadius   = function() { return 25 } // function to get the radius for voronoi point clips
    , xDomain      = null // Override x domain (skips the calculation from data)
    , yDomain      = null // Override y domain
    , sizeDomain   = null // Override point size domain
    , sizeRange    = null
    , singlePoint  = false
    , dispatch     = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout')
    , useVoronoi   = true
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var x0, y0, z0 // used to store previous scales
    , timeoutID
    , needsUpdate = false // Flag for when the points are visually updating, but the interactive layer is behind, to disable tooltips
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);

      //add series index to each data point for reference
      data = data.map(function(series, i) {
        series.values = series.values.map(function(point) {
          point.series = i;
          return point;
        });
        return series;
      });

      //------------------------------------------------------------
      // Setup Scales

      // remap and flatten the data for use in calculating the scales' domains
      var seriesData = (xDomain && yDomain && sizeDomain) ? [] : // if we know xDomain and yDomain and sizeDomain, no need to calculate.... if Size is constant remember to set sizeDomain to speed up performance
            d3.merge(
              data.map(function(d) {
                return d.values.map(function(d,i) {
                  return { x: getX(d,i), y: getY(d,i), size: getSize(d,i) }
                })
              })
            );

      x   .domain(xDomain || d3.extent(seriesData.map(function(d) { return d.x }).concat(forceX)))

      if (padData && data[0])
        x.range([(availableWidth * padDataOuter +  availableWidth) / (2 *data[0].values.length), availableWidth - availableWidth * (1 + padDataOuter) / (2 * data[0].values.length)  ]);
        //x.range([availableWidth * .5 / data[0].values.length, availableWidth * (data[0].values.length - .5)  / data[0].values.length ]);
      else
        x.range([0, availableWidth]);

      y   .domain(yDomain || d3.extent(seriesData.map(function(d) { return d.y }).concat(forceY)))
          .range([availableHeight, 0]);

      z   .domain(sizeDomain || d3.extent(seriesData.map(function(d) { return d.size }).concat(forceSize)))
          .range(sizeRange || [16, 256]);

      // If scale's domain don't have a range, slightly adjust to make one... so a chart can show a single data point
      if (x.domain()[0] === x.domain()[1] || y.domain()[0] === y.domain()[1]) singlePoint = true;
      if (x.domain()[0] === x.domain()[1])
        x.domain()[0] ?
            x.domain([x.domain()[0] - x.domain()[0] * 0.01, x.domain()[1] + x.domain()[1] * 0.01])
          : x.domain([-1,1]);

      if (y.domain()[0] === y.domain()[1])
        y.domain()[0] ?
            y.domain([y.domain()[0] + y.domain()[0] * 0.01, y.domain()[1] - y.domain()[1] * 0.01])
          : y.domain([-1,1]);


      x0 = x0 || x;
      y0 = y0 || y;
      z0 = z0 || z;

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-scatter').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatter nv-chart-' + id + (singlePoint ? ' nv-single-point' : ''));
      var defsEnter = wrapEnter.append('defs');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-groups');
      gEnter.append('g').attr('class', 'nv-point-paths');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      defsEnter.append('clipPath')
          .attr('id', 'nv-edge-clip-' + id)
        .append('rect');

      wrap.select('#nv-edge-clip-' + id + ' rect')
          .attr('width', availableWidth)
          .attr('height', availableHeight);

      g   .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');


      function updateInteractiveLayer() {

        if (!interactive) return false;

        var eventElements;

        var vertices = d3.merge(data.map(function(group, groupIndex) {
            return group.values
              .map(function(point, pointIndex) {
                // *Adding noise to make duplicates very unlikely
                // **Injecting series and point index for reference
                return [x(getX(point,pointIndex)) * (Math.random() / 1e12 + 1)  , y(getY(point,pointIndex)) * (Math.random() / 1e12 + 1), groupIndex, pointIndex, point]; //temp hack to add noise untill I think of a better way so there are no duplicates
              })
              .filter(function(pointArray, pointIndex) {
                return pointActive(pointArray[4], pointIndex); // Issue #237.. move filter to after map, so pointIndex is correct!
              })
          })
        );



        //inject series and point index for reference into voronoi
        if (useVoronoi === true) {

          if (clipVoronoi) {
            var pointClipsEnter = wrap.select('defs').selectAll('.nv-point-clips')
                .data([id])
              .enter();

            pointClipsEnter.append('clipPath')
                  .attr('class', 'nv-point-clips')
                  .attr('id', 'nv-points-clip-' + id);

            var pointClips = wrap.select('#nv-points-clip-' + id).selectAll('circle')
                .data(vertices);
            pointClips.enter().append('circle')
                .attr('r', clipRadius);
            pointClips.exit().remove();
            pointClips
                .attr('cx', function(d) { return d[0] })
                .attr('cy', function(d) { return d[1] });

            wrap.select('.nv-point-paths')
                .attr('clip-path', 'url(#nv-points-clip-' + id + ')');
          }


          // if(vertices.length < 3) {
            // Issue #283 - Adding 2 dummy points to the voronoi b/c voronoi requires min 3 points to work
            vertices.push([x.range()[0] - 20, y.range()[0] - 20, null, null]);
            vertices.push([x.range()[1] + 20, y.range()[1] + 20, null, null]);
            vertices.push([x.range()[0] - 20, y.range()[0] + 20, null, null]);
            vertices.push([x.range()[1] + 20, y.range()[1] - 20, null, null]);
          // }

          var bounds = d3.geom.polygon([
              [-10,-10],
              [-10,height + 10],
              [width + 10,height + 10],
              [width + 10,-10]
          ]);

          var voronoi = d3.geom.voronoi(vertices).map(function(d, i) {
              return {
                'data': bounds.clip(d),
                'series': vertices[i][2],
                'point': vertices[i][3]
              }
            });



          var pointPaths = wrap.select('.nv-point-paths').selectAll('path')
              .data(voronoi);
          pointPaths.enter().append('path')
              .attr('class', function(d,i) { return 'nv-path-'+i; });
          pointPaths.exit().remove();
          pointPaths
              .attr('d', function(d) { return 'M' + d.data.join('L') + 'Z'; });

          pointPaths
              .on('click', function(d) {
                if (needsUpdate) return 0;
                var series = data[d.series],
                    point  = series.values[d.point];

                dispatch.elementClick({
                  point: point,
                  series: series,
                  pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
                  seriesIndex: d.series,
                  pointIndex: d.point
                });
              })
              .on('mouseover', function(d) {
                if (needsUpdate) return 0;
                var series = data[d.series],
                    point  = series.values[d.point];

                dispatch.elementMouseover({
                  point: point,
                  series: series,
                  pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
                  seriesIndex: d.series,
                  pointIndex: d.point
                });
              })
              .on('mouseout', function(d, i) {
                if (needsUpdate) return 0;
                var series = data[d.series],
                    point  = series.values[d.point];

                dispatch.elementMouseout({
                  point: point,
                  series: series,
                  seriesIndex: d.series,
                  pointIndex: d.point
                });
              });


        } else {
          /*
          // bring data in form needed for click handlers
          var dataWithPoints = vertices.map(function(d, i) {
              return {
                'data': d,
                'series': vertices[i][2],
                'point': vertices[i][3]
              }
            });
           */

          // add event handlers to points instead voronoi paths
          wrap.select('.nv-groups').selectAll('.nv-group')
            .selectAll('.nv-point')
              //.data(dataWithPoints)
              //.style('pointer-events', 'auto') // recativate events, disabled by css
              .on('click', function(d,i) { 
                //nv.log('test', d, i);
                if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
                var series = data[d.series],
                    point  = series.values[i];

                dispatch.elementClick({
                  point: point,
                  series: series,
                  pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
                  seriesIndex: d.series,
                  pointIndex: i
                });
              })
              .on('mouseover', function(d,i) {
                if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
                var series = data[d.series],
                    point  = series.values[i];

                dispatch.elementMouseover({
                  point: point,
                  series: series,
                  pos: [x(getX(point, i)) + margin.left, y(getY(point, i)) + margin.top],
                  seriesIndex: d.series,
                  pointIndex: i
                });
              })
              .on('mouseout', function(d,i) {
                if (needsUpdate || !data[d.series]) return 0; //check if this is a dummy point
                var series = data[d.series],
                    point  = series.values[i];

                dispatch.elementMouseout({
                  point: point,
                  series: series,
                  seriesIndex: d.series,
                  pointIndex: i
                });
              });
          }

          needsUpdate = false;
      }

      needsUpdate = true;

      var groups = wrap.select('.nv-groups').selectAll('.nv-group')
          .data(function(d) { return d }, function(d) { return d.key });
      groups.enter().append('g')
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6);
      d3.transition(groups.exit())
          .style('stroke-opacity', 1e-6)
          .style('fill-opacity', 1e-6)
          .remove();
      groups
          .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
          .classed('hover', function(d) { return d.hover });
      d3.transition(groups)
          .style('fill', function(d,i) { return color(d, i) })
          .style('stroke', function(d,i) { return color(d, i) })
          .style('stroke-opacity', 1)
          .style('fill-opacity', .5);


      if (onlyCircles) {

        var points = groups.selectAll('circle.nv-point')
            .data(function(d) { return d.values });
        points.enter().append('circle')
            .attr('cx', function(d,i) { return x0(getX(d,i)) })
            .attr('cy', function(d,i) { return y0(getY(d,i)) })
            .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
        points.exit().remove();
        d3.transition(groups.exit().selectAll('path.nv-point'))
            .attr('cx', function(d,i) { return x(getX(d,i)) })
            .attr('cy', function(d,i) { return y(getY(d,i)) })
            .remove();
        points.attr('class', function(d,i) { return 'nv-point nv-point-' + i });
        d3.transition(points)
            .attr('cx', function(d,i) { return x(getX(d,i)) })
            .attr('cy', function(d,i) { return y(getY(d,i)) })
            .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });

      } else {

        var points = groups.selectAll('path.nv-point')
            .data(function(d) { return d.values });
        points.enter().append('path')
            .attr('transform', function(d,i) {
              return 'translate(' + x0(getX(d,i)) + ',' + y0(getY(d,i)) + ')'
            })
            .attr('d',
              d3.svg.symbol()
                .type(getShape)
                .size(function(d,i) { return z(getSize(d,i)) })
            );
        points.exit().remove();
        d3.transition(groups.exit().selectAll('path.nv-point'))
            .attr('transform', function(d,i) {
              return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
            })
            .remove();
        points.attr('class', function(d,i) { return 'nv-point nv-point-' + i });
        d3.transition(points)
            .attr('transform', function(d,i) {
              //nv.log(d,i,getX(d,i), x(getX(d,i)));
              return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
            })
            .attr('d',
              d3.svg.symbol()
                .type(getShape)
                .size(function(d,i) { return z(getSize(d,i)) })
            );
      }


      // Delay updating the invisible interactive layer for smoother animation
      clearTimeout(timeoutID); // stop repeat calls to updateInteractiveLayer
      timeoutID = setTimeout(updateInteractiveLayer, 300);
      //updateInteractiveLayer();

      //store old scales for use in transitions on update
      x0 = x.copy();
      y0 = y.copy();
      z0 = z.copy();

    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  dispatch.on('elementMouseover.point', function(d) {
    if (interactive)
      d3.select('.nv-chart-' + id + ' .nv-series-' + d.seriesIndex + ' .nv-point-' + d.pointIndex)
          .classed('hover', true);
  });

  dispatch.on('elementMouseout.point', function(d) {
    if (interactive)
      d3.select('.nv-chart-' + id + ' .nv-series-' + d.seriesIndex + ' .nv-point-' + d.pointIndex)
          .classed('hover', false);
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.dispatch = dispatch;

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = d3.functor(_);
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = d3.functor(_);
    return chart;
  };

  chart.size = function(_) {
    if (!arguments.length) return getSize;
    getSize = d3.functor(_);
    return chart;
  };

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.xScale = function(_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };

  chart.yScale = function(_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };

  chart.zScale = function(_) {
    if (!arguments.length) return z;
    z = _;
    return chart;
  };

  chart.xDomain = function(_) {
    if (!arguments.length) return xDomain;
    xDomain = _;
    return chart;
  };

  chart.yDomain = function(_) {
    if (!arguments.length) return yDomain;
    yDomain = _;
    return chart;
  };

  chart.sizeDomain = function(_) {
    if (!arguments.length) return sizeDomain;
    sizeDomain = _;
    return chart;
  };

  chart.sizeRange = function(_) {
    if (!arguments.length) return sizeRange;
    sizeRange = _;
    return chart;
  };

  chart.forceX = function(_) {
    if (!arguments.length) return forceX;
    forceX = _;
    return chart;
  };

  chart.forceY = function(_) {
    if (!arguments.length) return forceY;
    forceY = _;
    return chart;
  };

  chart.forceSize = function(_) {
    if (!arguments.length) return forceSize;
    forceSize = _;
    return chart;
  };

  chart.interactive = function(_) {
    if (!arguments.length) return interactive;
    interactive = _;
    return chart;
  };

  chart.pointActive = function(_) {
    if (!arguments.length) return pointActive;
    pointActive = _;
    return chart;
  };

  chart.padData = function(_) {
    if (!arguments.length) return padData;
    padData = _;
    return chart;
  };

  chart.padDataOuter = function(_) {
    if (!arguments.length) return padDataOuter;
    padDataOuter = _;
    return chart;
  };

  chart.clipEdge = function(_) {
    if (!arguments.length) return clipEdge;
    clipEdge = _;
    return chart;
  };

  chart.clipVoronoi= function(_) {
    if (!arguments.length) return clipVoronoi;
    clipVoronoi = _;
    return chart;
  };

  chart.useVoronoi= function(_) {
    if (!arguments.length) return useVoronoi;
    useVoronoi = _;
    if (useVoronoi === false) {
        clipVoronoi = false;
    }
    return chart;
  };

  chart.clipRadius = function(_) {
    if (!arguments.length) return clipRadius;
    clipRadius = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.shape = function(_) {
    if (!arguments.length) return getShape;
    getShape = _;
    return chart;
  };

  chart.onlyCircles = function(_) {
    if (!arguments.length) return onlyCircles;
    onlyCircles = _;
    return chart;
  };

  chart.id = function(_) {
    if (!arguments.length) return id;
    id = _;
    return chart;
  };

  chart.singlePoint = function(_) {
    if (!arguments.length) return singlePoint;
    singlePoint = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.scatterChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var scatter      = nv.models.scatter()
    , xAxis        = nv.models.axis()
    , yAxis        = nv.models.axis()
    , legend       = nv.models.legend()
    , controls     = nv.models.legend()
    , distX        = nv.models.distribution()
    , distY        = nv.models.distribution()
    ;

  var margin       = {top: 30, right: 20, bottom: 50, left: 75}
    , width        = null
    , height       = null
    , color        = nv.utils.defaultColor()
    , x            = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale()
    , y            = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale()
    , xPadding     = 0
    , yPadding     = 0
    , showDistX    = false
    , showDistY    = false
    , showLegend   = true
    , showControls = !!d3.fisheye
    , fisheye      = 0
    , pauseFisheye = false
    , tooltips     = true
    , tooltipX     = function(key, x, y) { return '<strong>' + x + '</strong>' }
    , tooltipY     = function(key, x, y) { return '<strong>' + y + '</strong>' }
    //, tooltip      = function(key, x, y) { return '<h3>' + key + '</h3>' }
    , tooltip      = null
    , dispatch     = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    , noData       = "No Data Available."
    ;

  scatter
    .xScale(x)
    .yScale(y)
    ;
  xAxis
    .orient('bottom')
    .tickPadding(10)
    ;
  yAxis
    .orient('left')
    .tickPadding(10)
    ;
  distX
    .axis('x')
    ;
  distY
    .axis('y')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var state = {},
      x0, y0;

  var showTooltip = function(e, offsetElement) {
    //TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)

    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0),
        leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ),
        topY = e.pos[1] + ( offsetElement.offsetTop || 0),
        xVal = xAxis.tickFormat()(scatter.x()(e.point, e.pointIndex)),
        yVal = yAxis.tickFormat()(scatter.y()(e.point, e.pointIndex));

      if( tooltipX != null )
          nv.tooltip.show([leftX, topX], tooltipX(e.series.key, xVal, yVal, e, chart), 'n', 1, offsetElement, 'x-nvtooltip');
      if( tooltipY != null )
          nv.tooltip.show([leftY, topY], tooltipY(e.series.key, xVal, yVal, e, chart), 'e', 1, offsetElement, 'y-nvtooltip');
      if( tooltip != null )
          nv.tooltip.show([left, top], tooltip(e.series.key, xVal, yVal, e, chart), e.value < 0 ? 'n' : 's', null, offsetElement);
  };

  var controlsData = [
    { key: 'Magnify', disabled: true }
  ];

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      chart.update = function() { chart(selection) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });


      //------------------------------------------------------------
      // Display noData message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x0 = x0 || x;
      y0 = y0 || y;

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id());
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g')

      // background for pointer events
      gEnter.append('rect').attr('class', 'nvd3 nv-background')

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-scatterWrap');
      gEnter.append('g').attr('class', 'nv-distWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');
      gEnter.append('g').attr('class', 'nv-controlsWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width( availableWidth / 2 );

        wrap.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        wrap.select('.nv-legendWrap')
            .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Controls

      if (showControls) {
        controls.width(180).color(['#444']);
        g.select('.nv-controlsWrap')
            .datum(controlsData)
            .attr('transform', 'translate(0,' + (-margin.top) +')')
            .call(controls);
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)

      scatter
          .width(availableWidth)
          .height(availableHeight)
          .color(data.map(function(d,i) {
            return d.color || color(d, i);
          }).filter(function(d,i) { return !data[i].disabled }))

      wrap.select('.nv-scatterWrap')
          .datum(data.filter(function(d) { return !d.disabled }))
          .call(scatter);


      //Adjust for x and y padding
      if (xPadding) {
        var xRange = x.domain()[1] - x.domain()[0];
        x.domain([x.domain()[0] - (xPadding * xRange), x.domain()[1] + (xPadding * xRange)]);
      }

      if (yPadding) {
        var yRange = y.domain()[1] - y.domain()[0];
        y.domain([y.domain()[0] - (yPadding * yRange), y.domain()[1] + (yPadding * yRange)]);
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
          .scale(x)
          .ticks( xAxis.ticks() && xAxis.ticks().length ? xAxis.ticks() : availableWidth / 100 )
          .tickSize( -availableHeight , 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y.range()[0] + ')')
          .call(xAxis);


      yAxis
          .scale(y)
          .ticks( yAxis.ticks() && yAxis.ticks().length ? yAxis.ticks() : availableHeight / 36 )
          .tickSize( -availableWidth, 0);

      g.select('.nv-y.nv-axis')
          .call(yAxis);


      if (showDistX) {
        distX
            .getData(scatter.x())
            .scale(x)
            .width(availableWidth)
            .color(data.map(function(d,i) {
              return d.color || color(d, i);
            }).filter(function(d,i) { return !data[i].disabled }));
        gEnter.select('.nv-distWrap').append('g')
            .attr('class', 'nv-distributionX');
        g.select('.nv-distributionX')
            .attr('transform', 'translate(0,' + y.range()[0] + ')')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distX);
      }

      if (showDistY) {
        distY
            .getData(scatter.y())
            .scale(y)
            .width(availableHeight)
            .color(data.map(function(d,i) {
              return d.color || color(d, i);
            }).filter(function(d,i) { return !data[i].disabled }));
        gEnter.select('.nv-distWrap').append('g')
            .attr('class', 'nv-distributionY');
        g.select('.nv-distributionY')
            .attr('transform', 'translate(-' + distY.size() + ',0)')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distY);
      }

      //------------------------------------------------------------




      if (d3.fisheye) {
        g.select('.nv-background')
            .attr('width', availableWidth)
            .attr('height', availableHeight);

        g.select('.nv-background').on('mousemove', updateFisheye);
        g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;});
        scatter.dispatch.on('elementClick.freezeFisheye', function() {
          pauseFisheye = !pauseFisheye;
        });
      }


      function updateFisheye() {
        if (pauseFisheye) {
          g.select('.nv-point-paths').style('pointer-events', 'all');
          return false;
        }

        g.select('.nv-point-paths').style('pointer-events', 'none' );

        var mouse = d3.mouse(this);
        x.distortion(fisheye).focus(mouse[0]);
        y.distortion(fisheye).focus(mouse[1]);

        g.select('.nv-scatterWrap')
            .call(scatter);

        g.select('.nv-x.nv-axis').call(xAxis);
        g.select('.nv-y.nv-axis').call(yAxis);
        g.select('.nv-distributionX')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distX);
        g.select('.nv-distributionY')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distY);
      }



      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      controls.dispatch.on('legendClick', function(d,i) {
        d.disabled = !d.disabled;

        fisheye = d.disabled ? 0 : 2.5;
        g.select('.nv-background') .style('pointer-events', d.disabled ? 'none' : 'all');
        g.select('.nv-point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );

        if (d.disabled) {
          x.distortion(fisheye).focus(0);
          y.distortion(fisheye).focus(0);

          g.select('.nv-scatterWrap').call(scatter);
          g.select('.nv-x.nv-axis').call(xAxis);
          g.select('.nv-y.nv-axis').call(yAxis);
        } else {
          pauseFisheye = false;
        }

        chart(selection);
      });

      legend.dispatch.on('legendClick', function(d,i, that) {
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        chart(selection);
      });

      /*
      legend.dispatch.on('legendMouseover', function(d, i) {
        d.hover = true;
        chart(selection);
      });

      legend.dispatch.on('legendMouseout', function(d, i) {
        d.hover = false;
        chart(selection);
      });
      */

      scatter.dispatch.on('elementMouseover.tooltip', function(e) {
        d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex)
            .attr('y1', e.pos[1] - availableHeight);
        d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex)
            .attr('x2', e.pos[0] + distX.size());

        e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
        dispatch.tooltipShow(e);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });

      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        selection.call(chart);
      });

      //============================================================


      //store old scales for use in transitions on update
      x0 = x.copy();
      y0 = y.copy();


    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  scatter.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);

    d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex)
        .attr('y1', 0);
    d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex)
        .attr('x2', distY.size());
  });
  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.scatter = scatter;
  chart.legend = legend;
  chart.controls = controls;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;
  chart.distX = distX;
  chart.distY = distY;

  d3.rebind(chart, scatter, 'id', 'interactive', 'pointActive', 'x', 'y', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'sizeRange', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'useVoronoi');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    distX.color(color);
    distY.color(color);
    return chart;
  };

  chart.showDistX = function(_) {
    if (!arguments.length) return showDistX;
    showDistX = _;
    return chart;
  };

  chart.showDistY = function(_) {
    if (!arguments.length) return showDistY;
    showDistY = _;
    return chart;
  };

  chart.showControls = function(_) {
    if (!arguments.length) return showControls;
    showControls = _;
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.fisheye = function(_) {
    if (!arguments.length) return fisheye;
    fisheye = _;
    return chart;
  };

  chart.xPadding = function(_) {
    if (!arguments.length) return xPadding;
    xPadding = _;
    return chart;
  };

  chart.yPadding = function(_) {
    if (!arguments.length) return yPadding;
    yPadding = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.tooltipXContent = function(_) {
    if (!arguments.length) return tooltipX;
    tooltipX = _;
    return chart;
  };

  chart.tooltipYContent = function(_) {
    if (!arguments.length) return tooltipY;
    tooltipY = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.scatterPlusLineChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var scatter      = nv.models.scatter()
    , xAxis        = nv.models.axis()
    , yAxis        = nv.models.axis()
    , legend       = nv.models.legend()
    , controls     = nv.models.legend()
    , distX        = nv.models.distribution()
    , distY        = nv.models.distribution()
    ;

  var margin       = {top: 30, right: 20, bottom: 50, left: 75}
    , width        = null
    , height       = null
    , color        = nv.utils.defaultColor()
    , x            = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.xScale()
    , y            = d3.fisheye ? d3.fisheye.scale(d3.scale.linear).distortion(0) : scatter.yScale()
    , showDistX    = false
    , showDistY    = false
    , showLegend   = true
    , showControls = !!d3.fisheye
    , fisheye      = 0
    , pauseFisheye = false
    , tooltips     = true
    , tooltipX     = function(key, x, y) { return '<strong>' + x + '</strong>' }
    , tooltipY     = function(key, x, y) { return '<strong>' + y + '</strong>' }
    , tooltip      = function(key, x, y, date) { return '<h3>' + key + '</h3>' 
                                                      + '<p>' + date + '</p>' }
    //, tooltip      = null
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    , noData       = "No Data Available."
    ;

  scatter
    .xScale(x)
    .yScale(y)
    ;
  xAxis
    .orient('bottom')
    .tickPadding(10)
    ;
  yAxis
    .orient('left')
    .tickPadding(10)
    ;
  distX
    .axis('x')
    ;
  distY
    .axis('y')
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var state = {},
      x0, y0;

  var showTooltip = function(e, offsetElement) {
    //TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)

    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0),
        leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ),
        topY = e.pos[1] + ( offsetElement.offsetTop || 0),
        xVal = xAxis.tickFormat()(scatter.x()(e.point, e.pointIndex)),
        yVal = yAxis.tickFormat()(scatter.y()(e.point, e.pointIndex));

      if( tooltipX != null )
          nv.tooltip.show([leftX, topX], tooltipX(e.series.key, xVal, yVal, e, chart), 'n', 1, offsetElement, 'x-nvtooltip');
      if( tooltipY != null )
          nv.tooltip.show([leftY, topY], tooltipY(e.series.key, xVal, yVal, e, chart), 'e', 1, offsetElement, 'y-nvtooltip');
      if( tooltip != null )
          nv.tooltip.show([left, top], tooltip(e.series.key, xVal, yVal, e.point.tooltip, e, chart), e.value < 0 ? 'n' : 's', null, offsetElement);
  };

  var controlsData = [
    { key: 'Magnify', disabled: true }
  ];

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      chart.update = function() { chart(selection) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });


      //------------------------------------------------------------
      // Display noData message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = scatter.xScale();
      y = scatter.yScale();

      x0 = x0 || x;
      y0 = y0 || y;

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-scatterChart').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-scatterChart nv-chart-' + scatter.id());
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g')

      // background for pointer events
      gEnter.append('rect').attr('class', 'nvd3 nv-background')

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-scatterWrap');
      gEnter.append('g').attr('class', 'nv-regressionLinesWrap');
      gEnter.append('g').attr('class', 'nv-distWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');
      gEnter.append('g').attr('class', 'nv-controlsWrap');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend.width( availableWidth / 2 );

        wrap.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        wrap.select('.nv-legendWrap')
            .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Controls

      if (showControls) {
        controls.width(180).color(['#444']);
        g.select('.nv-controlsWrap')
            .datum(controlsData)
            .attr('transform', 'translate(0,' + (-margin.top) +')')
            .call(controls);
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Main Chart Component(s)

      scatter
          .width(availableWidth)
          .height(availableHeight)
          .color(data.map(function(d,i) {
            return d.color || color(d, i);
          }).filter(function(d,i) { return !data[i].disabled }))

      wrap.select('.nv-scatterWrap')
          .datum(data.filter(function(d) { return !d.disabled }))
          .call(scatter);


      wrap.select('.nv-regressionLinesWrap')
          .attr('clip-path', 'url(#nv-edge-clip-' + scatter.id() + ')');

      var regWrap = wrap.select('.nv-regressionLinesWrap').selectAll('.nv-regLines')
                      .data(function(d) { return d });

      var reglines = regWrap.enter()
                       .append('g').attr('class', 'nv-regLines')
                       .append('line').attr('class', 'nv-regLine')
                       .style('stroke-opacity', 0);

      //d3.transition(regWrap.selectAll('.nv-regLines line'))
      regWrap.selectAll('.nv-regLines line')
          .attr('x1', x.range()[0])
          .attr('x2', x.range()[1])
          .attr('y1', function(d,i) { return y(x.domain()[0] * d.slope + d.intercept) })
          .attr('y2', function(d,i) { return y(x.domain()[1] * d.slope + d.intercept) })
          .style('stroke', function(d,i,j) { return color(d,j) })
          .style('stroke-opacity', function(d,i) {
            return (d.disabled || typeof d.slope === 'undefined' || typeof d.intercept === 'undefined') ? 0 : 1 
          });


      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
          .scale(x)
          .ticks( xAxis.ticks() ? xAxis.ticks() : availableWidth / 100 )
          .tickSize( -availableHeight , 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + y.range()[0] + ')')
          .call(xAxis);


      yAxis
          .scale(y)
          .ticks( yAxis.ticks() ? yAxis.ticks() : availableHeight / 36 )
          .tickSize( -availableWidth, 0);

      g.select('.nv-y.nv-axis')
          .call(yAxis);


      if (showDistX) {
        distX
            .getData(scatter.x())
            .scale(x)
            .width(availableWidth)
            .color(data.map(function(d,i) {
              return d.color || color(d, i);
            }).filter(function(d,i) { return !data[i].disabled }));
        gEnter.select('.nv-distWrap').append('g')
            .attr('class', 'nv-distributionX');
        g.select('.nv-distributionX')
            .attr('transform', 'translate(0,' + y.range()[0] + ')')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distX);
      }

      if (showDistY) {
        distY
            .getData(scatter.y())
            .scale(y)
            .width(availableHeight)
            .color(data.map(function(d,i) {
              return d.color || color(d, i);
            }).filter(function(d,i) { return !data[i].disabled }));
        gEnter.select('.nv-distWrap').append('g')
            .attr('class', 'nv-distributionY');
        g.select('.nv-distributionY')
            .attr('transform', 'translate(-' + distY.size() + ',0)')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distY);
      }

      //------------------------------------------------------------




      if (d3.fisheye) {
        g.select('.nv-background')
            .attr('width', availableWidth)
            .attr('height', availableHeight);

        g.select('.nv-background').on('mousemove', updateFisheye);
        g.select('.nv-background').on('click', function() { pauseFisheye = !pauseFisheye;});
        scatter.dispatch.on('elementClick.freezeFisheye', function() {
          pauseFisheye = !pauseFisheye;
        });
      }


      function updateFisheye() {
        if (pauseFisheye) {
          g.select('.nv-point-paths').style('pointer-events', 'all');
          return false;
        }

        g.select('.nv-point-paths').style('pointer-events', 'none' );

        var mouse = d3.mouse(this);
        x.distortion(fisheye).focus(mouse[0]);
        y.distortion(fisheye).focus(mouse[1]);

        g.select('.nv-scatterWrap')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(scatter);
        g.select('.nv-x.nv-axis').call(xAxis);
        g.select('.nv-y.nv-axis').call(yAxis);
        g.select('.nv-distributionX')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distX);
        g.select('.nv-distributionY')
            .datum(data.filter(function(d) { return !d.disabled }))
            .call(distY);
      }



      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      controls.dispatch.on('legendClick', function(d,i) {
        d.disabled = !d.disabled;

        fisheye = d.disabled ? 0 : 2.5;
        g.select('.nv-background') .style('pointer-events', d.disabled ? 'none' : 'all');
        g.select('.nv-point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );

        if (d.disabled) {
          x.distortion(fisheye).focus(0);
          y.distortion(fisheye).focus(0);

          g.select('.nv-scatterWrap').call(scatter);
          g.select('.nv-x.nv-axis').call(xAxis);
          g.select('.nv-y.nv-axis').call(yAxis);
        } else {
          pauseFisheye = false;
        }

        chart(selection);
      });

      legend.dispatch.on('legendClick', function(d,i, that) {
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            wrap.selectAll('.nv-series').classed('disabled', false);
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        chart(selection);
      });

      /*
      legend.dispatch.on('legendMouseover', function(d, i) {
        d.hover = true;
        chart(selection);
      });

      legend.dispatch.on('legendMouseout', function(d, i) {
        d.hover = false;
        chart(selection);
      });
      */

      scatter.dispatch.on('elementMouseover.tooltip', function(e) {
        d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex)
            .attr('y1', e.pos[1] - availableHeight);
        d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex)
            .attr('x2', e.pos[0] + distX.size());

        e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
        dispatch.tooltipShow(e);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });

      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        selection.call(chart);
      });

      //============================================================


      //store old scales for use in transitions on update
      x0 = x.copy();
      y0 = y.copy();


    });

    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  scatter.dispatch.on('elementMouseout.tooltip', function(e) {
    dispatch.tooltipHide(e);

    d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-distx-' + e.pointIndex)
        .attr('y1', 0);
    d3.select('.nv-chart-' + scatter.id() + ' .nv-series-' + e.seriesIndex + ' .nv-disty-' + e.pointIndex)
        .attr('x2', distY.size());
  });
  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.scatter = scatter;
  chart.legend = legend;
  chart.controls = controls;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;
  chart.distX = distX;
  chart.distY = distY;

  d3.rebind(chart, scatter, 'id', 'interactive', 'pointActive', 'x', 'y', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'sizeRange', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'useVoronoi');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    distX.color(color);
    distY.color(color);
    return chart;
  };

  chart.showDistX = function(_) {
    if (!arguments.length) return showDistX;
    showDistX = _;
    return chart;
  };

  chart.showDistY = function(_) {
    if (!arguments.length) return showDistY;
    showDistY = _;
    return chart;
  };

  chart.showControls = function(_) {
    if (!arguments.length) return showControls;
    showControls = _;
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.fisheye = function(_) {
    if (!arguments.length) return fisheye;
    fisheye = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.tooltipXContent = function(_) {
    if (!arguments.length) return tooltipX;
    tooltipX = _;
    return chart;
  };

  chart.tooltipYContent = function(_) {
    if (!arguments.length) return tooltipY;
    tooltipY = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.sparkline = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 2, right: 0, bottom: 2, left: 0}
    , width = 400
    , height = 32
    , animate = true
    , x = d3.scale.linear()
    , y = d3.scale.linear()
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , color = nv.utils.getColor(['#000'])
    , xDomain
    , yDomain
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);


      //------------------------------------------------------------
      // Setup Scales

      x   .domain(xDomain || d3.extent(data, getX ))
          .range([0, availableWidth]);

      y   .domain(yDomain || d3.extent(data, getY ))
          .range([availableHeight, 0]);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-sparkline').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparkline');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

      //------------------------------------------------------------


      var paths = wrap.selectAll('path')
          .data(function(d) { return [d] });
      paths.enter().append('path');
      paths.exit().remove();
      paths
          .style('stroke', function(d,i) { return d.color || color(d, i) })
          .attr('d', d3.svg.line()
            .x(function(d,i) { return x(getX(d,i)) })
            .y(function(d,i) { return y(getY(d,i)) })
          );


      // TODO: Add CURRENT data point (Need Min, Mac, Current / Most recent)
      var points = wrap.selectAll('circle.nv-point')
          .data(function(data) {
              var yValues = data.map(function(d, i) { return getY(d,i); });
              function pointIndex(index) {
                  if (index != -1) {
 	              var result = data[index];
                      result.pointIndex = index;
                      return result;
                  } else {
                      return null;
                  }
              }
              var maxPoint = pointIndex(yValues.lastIndexOf(y.domain()[1])),
                  minPoint = pointIndex(yValues.indexOf(y.domain()[0])),
                  currentPoint = pointIndex(yValues.length - 1);
              return [minPoint, maxPoint, currentPoint].filter(function (d) {return d != null;});
          });
      points.enter().append('circle');
      points.exit().remove();
      points
          .attr('cx', function(d,i) { return x(getX(d,d.pointIndex)) })
          .attr('cy', function(d,i) { return y(getY(d,d.pointIndex)) })
          .attr('r', 2)
          .attr('class', function(d,i) {
            return getX(d, d.pointIndex) == x.domain()[1] ? 'nv-point nv-currentValue' :
                   getY(d, d.pointIndex) == y.domain()[0] ? 'nv-point nv-minValue' : 'nv-point nv-maxValue'
          });
    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = d3.functor(_);
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = d3.functor(_);
    return chart;
  };

  chart.xScale = function(_) {
    if (!arguments.length) return x;
    x = _;
    return chart;
  };

  chart.yScale = function(_) {
    if (!arguments.length) return y;
    y = _;
    return chart;
  };

  chart.xDomain = function(_) {
    if (!arguments.length) return xDomain;
    xDomain = _;
    return chart;
  };

  chart.yDomain = function(_) {
    if (!arguments.length) return yDomain;
    yDomain = _;
    return chart;
  };

  chart.animate = function(_) {
    if (!arguments.length) return animate;
    animate = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.sparklinePlus = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var sparkline = nv.models.sparkline();

  var margin = {top: 15, right: 100, bottom: 10, left: 50}
    , width = null
    , height = null
    , x
    , y
    , index = []
    , paused = false
    , xTickFormat = d3.format(',r')
    , yTickFormat = d3.format(',.2f')
    , showValue = true
    , alignValue = true
    , rightAlignValue = false
    , noData = "No Data Available."
    ;

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this);

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      var currentValue = sparkline.y()(data[data.length-1], data.length-1);

      chart.update = function() { chart(selection) };
      chart.container = this;


      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------



      //------------------------------------------------------------
      // Setup Scales

      x = sparkline.xScale();
      y = sparkline.yScale();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-sparklineplus').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-sparklineplus');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-sparklineWrap');
      gEnter.append('g').attr('class', 'nv-valueWrap');
      gEnter.append('g').attr('class', 'nv-hoverArea');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Main Chart Component(s)

      var sparklineWrap = g.select('.nv-sparklineWrap');

      sparkline
        .width(availableWidth)
        .height(availableHeight);

      sparklineWrap
          .call(sparkline);

      //------------------------------------------------------------


      var valueWrap = g.select('.nv-valueWrap');

      var value = valueWrap.selectAll('.nv-currentValue')
          .data([currentValue]);

      value.enter().append('text').attr('class', 'nv-currentValue')
          .attr('dx', rightAlignValue ? -8 : 8)
          .attr('dy', '.9em')
          .style('text-anchor', rightAlignValue ? 'end' : 'start');

      value
          .attr('x', availableWidth + (rightAlignValue ? margin.right : 0))
          .attr('y', alignValue ? function(d) { return y(d) } : 0)
          .style('fill', sparkline.color()(data[data.length-1], data.length-1))
          .text(yTickFormat(currentValue));



      gEnter.select('.nv-hoverArea').append('rect')
          .on('mousemove', sparklineHover)
          .on('click', function() { paused = !paused })
          .on('mouseout', function() { index = []; updateValueLine(); });
          //.on('mouseout', function() { index = null; updateValueLine(); });

      g.select('.nv-hoverArea rect')
          .attr('transform', function(d) { return 'translate(' + -margin.left + ',' + -margin.top + ')' })
          .attr('width', availableWidth + margin.left + margin.right)
          .attr('height', availableHeight + margin.top);



      function updateValueLine() { //index is currently global (within the chart), may or may not keep it that way
        if (paused) return;

        var hoverValue = g.selectAll('.nv-hoverValue').data(index)

        var hoverEnter = hoverValue.enter()
          .append('g').attr('class', 'nv-hoverValue')
            .style('stroke-opacity', 0)
            .style('fill-opacity', 0);

        hoverValue.exit()
          .transition().duration(250)
            .style('stroke-opacity', 0)
            .style('fill-opacity', 0)
            .remove();

        hoverValue
            .attr('transform', function(d) { return 'translate(' + x(sparkline.x()(data[d],d)) + ',0)' })
          .transition().duration(250)
            .style('stroke-opacity', 1)
            .style('fill-opacity', 1);

        if (!index.length) return;

        hoverEnter.append('line')
            .attr('x1', 0)
            .attr('y1', -margin.top)
            .attr('x2', 0)
            .attr('y2', availableHeight);


        hoverEnter.append('text').attr('class', 'nv-xValue')
            .attr('x', -6)
            .attr('y', -margin.top)
            .attr('text-anchor', 'end')
            .attr('dy', '.9em')


        g.select('.nv-hoverValue .nv-xValue')
            .text(xTickFormat(sparkline.x()(data[index[0]], index[0])));

        hoverEnter.append('text').attr('class', 'nv-yValue')
            .attr('x', 6)
            .attr('y', -margin.top)
            .attr('text-anchor', 'start')
            .attr('dy', '.9em')

        g.select('.nv-hoverValue .nv-yValue')
            .text(yTickFormat(sparkline.y()(data[index[0]], index[0])));

      }


      function sparklineHover() {
        if (paused) return;

        var pos = d3.mouse(this)[0] - margin.left;

        function getClosestIndex(data, x) {
          var distance = Math.abs(sparkline.x()(data[0], 0) - x);
          var closestIndex = 0;
          for (var i = 0; i < data.length; i++){
            if (Math.abs(sparkline.x()(data[i], i) - x) < distance) {
              distance = Math.abs(sparkline.x()(data[i], i) - x);
              closestIndex = i;
            }
          }
          return closestIndex;
        }

        index = [getClosestIndex(data, Math.round(x.invert(pos)))];

        updateValueLine();
      }

    });

    return chart;
  }


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.sparkline = sparkline;

  d3.rebind(chart, sparkline, 'x', 'y', 'xScale', 'yScale', 'color');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.xTickFormat = function(_) {
    if (!arguments.length) return xTickFormat;
    xTickFormat = _;
    return chart;
  };

  chart.yTickFormat = function(_) {
    if (!arguments.length) return yTickFormat;
    yTickFormat = _;
    return chart;
  };

  chart.showValue = function(_) {
    if (!arguments.length) return showValue;
    showValue = _;
    return chart;
  };

  chart.alignValue = function(_) {
    if (!arguments.length) return alignValue;
    alignValue = _;
    return chart;
  };

  chart.rightAlignValue = function(_) {
    if (!arguments.length) return rightAlignValue;
    rightAlignValue = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  //============================================================


  return chart;
 }

 nv.models.stackedArea = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 960
    , height = 500
    , color = nv.utils.defaultColor() // a function that computes the color
    , id = Math.floor(Math.random() * 100000) //Create semi-unique ID incase user doesn't selet one
    , getX = function(d) { return d.x } // accessor to get the x value from a data point
    , getY = function(d) { return d.y } // accessor to get the y value from a data point
    , style = 'stack'
    , offset = 'zero'
    , order = 'default'
    , interpolate = 'linear'  // controls the line interpolation
    , clipEdge = false // if true, masks lines within x and y scale
    , x //can be accessed via chart.xScale()
    , y //can be accessed via chart.yScale()
    , scatter = nv.models.scatter()
    , dispatch =  d3.dispatch('tooltipShow', 'tooltipHide', 'areaClick', 'areaMouseover', 'areaMouseout')
    ;

  scatter
    .size(2.2) // default size
    .sizeDomain([2.2]) // all the same size by default
    ;

  /************************************
   * offset:
   *   'wiggle' (stream)
   *   'zero' (stacked)
   *   'expand' (normalize to 100%)
   *   'silhouette' (simple centered)
   *
   * order:
   *   'inside-out' (stream)
   *   'default' (input order)
   ************************************/

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var availableWidth = width - margin.left - margin.right,
          availableHeight = height - margin.top - margin.bottom,
          container = d3.select(this);

      //------------------------------------------------------------
      // Setup Scales

      x = scatter.xScale();
      y = scatter.yScale();

      //------------------------------------------------------------


      // Injecting point index into each point because d3.layout.stack().out does not give index
      // ***Also storing getY(d,i) as stackedY so that it can be set to 0 if series is disabled
      data = data.map(function(aseries, i) {
               aseries.values = aseries.values.map(function(d, j) {
                 d.index = j;
                 d.stackedY = aseries.disabled ? 0 : getY(d,j);
                 return d;
               })
               return aseries;
             });


      data = d3.layout.stack()
               .order(order)
               .offset(offset)
               .values(function(d) { return d.values })  //TODO: make values customizeable in EVERY model in this fashion
               .x(getX)
               .y(function(d) { return d.stackedY })
               .out(function(d, y0, y) {
                  d.display = {
                    y: y,
                   y0: y0
                  };
                })
              (data);


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-stackedarea').data([data]);
      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedarea');
      var defsEnter = wrapEnter.append('defs');
      var gEnter = wrapEnter.append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-areaWrap');
      gEnter.append('g').attr('class', 'nv-scatterWrap');

      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      //------------------------------------------------------------


      scatter
        .width(availableWidth)
        .height(availableHeight)
        .x(getX)
        .y(function(d) { return d.display.y + d.display.y0 })
        .forceY([0])
        .color(data.map(function(d,i) {
          return d.color || color(d, i);
        }).filter(function(d,i) { return !data[i].disabled }));


      var scatterWrap = g.select('.nv-scatterWrap')
          .datum(data.filter(function(d) { return !d.disabled }))

      //d3.transition(scatterWrap).call(scatter);
      scatterWrap.call(scatter);





      defsEnter.append('clipPath')
          .attr('id', 'nv-edge-clip-' + id)
        .append('rect');

      wrap.select('#nv-edge-clip-' + id + ' rect')
          .attr('width', availableWidth)
          .attr('height', availableHeight);

      g   .attr('clip-path', clipEdge ? 'url(#nv-edge-clip-' + id + ')' : '');




      var area = d3.svg.area()
          .x(function(d,i)  { return x(getX(d,i)) })
          .y0(function(d) { return y(d.display.y0) })
          .y1(function(d) { return y(d.display.y + d.display.y0) })
          .interpolate(interpolate);

      var zeroArea = d3.svg.area()
          .x(function(d,i)  { return x(getX(d,i)) })
          .y0(function(d) { return y(d.display.y0) })
          .y1(function(d) { return y(d.display.y0) });


      var path = g.select('.nv-areaWrap').selectAll('path.nv-area')
          .data(function(d) { return d });
          //.data(function(d) { return d }, function(d) { return d.key });
      path.enter().append('path').attr('class', function(d,i) { return 'nv-area nv-area-' + i })
          .on('mouseover', function(d,i) {
            d3.select(this).classed('hover', true);
            dispatch.areaMouseover({
              point: d,
              series: d.key,
              pos: [d3.event.pageX, d3.event.pageY],
              seriesIndex: i
            });
          })
          .on('mouseout', function(d,i) {
            d3.select(this).classed('hover', false);
            dispatch.areaMouseout({
              point: d,
              series: d.key,
              pos: [d3.event.pageX, d3.event.pageY],
              seriesIndex: i
            });
          })
          .on('click', function(d,i) {
            d3.select(this).classed('hover', false);
            dispatch.areaClick({
              point: d,
              series: d.key,
              pos: [d3.event.pageX, d3.event.pageY],
              seriesIndex: i
            });
          })
      //d3.transition(path.exit())
      path.exit()
          .attr('d', function(d,i) { return zeroArea(d.values,i) })
          .remove();
      path
          .style('fill', function(d,i){ return d.color || color(d, i) })
          .style('stroke', function(d,i){ return d.color || color(d, i) });
      //d3.transition(path)
      path
          .attr('d', function(d,i) { return area(d.values,i) })


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      scatter.dispatch.on('elementMouseover.area', function(e) {
        g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', true);
      });
      scatter.dispatch.on('elementMouseout.area', function(e) {
        g.select('.nv-chart-' + id + ' .nv-area-' + e.seriesIndex).classed('hover', false);
      });

      //============================================================

    });


    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  scatter.dispatch.on('elementClick.area', function(e) {
    dispatch.areaClick(e);
  })
  scatter.dispatch.on('elementMouseover.tooltip', function(e) {
        e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
        dispatch.tooltipShow(e);
  });
  scatter.dispatch.on('elementMouseout.tooltip', function(e) {
        dispatch.tooltipHide(e);
  });

  //============================================================


  //============================================================
  // Global getters and setters
  //------------------------------------------------------------

  chart.dispatch = dispatch;
  chart.scatter = scatter;

  d3.rebind(chart, scatter, 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');

  chart.x = function(_) {
    if (!arguments.length) return getX;
    getX = d3.functor(_);
    return chart;
  };

  chart.y = function(_) {
    if (!arguments.length) return getY;
    getY = d3.functor(_);
    return chart;
  }

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.clipEdge = function(_) {
    if (!arguments.length) return clipEdge;
    clipEdge = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    return chart;
  };

  chart.offset = function(_) {
    if (!arguments.length) return offset;
    offset = _;
    return chart;
  };

  chart.order = function(_) {
    if (!arguments.length) return order;
    order = _;
    return chart;
  };

  //shortcut for offset + order
  chart.style = function(_) {
    if (!arguments.length) return style;
    style = _;

    switch (style) {
      case 'stack':
        chart.offset('zero');
        chart.order('default');
        break;
      case 'stream':
        chart.offset('wiggle');
        chart.order('inside-out');
        break;
      case 'stream-center':
          chart.offset('silhouette');
          chart.order('inside-out');
          break;
      case 'expand':
        chart.offset('expand');
        chart.order('default');
        break;
    }

    return chart;
  };

  chart.interpolate = function(_) {
 	    if (!arguments.length) return interpolate;
 	    interpolate = _;
 	    return interpolate;
  
  };
  
  //============================================================


  return chart;
 }

 nv.models.stackedAreaChart = function() {

  //============================================================
  // Public Variables with Default Settings
  //------------------------------------------------------------

  var stacked = nv.models.stackedArea()
    , xAxis = nv.models.axis()
    , yAxis = nv.models.axis()
    , legend = nv.models.legend()
    , controls = nv.models.legend()
    ;

  var margin = {top: 30, right: 25, bottom: 50, left: 60}
    , width = null
    , height = null
    , color = nv.utils.defaultColor() // a function that takes in d, i and returns color
    , showControls = true
    , showLegend = true
    , tooltips = true
    , tooltip = function(key, x, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' on ' + x + '</p>'
      }
    , x //can be accessed via chart.xScale()
    , y //can be accessed via chart.yScale()
    , yAxisTickFormat = d3.format(',.2f')
    , state = { style: stacked.style() }
    , noData = 'No Data Available.'
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
    , controlWidth = 250
    ;

  xAxis
    .orient('bottom')
    .tickPadding(7)
    ;
  yAxis
    .orient('left')
    ;
  stacked.scatter
    .pointActive(function(d) {
      //console.log(stacked.y()(d), !!Math.round(stacked.y()(d) * 100));
      return !!Math.round(stacked.y()(d) * 100);
    })
    ;

  //============================================================


  //============================================================
  // Private Variables
  //------------------------------------------------------------

  var showTooltip = function(e, offsetElement) {
    var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
        top = e.pos[1] + ( offsetElement.offsetTop || 0),
        x = xAxis.tickFormat()(stacked.x()(e.point, e.pointIndex)),
        y = yAxis.tickFormat()(stacked.y()(e.point, e.pointIndex)),
        content = tooltip(e.series.key, x, y, e, chart);

    nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
  };

  //============================================================


  function chart(selection) {
    selection.each(function(data) {
      var container = d3.select(this),
          that = this;

      var availableWidth = (width  || parseInt(container.style('width')) || 960)
                             - margin.left - margin.right,
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;

      chart.update = function() { chart(selection) };
      chart.container = this;

      //set state.disabled
      state.disabled = data.map(function(d) { return !!d.disabled });


      //------------------------------------------------------------
      // Display No Data message if there's nothing to show.

      if (!data || !data.length || !data.filter(function(d) { return d.values.length }).length) {
        var noDataText = container.selectAll('.nv-noData').data([noData]);

        noDataText.enter().append('text')
          .attr('class', 'nvd3 nv-noData')
          .attr('dy', '-.7em')
          .style('text-anchor', 'middle');

        noDataText
          .attr('x', margin.left + availableWidth / 2)
          .attr('y', margin.top + availableHeight / 2)
          .text(function(d) { return d });

        return chart;
      } else {
        container.selectAll('.nv-noData').remove();
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Scales

      x = stacked.xScale();
      y = stacked.yScale();

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup containers and skeleton of chart

      var wrap = container.selectAll('g.nv-wrap.nv-stackedAreaChart').data([data]);
      var gEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-stackedAreaChart').append('g');
      var g = wrap.select('g');

      gEnter.append('g').attr('class', 'nv-x nv-axis');
      gEnter.append('g').attr('class', 'nv-y nv-axis');
      gEnter.append('g').attr('class', 'nv-stackedWrap');
      gEnter.append('g').attr('class', 'nv-legendWrap');
      gEnter.append('g').attr('class', 'nv-controlsWrap');

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Legend

      if (showLegend) {
        legend
          .width( availableWidth - controlWidth );

        g.select('.nv-legendWrap')
            .datum(data)
            .call(legend);

        if ( margin.top != legend.height()) {
          margin.top = legend.height();
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }

        g.select('.nv-legendWrap')
            .attr('transform', 'translate(' + controlWidth + ',' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Controls

      if (showControls) {
        var controlsData = [
          { key: 'Stacked', disabled: stacked.offset() != 'zero' },
          { key: 'Stream', disabled: stacked.offset() != 'wiggle' },
          { key: 'Expanded', disabled: stacked.offset() != 'expand' }
        ];

        controls
          .width( controlWidth )
          .color(['#444', '#444', '#444']);

        g.select('.nv-controlsWrap')
            .datum(controlsData)
            .call(controls);


        if ( margin.top != Math.max(controls.height(), legend.height()) ) {
          margin.top = Math.max(controls.height(), legend.height());
          availableHeight = (height || parseInt(container.style('height')) || 400)
                             - margin.top - margin.bottom;
        }


        g.select('.nv-controlsWrap')
            .attr('transform', 'translate(0,' + (-margin.top) +')');
      }

      //------------------------------------------------------------


      wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


      //------------------------------------------------------------
      // Main Chart Component(s)

      stacked
        .width(availableWidth)
        .height(availableHeight)

      var stackedWrap = g.select('.nv-stackedWrap')
          .datum(data);
      //d3.transition(stackedWrap).call(stacked);
      stackedWrap.call(stacked);

      //------------------------------------------------------------


      //------------------------------------------------------------
      // Setup Axes

      xAxis
        .scale(x)
        .ticks( availableWidth / 100 )
        .tickSize( -availableHeight, 0);

      g.select('.nv-x.nv-axis')
          .attr('transform', 'translate(0,' + availableHeight + ')');
      //d3.transition(g.select('.nv-x.nv-axis'))
      g.select('.nv-x.nv-axis')
        .transition().duration(0)
          .call(xAxis);

      yAxis
        .scale(y)
        .ticks(stacked.offset() == 'wiggle' ? 0 : availableHeight / 36)
        .tickSize(-availableWidth, 0)
        .setTickFormat(stacked.offset() == 'expand' ? d3.format('%') : yAxisTickFormat);

      //d3.transition(g.select('.nv-y.nv-axis'))
      g.select('.nv-y.nv-axis')
        .transition().duration(0)
          .call(yAxis);

      //------------------------------------------------------------


      //============================================================
      // Event Handling/Dispatching (in chart's scope)
      //------------------------------------------------------------

      stacked.dispatch.on('areaClick.toggle', function(e) {
        if (data.filter(function(d) { return !d.disabled }).length === 1)
          data = data.map(function(d) {
            d.disabled = false;
            return d
          });
        else
          data = data.map(function(d,i) {
            d.disabled = (i != e.seriesIndex);
            return d
          });

        //selection.transition().call(chart);
        chart(selection);
      });

      legend.dispatch.on('legendClick', function(d,i) {
        d.disabled = !d.disabled;

        if (!data.filter(function(d) { return !d.disabled }).length) {
          data.map(function(d) {
            d.disabled = false;
            return d;
          });
        }

        state.disabled = data.map(function(d) { return !!d.disabled });
        dispatch.stateChange(state);

        //selection.transition().call(chart);
        chart(selection);
      });

      controls.dispatch.on('legendClick', function(d,i) {
        if (!d.disabled) return;

        controlsData = controlsData.map(function(s) {
          s.disabled = true;
          return s;
        });
        d.disabled = false;

        switch (d.key) {
          case 'Stacked':
            stacked.style('stack');
            break;
          case 'Stream':
            stacked.style('stream');
            break;
          case 'Expanded':
            stacked.style('expand');
            break;
        }

        state.style = stacked.style();
        dispatch.stateChange(state);

        //selection.transition().call(chart);
        chart(selection);
      });

      dispatch.on('tooltipShow', function(e) {
        if (tooltips) showTooltip(e, that.parentNode);
      });

      // Update chart from a state object passed to event handler
      dispatch.on('changeState', function(e) {

        if (typeof e.disabled !== 'undefined') {
          data.forEach(function(series,i) {
            series.disabled = e.disabled[i];
          });

          state.disabled = e.disabled;
        }

        if (typeof e.style !== 'undefined') {
          stacked.style(e.style);
        }

        selection.call(chart);
      });

    });


    return chart;
  }


  //============================================================
  // Event Handling/Dispatching (out of chart's scope)
  //------------------------------------------------------------

  stacked.dispatch.on('tooltipShow', function(e) {
    //disable tooltips when value ~= 0
    //// TODO: consider removing points from voronoi that have 0 value instead of this hack
    /*
    if (!Math.round(stacked.y()(e.point) * 100)) {  // 100 will not be good for very small numbers... will have to think about making this valu dynamic, based on data range
      setTimeout(function() { d3.selectAll('.point.hover').classed('hover', false) }, 0);
      return false;
    }
   */

    e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
    dispatch.tooltipShow(e);
  });

  stacked.dispatch.on('tooltipHide', function(e) {
    dispatch.tooltipHide(e);
  });

  dispatch.on('tooltipHide', function() {
    if (tooltips) nv.tooltip.cleanup();
  });

  //============================================================


  //============================================================
  // Expose Public Variables
  //------------------------------------------------------------

  // expose chart's sub-components
  chart.dispatch = dispatch;
  chart.stacked = stacked;
  chart.legend = legend;
  chart.controls = controls;
  chart.xAxis = xAxis;
  chart.yAxis = yAxis;

  d3.rebind(chart, stacked, 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'sizeDomain', 'interactive', 'offset', 'order', 'style', 'clipEdge', 'forceX', 'forceY', 'forceSize', 'interpolate');

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin.top    = typeof _.top    != 'undefined' ? _.top    : margin.top;
    margin.right  = typeof _.right  != 'undefined' ? _.right  : margin.right;
    margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom;
    margin.left   = typeof _.left   != 'undefined' ? _.left   : margin.left;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return getWidth;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return getHeight;
    height = _;
    return chart;
  };

  chart.color = function(_) {
    if (!arguments.length) return color;
    color = nv.utils.getColor(_);
    legend.color(color);
    stacked.color(color);
    return chart;
  };

  chart.showControls = function(_) {
    if (!arguments.length) return showControls;
    showControls = _;
    return chart;
  };

  chart.showLegend = function(_) {
    if (!arguments.length) return showLegend;
    showLegend = _;
    return chart;
  };

  chart.tooltip = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.tooltips = function(_) {
    if (!arguments.length) return tooltips;
    tooltips = _;
    return chart;
  };

  chart.tooltipContent = function(_) {
    if (!arguments.length) return tooltip;
    tooltip = _;
    return chart;
  };

  chart.state = function(_) {
    if (!arguments.length) return state;
    state = _;
    return chart;
  };

  chart.noData = function(_) {
    if (!arguments.length) return noData;
    noData = _;
    return chart;
  };

  yAxis.setTickFormat = yAxis.tickFormat;
  yAxis.tickFormat = function(_) {
    if (!arguments.length) return yAxisTickFormat;
    yAxisTickFormat = _;
    return yAxis;
  };

  //============================================================

  return chart;
 }
 })();
diff --git a/stream_layers.js b/stream_layers.js
 /* Inspired by Lee Byron's test data generator. */
 function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
 }

 /* Another layer generator using gamma distributions. */
 function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
 }

 function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
 }

diff --git a/USStateMap.js b/USStateMap.js
 USStateMap.prototype = new DexComponent();
 USStateMap.constructor = USStateMap;

 function USStateMap(userConfig)
 {
  DexComponent.call(this, userConfig,
  {
    parent             : null,
    labels             : [ "X", "Y" ],
    width              : 600,
    height             : 400, 
    xoffset            : 0,
    yoffset            : 0,
    topology           : {"type":"Topology","transform":{"scale":[0.010483693461690662,0.005244681944955843],"translate":[-171.79111060289114,18.91619]},"objects":{"states":{"type":"GeometryCollection","geometries":[{"type":"Polygon","id":"Maryland","arcs":[[0,1,2,3,4,5,6,7,8,9]]},{"type":"Polygon","id":"Minnesota","arcs":[[10,11,12,13,14]]},{"type":"Polygon","id":"Montana","arcs":[[15,16,17,18,19]]},{"type":"Polygon","id":"North Dakota","arcs":[[20,-18,21,-13]]},{"type":"MultiPolygon","id":"Hawaii","arcs":[[[22]],[[23]],[[24]],[[25]],[[26]]]},{"type":"Polygon","id":"Idaho","arcs":[[27,28,29,30,31,32,-16,33]]},{"type":"Polygon","id":"Washington","arcs":[[34,35,-32]]},{"type":"Polygon","id":"Arizona","arcs":[[36,37,38,39,40]]},{"type":"Polygon","id":"California","arcs":[[-37,41,42,43]]},{"type":"Polygon","id":"Colorado","arcs":[[44,45,46,47,48,49]]},{"type":"Polygon","id":"Nevada","arcs":[[-44,50,-29,51,-38]]},{"type":"Polygon","id":"New Mexico","arcs":[[52,-46,53,54,55]]},{"type":"Polygon","id":"Oregon","arcs":[[-51,-43,56,-35,-31,57]]},{"type":"Polygon","id":"Wyoming","arcs":[[58,-34,-20,59,60,-48]]},{"type":"Polygon","id":"Arkansas","arcs":[[61,62,63,64,65,66]]},{"type":"Polygon","id":"Iowa","arcs":[[67,68,69,70,-11,71]]},{"type":"Polygon","id":"Kansas","arcs":[[72,-50,73,74,75,76]]},{"type":"Polygon","id":"Missouri","arcs":[[77,78,-66,79,80,81,-75,82,-69,83]]},{"type":"Polygon","id":"Nebraska","arcs":[[-83,-74,-49,-61,84,-70]]},{"type":"Polygon","id":"Oklahoma","arcs":[[85,-54,-45,-73,86,-80,-65]]},{"type":"Polygon","id":"South Dakota","arcs":[[-85,-60,-19,-21,-12,-71]]},{"type":"Polygon","id":"Louisiana","arcs":[[87,88,89,90,-63]]},{"type":"Polygon","id":"Texas","arcs":[[-91,91,-55,-86,-64]]},{"type":"Polygon","id":"Connecticut","arcs":[[92,93,94,95]]},{"type":"Polygon","id":"Massachusetts","arcs":[[96,-94,97,98,99,100]]},{"type":"Polygon","id":"New Hampshire","arcs":[[101,102,103,104,-100]]},{"type":"Polygon","id":"Rhode Island","arcs":[[-97,105,-95]]},{"type":"Polygon","id":"Vermont","arcs":[[-99,106,107,-102]]},{"type":"Polygon","id":"Alabama","arcs":[[108,109,110,111,112]]},{"type":"Polygon","id":"Florida","arcs":[[-109,113,114]]},{"type":"Polygon","id":"Georgia","arcs":[[-114,-113,115,116,117,118]]},{"type":"Polygon","id":"Mississippi","arcs":[[-62,119,-111,120,121]]},{"type":"Polygon","id":"South Carolina","arcs":[[-118,122,123]]},{"type":"Polygon","id":"Illinois","arcs":[[124,125,-84,-68,126,127]]},{"type":"Polygon","id":"Indiana","arcs":[[128,129,-125,130,131]]},{"type":"Polygon","id":"Kentucky","arcs":[[132,133,134,-78,-126,-130,135]]},{"type":"Polygon","id":"North Carolina","arcs":[[-123,-117,136,137,138]]},{"type":"Polygon","id":"Ohio","arcs":[[-136,-129,139,140,141,142]]},{"type":"Polygon","id":"Tennessee","arcs":[[143,-137,-116,-112,-120,-67,-79,-135]]},{"type":"Polygon","id":"Wisconsin","arcs":[[-127,-72,-15,144,145,146]]},{"type":"Polygon","id":"West Virginia","arcs":[[147,-8,148,-133,-143,149]]},{"type":"Polygon","id":"Delaware","arcs":[[-1,150,151,152]]},{"type":"Polygon","id":"New Jersey","arcs":[[-152,153,154,155]]},{"type":"Polygon","id":"New York","arcs":[[-98,-93,156,-155,157,158,-107]]},{"type":"Polygon","id":"Pennsylvania","arcs":[[-151,-10,-150,-142,159,-158,-154]]},{"type":"Polygon","id":"Maine","arcs":[[-104,160]]},{"type":"MultiPolygon","id":"Michigan","arcs":[[[-140,-132,161]],[[162,163]]]},{"type":"MultiPolygon","id":"Alaska","arcs":[[[164]],[[165]],[[166]],[[167]]]},{"type":"MultiPolygon","id":"Virginia","arcs":[[[-7,168,-5,169,-138,-144,-134,-149]],[[2,170]]]},{"type":"Polygon","id":"District of Columbia","arcs":[[-6,-169]]},{"type":"Polygon","id":"Utah","arcs":[[-52,-28,-59,171,-39]]}]}},"arcs":[[[9157,3967],[7,-243],[63,0]],[[9227,3724],[0,-9],[-31,-74]],[[9196,3641],[-22,-3],[-11,-12]],[[9163,3626],[-15,22],[-12,19],[-10,15],[-12,17],[-2,29],[-2,31],[-2,28],[-2,35],[-3,35],[-7,-32],[-5,-25],[-6,-25],[5,-31],[5,-32],[5,-28],[5,-30],[-12,6],[-13,6],[-17,8],[-21,10]],[[9042,3684],[-1,6],[-4,21],[-16,-9],[-12,11],[10,42],[13,14],[4,4],[1,16]],[[9037,3789],[3,3],[2,3],[3,4],[2,3],[3,4],[-3,4],[-2,4],[-3,4],[-2,4],[-2,3],[-3,-2],[-2,-3],[-3,-4]],[[9030,3816],[-18,22],[-20,11],[1,5],[6,16],[-13,14],[-11,5],[-3,1]],[[8972,3890],[-7,25],[-12,27],[-29,15],[-19,-14],[-10,-15],[-28,8],[-13,-20],[-19,-7],[-16,-22]],[[8819,3887],[-15,-17],[1,96]],[[8805,3966],[88,0],[31,0],[67,1],[82,-1],[84,1]],[[7684,4687],[-125,4],[-139,-2],[-130,-2],[-104,0]],[[7186,4687],[1,178],[-12,183],[-16,15],[-10,29],[5,26],[22,21],[1,28]],[[7177,5167],[1,35],[-6,29],[-8,30],[-5,39],[-1,44],[-3,10],[-4,56],[-1,26],[-2,22],[-4,39],[-12,39],[-11,35],[-2,35],[-1,37],[3,24],[1,23],[-9,27],[-1,19]],[[7112,5736],[197,0],[0,73],[33,1],[17,-105],[29,-32],[67,-12],[97,-30],[93,-59],[77,25],[117,-50],[-97,-63],[-68,-76],[-64,-81],[-1,-28]],[[7609,5299],[-25,-10],[1,-107],[-3,0],[-23,-21],[-21,-18],[-13,-36],[20,-35],[-8,-48],[0,-52],[-3,-42],[28,-36],[12,-2],[31,-27],[10,-13],[7,-21],[24,-32],[32,-29],[3,-15],[1,-46],[2,-22]],[[5790,4879],[-10,10],[-10,27],[-10,5],[-14,-38],[-21,-6],[-54,12],[-3,-19],[-31,7],[-18,-26],[-17,49],[-11,28],[-20,5],[-6,14],[-6,50],[-17,23],[-10,61],[-12,26],[-11,5],[-10,-27],[-19,-22],[-17,18],[-1,49],[11,13],[-8,49],[9,50],[11,42],[-29,2],[-24,27],[-27,59],[-16,30],[-22,18],[-18,30],[0,35],[-25,50],[-7,201]],[[5317,5736],[285,0],[285,0],[285,0],[285,1]],[[6457,5737],[1,-350],[5,-232]],[[6463,5155],[-5,-174]],[[6458,4981],[-159,2],[-171,-1],[-149,2],[-188,-2],[1,-97],[-2,-6]],[[7177,5167],[-181,-10],[-155,0],[-196,-1],[-182,-1]],[[6457,5737],[330,-1],[325,0]],[[1549,31],[-14,-31],[-23,27],[3,53],[-16,70],[4,21],[17,31],[-7,37],[6,18],[7,-3],[37,-33],[17,-16],[15,-26],[25,-67],[-3,-10],[-37,-41],[-31,-30]],[[1498,329],[-32,-14],[-16,40],[-11,16],[-1,12],[9,16],[34,-18],[25,-29],[-8,-23]],[[1433,431],[-3,-21],[-51,5],[7,24],[47,-8]],[[1348,458],[-5,-11],[-7,3],[-33,6],[-12,44],[-4,7],[26,27],[8,-13],[27,-63]],[[1187,584],[-12,-19],[-32,35],[5,14],[15,19],[22,-5],[2,-44]],[[5793,4401],[-284,-1]],[[5509,4400],[-286,1]],[[5223,4401],[1,343],[9,54]],[[5233,4798],[-8,25],[-18,12],[0,31],[14,43],[20,38],[14,61],[13,50],[10,24],[-6,29],[-16,16],[-22,37]],[[5234,5164],[1,33],[-9,30],[-3,265],[0,243]],[[5223,5735],[94,1]],[[5790,4879],[3,-4],[0,-474]],[[5234,5164],[-197,-2],[-34,-20],[-24,9],[-19,-16],[-35,-21],[-43,3],[-22,-16],[-20,-7],[-15,10],[-34,9],[-22,-6],[-37,-21],[-23,0],[-22,7],[-7,27],[-3,32],[-18,36],[-27,11],[-23,17],[-30,1],[-21,1]],[[4558,5218],[-7,110],[-31,164],[-27,88],[11,37],[138,-64],[51,-180],[23,50],[-15,156],[-32,157],[270,0],[284,-1]],[[5443,2632],[13,-1],[10,38],[-17,26],[-3,29],[-5,33],[19,44],[7,87],[29,39],[-18,37],[-12,36],[-8,33],[-5,26],[-2,17]],[[5451,3076],[6,38],[-5,37],[-2,37],[0,41],[-9,26],[7,24],[20,0],[18,-14],[13,-7],[7,29],[4,6],[-1,153]],[[5509,3446],[154,3],[183,0],[139,-1]],[[5985,3448],[0,-1079]],[[5985,2369],[-189,-2],[-218,135],[-144,92],[9,38]],[[5443,2632],[-121,-21],[-108,-15],[-16,98],[-62,109],[-45,23],[-10,55],[-54,9],[-34,52],[-88,19],[-25,31],[-11,104],[-93,192],[-79,265],[3,44],[-42,63],[-74,160],[-13,155],[-51,104],[21,158],[-3,164]],[[4538,4401],[402,-2]],[[4940,4399],[0,-571],[179,-258],[172,-252],[160,-242]],[[6653,3446],[-92,1]],[[6561,3447],[-114,0],[-162,0],[-151,0],[-149,0]],[[5985,3447],[-1,764]],[[5984,4211],[95,0],[96,0],[191,0],[96,0]],[[6462,4211],[190,0],[0,-185],[0,-6]],[[6652,4020],[1,-294],[0,-280]],[[4940,4399],[283,1],[0,1]],[[5509,4400],[0,-954]],[[5985,2369],[0,1078]],[[6561,3447],[0,-95]],[[6561,3352],[0,-499],[0,-359],[-88,0],[-172,0],[-86,0],[1,-16],[11,-31]],[[6227,2447],[-166,0],[0,-78],[-76,0]],[[4538,4401],[-31,146],[38,180],[23,346],[-10,145]],[[5233,4798],[-8,-54],[-2,-343]],[[5984,4211],[-35,0],[-39,2],[-40,1],[-43,1],[-34,1],[0,69],[0,64],[0,52]],[[6458,4981],[3,-389]],[[6461,4592],[1,-381]],[[7777,3070],[-1,-15],[-17,-14],[-1,-28],[-12,-51],[-11,-11],[-17,-26],[-10,-39],[-21,-66],[-2,-46],[11,-50],[-5,-37]],[[7691,2687],[-81,6],[-104,-6],[-92,0]],[[7414,2687],[6,108],[-23,1],[-18,-2],[-5,12]],[[7374,2806],[3,167],[2,185],[-19,202]],[[7360,3360],[116,-3],[105,0],[101,0],[109,-12],[7,-24],[-10,-20],[-11,-21],[-6,-19],[62,0]],[[7833,3261],[-1,-16],[-9,-26],[-17,-19],[-4,-32],[-15,-25],[1,-55],[-11,-18]],[[7740,4497],[6,-14],[11,-10],[4,-21],[15,-15],[10,-16],[-5,-52],[-17,-43],[-7,-14],[-22,-11],[-32,-9],[-9,-33],[12,-15],[4,-29],[-12,-33],[-7,-29],[-24,-28],[-2,-35]],[[7665,4090],[-13,16],[-18,31],[-105,-5],[-109,-1],[-86,0],[-86,0]],[[7248,4131],[-6,34],[3,34],[-2,33],[-10,55],[-6,23],[-7,6],[-1,44],[-6,32],[-17,36],[0,16],[-6,31],[-5,19]],[[7185,4494],[1,18],[-16,21],[8,31],[5,31],[2,20],[-12,26],[0,46],[13,0]],[[7684,4687],[1,-10],[13,-31],[-9,-14],[1,-40],[4,-17],[6,-30],[31,-19],[9,-29]],[[7277,3447],[-172,0],[-172,0],[-95,-1],[-96,0],[-89,0]],[[6652,4020],[167,0],[124,0],[219,0],[132,0]],[[7294,4020],[22,-26],[13,1],[2,-28],[-13,-35],[7,-18],[12,-40]],[[7337,3874],[25,-18],[-1,-205]],[[7361,3651],[-1,-203],[-83,-1]],[[7887,3438],[-3,-19],[2,-30],[-16,-16],[-21,-20]],[[7849,3353],[-2,-18],[-6,-27],[-8,-47]],[[7360,3360],[1,87],[-1,0]],[[7360,3447],[1,204]],[[7361,3651],[1,204],[-25,19]],[[7294,4020],[-13,41],[-15,24],[-16,30],[-2,16]],[[7665,4090],[-9,-48],[9,-57],[16,-39],[18,-32],[22,-26],[9,-9],[8,-36],[1,-32],[11,-8],[18,13],[18,-31],[-5,-35],[-9,-28],[-6,-34],[13,-28],[19,-27],[11,-1],[25,-42],[10,-5],[7,-46],[-4,-29],[13,-47],[10,5],[17,-30]],[[6461,4592],[186,0],[143,0],[191,0],[25,-24],[35,-16],[8,9],[23,-1],[34,2],[25,-24],[26,-16],[4,-16],[8,-9],[16,-3]],[[7374,2806],[-41,37],[-27,21],[-22,-13],[-33,2],[-20,0],[-16,-16],[-16,-8],[-14,9],[-32,-10],[-14,32],[-15,-28],[-26,13],[-27,29],[-29,-19],[-12,46],[-45,-4],[-28,10],[-32,13],[-14,40],[-25,-13],[-16,16],[-23,20],[0,182],[0,187],[-95,0],[-96,0],[-95,0]],[[7277,3447],[83,0]],[[7691,2687],[7,-11],[-9,-28],[14,-39],[-4,-24],[12,-32],[-13,-20],[-4,-36],[-19,-30],[-8,-40],[-9,-46],[-12,-21],[4,-47],[84,-7],[90,0],[-3,-32],[-6,-31],[6,-24],[13,-22],[3,-32]],[[7837,2165],[2,-19],[1,-3]],[[7840,2143],[17,-50],[-1,-78],[20,-37],[-18,-25],[-36,28],[-36,-36],[-69,5],[-71,101],[-83,-24],[-70,45],[-59,-14]],[[7434,2058],[-7,21],[10,28],[14,25],[1,38],[-7,13],[8,45],[6,21],[9,70],[-8,26],[-11,43],[-8,44],[-6,30],[-15,21],[-6,204]],[[7434,2058],[-80,-44],[-87,-142],[-95,-82],[-52,-91],[-22,-86],[-1,-131],[5,-92],[18,-65],[-37,-5],[-68,42],[-74,59],[-27,89],[-21,134],[-56,108],[-33,112],[-48,131],[-67,76],[-78,-4],[-60,-151],[-79,58],[-50,57],[-23,105],[-32,100],[-57,83],[-49,61],[-34,67]],[[9361,4202],[-1,5],[-3,24],[20,18],[-7,16],[5,146]],[[9375,4411],[73,-3],[89,-5]],[[9537,4403],[1,-104],[-6,-28]],[[9532,4271],[-42,-9],[-55,-10],[-74,-51],[0,1]],[[9602,4305],[-3,29],[-15,22],[-7,50],[-40,-3]],[[9375,4411],[21,132]],[[9396,4543],[79,-3]],[[9475,4540],[115,-2],[10,19],[20,12],[11,-3]],[[9631,4566],[-1,-101],[32,-101],[39,-5],[-10,70],[29,-43],[-8,-54],[-64,-31],[-46,4]],[[9475,4540],[-8,19],[7,25],[3,50],[3,12],[3,45],[10,38],[8,17],[12,45],[2,31],[3,18],[18,9],[22,22],[3,24],[-7,28],[12,51],[-1,0]],[[9565,4974],[10,47],[30,10]],[[9605,5031],[14,-351],[-4,-18],[18,-29],[4,-26],[10,2]],[[9647,4609],[-16,-43]],[[9602,4305],[-70,-34]],[[9396,4543],[4,157],[-14,1],[-1,8],[6,27],[-9,50],[9,39],[-5,30],[-2,56],[4,25],[2,38]],[[9390,4974],[175,0]],[[8278,2302],[-195,-1],[-54,-11],[-2,-15],[22,-46],[-5,-38],[-7,-26]],[[8037,2165],[-85,21]],[[7952,2186],[-3,291],[17,305],[17,247],[-7,37]],[[7976,3066],[120,0],[123,-2]],[[8219,3064],[24,-237],[23,-190],[13,-59],[9,-34],[-16,-34],[-5,-61],[5,-35],[-2,-34],[-3,-31],[6,-25],[5,-22]],[[8278,2302],[14,-52],[96,-8],[155,-29],[7,-33],[12,17],[0,66],[12,7],[19,-14],[20,-4]],[[8613,2252],[17,-132],[32,-164],[42,-134],[1,-83],[45,-221],[-3,-129],[-4,-74],[-24,-116],[-29,-24],[-47,23],[-15,83],[-36,44],[-51,164],[-44,146],[-14,75],[19,126],[-26,105],[-75,160],[-37,29],[-96,-87],[-17,10],[-47,89],[-59,47],[-108,-24]],[[8219,3064],[73,-2],[51,2]],[[8343,3064],[119,-2]],[[8462,3062],[-11,-16],[-15,-36],[26,-31],[16,-12],[18,-60],[11,-34],[34,-45],[6,-24],[23,-31],[11,-46],[30,-38],[7,-44],[6,-21],[-3,-14],[17,-21],[10,-35],[0,-37],[8,-7],[17,-9]],[[8673,2501],[-45,-114],[-15,-135]],[[7777,3070],[94,0],[105,-4]],[[7952,2186],[-73,-13],[-39,-30]],[[7840,2143],[-3,22],[-3,32],[-13,22],[-6,24],[6,31],[3,32],[-90,0],[-84,7],[-4,47],[12,21],[9,46],[8,40],[19,30],[4,36],[13,20],[-12,32],[4,24],[-14,39],[9,28],[-7,11]],[[8462,3062],[9,6],[52,33],[88,-2],[44,-9],[1,-17],[10,13],[15,-32],[-1,-23],[106,-2],[107,-180]],[[8893,2849],[-48,-70],[-14,-64],[-105,-124],[-53,-90]],[[8037,4345],[0,-221],[0,-220],[-11,-53],[8,-14],[5,-33],[-1,-26],[-8,-11],[-7,-32],[-19,-41],[-14,-52],[-3,-38]],[[7987,3604],[1,-14],[-11,-27],[8,-18],[-17,-14],[-21,-16],[4,-41],[-13,-16],[-23,17],[-25,11],[-7,-19],[4,-29]],[[7740,4497],[97,0],[100,0],[73,-2],[0,1],[1,0]],[[8011,4496],[0,-1],[0,-49],[26,-101]],[[8297,4339],[-1,-172],[0,-186],[-1,-132]],[[8295,3849],[-6,-9],[8,-39],[-4,-14],[-16,0],[-15,-17],[-22,7],[-2,-37],[-14,-14],[-12,-33],[-14,-5],[-21,-57],[-19,16],[-6,23],[-17,-38],[-10,-21],[-21,23],[-22,-18],[-7,-19],[-30,29],[-20,-21],[-25,15],[0,-21],[-13,5]],[[8037,4345],[9,-13],[32,1],[26,21]],[[8104,4354],[103,-1],[90,1],[0,-15]],[[8508,3717],[2,-18],[-1,-39],[11,-30],[5,-29],[14,-25],[9,-23],[19,-3]],[[8567,3550],[-10,-15],[-28,-42],[-30,-22],[-2,-16],[-10,-20],[-25,-21],[-2,-2],[-1,-2],[-7,-16],[-15,-9],[-5,-3],[-27,-11]],[[8405,3371],[-65,-6],[-84,8],[-27,-2],[-55,5],[-56,2],[-51,1],[-60,-6],[-3,9],[-19,0],[0,-30],[-136,1]],[[8295,3849],[33,-4],[17,-19],[25,-43],[20,-13],[15,-16],[22,6],[17,-11],[21,10],[18,3],[7,-26],[18,-19]],[[8343,3064],[2,40],[20,12],[7,21],[13,23],[20,5],[22,8],[22,17],[9,17],[19,15],[-1,14],[24,26],[8,-17],[35,36],[16,-4],[15,32],[20,8],[-2,28],[3,24]],[[8595,3369],[161,-9],[190,-1],[101,2],[90,1],[12,0]],[[9149,3362],[14,-191],[-61,-141],[-99,-57],[-62,-112],[-48,-12]],[[8297,4339],[48,2],[44,0],[36,2]],[[8425,4343],[59,-40],[47,-10],[69,26],[57,52],[49,26]],[[8706,4397],[0,-255]],[[8706,4142],[-14,-10],[4,-24],[-4,-44],[-10,-50],[-9,-41],[-2,-19],[-26,-44],[-11,-9],[-13,-6],[-11,5],[-21,-33],[-4,-34],[-3,-19],[-9,-8],[-1,22],[-13,4],[-13,-41],[-2,-42],[-12,-27],[-24,-5]],[[8405,3371],[142,-6],[11,1],[37,3]],[[7609,5299],[96,40],[58,-65]],[[7763,5274],[0,-1],[6,4],[15,-7],[8,-34],[84,-34],[55,-34],[27,-1],[18,-2],[5,-31],[23,-12],[8,-27],[-5,-15],[-5,-31],[21,-2],[-7,-31],[13,-22],[2,-1]],[[8031,4993],[0,-2],[-38,-69],[13,-23],[70,123],[15,1],[-50,-147],[-22,-133],[-18,-108],[12,-93],[-2,-46]],[[8805,3966],[-1,-97],[15,18]],[[8972,3890],[-10,-35],[-5,4],[-44,47],[-2,-11],[-6,-40],[-8,-13],[-3,-6],[-8,-10],[-11,-14],[-14,-25],[-7,8],[-4,-10],[-7,-17],[-9,-24],[-5,-17],[-13,-8],[-15,14],[-12,15],[-9,-42],[-8,-15],[-9,-19],[-4,-28],[-19,-25],[-13,-33],[2,-22],[-1,-7],[-1,-11],[-15,-14],[-14,2],[-12,-13],[-10,6],[-1,-6],[-1,-11],[-6,-2],[-30,-14],[-11,14],[-9,-6],[-22,-17],[-14,15],[-2,4],[-9,13],[-4,33]],[[8706,4142],[0,-176],[99,0]],[[9157,3967],[7,15],[9,8],[20,-9]],[[9193,3981],[-14,-20],[3,-37]],[[9182,3924],[20,-103],[23,-34],[2,-63]],[[9193,3981],[20,17],[7,12],[22,25],[13,21],[-30,49],[-2,20],[-10,6],[0,31],[11,23],[-5,25],[15,17],[17,43],[12,8]],[[9263,4278],[73,-75],[-4,-40]],[[9332,4163],[-29,-53],[28,-9],[-21,-137],[-69,-147],[-7,49],[-21,10],[-31,48]],[[9361,4202],[-6,-5],[140,36],[28,-36],[-133,-57],[-61,-1],[3,24]],[[9263,4278],[-16,14],[-16,13],[-6,27],[2,21],[-11,18],[-21,30],[-129,0],[-139,0],[-149,0],[0,52]],[[8778,4453],[82,113],[-2,19],[-8,57],[45,22],[75,-7],[78,-16],[71,63],[-5,74],[-10,27],[98,133],[43,35],[145,1]],[[8706,4397],[72,55],[0,1]],[[9605,5031],[41,30],[34,86],[29,149],[73,144],[31,-51],[64,33],[43,-55],[0,-260],[62,-108],[17,-62],[-102,-93],[-98,-66],[-101,-56],[-51,-113]],[[8104,4354],[19,27],[39,93],[3,125],[-32,118],[5,81],[25,94],[24,64],[38,45],[9,-63],[16,94],[22,19],[13,73],[81,-39],[71,-74],[7,-87],[-8,-86],[-53,-77],[5,-48],[19,-1],[59,84],[35,-20],[18,-110],[4,-78],[-45,-105],[-20,-67],[-33,-73]],[[8031,4993],[-2,1],[-13,22],[7,31],[-21,2],[5,31],[5,15],[-8,27],[-23,12],[-5,31],[-18,2],[-27,1],[-55,34],[-84,34],[-8,34],[-15,7],[-6,-4],[0,1],[0,-1]],[[7763,5273],[74,49],[77,62],[84,63],[-31,-101],[54,-24],[67,-73],[85,43],[94,16],[20,-53],[29,-8],[6,19],[-6,-19],[25,-6],[48,-76],[-84,-17],[-3,1],[-75,20],[-75,-38],[-65,-17],[-56,-121]],[[1791,7283],[-95,-73],[-49,50],[-14,89],[86,68],[51,29],[63,-13],[41,-59],[-83,-91]],[[592,7816],[-58,-30],[-63,36],[-58,52],[94,32],[76,-17],[9,-73]],[[5,8554],[59,-36],[60,19],[77,-50],[94,-25],[-8,-21],[-72,-40],[-72,41],[-37,35],[-84,-11],[-22,16],[5,72]],[[1595,9958],[69,-86],[42,37],[161,-11],[-5,-44],[145,-32],[98,19],[201,-61],[183,-18],[74,-24],[127,31],[144,-58],[104,-26],[-1,-708],[0,-1086],[94,-5],[93,-53],[66,-84],[85,-125],[93,107],[95,61],[51,-98],[64,-78],[88,-86],[59,-137],[98,-217],[162,-122],[3,-120],[-53,-92],[-53,72],[-84,60],[-27,167],[-123,154],[-51,180],[-92,12],[-151,5],[-112,55],[-197,198],[-92,36],[-167,68],[-132,-16],[-187,87],[-114,82],[-106,-41],[20,-132],[-53,-12],[-110,-40],[-84,-65],[-106,-40],[-13,112],[43,187],[101,59],[-26,48],[-122,-106],[-65,-127],[-137,-136],[69,-93],[-90,-137],[-102,-79],[-96,-58],[-23,-85],[-149,-98],[-30,-90],[-112,-81],[-65,14],[-89,-53],[-97,-65],[-80,-64],[-163,-54],[-15,32],[104,89],[93,59],[102,104],[118,22],[47,78],[133,114],[21,38],[70,68],[17,144],[48,113],[-110,-58],[-30,33],[-52,-70],[-62,97],[-26,-68],[-36,95],[-95,-77],[-59,1],[-8,113],[17,70],[-61,68],[-124,-37],[-81,90],[-65,46],[0,108],[-74,81],[37,110],[78,106],[34,98],[77,14],[66,-31],[77,92],[69,-16],[73,59],[-18,87],[-54,34],[71,74],[-59,-2],[-101,-42],[-29,-42],[-75,42],[-135,-21],[-140,46],[-40,76],[-120,111],[134,80],[212,93],[79,0],[-13,-95],[201,7],[-77,118],[-118,73],[-67,95],[-92,81],[-131,61],[53,100],[170,6],[120,87],[23,93],[97,90],[93,22],[181,85],[88,-13],[146,102],[145,-41]],[[9030,3816],[3,-6],[2,-5],[3,-5],[0,-5],[-1,-6]],[[9042,3684],[66,-61],[4,-182],[27,-13],[10,-66]],[[9163,3626],[-29,-130],[8,-7],[54,152]],[[5984,4211],[1,-763]]]}
  });

  // Ugly, but my JavaScript is weak.  When in handler functions
  // this seems to be the only way to get linked back to the
  // this.x variables.
  this.chart = this;
 }

 USStateMap.prototype.render = function()
 {
  this.update();
 };

 USStateMap.prototype.update = function()
 {
  // If we need to call super:
 	//DexComponent.prototype.update.call(this);
 	var chart = this.chart;
  var config = this.config;

  var path = d3.geo.path();

  console.dir(this);

  var chartContainer = config.parent.append("g")
    .attr("id", "USStateMapContainer")
    .attr("transform", "translate(" + config.xoffset + "," + config.yoffset + ")")
    .attr("width", config.width)
    .attr("height", config.height);


  chartContainer.selectAll("path")
      .data(topojson.object(config.topology, config.topology.objects.states).geometries)
    .enter().append("path")
      .attr("d", path)
      .on("click", function(d)
      {
      	chart.notify({ type: "click", state : d.id });
      })
 };
	BarChart.prototype = new DexComponent();
	BarChart.constructor = BarChart;

	function BarChart(userConfig)
	{
	DexComponent.call(this, userConfig,
	{
	parent : null,
	labels : [ "X", "Y" ],
	id : "BarChart",
	data : [[0,0],[1,1],[2,4],[3,9],[4,16]],
	width : 600,
	height : 400,
	xi : 0,
	yi : [1],
	xoffset : 0,
	yoffset : 0,
	barColors : d3.scale.category20(),
	yaxisLabel : "Y",
	yaxisLabelFontSize : 10,
	xaxisLabel : "X",
	xaxisLabelFontSize : 10,
	yaxisFormat : ".f",
	xmin : null,
	ymin : null
	});

	// Ugly, but my JavaScript is weak. When in handler functions
	// this seems to be the only way to get linked back to the
	// this.x variables.
	this.chart = this;
	}

	BarChart.prototype.render = function()
	{
	this.update();
	};

	BarChart.prototype.update = function()
	{
	// If we need to call super:
	//DexComponent.prototype.update.call(this);
	var chart = this.chart;
	var config = this.config;

	var yaxisFormat = d3.format(config.yaxisFormat);

	// X domain across groups.
	var x = d3.scale.ordinal()
	.domain(d3.range(config.data.length))
	.rangeBands([0, config.width], .1);

	// X domain within groups.
	var x1 = d3.scale.ordinal()
	.domain(d3.range(config.yi.length))
	.rangeBands([0, x.rangeBand()]);

	// Y domain.
	var y = d3.scale.linear()
	.range([config.height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(yaxisFormat);

	var chartContainer = config.parent.append("g")
	.attr("id", config.id)
	.attr("transform", "translate(" + config.xoffset + "," + config.yoffset + ")");

	var data = config.data;

	// Translate all of the y data columns to numerics.
	data.forEach(function(d)
	{
	config.yi.forEach(function(c)
	{
	d[c] = +d[c];
	});
	});

	var yextent = dex.matrix.extent(data, config.yi);
	x.domain(data.map(function(d) { return d[config.xi]; }));
	//y.domain([0, d3.max(data, function(d) { return d[1]; })]);

	if (config.ymin != null)
	{
	yextent[0] = config.ymin;
	}
	if (config.ymax != null)
	{
	yextent[1] = config.ymax;
	}

	// Establish the domain of the y axis.
	y.domain(yextent);

	// X Axis
	chartContainer.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + config.height + ")")
	.call(xAxis)
	.append("text")
	.attr("y", 20)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.style("font-size", config.xaxisLabelFontSize)
	.text(config.xaxisLabel);

	// Y Axis
	chartContainer.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.style("font-size", config.yaxisLabelFontSize)
	.text(config.yaxisLabel);

	var barData = dex.matrix.combine(
	dex.matrix.slice(data, [config.xi]),
	dex.matrix.slice(data, config.yi)
	);

	console.log("BarChart().BarData()")
	console.dir(barData);

	//console.dir(dex.matrix.slice(data, config.yi));
	//console.dir(x.rangeBand());

	chartContainer.selectAll(".bar")
	.data(barData)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { //console.dir(d);
	return x(d[0]) + x1(d[3]) })
	.style("fill", function(d) { return config.barColors(d[3]);})
	.attr("width", x.rangeBand()/config.yi.length)
	.attr("y", function(d) { return y(d[1]); })
	.attr("height", function(d) { return config.height - y(d[1]); });

	// Add Text Labels
	/*
	chartContainer.selectAll(".label")
	.data(barData)
	.enter().append("text")
	.attr("x", function(d) { return x(d[0]) + x1(d[3]) })
	.attr("y", function(d) { return y(d[1]); })
	.attr("text-anchor", "end")
	//.attr("transform", "rotate(90)")
	.attr("dy", ".71em")
	.style("font-size", 12)
	.text(function(d) { console.log("TEXTD: " + d); return config.labels[d[3]]; });
	*/
	};
	function DexComponent(userConfig, defaultConfig)
	{
	// This holds our event registry.
	this.registry = {};
	this.debug = false;

	//console.log("Instantiating dex component...");

	// Instantiate from another component
	if (userConfig instanceof DexComponent)
	{
	this.config = getConfig(userConfig.config, defaultConfig);
	}
	else
	{
	this.config = getConfig(userConfig, defaultConfig);
	//console.dir(this.config);
	}
	}

	DexComponent.prototype.attr = function(name, value)
	{
	if (arguments.length == 1)
	{
	return this.config[name];
	}
	else if (arguments.length == 2)
	{
	this.config[name] = value;
	}
	return this;
	};

	DexComponent.prototype.dump = function(message)
	{
	console.log("========================");
	if (arguments.length == 1)
	{
	console.log(message);
	console.log("========================");
	}
	console.log("=== CONFIG ===");
	console.dir(this.config);
	console.log("=== REGISTRY ===");
	console.dir(this.registry);
	};

	DexComponent.prototype.addListener = function(eventType, target, method)
	{
	var targets;

	if (this.debug)
	{
	console.log("REGISTERING TARGET: " + eventType + "="+ target);
	}
	if (!this.registry.hasOwnProperty(eventType))
	{
	this.registry[eventType] = [];
	}

	this.registry[eventType].push({ target : target, method : method });
	//console.log("this.registry");
	//console.dir(eventthis.registry);
	};

	DexComponent.prototype.notify = function(event)
	{
	var targets;

	if (this.debug)
	{
	console.log("notify: " + event.type);
	}

	if (!this.registry.hasOwnProperty(event.type))
	{
	return;
	}

	event.source = this;
	targets = this.registry[event.type];
	//console.log("TARGETS: " + targets.length);
	//console.dir(targets);
	for (var i=0; i<targets.length; i++)
	{
	//console.dir("Calling Target: " + targets[i]["target"]);
	targets[i]["method"](event, targets[i]["target"]);
	}
	};

	DexComponent.prototype.render = function()
	{
	console.log("Rendering component...");
	};

	DexComponent.prototype.update = function()
	{
	console.log("Updating component...");
	};
	var dex =
	{
	version : "0.6",
	matrix : {},
	array : {},
	csv : {}
	};

	function getConfig(userConfig, defaultConfig)
	{
	var config = clone(defaultConfig);
	//console.dir(config);
	//console.dir(defaultConfig);
	// If we have parameters, override the defaults.
	if (userConfig !== 'undefined')
	{
	for (var option in userConfig)
	{
	config[option] = userConfig[option];
	}
	}

	//console.dir(config);
	return config;
	}

	dex.array.slice = function(array, rows)
	{
	var slice = [];

	for (var i = 0; i<rows.length; i++)
	{
	slice.push(array[rows[i]]);
	}

	return slice;
	}

	dex.matrix.slice = function(matrix, columns, rows)
	{
	var slice = [];

	if (arguments.length === 3)
	{
	for (var ri=0; ri < rows.length; ri++)
	{
	slice.push(dex.array.slice(matrix[rows[ri]]));
	}
	}
	else
	{
	for (var ri=0; ri < matrix.length; ri++)
	{
	//console.log("RI: " + ri);
	//console.dir(dex.array.slice(matrix[ri], columns));
	slice.push(dex.array.slice(matrix[ri], columns));
	}
	}
	return slice;
	}

	dex.matrix.flatten = function(matrix)
	{
	var array = [];
	for (var ri=0; ri<matrix.length; ri++)
	{
	for (var ci=0; ci<matrix[ri].length;ci++)
	{
	array.push(matrix[ri][ci]);
	}
	}
	return array;
	}

	dex.matrix.extent = function(data, indices)
	{
	var values = data;
	if (arguments.length === 2)
	{
	values = dex.matrix.slice(data, indices);
	return d3.extent(dex.matrix.flatten(values));
	}
	}

	// Combine each column in matrix1 with each column in matrix2.
	dex.matrix.combine = function(matrix1, matrix2)
	{
	var result = [];

	// Iterate over the rows in matrix1:
	for (var ri=0; ri<matrix1.length; ri++)
	{
	// Iterate over the columns in matrix2:
	for (var oci=0; oci<matrix1[ri].length; oci++)
	{
	// Iterate over the columns in matrix2:
	for (var ici=0; ici<matrix2[ri].length; ici++)
	{
	result.push([matrix1[ri][oci], matrix2[ri][ici], oci, ici]);
	}
	}
	}
	return result;
	}

	dex.csv.createMap = function(header, data, keyIndex)
	{
	var map = {};

	for (var ri=0; ri<data.length; ri++)
	{
	if (data[ri].length == header.length)
	{
	var rowMap = {};
	for (var ci=0; ci<header.length; ci++)
	{
	rowMap[header[ci]] = data[ri][ci];
	}
	map[data[ri][keyIndex]] = rowMap;
	}
	}
	return map;
	}

	dex.csv.createRowMap = function(header, data, keyIndex)
	{
	var map = {};

	for (var ri=0; ri<data.length; ri++)
	{
	if (data[ri].length == header.length)
	{
	map[data[ri][keyIndex]] = data[ri];
	}
	}
	return map;
	}

	function getExtent(array, indices)
	{
	var values = getArrayValues(array, indices);
	var max = Math.max.apply(null, values);
	var min = Math.min.apply(null, values);
	console.log("EXTENT:");
	console.dir(values);
	console.dir([min, max]);
	return [ min, max ];
	}

	function clone(obj)
	{
	if (obj === null \|\| typeof obj !== 'object')
	{
	return obj;
	}

	var temp = obj.constructor();
	// give temp the original obj's constructor
	for (var key in obj)
	{
	temp[key] = clone(obj[key]);
	}

	return temp;
	}

	/* Dex Utilities */
	function colorToHex(color)
	{
	if (color.substr(0, 1) === '#')
	{
	return color;
	}
	//console.log("COLOR: " + color)
	var digits = /rgb\((\d+),(\d+),(\d+)\)/.exec(color);
	//console.log("DIGITS: " + digits);
	var red = parseInt(digits[1]);
	var green = parseInt(digits[2]);
	var blue = parseInt(digits[3]);

	var rgb = blue \| (green << 8) \| (red << 16);
	return '#' + rgb.toString(16);
	};

	function isNumber(n)
	{
	return !isNaN(parseFloat(n)) && isFinite(n);
	}

	function getHeader(data)
	{
	return data[0];
	}

	function getColumn(data, columnNumber)
	{
	var values = [];

	for (var i=1; i<data.length; i++)
	{
	values.push(data[i][columnNumber]);
	}

	return values;
	}

	function getNumericHeaders(data)
	{
	var header = getHeader(data);
	var possibleNumeric = {};
	var i, j;
	var numericHeaders = [];

	for (i=0; i<header.length; i++)
	{
	possibleNumeric[header[i]] = true;
	}

	// Iterate thru the data, skip the header.
	for (i=1; i<data.length; i++)
	{
	for (j=0; j<data[i].length && j<header.length; j++)
	{
	if (possibleNumeric[header[j]] && !isNumber(data[i][j]))
	{
	possibleNumeric[header[j]] = false;
	}
	}
	}

	for (i=0; i<header.length; i++)
	{
	if (possibleNumeric[header[i]])
	{
	numericHeaders.push(header[i]);
	}
	}

	return numericHeaders;
	}

	function getNumericIndices(data)
	{
	var header = getHeader(data);
	var possibleNumeric = {};
	var i, j;
	var numericIndices = [];

	for (i=0; i<header.length; i++)
	{
	possibleNumeric[header[i]] = true;
	}

	// Iterate thru the data, skip the header.
	for (i=1; i<data.length; i++)
	{
	for (j=0; j<data[i].length && j<header.length; j++)
	{
	if (possibleNumeric[header[j]] && !isNumber(data[i][j]))
	{
	possibleNumeric[header[j]] = false;
	}
	}
	}

	for (i=0; i<header.length; i++)
	{
	if (possibleNumeric[header[i]])
	{
	numericIndices.push(i);
	}
	}

	return numericIndices;
	}

	function isNumericColumn(data, columnNum)
	{
	for (var i=1; i<data.length; i++)
	{
	if (!isNumber(data[i][columnNum]))
	{
	return false;
	}
	}
	return true;
	}

	function getMax(data, columnNum)
	{
	var maxValue = data[1][columnNum];

	if (isNumericColumn(data, columnNum))
	{
	maxValue = parseFloat(data[1][columnNum]);
	for (var i=2; i<data.length; i++)
	{
	if (maxValue < parseFloat(data[i][columnNum]))
	{
	maxValue = parseFloat(data[i][columnNum]);
	}
	}
	}
	else
	{
	for (var i=2; i<data.length; i++)
	{
	if (maxValue < data[i][columnNum])
	{
	maxValue = data[i][columnNum];
	}
	}
	}

	return maxValue;
	}

	function getMin(data, columnNum)
	{
	var minValue = data[1][columnNum];

	if (isNumericColumn(data, columnNum))
	{
	minValue = parseFloat(data[1][columnNum]);
	for (var i=2; i<data.length; i++)
	{
	if (minValue > parseFloat(data[i][columnNum]))
	{
	minValue = parseFloat(data[i][columnNum]);
	}
	}
	}
	else
	{
	for (var i=2; i<data.length; i++)
	{
	if (minValue > data[i][columnNum])
	{
	minValue = data[i][columnNum];
	}
	}
	}

	return minValue;
	}

	function getJsonFromCsv(data)
	{
	var header = getHeader(data);
	var i,j;
	var json = [];

	for (i=1;i<data.length;i++)
	{
	var row = {};
	for (j=0;j<data[i].length && j<header.length;j++)
	{
	row[header[j]] = data[i][j];
	}
	json.push(row);
	}

	return json;
	}

	function getFill(colorScheme, numColors)
	{
	if (colorScheme == "1")
	{
	return d3.scale.category10();
	}
	else if (colorScheme == "2")
	{
	return d3.scale.category20();
	}
	else if (colorScheme == "3")
	{
	return d3.scale.category20b();
	}
	else if (colorScheme == "4")
	{
	return d3.scale.category20c();
	}
	else if (colorScheme == "HiContrast")
	{
	return d3.scale.ordinal().range(colorbrewer[colorScheme][9]);
	}
	else if (colorScheme in colorbrewer)
	{
	//console.log("LENGTH: " + len);

	var effColors = Math.pow(2, Math.ceil(Math.log(numColors) / Math.log(2)));
	//console.log("EFF LENGTH: " + len);

	// Find the best cmap:
	if (effColors > 128)
	{
	effColors = 256;
	}

	for (var c=effColors; c >= 2; c--)
	{
	if (colorbrewer[colorScheme][c])
	{
	return d3.scale.ordinal().range(colorbrewer[colorScheme][c]);
	}
	}
	for (var c=effColors; c <= 256; c++)
	{
	if (colorbrewer[colorScheme][c])
	{
	return d3.scale.ordinal().range(colorbrewer[colorScheme][c]);
	}
	}
	return d3.scale.category20();
	}
	else
	{
	return d3.scale.category20();
	}
	}

	function OrdinalHorizontalLegend(config)
	{
	// Default parameters.
	var p =
	{
	labels : [ "A", "B", "C" ],
	parent : null,
	xoffset : 10,
	yoffset : 20,
	cellWidth : 30,
	cellHeight : 20,
	tickLength : 25,
	caption : "Legend",
	color : d3.scale.category20c(),
	captionFontSize : 14,
	captionXOffset : 0,
	captionYOffset : -6
	};

	// If we have parameters, override the defaults.
	if (config !== 'undefined')
	{
	for (var prop in config)
	{
	p[prop] = config[prop];
	}
	}

	function chart()
	{
	// Create our x scale
	var x = d3.scale.ordinal()
	.domain(p.labels)
	.range(d3.range(p.labels.length).map(function(i) { return i * p.cellWidth; }));

	// Create the x axis.
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickSize(p.tickLength)
	.tickPadding(10)
	.tickValues(p.labels)
	.tickFormat(function(d) { return d; });

	// Append a graphics node to the supplied svg node.
	var g = p.parent.append("g")
	.attr("class", "key")
	.attr("transform", "translate(" + p.xoffset + "," + p.yoffset + ")");

	// Draw a colored rectangle for each ordinal range.
	g.selectAll("rect")
	.data(p.labels)
	.enter().append("rect")
	.attr("height", p.cellHeight)
	.attr("x", function(d, i) { return x(i); })
	.attr("width", function(d) { return p.cellWidth; })
	.style("fill", function(d, i)
	{
	return p.color(i);
	});

	// Add the caption.
	g.call(xAxis).append("text")
	.attr("class", "caption")
	.attr("y", p.captionYOffset)
	.attr("x", p.captionXOffset)
	.text(p.caption)
	.style("font-size", p.captionFontSize);

	};

	// Use this routine to retrieve and update attributes.
	chart.attr = function(name, value)
	{
	if (arguments.length == 1)
	{
	return p[name];
	}
	else if (arguments.length == 2)
	{
	p[name] = value;
	}
	return chart;
	}

	chart.update = function()
	{
	}

	return chart;
	}

	function VerticalLegend(config)
	{
	// Default parameters.
	var p =
	{
	labels : [ "A", "B", "C" ],
	parent : null,
	xoffset : 50,
	yoffset : 30,
	cellWidth : 30,
	cellHeight : 20,
	tickLength : 5,
	caption : "Legend",
	color : d3.scale.category20c(),
	captionFontSize : 14,
	captionXOffset : -30,
	captionYOffset : -20
	};

	// If we have parameters, override the defaults.
	if (config !== 'undefined')
	{
	for (var prop in config)
	{
	p[prop] = config[prop];
	}
	}

	function chart()
	{
	// Create our x scale
	var y = d3.scale.ordinal()
	.domain(p.labels)
	.range(d3.range(p.labels.length).map(function(i) { return i * p.cellHeight; }));

	// Create the x axis.
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickSize(p.tickLength)
	.tickPadding(10)
	.tickValues(p.labels)
	.tickFormat(function(d) { return d; });

	// Append a graphics node to the supplied svg node.
	var g = p.parent.append("g")
	.attr("class", "key")
	.attr("transform", "translate(" + p.xoffset + "," + p.yoffset + ")");

	// Draw a colored rectangle for each ordinal range.
	g.selectAll("rect")
	.data(p.labels)
	.enter().append("rect")
	.attr("height", p.cellHeight)
	.attr("y", function(d, i) { return y(i); })
	.attr("width", p.cellWidth)
	.style("fill", function(d, i)
	{
	return p.color(i);
	});

	// Add the caption.
	g.call(yAxis).append("text")
	.attr("class", "caption")
	.attr("y", p.captionYOffset)
	.attr("x", p.captionXOffset)
	.text(p.caption)
	.style("font-size", p.captionFontSize);
	};

	// Use this routine to retrieve and update attributes.
	chart.attr = function(name, value)
	{
	if (arguments.length == 1)
	{
	return p[name];
	}
	else if (arguments.length == 2)
	{
	p[name] = value;
	}
	return chart;
	}

	chart.update = function()
	{
	}

	return chart;
	}

	function csvToMapArray(header, data)
	{
	var mapArray = [];

	for (var i=0; i<data.length; i++)
	{
	var row = {};
	for (var j=0; j<header.length; j++)
	{
	row[header[j]] = data[i][j]
	}
	mapArray.push(row);
	}

	return mapArray;
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	fill: #ccc;
	stroke: #fff;
	stroke-width: .5px;
	}

	path:hover {
	fill: red;
	}

	<link href="nv.d3.css" rel="stylesheet" type="text/css">

	</style>
	<body>
	<script src="http://d3js.org/d3.v2.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script src="DexUtils.js"></script>
	<script src="DexComponent.js"></script>
	<script src="VerticalLegend.js"></script>
	<script src="BarChart.js"></script>
	<script src="USStateMap.js"></script>
	<script src="nv.d3.js"/></script>
	<script src="src/utils.js"></script>
	<script src="src/tooltip.js"></script>
	<script src="src/models/legend.js"></script>
	<script src="src/models/axis.js"></script>
	<script src="src/models/multiBarHorizontal.js"></script>
	<script src="src/models/multiBarHorizontalChart.js"></script>
	<script src="stream_layers.js"></script>
	<center><h1>State Taxes For Q3 2012</h1></center>
	<script>

	// Create an SVG for our chart.
	var svg = d3.select("body").append("svg")
	.attr("width", 1500)
	.attr("height", 800)
	.append("g")
	.attr("transform", "translate(40,20)");

	// Configure a chart.
	var map = new USStateMap(
	{
	'parent': svg,
	'xoffset': 200
	}
	);



	var labels = [
	"State", "Property Tax", "Sales Tax", "Alcohol", "Amusement", "Insurance", "Gas", "Pari-Mutuels", "Utilities",
	"Tobacco", "Other Sales", "Alcoholic Lic", "Amusement Lic", "Corp Lic", "Hunt/Fish Lic", "Vehicle Lic", "Drivers Lic", "Util Lic",
	"Occ/Biz Lic", "Other Lic", "Income Tax", "Corp Net Inc Tax", "Death/Gift Tax",
	"Doc/Stock Txfer Tax", "Severance Taxes", "Other Taxes", "Total Taxes"];

	var stateData =
	[
	["Alabama", 12, 562, 44, 0, 108, 146, 0, 194, 34, 79, 0, 0, 10, 5, 47, 6, 3, 27, 0, 743, 76, 0, 10, 26, 0, 2134],
	["Alaska", 0, 0, 9, 0, 14, 10, 0, 0, 19, 2, 0, 0, 0, 10, 28, 0, 0, 5, 3, 0, 242, 0, 0, 744, 0, 1088],
	["Arizona", 194, 1193, 15, 0, 109, 199, 0, 5, 81, 25, 1, 0, 17, 6, 44, 8, 5, 30, 0, 893, 176, 0, 0, 7, 0, 3009],
	["Arkansas", 109, 713, 12, 8, 23, 120, 1, 0, 61, 59, 1, 0, 2, 8, 38, 4, 19, 31, 0, 659, 96, 0, 8, 16, 6, 1993],
	["California", 494, 7431, 68, 0, 528, 1403, 4, 160, 162, 1024, 16, 4, 13, 23, 773, 67, 98, 1055, 1, 11565, 1080, 1, 0, 8, 0, 25977],
	["District of Columbia", 934, 261, 1, 0, 2, 6, 0, 36, 10, 16, 0, 0, 0, 0, 9, 2, 0, 7, 12, 369, 84, 10, 99, 0, 0, 1857],
	["Florida", 0, 5031, 103, 34, 5, 828, 3, 714, 96, 158, 2, 0, 25, 3, 272, 84, 14, 48, 2, 0, 440, 0, 433, 11, 0, 8308],
	// This is a test row...
	//["Florida",0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],
	["Georgia", 2, 1315, 37, 0, 95, 238, 0, 0, 54, 0, 0, 4, 12, 6, 81, 16, 0, 18, 2, 2276, 105, 0, 0, 0, 0, 4262],
	["Illinois", 11, 1994, 74, 168, 66, 330, 2, 389, 156, 435, 3, 5, 74, 10, 425, 25, 9, 83, 5, 3620, 562, 97, 13, 0, 0, 8555],
	["Indiana", 0, 1726, 12, 168, 56, 203, 1, 5, 111, 3, 3, 1, 2, 3, 24, 44, 0, 8, 2, 1180, 238, 41, 0, 0, 0, 3831],
	["Kansas", 5, 729, 30, 0, 4, 113, 0, 0, 25, 10, 1, 0, 5, 3, 38, 6, 1, 0, 1, 704, 64, 1, 0, 29, 0, 1768],
	["Kentucky", 66, 761, 30, 0, 31, 207, 1, 17, 66, 164, 2, 0, -2, 7, 39, 4, 0, 2, 1, 902, 160, 9, 1, 74, 0, 2543],
	["Louisiana", 12, 689, 14, 176, 175, 175, 1, 2, 47, 17, 0, 0, 25, 8, 7, 2, 2, 17, 1, 697, 78, 0, 0, 201, 0, 2346],
	["Maine", 21, 210, 5, 14, 13, 46, 1, 12, 37, 14, 1, 0, 1, 4, 25, 3, 0, 24, 2, 312, 37, 6, 3, 0, 0, 792],
	["Maryland", 486, 685, 5, 2, 113, 85, 0, 33, 83, 317, 0, 0, 9, 5, 107, 7, 0, 36, 0, 1109, 245, 48, 34, 0, 10, 3419],
	["Massachusetts", 1, 1323, 22, 1, 90, 176, 0, 5, 143, 114, 0, 0, 2, 1, 67, 17, 0, 57, 21, 2908, 495, 73, 40, 0, 28, 5584],
	["Michigan", 507, 2923, 44, 39, 137, 439, 1, 12, 330, 350, -2, 0, 4, 18, 224, 16, 3, 58, 48, 2454, 195, 0, 79, 20, 0, 7899],
	["Minnesota", 16, 1239, 15, 9, 76, 240, 0, 0, 85, 673, 0, 1, 2, 13, 150, 11, 0, 73, 17, 2015, 251, 38, 26, 10, 0, 4961],
	["Mississippi", 0, 645, 11, 33, 26, 108, 0, 3, 39, 26, 1, 4, 24, 2, 36, 8, 9, 19, 9, 361, 67, 0, 0, 25, 0, 1456],
	["Missouri", 1, 808, 9, 101, 58, 183, 0, 0, 26, 34, 0, 0, 10, 5, 59, 5, 6, 37, 19, 1206, 70, 0, 1, 0, 0, 2637],
	["Montana", 12, 0, 7, 14, 15, 41, 0, 12, 24, 9, 0, 4, 0, 9, 25, 2, 0, 14, 1, 232, 42, 0, 0, 69, 0, 533],
	["Nebraska", 0, 379, 8, 1, 18, 90, 0, 14, 17, 43, 0, 0, 0, 3, 18, 1, 0, 3, 0, 475, 50, 0, 2, 1, 0, 1122],
	["Nevada", 11, 286, 3, 179, 2, 25, 0, 4, 10, 3, 0, 3, 15, 1, 29, 5, 0, 42, 0, 0, 0, 0, 2, 0, 0, 618],
	["New Hampshire", 7, 0, 4, 0, 0, 36, 0, 20, 56, 93, 1, 0, 0, 2, 22, 3, 2, 29, 0, 15, 124, 0, 26, 0, 0, 441],
	["New Jersey", 0, 1307, 21, 62, 15, 90, 0, 98, 184, 110, 1, 21, 49, 1, 148, 13, 0, 112, 0, 1807, 443, 137, 56, 0, 0, 4676],
	["New Mexico", 17, 152, 7, 5, 3, 17, 0, 3, 8, 25, 0, 0, 4, 6, 3, 1, 0, 5, 19, 78, 3, 0, 0, 106, 1, 463],
	["North Dakota", 0, 335, 2, 1, 8, 57, 0, 3, 8, 37, 0, 0, 0, 2, 22, 1, 0, 14, 0, 98, 40, 0, 0, 513, 0, 1142],
	["Ohio", 0, 1900, 26, 0, 9, 447, 2, 292, 162, 2, 12, 105, 413, 5, 138, 63, 1, 124, 3, 2492, 47, 2, 0, 4, 0, 6249],
	["Oregon", 8, 0, 5, 0, 20, 181, 1, 2, 65, 0, 1, 0, 7, 13, 163, 6, 2, 65, 1, 1518, 114, 26, 1, 2, 0, 2200],
	["Pennsylvania", 4, 2327, 79, 365, 5, 539, 3, 36, 287, 30, 4, 6, 129, 31, 198, 16, 23, 218, 3, 2342, 401, 181, 105, 0, 4, 7337],
	["Rhode Island", 0, 233, 3, 0, 2, 25, 0, 3, 37, 138, 0, 0, 1, 0, 14, 1, 0, 9, 0, 267, 21, 7, 2, 0, 2, 767],
	["South Carolina", 0, 517, 28, 9, 37, 135, 0, 25, 4, 91, 3, 0, 13, 9, 21, 9, 0, 36, 3, 529, 53, 0, 5, 0, 0, 1526],
	["Vermont", 10, 88, 6, 0, 8, 27, 0, 0, 20, 91, 0, 0, 0, 1, 17, 2, 0, 2, 0, 147, 24, 7, 2, 0, 1, 456],
	["Virginia", 0, 794, 24, 0, 107, 293, 0, 27, 47, 170, 3, 0, 19, 7, 112, 17, 0, 58, 1, 2580, 162, 0, 91, 0, 25, 4535],
	["Washington", 575, 2788, 62, 0, 106, 260, 1, 82, 122, 109, 3, 2, 7, 10, 115, 19, 1, 73, 109, 0, 0, 22, 129, 7, 0, 4602],
	["West Virginia", 2, 314, 5, 17, 36, 112, 1, 37, 27, 120, 0, 1, 1, 0, 1, 27, 0, 3, 1, 434, 68, 0, 2, 116, 0, 1326],
	["Wisconsin", 0, 762, 9, 0, 22, 183, 0, 41, 118, 114, 0, 0, 4, 15, 96, 11, 0, 74, 1, 1535, 236, 0, 8, 0, 2, 3231],
	["Wyoming", 14, 191, 1, 0, 4, 16, 0, 2, 7, 0, 0, 0, 3, 20, 20, 1, 0, 6, 0, 0, 0, 0, 0, 0, 1, 287],
	["Colorado", 0, 617, 10, 16, 46, 166, 0, 3, 52, 8, 2, 0, 4, 16, 121, 8, 0, 9, 0, 1220, 155, 0, 0, 33, 0, 2489],
	["Connecticut", 0, 482, 8, 99, 39, 84, 2, 5, 89, 8, 2, 0, 7, 1, 49, 11, 0, 28, 0, 978, 65, 31, 24, 0, 1, 2014],
	["Hawaii", 0, 739, 11, 0, 32, 24, 0, 42, 29, 39, 0, 0, 0, 0, 36, 0, 10, 5, 0, 435, 26, 1, 12, 0, 0, 1443],
	["Idaho", 0, 350, 2, 0, 12, 64, 0, 1, 13, 3, 0, 0, 0, 10, 28, 3, 8, 11, 1, 288, 39, 0, 0, 2, 1, 837],
	["Iowa", 0, 436, 3, 56, 47, 41, 1, 0, 51, 0, 3, 6, 5, 4, 120, 3, 4, 28, 0, 572, 38, 5, 2, 0, 0, 1428],
	["New York", 0, 3055, 67, 0, 285, 420, 6, 214, 409, 1289, 14, 0, 18, 28, 317, 32, 3, 57, 0, 8737, 922, 258, 227, 0, 306, 16666],
	["North Carolina", 0, 1446, 86, 4, 8, 496, 0, 104, 74, 163, 1, 0, 74, 5, 143, 29, 0, 45, 2, 2688, 294, 18, 11, 0, 0, 5693],
	["Oklahoma", 0, 642, 30, 6, 55, 106, 0, 11, 75, 4, 0, 1, 27, 3, 174, 4, 0, 0, 9, 704, 123, 0, 4, 111, 17, 2105],
	["South Dakota", 0, 207, 4, 0, 15, 42, 0, 2, 17, 18, 0, 0, 1, 8, 17, 1, 0, 20, 9, 0, 11, 0, 0, 3, 0, 377],
	["Tennessee", 0, 1759, 31, 0, 150, 213, 0, 10, 71, 37, 3, 0, 143, 4, 63, 11, 0, 38, 1, 4, 256, 26, 42, 1, 9, 2874],
	["Texas", 0, 6392, 239, 8, 627, 818, 2, 191, 371, 1469, 16, 3, 242, 44, 484, 67, 4, 144, 40, 0, 0, 29, 0, 855, 0, 12044],
	["Utah", 0, 494, 10, 0, 26, 86, 0, 6, 32, 42, 0, 0, 0, 7, 41, 4, 0, 12, 0, 592, 68, 0, 0, 20, 0, 1441],
	["Delaware", 0, 0, 5, 0, 15, 24, 0, 14, 30, 20, 0, 0, 112, 1, 13, 2, 0, 84, 16, 273, 63, 2, 76, 0, 1, 749]
	];

	stateMap = dex.csv.createRowMap(labels, stateData, 0);

	//now get totals for each type of tax
	var taxTotals = [];
	labels.slice(1, labels.length - 1).forEach(function (d, i) { taxTotals.push(d3.sum(stateData, function (dd) { return dd[i] })) })


	//get the data from dexvis in format similar to the nvd3 example
	//this is an intermediate step to get structure
	//key: State
	//values: array
	stateNest = d3.nest()
	.key(function (d) { return d[0]; })
	.rollup(function (d) { return d; })
	.entries(stateData);
	//now get the values in proper structure
	//label : labels[i] from labels array
	//value : amount of taxes
	//eliminate State Name at 0 and Total at last
	stateNest.forEach(function (d) {
	var oldvalues = d.values[0].slice(1, d.values[0].length - 1);
	oldvalues.forEach(function (dd, ii) { d.values[ii] = { "label": labels[ii + 1], "value": dd, "pcttotal": dd / d3.sum(oldvalues) - taxTotals[ii + 1] / d3.sum(taxTotals) }; })
	})
	//end of replacement


	var barChart = new BarChart(
	{
	'parent': svg,
	'height': 200,
	'width': 900,
	'id': "StateStatisticsBarChart",
	'yaxisLabel': "",
	'labels': labels,
	'data': [],
	'xi': 0,
	'yi': d3.range(26).map(function (i) { return i + 1; }),
	'yaxisLabelFontSize': 18,
	'yaxisLabel': 'Taxes',
	'yaxisFormat': ",d",
	'xoffset': 220,
	'yoffset': 500
	}
	);

	//---------------------------------------------------------
	var chart;
	nv.addGraph(function () {
	chart = nv.models.multiBarHorizontalChart()
	.x(function (d) { return d.label })
	.y(function (d) { return d.value })
	.margin({ top: 30, right: 20, bottom: 50, left: 175 })
	.height(500)
	.width(400)
	.showValues(true)
	//.tooltips(true)
	//.barColor(d3.scale.category20().range())
	.showControls(false)
	.showLegend(false)
	.stacked(true);

	chart.yAxis
	.tickFormat(d3.format(',.2f'));

	d3.select('svg').append('g')
	.datum(stateNest)
	.attr("class", "horizontalbar")
	.transition().duration(500)
	.call(chart);

	nv.utils.windowResize(chart.update);

	chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

	return chart;
	});
	//------------------------------------------------------------


	map.addListener("click", barChart, function (chartEvent) {
	if (stateMap[chartEvent.state] != null) {
	d3.selectAll("#StateStatisticsBarChart").remove();
	var bcData = [stateMap[chartEvent.state]];
	barChart.attr("data", bcData)
	barChart.update();

	d3.selectAll('.horizontalbar').remove();
	nv.addGraph(function () {
	chart = nv.models.multiBarHorizontalChart()
	.x(function (d) { return d.label })
	.y(function (d) { return d.pcttotal })
	.margin({ top: 30, right: 20, bottom: 50, left: 175 })
	.height(500)
	.width(400)
	//.showValues(true)
	//.tooltips(true)
	.barColor(d3.scale.category20())
	.showControls(false)
	.showLegend(false)
	.stacked(false);

	chart.yAxis
	.tickFormat(d3.format(',.2f'));

	d3.select('svg').append('g')
	.datum(stateNest.filter(function (d) { return d.key == chartEvent.state }))
	.attr("class", "horizontalbar")
	.transition().duration(500)
	.call(chart);

	nv.utils.windowResize(chart.update);

	chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });

	return chart;
	});
	}


	});


	var legend = new VerticalLegend(
	{
	parent: svg,
	labels: labels.slice(1),
	caption: "",
	xoffset: 120,
	yoffset: 0,
	cellHeight: 25
	});




	barChart.render();
	map.render();
	</script>

	/********************
	* HTML CSS
	*/


	.chartWrap {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}


	/********************
	* TOOLTIP CSS
	*/

	.nvtooltip {
	position: absolute;
	background-color: rgba(255,255,255,1);
	padding: 1px;
	border: 1px solid rgba(0,0,0,.2);
	z-index: 10000;

	font-family: Arial;
	font-size: 13px;

	transition: opacity 500ms linear;
	-moz-transition: opacity 500ms linear;
	-webkit-transition: opacity 500ms linear;

	transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-webkit-transition-delay: 500ms;

	-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	box-shadow: 0 5px 10px rgba(0,0,0,.2);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

	pointer-events: none;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	.nvtooltip.x-nvtooltip,
	.nvtooltip.y-nvtooltip {
	padding: 8px;
	}

	.nvtooltip h3 {
	margin: 0;
	padding: 4px 14px;
	line-height: 18px;
	font-weight: normal;
	background-color: #f7f7f7;
	text-align: center;

	border-bottom: 1px solid #ebebeb;

	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	}

	.nvtooltip p {
	margin: 0;
	padding: 5px 14px;
	text-align: center;
	}

	.nvtooltip span {
	display: inline-block;
	margin: 2px 0;
	}

	.nvtooltip-pending-removal {
	position: absolute;
	pointer-events: none;
	}


	/********************
	* SVG CSS
	*/


	svg {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* Trying to get SVG to act like a greedy block in all browsers */
	display: block;
	width:100%;
	height:100%;
	}


	svg text {
	font: normal 12px Arial;
	}

	svg .title {
	font: bold 14px Arial;
	}

	.nvd3 .nv-background {
	fill: white;
	fill-opacity: 0;
	/*
	pointer-events: none;
	*/
	}

	.nvd3.nv-noData {
	font-size: 18px;
	font-weight: bold;
	}


	/**********
	* Brush
	*/

	.nv-brush .extent {
	fill-opacity: .125;
	shape-rendering: crispEdges;
	}



	/**********
	* Legend
	*/

	.nvd3 .nv-legend .nv-series {
	cursor: pointer;
	}

	.nvd3 .nv-legend .disabled circle {
	fill-opacity: 0;
	}



	/**********
	* Axes
	*/

	.nvd3 .nv-axis path {
	fill: none;
	stroke: #000;
	stroke-opacity: .75;
	shape-rendering: crispEdges;
	}

	.nvd3 .nv-axis path.domain {
	stroke-opacity: .75;
	}

	.nvd3 .nv-axis.nv-x path.domain {
	stroke-opacity: 0;
	}

	.nvd3 .nv-axis line {
	fill: none;
	stroke: #000;
	stroke-opacity: .25;
	shape-rendering: crispEdges;
	}

	.nvd3 .nv-axis line.zero {
	stroke-opacity: .75;
	}

	.nvd3 .nv-axis .nv-axisMaxMin text {
	font-weight: bold;
	}

	.nvd3 .x .nv-axis .nv-axisMaxMin text,
	.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
	.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
	text-anchor: middle
	}



	/**********
	* Brush
	*/

	.nv-brush .resize path {
	fill: #eee;
	stroke: #666;
	}



	/**********
	* Bars
	*/

	.nvd3 .nv-bars .negative rect {
	zfill: brown;
	}

	.nvd3 .nv-bars rect {
	zfill: steelblue;
	fill-opacity: .75;

	transition: fill-opacity 250ms linear;
	-moz-transition: fill-opacity 250ms linear;
	-webkit-transition: fill-opacity 250ms linear;
	}

	.nvd3 .nv-bars rect:hover {
	fill-opacity: 1;
	}

	.nvd3 .nv-bars .hover rect {
	fill: lightblue;
	}

	.nvd3 .nv-bars text {
	fill: rgba(0,0,0,0);
	}

	.nvd3 .nv-bars .hover text {
	fill: rgba(0,0,0,1);
	}


	/**********
	* Bars
	*/

	.nvd3 .nv-multibar .nv-groups rect,
	.nvd3 .nv-multibarHorizontal .nv-groups rect,
	.nvd3 .nv-discretebar .nv-groups rect {
	stroke-opacity: 0;

	transition: fill-opacity 250ms linear;
	-moz-transition: fill-opacity 250ms linear;
	-webkit-transition: fill-opacity 250ms linear;
	}

	.nvd3 .nv-multibar .nv-groups rect:hover,
	.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
	.nvd3 .nv-discretebar .nv-groups rect:hover {
	fill-opacity: 1;
	}

	.nvd3 .nv-discretebar .nv-groups text,
	.nvd3 .nv-multibarHorizontal .nv-groups text {
	font-weight: bold;
	fill: rgba(0,0,0,1);
	stroke: rgba(0,0,0,0);
	}

	/***********
	* Pie Chart
	*/

	.nvd3.nv-pie path {
	stroke-opacity: 0;

	transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
	-moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
	-webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;

	}

	.nvd3.nv-pie .nv-slice text {
	stroke: #000;
	stroke-width: 0;
	}

	.nvd3.nv-pie path {
	stroke: #fff;
	stroke-width: 1px;
	stroke-opacity: 1;
	}

	.nvd3.nv-pie .hover path {
	fill-opacity: .7;
	/*
	stroke-width: 6px;
	stroke-opacity: 1;
	*/
	}

	.nvd3.nv-pie .nv-label rect {
	fill-opacity: 0;
	stroke-opacity: 0;
	}

	/**********
	* Lines
	*/

	.nvd3 .nv-groups path.nv-line {
	fill: none;
	stroke-width: 2.5px;
	/*
	stroke-linecap: round;
	shape-rendering: geometricPrecision;

	transition: stroke-width 250ms linear;
	-moz-transition: stroke-width 250ms linear;
	-webkit-transition: stroke-width 250ms linear;

	transition-delay: 250ms
	-moz-transition-delay: 250ms;
	-webkit-transition-delay: 250ms;
	*/
	}

	.nvd3 .nv-groups path.nv-area {
	stroke: none;
	/*
	stroke-linecap: round;
	shape-rendering: geometricPrecision;

	stroke-width: 2.5px;
	transition: stroke-width 250ms linear;
	-moz-transition: stroke-width 250ms linear;
	-webkit-transition: stroke-width 250ms linear;

	transition-delay: 250ms
	-moz-transition-delay: 250ms;
	-webkit-transition-delay: 250ms;
	*/
	}

	.nvd3 .nv-line.hover path {
	stroke-width: 6px;
	}

	/*
	.nvd3.scatter .groups .point {
	fill-opacity: 0.1;
	stroke-opacity: 0.1;
	}
	*/

	.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
	fill-opacity: 0;
	stroke-opacity: 0;
	}

	.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
	fill-opacity: .5 !important;
	stroke-opacity: .5 !important;
	}


	.nvd3 .nv-groups .nv-point {
	transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
	-moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
	-webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
	}

	.nvd3.nv-scatter .nv-groups .nv-point.hover,
	.nvd3 .nv-groups .nv-point.hover {
	stroke-width: 20px;
	fill-opacity: .5 !important;
	stroke-opacity: .5 !important;
	}


	.nvd3 .nv-point-paths path {
	stroke: #aaa;
	stroke-opacity: 0;
	fill: #eee;
	fill-opacity: 0;
	}



	.nvd3 .nv-indexLine {
	cursor: ew-resize;
	}


	/**********
	* Distribution
	*/

	.nvd3 .nv-distribution {
	pointer-events: none;
	}



	/**********
	* Scatter
	*/

	/* **Attempting to remove this for useVoronoi(false), need to see if it's required anywhere
	.nvd3 .nv-groups .nv-point {
	pointer-events: none;
	}
	*/

	.nvd3 .nv-groups .nv-point.hover {
	stroke-width: 20px;
	stroke-opacity: .5;
	}

	.nvd3 .nv-scatter .nv-point.hover {
	fill-opacity: 1;
	}

	/*
	.nv-group.hover .nv-point {
	fill-opacity: 1;
	}
	*/


	/**********
	* Stacked Area
	*/

	.nvd3.nv-stackedarea path.nv-area {
	fill-opacity: .7;
	/*
	stroke-opacity: .65;
	fill-opacity: 1;
	*/
	stroke-opacity: 0;

	transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
	-moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
	-webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;

	/*
	transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-webkit-transition-delay: 500ms;
	*/

	}

	.nvd3.nv-stackedarea path.nv-area.hover {
	fill-opacity: .9;
	/*
	stroke-opacity: .85;
	*/
	}
	/*
	.d3stackedarea .groups path {
	stroke-opacity: 0;
	}
	*/



	.nvd3.nv-stackedarea .nv-groups .nv-point {
	stroke-opacity: 0;
	fill-opacity: 0;
	}

	.nvd3.nv-stackedarea .nv-groups .nv-point.hover {
	stroke-width: 20px;
	stroke-opacity: .75;
	fill-opacity: 1;
	}



	/**********
	* Line Plus Bar
	*/

	.nvd3.nv-linePlusBar .nv-bar rect {
	fill-opacity: .75;
	}

	.nvd3.nv-linePlusBar .nv-bar rect:hover {
	fill-opacity: 1;
	}


	/**********
	* Bullet
	*/

	.nvd3.nv-bullet { font: 10px sans-serif; }
	.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
	.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
	.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
	.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
	.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
	.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
	.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
	.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
	.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
	.nvd3.nv-bullet .nv-subtitle { fill: #999; }


	.nvd3.nv-bullet .nv-range {
	fill: #999;
	fill-opacity: .4;
	}
	.nvd3.nv-bullet .nv-range:hover {
	fill-opacity: .7;
	}



	/**********
	* Sparkline
	*/

	.nvd3.nv-sparkline path {
	fill: none;
	}

	.nvd3.nv-sparklineplus g.nv-hoverValue {
	pointer-events: none;
	}

	.nvd3.nv-sparklineplus .nv-hoverValue line {
	stroke: #333;
	stroke-width: 1.5px;
	}

	.nvd3.nv-sparklineplus,
	.nvd3.nv-sparklineplus g {
	pointer-events: all;
	}

	.nvd3 .nv-hoverArea {
	fill-opacity: 0;
	stroke-opacity: 0;
	}

	.nvd3.nv-sparklineplus .nv-xValue,
	.nvd3.nv-sparklineplus .nv-yValue {
	/*
	stroke: #666;
	*/
	stroke-width: 0;
	font-size: .9em;
	font-weight: normal;
	}

	.nvd3.nv-sparklineplus .nv-yValue {
	stroke: #f66;
	}

	.nvd3.nv-sparklineplus .nv-maxValue {
	stroke: #2ca02c;
	fill: #2ca02c;
	}

	.nvd3.nv-sparklineplus .nv-minValue {
	stroke: #d62728;
	fill: #d62728;
	}

	.nvd3.nv-sparklineplus .nv-currentValue {
	/*
	stroke: #444;
	fill: #000;
	*/
	font-weight: bold;
	font-size: 1.1em;
	}

	/**********
	* historical stock
	*/

	.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
	stroke-width: 2px;
	}

	.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
	stroke-width: 4px;
	}

	.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
	stroke: #2ca02c;
	}

	.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
	stroke: #d62728;
	}

	.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
	font-weight: bold;
	}

	.nvd3.nv-historicalStockChart .nv-dragTarget {
	fill-opacity: 0;
	stroke: none;
	cursor: move;
	}

	.nvd3 .nv-brush .extent {
	/*
	cursor: ew-resize !important;
	*/
	fill-opacity: 0 !important;
	}

	.nvd3 .nv-brushBackground rect {
	stroke: #000;
	stroke-width: .4;
	fill: #fff;
	fill-opacity: .7;
	}



	/**********
	* Indented Tree
	*/


	/**
	* TODO: the following 3 selectors are based on classes used in the example. I should either make them standard and leave them here, or move to a CSS file not included in the library
	*/
	.nvd3.nv-indentedtree .name {
	margin-left: 5px;
	}

	.nvd3.nv-indentedtree .clickable {
	color: #08C;
	cursor: pointer;
	}

	.nvd3.nv-indentedtree span.clickable:hover {
	color: #005580;
	text-decoration: underline;
	}


	.nvd3.nv-indentedtree .nv-childrenCount {
	display: inline-block;
	margin-left: 5px;
	}

	.nvd3.nv-indentedtree .nv-treeicon {
	cursor: pointer;
	/*
	cursor: n-resize;
	*/
	}

	.nvd3.nv-indentedtree .nv-treeicon.nv-folded {
	cursor: pointer;
	/*
	cursor: s-resize;
	*/
	}
	/* Inspired by Lee Byron's test data generator. */
	function stream_layers(n, m, o) {
	if (arguments.length < 3) o = 0;
	function bump(a) {
	var x = 1 / (.1 + Math.random()),
	y = 2 * Math.random() - .5,
	z = 10 / (.1 + Math.random());
	for (var i = 0; i < m; i++) {
	var w = (i / m - y) * z;
	a[i] += x * Math.exp(-w * w);
	}
	}
	return d3.range(n).map(function() {
	var a = [], i;
	for (i = 0; i < m; i++) a[i] = o + o * Math.random();
	for (i = 0; i < 5; i++) bump(a);
	return a.map(stream_index);
	});
	}

	/* Another layer generator using gamma distributions. */
	function stream_waves(n, m) {
	return d3.range(n).map(function(i) {
	return d3.range(m).map(function(j) {
	var x = 20 * j / m - i / 3;
	return 2 * x * Math.exp(-.5 * x);
	}).map(stream_index);
	});
	}

	function stream_index(d, i) {
	return {x: i, y: Math.max(0, d)};
	}
	USStateMap.prototype = new DexComponent();
	USStateMap.constructor = USStateMap;

	function USStateMap(userConfig)
	{
	DexComponent.call(this, userConfig,
	{
	parent : null,
	labels : [ "X", "Y" ],
	width : 600,
	height : 400,
	xoffset : 0,
	yoffset : 0,
	topology : {"type":"Topology","transform":{"scale":[0.010483693461690662,0.005244681944955843],"translate":[-171.79111060289114,18.91619]},"objects":{"states":{"type":"GeometryCollection","geometries":[{"type":"Polygon","id":"Maryland","arcs":[[0,1,2,3,4,5,6,7,8,9]]},{"type":"Polygon","id":"Minnesota","arcs":[[10,11,12,13,14]]},{"type":"Polygon","id":"Montana","arcs":[[15,16,17,18,19]]},{"type":"Polygon","id":"North Dakota","arcs":[[20,-18,21,-13]]},{"type":"MultiPolygon","id":"Hawaii","arcs":[[[22]],[[23]],[[24]],[[25]],[[26]]]},{"type":"Polygon","id":"Idaho","arcs":[[27,28,29,30,31,32,-16,33]]},{"type":"Polygon","id":"Washington","arcs":[[34,35,-32]]},{"type":"Polygon","id":"Arizona","arcs":[[36,37,38,39,40]]},{"type":"Polygon","id":"California","arcs":[[-37,41,42,43]]},{"type":"Polygon","id":"Colorado","arcs":[[44,45,46,47,48,49]]},{"type":"Polygon","id":"Nevada","arcs":[[-44,50,-29,51,-38]]},{"type":"Polygon","id":"New Mexico","arcs":[[52,-46,53,54,55]]},{"type":"Polygon","id":"Oregon","arcs":[[-51,-43,56,-35,-31,57]]},{"type":"Polygon","id":"Wyoming","arcs":[[58,-34,-20,59,60,-48]]},{"type":"Polygon","id":"Arkansas","arcs":[[61,62,63,64,65,66]]},{"type":"Polygon","id":"Iowa","arcs":[[67,68,69,70,-11,71]]},{"type":"Polygon","id":"Kansas","arcs":[[72,-50,73,74,75,76]]},{"type":"Polygon","id":"Missouri","arcs":[[77,78,-66,79,80,81,-75,82,-69,83]]},{"type":"Polygon","id":"Nebraska","arcs":[[-83,-74,-49,-61,84,-70]]},{"type":"Polygon","id":"Oklahoma","arcs":[[85,-54,-45,-73,86,-80,-65]]},{"type":"Polygon","id":"South Dakota","arcs":[[-85,-60,-19,-21,-12,-71]]},{"type":"Polygon","id":"Louisiana","arcs":[[87,88,89,90,-63]]},{"type":"Polygon","id":"Texas","arcs":[[-91,91,-55,-86,-64]]},{"type":"Polygon","id":"Connecticut","arcs":[[92,93,94,95]]},{"type":"Polygon","id":"Massachusetts","arcs":[[96,-94,97,98,99,100]]},{"type":"Polygon","id":"New Hampshire","arcs":[[101,102,103,104,-100]]},{"type":"Polygon","id":"Rhode Island","arcs":[[-97,105,-95]]},{"type":"Polygon","id":"Vermont","arcs":[[-99,106,107,-102]]},{"type":"Polygon","id":"Alabama","arcs":[[108,109,110,111,112]]},{"type":"Polygon","id":"Florida","arcs":[[-109,113,114]]},{"type":"Polygon","id":"Georgia","arcs":[[-114,-113,115,116,117,118]]},{"type":"Polygon","id":"Mississippi","arcs":[[-62,119,-111,120,121]]},{"type":"Polygon","id":"South Carolina","arcs":[[-118,122,123]]},{"type":"Polygon","id":"Illinois","arcs":[[124,125,-84,-68,126,127]]},{"type":"Polygon","id":"Indiana","arcs":[[128,129,-125,130,131]]},{"type":"Polygon","id":"Kentucky","arcs":[[132,133,134,-78,-126,-130,135]]},{"type":"Polygon","id":"North Carolina","arcs":[[-123,-117,136,137,138]]},{"type":"Polygon","id":"Ohio","arcs":[[-136,-129,139,140,141,142]]},{"type":"Polygon","id":"Tennessee","arcs":[[143,-137,-116,-112,-120,-67,-79,-135]]},{"type":"Polygon","id":"Wisconsin","arcs":[[-127,-72,-15,144,145,146]]},{"type":"Polygon","id":"West Virginia","arcs":[[147,-8,148,-133,-143,149]]},{"type":"Polygon","id":"Delaware","arcs":[[-1,150,151,152]]},{"type":"Polygon","id":"New Jersey","arcs":[[-152,153,154,155]]},{"type":"Polygon","id":"New York","arcs":[[-98,-93,156,-155,157,158,-107]]},{"type":"Polygon","id":"Pennsylvania","arcs":[[-151,-10,-150,-142,159,-158,-154]]},{"type":"Polygon","id":"Maine","arcs":[[-104,160]]},{"type":"MultiPolygon","id":"Michigan","arcs":[[[-140,-132,161]],[[162,163]]]},{"type":"MultiPolygon","id":"Alaska","arcs":[[[164]],[[165]],[[166]],[[167]]]},{"type":"MultiPolygon","id":"Virginia","arcs":[[[-7,168,-5,169,-138,-144,-134,-149]],[[2,170]]]},{"type":"Polygon","id":"District of Columbia","arcs":[[-6,-169]]},{"type":"Polygon","id":"Utah","arcs":[[-52,-28,-59,171,-39]]}]}},"arcs":[[[9157,3967],[7,-243],[63,0]],[[9227,3724],[0,-9],[-31,-74]],[[9196,3641],[-22,-3],[-11,-12]],[[9163,3626],[-15,22],[-12,19],[-10,15],[-12,17],[-2,29],[-2,31],[-2,28],[-2,35],[-3,35],[-7,-32],[-5,-25],[-6,-25],[5,-31],[5,-32],[5,-28],[5,-30],[-12,6],[-13,6],[-17,8],[-21,10]],[[9042,3684],[-1,6],[-4,21],[-16,-9],[-12,11],[10,42],[13,14],[4,4],[1,16]],[[9037,3789],[3,3],[2,3],[3,4],[2,3],[3,4],[-3,4],[-2,4],[-3,4],[-2,4],[-2,3],[-3,-2],[-2,-3],[-3,-4]],[[9030,3816],[-18,22],[-20,11],[1,5],[6,16],[-13,14],[-11,5],[-3,1]],[[8972,3890],[-7,25],[-12,27],[-29,15],[-19,-14],[-10,-15],[-28,8],[-13,-20],[-19,-7],[-16,-22]],[[8819,3887],[-15,-17],[1,96]],[[8805,3966],[88,0],[31,0],[67,1],[82,-1],[84,1]],[[7684,4687],[-125,4],[-139,-2],[-130,-2],[-104,0]],[[7186,4687],[1,178],[-12,183],[-16,15],[-10,29],[5,26],[22,21],[1,28]],[[7177,5167],[1,35],[-6,29],[-8,30],[-5,39],[-1,44],[-3,10],[-4,56],[-1,26],[-2,22],[-4,39],[-12,39],[-11,35],[-2,35],[-1,37],[3,24],[1,23],[-9,27],[-1,19]],[[7112,5736],[197,0],[0,73],[33,1],[17,-105],[29,-32],[67,-12],[97,-30],[93,-59],[77,25],[117,-50],[-97,-63],[-68,-76],[-64,-81],[-1,-28]],[[7609,5299],[-25,-10],[1,-107],[-3,0],[-23,-21],[-21,-18],[-13,-36],[20,-35],[-8,-48],[0,-52],[-3,-42],[28,-36],[12,-2],[31,-27],[10,-13],[7,-21],[24,-32],[32,-29],[3,-15],[1,-46],[2,-22]],[[5790,4879],[-10,10],[-10,27],[-10,5],[-14,-38],[-21,-6],[-54,12],[-3,-19],[-31,7],[-18,-26],[-17,49],[-11,28],[-20,5],[-6,14],[-6,50],[-17,23],[-10,61],[-12,26],[-11,5],[-10,-27],[-19,-22],[-17,18],[-1,49],[11,13],[-8,49],[9,50],[11,42],[-29,2],[-24,27],[-27,59],[-16,30],[-22,18],[-18,30],[0,35],[-25,50],[-7,201]],[[5317,5736],[285,0],[285,0],[285,0],[285,1]],[[6457,5737],[1,-350],[5,-232]],[[6463,5155],[-5,-174]],[[6458,4981],[-159,2],[-171,-1],[-149,2],[-188,-2],[1,-97],[-2,-6]],[[7177,5167],[-181,-10],[-155,0],[-196,-1],[-182,-1]],[[6457,5737],[330,-1],[325,0]],[[1549,31],[-14,-31],[-23,27],[3,53],[-16,70],[4,21],[17,31],[-7,37],[6,18],[7,-3],[37,-33],[17,-16],[15,-26],[25,-67],[-3,-10],[-37,-41],[-31,-30]],[[1498,329],[-32,-14],[-16,40],[-11,16],[-1,12],[9,16],[34,-18],[25,-29],[-8,-23]],[[1433,431],[-3,-21],[-51,5],[7,24],[47,-8]],[[1348,458],[-5,-11],[-7,3],[-33,6],[-12,44],[-4,7],[26,27],[8,-13],[27,-63]],[[1187,584],[-12,-19],[-32,35],[5,14],[15,19],[22,-5],[2,-44]],[[5793,4401],[-284,-1]],[[5509,4400],[-286,1]],[[5223,4401],[1,343],[9,54]],[[5233,4798],[-8,25],[-18,12],[0,31],[14,43],[20,38],[14,61],[13,50],[10,24],[-6,29],[-16,16],[-22,37]],[[5234,5164],[1,33],[-9,30],[-3,265],[0,243]],[[5223,5735],[94,1]],[[5790,4879],[3,-4],[0,-474]],[[5234,5164],[-197,-2],[-34,-20],[-24,9],[-19,-16],[-35,-21],[-43,3],[-22,-16],[-20,-7],[-15,10],[-34,9],[-22,-6],[-37,-21],[-23,0],[-22,7],[-7,27],[-3,32],[-18,36],[-27,11],[-23,17],[-30,1],[-21,1]],[[4558,5218],[-7,110],[-31,164],[-27,88],[11,37],[138,-64],[51,-180],[23,50],[-15,156],[-32,157],[270,0],[284,-1]],[[5443,2632],[13,-1],[10,38],[-17,26],[-3,29],[-5,33],[19,44],[7,87],[29,39],[-18,37],[-12,36],[-8,33],[-5,26],[-2,17]],[[5451,3076],[6,38],[-5,37],[-2,37],[0,41],[-9,26],[7,24],[20,0],[18,-14],[13,-7],[7,29],[4,6],[-1,153]],[[5509,3446],[154,3],[183,0],[139,-1]],[[5985,3448],[0,-1079]],[[5985,2369],[-189,-2],[-218,135],[-144,92],[9,38]],[[5443,2632],[-121,-21],[-108,-15],[-16,98],[-62,109],[-45,23],[-10,55],[-54,9],[-34,52],[-88,19],[-25,31],[-11,104],[-93,192],[-79,265],[3,44],[-42,63],[-74,160],[-13,155],[-51,104],[21,158],[-3,164]],[[4538,4401],[402,-2]],[[4940,4399],[0,-571],[179,-258],[172,-252],[160,-242]],[[6653,3446],[-92,1]],[[6561,3447],[-114,0],[-162,0],[-151,0],[-149,0]],[[5985,3447],[-1,764]],[[5984,4211],[95,0],[96,0],[191,0],[96,0]],[[6462,4211],[190,0],[0,-185],[0,-6]],[[6652,4020],[1,-294],[0,-280]],[[4940,4399],[283,1],[0,1]],[[5509,4400],[0,-954]],[[5985,2369],[0,1078]],[[6561,3447],[0,-95]],[[6561,3352],[0,-499],[0,-359],[-88,0],[-172,0],[-86,0],[1,-16],[11,-31]],[[6227,2447],[-166,0],[0,-78],[-76,0]],[[4538,4401],[-31,146],[38,180],[23,346],[-10,145]],[[5233,4798],[-8,-54],[-2,-343]],[[5984,4211],[-35,0],[-39,2],[-40,1],[-43,1],[-34,1],[0,69],[0,64],[0,52]],[[6458,4981],[3,-389]],[[6461,4592],[1,-381]],[[7777,3070],[-1,-15],[-17,-14],[-1,-28],[-12,-51],[-11,-11],[-17,-26],[-10,-39],[-21,-66],[-2,-46],[11,-50],[-5,-37]],[[7691,2687],[-81,6],[-104,-6],[-92,0]],[[7414,2687],[6,108],[-23,1],[-18,-2],[-5,12]],[[7374,2806],[3,167],[2,185],[-19,202]],[[7360,3360],[116,-3],[105,0],[101,0],[109,-12],[7,-24],[-10,-20],[-11,-21],[-6,-19],[62,0]],[[7833,3261],[-1,-16],[-9,-26],[-17,-19],[-4,-32],[-15,-25],[1,-55],[-11,-18]],[[7740,4497],[6,-14],[11,-10],[4,-21],[15,-15],[10,-16],[-5,-52],[-17,-43],[-7,-14],[-22,-11],[-32,-9],[-9,-33],[12,-15],[4,-29],[-12,-33],[-7,-29],[-24,-28],[-2,-35]],[[7665,4090],[-13,16],[-18,31],[-105,-5],[-109,-1],[-86,0],[-86,0]],[[7248,4131],[-6,34],[3,34],[-2,33],[-10,55],[-6,23],[-7,6],[-1,44],[-6,32],[-17,36],[0,16],[-6,31],[-5,19]],[[7185,4494],[1,18],[-16,21],[8,31],[5,31],[2,20],[-12,26],[0,46],[13,0]],[[7684,4687],[1,-10],[13,-31],[-9,-14],[1,-40],[4,-17],[6,-30],[31,-19],[9,-29]],[[7277,3447],[-172,0],[-172,0],[-95,-1],[-96,0],[-89,0]],[[6652,4020],[167,0],[124,0],[219,0],[132,0]],[[7294,4020],[22,-26],[13,1],[2,-28],[-13,-35],[7,-18],[12,-40]],[[7337,3874],[25,-18],[-1,-205]],[[7361,3651],[-1,-203],[-83,-1]],[[7887,3438],[-3,-19],[2,-30],[-16,-16],[-21,-20]],[[7849,3353],[-2,-18],[-6,-27],[-8,-47]],[[7360,3360],[1,87],[-1,0]],[[7360,3447],[1,204]],[[7361,3651],[1,204],[-25,19]],[[7294,4020],[-13,41],[-15,24],[-16,30],[-2,16]],[[7665,4090],[-9,-48],[9,-57],[16,-39],[18,-32],[22,-26],[9,-9],[8,-36],[1,-32],[11,-8],[18,13],[18,-31],[-5,-35],[-9,-28],[-6,-34],[13,-28],[19,-27],[11,-1],[25,-42],[10,-5],[7,-46],[-4,-29],[13,-47],[10,5],[17,-30]],[[6461,4592],[186,0],[143,0],[191,0],[25,-24],[35,-16],[8,9],[23,-1],[34,2],[25,-24],[26,-16],[4,-16],[8,-9],[16,-3]],[[7374,2806],[-41,37],[-27,21],[-22,-13],[-33,2],[-20,0],[-16,-16],[-16,-8],[-14,9],[-32,-10],[-14,32],[-15,-28],[-26,13],[-27,29],[-29,-19],[-12,46],[-45,-4],[-28,10],[-32,13],[-14,40],[-25,-13],[-16,16],[-23,20],[0,182],[0,187],[-95,0],[-96,0],[-95,0]],[[7277,3447],[83,0]],[[7691,2687],[7,-11],[-9,-28],[14,-39],[-4,-24],[12,-32],[-13,-20],[-4,-36],[-19,-30],[-8,-40],[-9,-46],[-12,-21],[4,-47],[84,-7],[90,0],[-3,-32],[-6,-31],[6,-24],[13,-22],[3,-32]],[[7837,2165],[2,-19],[1,-3]],[[7840,2143],[17,-50],[-1,-78],[20,-37],[-18,-25],[-36,28],[-36,-36],[-69,5],[-71,101],[-83,-24],[-70,45],[-59,-14]],[[7434,2058],[-7,21],[10,28],[14,25],[1,38],[-7,13],[8,45],[6,21],[9,70],[-8,26],[-11,43],[-8,44],[-6,30],[-15,21],[-6,204]],[[7434,2058],[-80,-44],[-87,-142],[-95,-82],[-52,-91],[-22,-86],[-1,-131],[5,-92],[18,-65],[-37,-5],[-68,42],[-74,59],[-27,89],[-21,134],[-56,108],[-33,112],[-48,131],[-67,76],[-78,-4],[-60,-151],[-79,58],[-50,57],[-23,105],[-32,100],[-57,83],[-49,61],[-34,67]],[[9361,4202],[-1,5],[-3,24],[20,18],[-7,16],[5,146]],[[9375,4411],[73,-3],[89,-5]],[[9537,4403],[1,-104],[-6,-28]],[[9532,4271],[-42,-9],[-55,-10],[-74,-51],[0,1]],[[9602,4305],[-3,29],[-15,22],[-7,50],[-40,-3]],[[9375,4411],[21,132]],[[9396,4543],[79,-3]],[[9475,4540],[115,-2],[10,19],[20,12],[11,-3]],[[9631,4566],[-1,-101],[32,-101],[39,-5],[-10,70],[29,-43],[-8,-54],[-64,-31],[-46,4]],[[9475,4540],[-8,19],[7,25],[3,50],[3,12],[3,45],[10,38],[8,17],[12,45],[2,31],[3,18],[18,9],[22,22],[3,24],[-7,28],[12,51],[-1,0]],[[9565,4974],[10,47],[30,10]],[[9605,5031],[14,-351],[-4,-18],[18,-29],[4,-26],[10,2]],[[9647,4609],[-16,-43]],[[9602,4305],[-70,-34]],[[9396,4543],[4,157],[-14,1],[-1,8],[6,27],[-9,50],[9,39],[-5,30],[-2,56],[4,25],[2,38]],[[9390,4974],[175,0]],[[8278,2302],[-195,-1],[-54,-11],[-2,-15],[22,-46],[-5,-38],[-7,-26]],[[8037,2165],[-85,21]],[[7952,2186],[-3,291],[17,305],[17,247],[-7,37]],[[7976,3066],[120,0],[123,-2]],[[8219,3064],[24,-237],[23,-190],[13,-59],[9,-34],[-16,-34],[-5,-61],[5,-35],[-2,-34],[-3,-31],[6,-25],[5,-22]],[[8278,2302],[14,-52],[96,-8],[155,-29],[7,-33],[12,17],[0,66],[12,7],[19,-14],[20,-4]],[[8613,2252],[17,-132],[32,-164],[42,-134],[1,-83],[45,-221],[-3,-129],[-4,-74],[-24,-116],[-29,-24],[-47,23],[-15,83],[-36,44],[-51,164],[-44,146],[-14,75],[19,126],[-26,105],[-75,160],[-37,29],[-96,-87],[-17,10],[-47,89],[-59,47],[-108,-24]],[[8219,3064],[73,-2],[51,2]],[[8343,3064],[119,-2]],[[8462,3062],[-11,-16],[-15,-36],[26,-31],[16,-12],[18,-60],[11,-34],[34,-45],[6,-24],[23,-31],[11,-46],[30,-38],[7,-44],[6,-21],[-3,-14],[17,-21],[10,-35],[0,-37],[8,-7],[17,-9]],[[8673,2501],[-45,-114],[-15,-135]],[[7777,3070],[94,0],[105,-4]],[[7952,2186],[-73,-13],[-39,-30]],[[7840,2143],[-3,22],[-3,32],[-13,22],[-6,24],[6,31],[3,32],[-90,0],[-84,7],[-4,47],[12,21],[9,46],[8,40],[19,30],[4,36],[13,20],[-12,32],[4,24],[-14,39],[9,28],[-7,11]],[[8462,3062],[9,6],[52,33],[88,-2],[44,-9],[1,-17],[10,13],[15,-32],[-1,-23],[106,-2],[107,-180]],[[8893,2849],[-48,-70],[-14,-64],[-105,-124],[-53,-90]],[[8037,4345],[0,-221],[0,-220],[-11,-53],[8,-14],[5,-33],[-1,-26],[-8,-11],[-7,-32],[-19,-41],[-14,-52],[-3,-38]],[[7987,3604],[1,-14],[-11,-27],[8,-18],[-17,-14],[-21,-16],[4,-41],[-13,-16],[-23,17],[-25,11],[-7,-19],[4,-29]],[[7740,4497],[97,0],[100,0],[73,-2],[0,1],[1,0]],[[8011,4496],[0,-1],[0,-49],[26,-101]],[[8297,4339],[-1,-172],[0,-186],[-1,-132]],[[8295,3849],[-6,-9],[8,-39],[-4,-14],[-16,0],[-15,-17],[-22,7],[-2,-37],[-14,-14],[-12,-33],[-14,-5],[-21,-57],[-19,16],[-6,23],[-17,-38],[-10,-21],[-21,23],[-22,-18],[-7,-19],[-30,29],[-20,-21],[-25,15],[0,-21],[-13,5]],[[8037,4345],[9,-13],[32,1],[26,21]],[[8104,4354],[103,-1],[90,1],[0,-15]],[[8508,3717],[2,-18],[-1,-39],[11,-30],[5,-29],[14,-25],[9,-23],[19,-3]],[[8567,3550],[-10,-15],[-28,-42],[-30,-22],[-2,-16],[-10,-20],[-25,-21],[-2,-2],[-1,-2],[-7,-16],[-15,-9],[-5,-3],[-27,-11]],[[8405,3371],[-65,-6],[-84,8],[-27,-2],[-55,5],[-56,2],[-51,1],[-60,-6],[-3,9],[-19,0],[0,-30],[-136,1]],[[8295,3849],[33,-4],[17,-19],[25,-43],[20,-13],[15,-16],[22,6],[17,-11],[21,10],[18,3],[7,-26],[18,-19]],[[8343,3064],[2,40],[20,12],[7,21],[13,23],[20,5],[22,8],[22,17],[9,17],[19,15],[-1,14],[24,26],[8,-17],[35,36],[16,-4],[15,32],[20,8],[-2,28],[3,24]],[[8595,3369],[161,-9],[190,-1],[101,2],[90,1],[12,0]],[[9149,3362],[14,-191],[-61,-141],[-99,-57],[-62,-112],[-48,-12]],[[8297,4339],[48,2],[44,0],[36,2]],[[8425,4343],[59,-40],[47,-10],[69,26],[57,52],[49,26]],[[8706,4397],[0,-255]],[[8706,4142],[-14,-10],[4,-24],[-4,-44],[-10,-50],[-9,-41],[-2,-19],[-26,-44],[-11,-9],[-13,-6],[-11,5],[-21,-33],[-4,-34],[-3,-19],[-9,-8],[-1,22],[-13,4],[-13,-41],[-2,-42],[-12,-27],[-24,-5]],[[8405,3371],[142,-6],[11,1],[37,3]],[[7609,5299],[96,40],[58,-65]],[[7763,5274],[0,-1],[6,4],[15,-7],[8,-34],[84,-34],[55,-34],[27,-1],[18,-2],[5,-31],[23,-12],[8,-27],[-5,-15],[-5,-31],[21,-2],[-7,-31],[13,-22],[2,-1]],[[8031,4993],[0,-2],[-38,-69],[13,-23],[70,123],[15,1],[-50,-147],[-22,-133],[-18,-108],[12,-93],[-2,-46]],[[8805,3966],[-1,-97],[15,18]],[[8972,3890],[-10,-35],[-5,4],[-44,47],[-2,-11],[-6,-40],[-8,-13],[-3,-6],[-8,-10],[-11,-14],[-14,-25],[-7,8],[-4,-10],[-7,-17],[-9,-24],[-5,-17],[-13,-8],[-15,14],[-12,15],[-9,-42],[-8,-15],[-9,-19],[-4,-28],[-19,-25],[-13,-33],[2,-22],[-1,-7],[-1,-11],[-15,-14],[-14,2],[-12,-13],[-10,6],[-1,-6],[-1,-11],[-6,-2],[-30,-14],[-11,14],[-9,-6],[-22,-17],[-14,15],[-2,4],[-9,13],[-4,33]],[[8706,4142],[0,-176],[99,0]],[[9157,3967],[7,15],[9,8],[20,-9]],[[9193,3981],[-14,-20],[3,-37]],[[9182,3924],[20,-103],[23,-34],[2,-63]],[[9193,3981],[20,17],[7,12],[22,25],[13,21],[-30,49],[-2,20],[-10,6],[0,31],[11,23],[-5,25],[15,17],[17,43],[12,8]],[[9263,4278],[73,-75],[-4,-40]],[[9332,4163],[-29,-53],[28,-9],[-21,-137],[-69,-147],[-7,49],[-21,10],[-31,48]],[[9361,4202],[-6,-5],[140,36],[28,-36],[-133,-57],[-61,-1],[3,24]],[[9263,4278],[-16,14],[-16,13],[-6,27],[2,21],[-11,18],[-21,30],[-129,0],[-139,0],[-149,0],[0,52]],[[8778,4453],[82,113],[-2,19],[-8,57],[45,22],[75,-7],[78,-16],[71,63],[-5,74],[-10,27],[98,133],[43,35],[145,1]],[[8706,4397],[72,55],[0,1]],[[9605,5031],[41,30],[34,86],[29,149],[73,144],[31,-51],[64,33],[43,-55],[0,-260],[62,-108],[17,-62],[-102,-93],[-98,-66],[-101,-56],[-51,-113]],[[8104,4354],[19,27],[39,93],[3,125],[-32,118],[5,81],[25,94],[24,64],[38,45],[9,-63],[16,94],[22,19],[13,73],[81,-39],[71,-74],[7,-87],[-8,-86],[-53,-77],[5,-48],[19,-1],[59,84],[35,-20],[18,-110],[4,-78],[-45,-105],[-20,-67],[-33,-73]],[[8031,4993],[-2,1],[-13,22],[7,31],[-21,2],[5,31],[5,15],[-8,27],[-23,12],[-5,31],[-18,2],[-27,1],[-55,34],[-84,34],[-8,34],[-15,7],[-6,-4],[0,1],[0,-1]],[[7763,5273],[74,49],[77,62],[84,63],[-31,-101],[54,-24],[67,-73],[85,43],[94,16],[20,-53],[29,-8],[6,19],[-6,-19],[25,-6],[48,-76],[-84,-17],[-3,1],[-75,20],[-75,-38],[-65,-17],[-56,-121]],[[1791,7283],[-95,-73],[-49,50],[-14,89],[86,68],[51,29],[63,-13],[41,-59],[-83,-91]],[[592,7816],[-58,-30],[-63,36],[-58,52],[94,32],[76,-17],[9,-73]],[[5,8554],[59,-36],[60,19],[77,-50],[94,-25],[-8,-21],[-72,-40],[-72,41],[-37,35],[-84,-11],[-22,16],[5,72]],[[1595,9958],[69,-86],[42,37],[161,-11],[-5,-44],[145,-32],[98,19],[201,-61],[183,-18],[74,-24],[127,31],[144,-58],[104,-26],[-1,-708],[0,-1086],[94,-5],[93,-53],[66,-84],[85,-125],[93,107],[95,61],[51,-98],[64,-78],[88,-86],[59,-137],[98,-217],[162,-122],[3,-120],[-53,-92],[-53,72],[-84,60],[-27,167],[-123,154],[-51,180],[-92,12],[-151,5],[-112,55],[-197,198],[-92,36],[-167,68],[-132,-16],[-187,87],[-114,82],[-106,-41],[20,-132],[-53,-12],[-110,-40],[-84,-65],[-106,-40],[-13,112],[43,187],[101,59],[-26,48],[-122,-106],[-65,-127],[-137,-136],[69,-93],[-90,-137],[-102,-79],[-96,-58],[-23,-85],[-149,-98],[-30,-90],[-112,-81],[-65,14],[-89,-53],[-97,-65],[-80,-64],[-163,-54],[-15,32],[104,89],[93,59],[102,104],[118,22],[47,78],[133,114],[21,38],[70,68],[17,144],[48,113],[-110,-58],[-30,33],[-52,-70],[-62,97],[-26,-68],[-36,95],[-95,-77],[-59,1],[-8,113],[17,70],[-61,68],[-124,-37],[-81,90],[-65,46],[0,108],[-74,81],[37,110],[78,106],[34,98],[77,14],[66,-31],[77,92],[69,-16],[73,59],[-18,87],[-54,34],[71,74],[-59,-2],[-101,-42],[-29,-42],[-75,42],[-135,-21],[-140,46],[-40,76],[-120,111],[134,80],[212,93],[79,0],[-13,-95],[201,7],[-77,118],[-118,73],[-67,95],[-92,81],[-131,61],[53,100],[170,6],[120,87],[23,93],[97,90],[93,22],[181,85],[88,-13],[146,102],[145,-41]],[[9030,3816],[3,-6],[2,-5],[3,-5],[0,-5],[-1,-6]],[[9042,3684],[66,-61],[4,-182],[27,-13],[10,-66]],[[9163,3626],[-29,-130],[8,-7],[54,152]],[[5984,4211],[1,-763]]]}
	});

	// Ugly, but my JavaScript is weak. When in handler functions
	// this seems to be the only way to get linked back to the
	// this.x variables.
	this.chart = this;
	}

	USStateMap.prototype.render = function()
	{
	this.update();
	};

	USStateMap.prototype.update = function()
	{
	// If we need to call super:
	//DexComponent.prototype.update.call(this);
	var chart = this.chart;
	var config = this.config;

	var path = d3.geo.path();

	console.dir(this);

	var chartContainer = config.parent.append("g")
	.attr("id", "USStateMapContainer")
	.attr("transform", "translate(" + config.xoffset + "," + config.yoffset + ")")
	.attr("width", config.width)
	.attr("height", config.height);


	chartContainer.selectAll("path")
	.data(topojson.object(config.topology, config.topology.objects.states).geometries)
	.enter().append("path")
	.attr("d", path)
	.on("click", function(d)
	{
	chart.notify({ type: "click", state : d.id });
	})
	};