mattbrehmer · April 12, 2016 18:13
diff --git a/README.md b/README.md
diff --git a/box.js b/box.js
 (function() {

  d3.box = function() {

    var width = 1,
        height = 1,
        domain = null,
        padding = 10,
        midline = 1
        value = Number;
        
    function box(g) {
      g.each(function(d, i){

        //initialize boxplot statistics
        var data = d.map(function(d) {
              return d.close;
            });

        var outliers = [],
            minVal = Infinity,
            lowerWhisker = Infinity,
            q1Val = Infinity,
            medianVal = 0,
            q3Val = -Infinity,
            iqr = 0,
            upperWhisker = -Infinity,
            maxVal = -Infinity;

        data = data.sort(d3.ascending);        
           
        //calculate the boxplot statistics
        minVal = data[0],
        q1Val = d3.quantile(data, .25),
        medianVal = d3.quantile(data, .5),
        q3Val = d3.quantile(data, .75),
        iqr = q3Val - q1Val,
        maxVal = data[data.length - 1];
        // lowerWhisker = d3.max([minVal, q1Val - iqr])
        // upperWhisker = d3.min([maxVal, q3Val + iqr]);

        //initialize the x scale
        var xScale = d3.scale.linear()
            .range([padding, width - padding])
            .domain(domain && domain.call(this, d, i) || [min, max]);

        var index = 0;

        //search for the lower whisker, the mininmum value within q1Val - 1.5*iqr
        while (index < data.length && lowerWhisker == Infinity) {

          if (data[index] >= (q1Val - 1.5*iqr))
            lowerWhisker = data[index];
          else
            outliers.push(data[index]);
          index++;
        }

        index = data.length-1; // reset index to end of array

        //search for the upper whisker, the maximum value within q1Val + 1.5*iqr
        while (index >= 0 && upperWhisker == -Infinity) {

          if (data[index] <= (q3Val + 1.5*iqr))
            upperWhisker = data[index];
          else
            outliers.push(data[index]);
          index--;
        }

        midline = height / 2;

        var g = d3.select(this);

        //draw verical line for lowerWhisker
        g.append("line")
           .attr("class", "whisker")
           .attr("x1", xScale(lowerWhisker))
           .attr("x2", xScale(lowerWhisker))
           .attr("stroke", "black")
           .attr("y1", padding)
           .attr("y2", height - padding);

        //draw vertical line for upperWhisker
        g.append("line")  
           .attr("class", "whisker")
           .attr("x1", xScale(upperWhisker))
           .attr("x2", xScale(upperWhisker))
           .attr("stroke", "black")
           .attr("y1", padding)
           .attr("y2", height - padding);

        //draw horizontal line from lowerWhisker to upperWhisker
        g.append("line")
           .attr("class", "whisker")
           .attr("x1",  xScale(lowerWhisker))
           .attr("x2",  xScale(upperWhisker))
           .attr("stroke", "black")
           .attr("y1", midline)
           .attr("y2", midline);

        //draw rect for iqr
        g.append("rect")    
           .attr("class", "box")
           .attr("stroke", "black")
           .attr("fill", "white")
           .attr("x", xScale(q1Val))
           .attr("y", padding)
           .attr("width", xScale(q3Val) - xScale(q1Val) - padding)
           .attr("height", height - 2 * padding)
           .append("title")
           .text(function() {
            return "count: " + addCommas(data.length) + "\n" +
                   "minVal: " + addCommas(minVal) + "\n" +
                   "lowerWhisker: " + addCommas(lowerWhisker) + "\n" +
                   "q1Val: " + addCommas(q1Val) + "\n" +
                   "medianVal: " + addCommas(medianVal) + "\n" +
                   "q3Val: " + addCommas(q3Val) + "\n" +
                   "upperWhisker: " + addCommas(upperWhisker) + "\n" +
                   "maxVal: " + addCommas(maxVal) + "\n" +
                   "# outliers: " + addCommas(outliers.length);
           });

        //draw vertical line at median
        g.append("line")
           .attr("class", "median")
           .attr("stroke", "black")
           .attr("x1", xScale(medianVal))
           .attr("x2", xScale(medianVal))
           .attr("y1", padding)
           .attr("y2", height - padding);

        //draw data as points
        g.append("g")
           .attr("class", "outliers")
           .selectAll("circle")
           .data(d)     
           .enter()
           .append("circle")
           .filter(function(d) {
            return d.close > upperWhisker || d.close < lowerWhisker;
           })
           .attr("r", 2.5)
           .attr("class", "point")     
           .attr("cy", function(d) {
            return random_jitter();
           }) 
           .attr("cx", function(d) {
            return xScale(d.close);   
           })
           .append("title")
           .text(function(d) {
            return "Date: " + d.date + "\nValue: " + addCommas(d.close);
           }); 

      });
    	
    }

    function addCommas(nStr) {
      nStr += '';
      x = nStr.split('.');
      x1 = x[0];
      x2 = x.length > 1 ? '.' + x[1] : '';
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(x1)) {
              x1 = x1.replace(rgx, '$1' + ',' + '$2');
      }
      return x1 + x2;
    }

    function random_jitter() {
      if (Math.round(Math.random() * 1) == 0)
        var seed = - (height / 3 - padding);
      else
        var seed = height / 3 - padding; 
      return midline + Math.floor((Math.random() * seed) + 1);
    }

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

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

    box.value = function(x) {
      if (!arguments.length) return value;
      value = x;
      return box;
    };

    box.domain = function(x) {
      if (!arguments.length) return domain;
      domain = x == null ? x : d3.functor(x);
      return box;
    };

    return box; 
  }

 })();
diff --git a/dji.csv b/dji.csv
diff --git a/index.html b/index.html
 <link rel = "stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 <script type="text/javascript" src="box.js"></script>
 <script type="text/javascript" src="juxtaboxplot.js"></script>          
diff --git a/juxtaboxplot.js b/juxtaboxplot.js
 //initialize the dimensions
 var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 400 - margin.left - margin.right,
    height = 150 - margin.top - margin.bottom; 

 var min = Infinity,
    max = -Infinity;

 //initialize the static context boxplot
 var contextBP = d3.box()
              .width(width)
              .height(height / 2);

 //initialize the dynamic focus boxplot
 var focusBP = d3.box()
              .width(width)
              .height(height / 2);    

 var parseDate = d3.time.format("%Y-%m-%d").parse;

 //initialize the time scale
 var timeScale = d3.scale.linear()
                  .range([margin.left, width - margin.right]);  

 //initialize the x scale
 var xScale = d3.scale.linear()
               .range([margin.left, width - margin.right]);  

 //initialize the x axis
 var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("top")
              .ticks(10)
              .tickFormat(d3.format("s"));                                        

 //initialize the data
 var data = []
    focusData = [];

 // initialize time stats
 var yearArr = [],
    dates = []
    selectedYear = 0;

 //mean closing prices between 2000 and 2009
 var mClose = [10729.378,10208.862,9214.853,9006.637,10315.506,10546.710,11409.779,13178.260,11244.106,8885.656];

 var color = d3.scale.quantize()
  	.domain([8500,13500])
  	.range(d3.range(9).map(function(d) { return "q" + d + "-9"; }));

 d3.csv("dji.csv", function(error,csv) { // load the data
  
  //for each line of data, add date and close to a nested arrray for each small multiple
  csv.forEach(function(x) {
    var i = Math.floor(x.Index - 1), // small multiple index
        c = Math.floor(x.Close),
        v = {"close": c,"date":x.Date}, //create a json object containing close and date
        d = data[i]; 
    if (!d) d = data[i] = [v];
    else d.push(v);
    if (c > max) max = c;
    if (c < min) min = c;
  });

  contextBP.domain([min, max]); //set the domain of the context boxplot
  xScale.domain([min,max]); //set the domain of the axis

  //map the dates in csv
  dates = csv.map(function(d) {
    return d.Date;
  });

  for (i = 0; i < dates.length; i++) {

    // get year
    var year = parseDate(dates[i]).getFullYear();

    if (!(yearArr.indexOf(year) > -1))
      yearArr.push(year);
  }

  //sort the years
  yearArr = yearArr.sort(d3.ascending);

  //map the time scale
  timeScale.domain([yearArr[0],yearArr[yearArr.length-1]+1]);

  var datesvg = d3.select("body")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height);

  //time intervals as rect+label texts
  intervals = datesvg.append("g")
                         .selectAll("g")
                         .data(yearArr)     
                         .enter(); 
     
  //add linked highlighting to points on interval mouseover
  intervalCell = intervals.append("g")
                          .attr("class", "intervalCell")                          
                          .on("mouseover", function(d) {
                            selectedYear = d;
                            showFocus();
                          })
                          .on("mouseout", function(d) {
                            selectedYear = 0;
                            removeFocus(); 
                          }); 

  //interval rectangle bounds
  intervalCell.append("rect")
  			  .attr("class", function(d) { return color(mClose[d-2000]); })
              .attr("x", function(d){
               return timeScale(d)
              })
              .attr("id", function(d){
               return "interval" + d;
              }) 
              .attr("y", 10)
              .attr("width", width / yearArr.length - 2)
              .attr("height", height - 30)
              .append("title")
           	  .text(function(d) {
            	return "Year: " + d + "\nMean Value: " + mClose[d-2000];
           	  });

  // text labels for interval cells
  intervalCell.append("text")
              .attr("x", function(d){
               return timeScale(d) + 5;
              })
              .attr("width", width / yearArr.length)
              .attr("height", 10)
              .attr("y", height)
              .attr("font-family", "sans-serif")
              .attr("font-size", "12px")
              .attr("class", "intervalLabel")
              .text(function(d) { return d});  

  //create a global bp svg container
  var bpsvg = d3.select("body")
              .append("svg")
              .attr("width",width)
              .attr("height",height + 30);      

  //append the axis
  bpsvg.append("g")
       .attr("class", "axis")
       .attr("transform", "translate(" + 0 + ", " + 30 + ")")
       .call(xAxis)                                              
              
  //create boxplot container bp
  var bp = bpsvg.append("g")
                .attr("transform", "translate(" + 0 + ", " + 30 + ")");

  //add context boxplot              
  bp.selectAll("contextBP")
    .data(data)
    .enter()
    .append("g")
    .attr("transform", function(d, i) {
      return "translate(" + 0 + "," + (i * height) + ")";
    })
    .attr("class", "contextBP")
    .call(contextBP);

  //add context boxplot
  var focus;  

  // add focus boxplot on interval cell mouseout
  var showFocus = function(){

    filteredData = csv.filter(function(d){
      return parseDate(d.Date).getFullYear() == selectedYear;
    });

    //for each line of data, add date and close to a nested arrray for each small multiple
    filteredData.forEach(function(x) {
      var i = Math.floor(x.Index - 1) // small multiple index
          v = {"close": Math.floor(x.Close),"date":x.Date}, //create a json object containing close and date
          d = focusData[i]; 
      if (!d) d = focusData[i] = [v];
      else d.push(v);
    });

    focusBP.domain([min, max]); //set the domain of the focus boxplot

    focus = bp.selectAll("focusBP")
                .data(focusData);

    focus.enter()
         .append("g")
         .attr("class","focusBP")
         .attr("transform", function(d, i) {
          return "translate(" + 0 + "," + (i * height + height / 2) + ")";
         })
         .call(focusBP);

  };

  // remove the focus boxplot on interval cell mouseout
  var removeFocus = function(){

    focusData = [];

    bp.selectAll(".focusBP").remove();

  };

 });
diff --git a/License.txt b/License.txt
 This is free and unencumbered software released into the public domain.

 Anyone is free to copy, modify, publish, use, compile, sell, or
 distribute this software, either in source code form or as a compiled
 binary, for any purpose, commercial or non-commercial, and by any
 means.

 In jurisdictions that recognize copyright laws, the author or authors
 of this software dedicate any and all copyright interest in the
 software to the public domain. We make this dedication for the benefit
 of the public at large and to the detriment of our heirs and
 successors. We intend this dedication to be an overt act of
 relinquishment in perpetuity of all present and future rights to this
 software under copyright law.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
 OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
 ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 OTHER DEALINGS IN THE SOFTWARE.

 For more information, please refer to <http://unlicense.org>
diff --git a/style.css b/style.css
 body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 .focusBP line, 
 .focusBP rect {
  stroke: red;
  fill: white;
 }

 .focusBP circle {
  fill: red;
 }

 circle:hover {
  fill: orange;
  stroke: orange;
  stroke-width: 3;
  opacity: 1;
 }

 .point {  
  opacity: 0.25; 
 }

 .selectedInterval {
  stroke: red;
  fill: #E8E8E8;
 }

 .intervalCell rect {
  fill: #fff;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
 }

 .intervalCell:hover rect {
  stroke: red;
  stroke-width: 2px;
 }

 .intervalCell:hover text {
  fill: red;
 }

 .intervalLabel {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
 }

 .axis path {
    fill: none;
    stroke: none;
    stroke-width: 1px;
 }

 .axis line {
    fill: none;
    stroke: #aaa;
    stroke-width: 1px;
 }

 .axis text {    
    font-size: 10px;
    fill: #aaa;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
 }

 .intervalCell .q0-9{fill:rgb(222,235,247)}
 .intervalCell .q1-9{fill:rgb(198,219,239)}
 .intervalCell .q2-9{fill:rgb(158,202,225)}
 .intervalCell .q3-9{fill:rgb(107,174,214)}
 .intervalCell .q4-9{fill:rgb(66,146,198)}
 .intervalCell .q5-9{fill:rgb(33,113,181)}
 .intervalCell .q6-9{fill:rgb(8,81,156)}
 .intervalCell .q7-9{fill:rgb(8,48,107)}
 .intervalCell .q8-9{fill:rgb(8,48,107)}
diff --git a/thumbnail.png b/thumbnail.png
	(function() {

	d3.box = function() {

	var width = 1,
	height = 1,
	domain = null,
	padding = 10,
	midline = 1
	value = Number;

	function box(g) {
	g.each(function(d, i){

	//initialize boxplot statistics
	var data = d.map(function(d) {
	return d.close;
	});

	var outliers = [],
	minVal = Infinity,
	lowerWhisker = Infinity,
	q1Val = Infinity,
	medianVal = 0,
	q3Val = -Infinity,
	iqr = 0,
	upperWhisker = -Infinity,
	maxVal = -Infinity;

	data = data.sort(d3.ascending);

	//calculate the boxplot statistics
	minVal = data[0],
	q1Val = d3.quantile(data, .25),
	medianVal = d3.quantile(data, .5),
	q3Val = d3.quantile(data, .75),
	iqr = q3Val - q1Val,
	maxVal = data[data.length - 1];
	// lowerWhisker = d3.max([minVal, q1Val - iqr])
	// upperWhisker = d3.min([maxVal, q3Val + iqr]);

	//initialize the x scale
	var xScale = d3.scale.linear()
	.range([padding, width - padding])
	.domain(domain && domain.call(this, d, i) \|\| [min, max]);

	var index = 0;

	//search for the lower whisker, the mininmum value within q1Val - 1.5*iqr
	while (index < data.length && lowerWhisker == Infinity) {

	if (data[index] >= (q1Val - 1.5*iqr))
	lowerWhisker = data[index];
	else
	outliers.push(data[index]);
	index++;
	}

	index = data.length-1; // reset index to end of array

	//search for the upper whisker, the maximum value within q1Val + 1.5*iqr
	while (index >= 0 && upperWhisker == -Infinity) {

	if (data[index] <= (q3Val + 1.5*iqr))
	upperWhisker = data[index];
	else
	outliers.push(data[index]);
	index--;
	}

	midline = height / 2;

	var g = d3.select(this);

	//draw verical line for lowerWhisker
	g.append("line")
	.attr("class", "whisker")
	.attr("x1", xScale(lowerWhisker))
	.attr("x2", xScale(lowerWhisker))
	.attr("stroke", "black")
	.attr("y1", padding)
	.attr("y2", height - padding);

	//draw vertical line for upperWhisker
	g.append("line")
	.attr("class", "whisker")
	.attr("x1", xScale(upperWhisker))
	.attr("x2", xScale(upperWhisker))
	.attr("stroke", "black")
	.attr("y1", padding)
	.attr("y2", height - padding);

	//draw horizontal line from lowerWhisker to upperWhisker
	g.append("line")
	.attr("class", "whisker")
	.attr("x1", xScale(lowerWhisker))
	.attr("x2", xScale(upperWhisker))
	.attr("stroke", "black")
	.attr("y1", midline)
	.attr("y2", midline);

	//draw rect for iqr
	g.append("rect")
	.attr("class", "box")
	.attr("stroke", "black")
	.attr("fill", "white")
	.attr("x", xScale(q1Val))
	.attr("y", padding)
	.attr("width", xScale(q3Val) - xScale(q1Val) - padding)
	.attr("height", height - 2 * padding)
	.append("title")
	.text(function() {
	return "count: " + addCommas(data.length) + "\n" +
	"minVal: " + addCommas(minVal) + "\n" +
	"lowerWhisker: " + addCommas(lowerWhisker) + "\n" +
	"q1Val: " + addCommas(q1Val) + "\n" +
	"medianVal: " + addCommas(medianVal) + "\n" +
	"q3Val: " + addCommas(q3Val) + "\n" +
	"upperWhisker: " + addCommas(upperWhisker) + "\n" +
	"maxVal: " + addCommas(maxVal) + "\n" +
	"# outliers: " + addCommas(outliers.length);
	});

	//draw vertical line at median
	g.append("line")
	.attr("class", "median")
	.attr("stroke", "black")
	.attr("x1", xScale(medianVal))
	.attr("x2", xScale(medianVal))
	.attr("y1", padding)
	.attr("y2", height - padding);

	//draw data as points
	g.append("g")
	.attr("class", "outliers")
	.selectAll("circle")
	.data(d)
	.enter()
	.append("circle")
	.filter(function(d) {
	return d.close > upperWhisker \|\| d.close < lowerWhisker;
	})
	.attr("r", 2.5)
	.attr("class", "point")
	.attr("cy", function(d) {
	return random_jitter();
	})
	.attr("cx", function(d) {
	return xScale(d.close);
	})
	.append("title")
	.text(function(d) {
	return "Date: " + d.date + "\nValue: " + addCommas(d.close);
	});

	});

	}

	function addCommas(nStr) {
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
	x1 = x1.replace(rgx, '$1' + ',' + '$2');
	}
	return x1 + x2;
	}

	function random_jitter() {
	if (Math.round(Math.random() * 1) == 0)
	var seed = - (height / 3 - padding);
	else
	var seed = height / 3 - padding;
	return midline + Math.floor((Math.random() * seed) + 1);
	}

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

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

	box.value = function(x) {
	if (!arguments.length) return value;
	value = x;
	return box;
	};

	box.domain = function(x) {
	if (!arguments.length) return domain;
	domain = x == null ? x : d3.functor(x);
	return box;
	};

	return box;
	}

	})();
	<link rel = "stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="box.js"></script>
	<script type="text/javascript" src="juxtaboxplot.js"></script>
	//initialize the dimensions
	var margin = {top: 10, right: 10, bottom: 10, left: 10},
	width = 400 - margin.left - margin.right,
	height = 150 - margin.top - margin.bottom;

	var min = Infinity,
	max = -Infinity;

	//initialize the static context boxplot
	var contextBP = d3.box()
	.width(width)
	.height(height / 2);

	//initialize the dynamic focus boxplot
	var focusBP = d3.box()
	.width(width)
	.height(height / 2);

	var parseDate = d3.time.format("%Y-%m-%d").parse;

	//initialize the time scale
	var timeScale = d3.scale.linear()
	.range([margin.left, width - margin.right]);

	//initialize the x scale
	var xScale = d3.scale.linear()
	.range([margin.left, width - margin.right]);

	//initialize the x axis
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("top")
	.ticks(10)
	.tickFormat(d3.format("s"));

	//initialize the data
	var data = []
	focusData = [];

	// initialize time stats
	var yearArr = [],
	dates = []
	selectedYear = 0;

	//mean closing prices between 2000 and 2009
	var mClose = [10729.378,10208.862,9214.853,9006.637,10315.506,10546.710,11409.779,13178.260,11244.106,8885.656];

	var color = d3.scale.quantize()
	.domain([8500,13500])
	.range(d3.range(9).map(function(d) { return "q" + d + "-9"; }));

	d3.csv("dji.csv", function(error,csv) { // load the data

	//for each line of data, add date and close to a nested arrray for each small multiple
	csv.forEach(function(x) {
	var i = Math.floor(x.Index - 1), // small multiple index
	c = Math.floor(x.Close),
	v = {"close": c,"date":x.Date}, //create a json object containing close and date
	d = data[i];
	if (!d) d = data[i] = [v];
	else d.push(v);
	if (c > max) max = c;
	if (c < min) min = c;
	});

	contextBP.domain([min, max]); //set the domain of the context boxplot
	xScale.domain([min,max]); //set the domain of the axis

	//map the dates in csv
	dates = csv.map(function(d) {
	return d.Date;
	});

	for (i = 0; i < dates.length; i++) {

	// get year
	var year = parseDate(dates[i]).getFullYear();

	if (!(yearArr.indexOf(year) > -1))
	yearArr.push(year);
	}

	//sort the years
	yearArr = yearArr.sort(d3.ascending);

	//map the time scale
	timeScale.domain([yearArr[0],yearArr[yearArr.length-1]+1]);

	var datesvg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	//time intervals as rect+label texts
	intervals = datesvg.append("g")
	.selectAll("g")
	.data(yearArr)
	.enter();

	//add linked highlighting to points on interval mouseover
	intervalCell = intervals.append("g")
	.attr("class", "intervalCell")
	.on("mouseover", function(d) {
	selectedYear = d;
	showFocus();
	})
	.on("mouseout", function(d) {
	selectedYear = 0;
	removeFocus();
	});

	//interval rectangle bounds
	intervalCell.append("rect")
	.attr("class", function(d) { return color(mClose[d-2000]); })
	.attr("x", function(d){
	return timeScale(d)
	})
	.attr("id", function(d){
	return "interval" + d;
	})
	.attr("y", 10)
	.attr("width", width / yearArr.length - 2)
	.attr("height", height - 30)
	.append("title")
	.text(function(d) {
	return "Year: " + d + "\nMean Value: " + mClose[d-2000];
	});

	// text labels for interval cells
	intervalCell.append("text")
	.attr("x", function(d){
	return timeScale(d) + 5;
	})
	.attr("width", width / yearArr.length)
	.attr("height", 10)
	.attr("y", height)
	.attr("font-family", "sans-serif")
	.attr("font-size", "12px")
	.attr("class", "intervalLabel")
	.text(function(d) { return d});

	//create a global bp svg container
	var bpsvg = d3.select("body")
	.append("svg")
	.attr("width",width)
	.attr("height",height + 30);

	//append the axis
	bpsvg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + 0 + ", " + 30 + ")")
	.call(xAxis)

	//create boxplot container bp
	var bp = bpsvg.append("g")
	.attr("transform", "translate(" + 0 + ", " + 30 + ")");

	//add context boxplot
	bp.selectAll("contextBP")
	.data(data)
	.enter()
	.append("g")
	.attr("transform", function(d, i) {
	return "translate(" + 0 + "," + (i * height) + ")";
	})
	.attr("class", "contextBP")
	.call(contextBP);

	//add context boxplot
	var focus;

	// add focus boxplot on interval cell mouseout
	var showFocus = function(){

	filteredData = csv.filter(function(d){
	return parseDate(d.Date).getFullYear() == selectedYear;
	});

	//for each line of data, add date and close to a nested arrray for each small multiple
	filteredData.forEach(function(x) {
	var i = Math.floor(x.Index - 1) // small multiple index
	v = {"close": Math.floor(x.Close),"date":x.Date}, //create a json object containing close and date
	d = focusData[i];
	if (!d) d = focusData[i] = [v];
	else d.push(v);
	});

	focusBP.domain([min, max]); //set the domain of the focus boxplot

	focus = bp.selectAll("focusBP")
	.data(focusData);

	focus.enter()
	.append("g")
	.attr("class","focusBP")
	.attr("transform", function(d, i) {
	return "translate(" + 0 + "," + (i * height + height / 2) + ")";
	})
	.call(focusBP);

	};

	// remove the focus boxplot on interval cell mouseout
	var removeFocus = function(){

	focusData = [];

	bp.selectAll(".focusBP").remove();

	};

	});
	This is free and unencumbered software released into the public domain.

	Anyone is free to copy, modify, publish, use, compile, sell, or
	distribute this software, either in source code form or as a compiled
	binary, for any purpose, commercial or non-commercial, and by any
	means.

	In jurisdictions that recognize copyright laws, the author or authors
	of this software dedicate any and all copyright interest in the
	software to the public domain. We make this dedication for the benefit
	of the public at large and to the detriment of our heirs and
	successors. We intend this dedication to be an overt act of
	relinquishment in perpetuity of all present and future rights to this
	software under copyright law.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
	EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
	MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
	IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
	OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
	ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
	OTHER DEALINGS IN THE SOFTWARE.

	For more information, please refer to <http://unlicense.org>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.focusBP line,
	.focusBP rect {
	stroke: red;
	fill: white;
	}

	.focusBP circle {
	fill: red;
	}

	circle:hover {
	fill: orange;
	stroke: orange;
	stroke-width: 3;
	opacity: 1;
	}

	.point {
	opacity: 0.25;
	}

	.selectedInterval {
	stroke: red;
	fill: #E8E8E8;
	}

	.intervalCell rect {
	fill: #fff;
	stroke: #000;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	}

	.intervalCell:hover rect {
	stroke: red;
	stroke-width: 2px;
	}

	.intervalCell:hover text {
	fill: red;
	}

	.intervalLabel {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	}

	.axis path {
	fill: none;
	stroke: none;
	stroke-width: 1px;
	}

	.axis line {
	fill: none;
	stroke: #aaa;
	stroke-width: 1px;
	}

	.axis text {
	font-size: 10px;
	fill: #aaa;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	}

	.intervalCell .q0-9{fill:rgb(222,235,247)}
	.intervalCell .q1-9{fill:rgb(198,219,239)}
	.intervalCell .q2-9{fill:rgb(158,202,225)}
	.intervalCell .q3-9{fill:rgb(107,174,214)}
	.intervalCell .q4-9{fill:rgb(66,146,198)}
	.intervalCell .q5-9{fill:rgb(33,113,181)}
	.intervalCell .q6-9{fill:rgb(8,81,156)}
	.intervalCell .q7-9{fill:rgb(8,48,107)}
	.intervalCell .q8-9{fill:rgb(8,48,107)}