owendall/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

path {
  fill: steelblue;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var total_width = 960,
  total_height = 400,
	margin = {top: 10, right: 10, bottom: total_height*.2, left: 120},
    bottompanelmargin = {top: total_height - margin.bottom + 30, right: margin.right, bottom: 20, left: margin.left},
	leftpanelmargin = {top: margin.top, right: margin.left-40, bottom: margin.bottom, left: 40},
    width = total_width - margin.left - margin.right,
    height = total_height - margin.top - margin.bottom,
    bottompanelheight = total_height - bottompanelmargin.top - bottompanelmargin.bottom,
	leftpanelwidth = leftpanelmargin.right - leftpanelmargin.left;

var parseDate = d3.time.format("%b %Y").parse;

var x = d3.time.scale().range([0, width]),
    bottompanelx = d3.time.scale().range([0, width]),
    leftpanelx = d3.scale.linear().range([0, leftpanelwidth]),
    y = d3.scale.linear().range([height, 0]),
    bottompanely = d3.scale.linear().range([bottompanelheight, 0]),
    leftpanely = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    bottompanelxAxis = d3.svg.axis().scale(bottompanelx).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left"),
    leftpanelyAxis = d3.svg.axis().scale(leftpanely).orient("left");

var brushx = d3.svg.brush()
    .x(bottompanelx)
    .on("brush", brushedx);

var brushy = d3.svg.brush()
    .y(leftpanely)
    .on("brush", brushedy);

var area = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y0(height)
    .y1(function(d) { return y(d.price); });

var bottompanelarea = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return bottompanelx(d.date); })
    .y0(bottompanelheight)
    .y1(function(d) { return bottompanely(d.price); });

var leftpanelarea = d3.svg.area()
    .interpolate("monotone")
    .x(function(d) { return leftpanelx(d.date); })
    .y0(height)
    .y1(function(d) { return leftpanely(d.price); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

var focus = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var leftpanelcontext = svg.append("g")
    .attr("transform", "translate(" + leftpanelmargin.left + "," + leftpanelmargin.top + ")");

var bottompanelcontext = svg.append("g")
    .attr("transform", "translate(" + bottompanelmargin.left + "," + bottompanelmargin.top + ")");

d3.csv("nifa-awards-by-month.csv", function(error, data) {

  data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.price = +d.price;
  });

  x.domain(d3.extent(data.map(function(d) { return d.date; })));
  y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
  bottompanelx.domain(x.domain());
  bottompanely.domain(y.domain());
  leftpanelx.domain(x.domain());
  leftpanely.domain(y.domain());

  focus.append("path")
      .datum(data)
      .attr("clip-path", "url(#clip)")
      .attr("d", area);

  focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  focus.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  leftpanelcontext.append("path")
      .datum(data)
      .attr("d", leftpanelarea);

  bottompanelcontext.append("path")
      .datum(data)
      .attr("d", bottompanelarea);

  bottompanelcontext.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + bottompanelheight + ")")
      .call(bottompanelxAxis);

  leftpanelcontext.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" - leftpanelwidth + ", 0 )")
      .call(leftpanelyAxis);

  bottompanelcontext.append("g")
      .attr("class", "x brush")
      .call(brushx)
    .selectAll("rect")
      .attr("y", -6) // 6 goes along with 7 below for shifting.
      .attr("height", bottompanelheight + 7);

  leftpanelcontext.append("g")
      .attr("class", "y brush")
      .call(brushy)
    .selectAll("rect")
      .attr("width", leftpanelwidth);
});

function brushedx() {
  x.domain(brushx.empty() ? bottompanelx.domain() : brushx.extent());
  focus.select("path").attr("d", area);
  focus.select(".x.axis").call(xAxis);
}

function brushedy() {
  y.domain(brushy.empty() ? leftpanely.domain() : brushy.extent());
  focus.select("path").attr("d", area);
  focus.select(".y.axis").call(yAxis);
}

</script>

## nifa-awards-by-month.csv

          
            date
            price

            
              Nov 2001
              100000

            
              Dec 2001
              318900

            
              Jan 2002
              3185360

            
              Feb 2002
              1877994

            
              Mar 2002
              22610223

            
              Apr 2002
              26790646

            
              May 2002
              46778851

            
              Jun 2002
              70251665

            
              Jul 2002
              47390151

            
              Aug 2002
              86427797

            
              Sep 2002
              93517521

            
              Oct 2002
              5139719

            
              Nov 2002
              16886180

            
              Dec 2002
              3122468

            
              Jan 2003
              850187

            
              Feb 2003
              34623

            
              Mar 2003
              60232

            
              Apr 2003
              30271187

            
              May 2003
              49118878

            
              Jun 2003
              54184686

            
              Jul 2003
              103706833

            
              Aug 2003
              80914061

            
              Sep 2003
              104751368

            
              Oct 2003
              3597183

            
              Nov 2003
              14091751

            
              Dec 2003
              8790589

            
              Jan 2004
              7404805

            
              Feb 2004
              6602678

            
              Mar 2004
              13789680

            
              Apr 2004
              40386781

            
              May 2004
              62648318

            
              Jun 2004
              71684857

            
              Jul 2004
              99228355

            
              Aug 2004
              92159101

            
              Sep 2004
              59148053

            
              Oct 2004
              1869781

            
              Nov 2004
              23821209

            
              Dec 2004
              24732598

            
              Jan 2005
              12057681

            
              Feb 2005
              13735922

            
              Mar 2005
              26243470

            
              Apr 2005
              29562514

            
              May 2005
              72144078

            
              Jun 2005
              100243908

            
              Jul 2005
              100367757

            
              Aug 2005
              98878797

            
              Sep 2005
              55739302

            
              Oct 2005
              3932105

            
              Nov 2005
              18926023

            
              Dec 2005
              19338108

            
              Jan 2006
              10952044

            
              Feb 2006
              12192060

            
              Mar 2006
              20330658

            
              Apr 2006
              20820709

            
              May 2006
              42246276

            
              Jun 2006
              110793099

            
              Jul 2006
              124663597

            
              Aug 2006
              120538136

            
              Sep 2006
              53988918

            
              Oct 2006
              3525028

            
              Nov 2006
              17751690

            
              Dec 2006
              27144737

            
              Jan 2007
              10354204

            
              Feb 2007
              7705785

            
              Mar 2007
              7010716

            
              Apr 2007
              19320242

            
              May 2007
              26924906

            
              Jun 2007
              78214191

            
              Jul 2007
              91250653

            
              Aug 2007
              65727313

            
              Sep 2007
              58743876

            
              Oct 2007
              2065854

            
              Nov 2007
              18462643

            
              Dec 2007
              22800895

            
              Jan 2008
              18035719

            
              Feb 2008
              9420095

            
              Mar 2008
              8322476

            
              Apr 2008
              15561020

            
              May 2008
              18570992

            
              Jun 2008
              66274526

            
              Jul 2008
              144207496

            
              Aug 2008
              112904897

            
              Sep 2008
              143656629

            
              Nov 2008
              21265696

            
              Dec 2008
              32542479

            
              Jan 2009
              28148014

            
              Feb 2009
              17091715

            
              Mar 2009
              -19225470

            
              Apr 2009
              11414984

            
              May 2009
              18714249

            
              Jun 2009
              59753247

            
              Jul 2009
              65247912

            
              Aug 2009
              152037361

            
              Sep 2009
              270941877

            
              Nov 2009
              15121869

            
              Dec 2009
              38090852

            
              Jan 2010
              29783017

            
              Feb 2010
              20997669

            
              Mar 2010
              42531861

            
              Apr 2010
              49056398

            
              May 2010
              32459197

            
              Jun 2010
              54544917

            
              Jul 2010
              52850139

            
              Aug 2010
              120597683

            
              Sep 2010
              224768119

            
              Oct 2010
              49946

            
              Nov 2010
              8818778

            
              Dec 2010
              14019499

            
              Jan 2011
              41140892

            
              Feb 2011
              57741253

            
              Mar 2011
              45277888

            
              Apr 2011
              47789262

            
              May 2011
              4289814

            
              Jun 2011
              17284614

            
              Jul 2011
              73319009

            
              Aug 2011
              113530217

            
              Sep 2011
              338778388

            
              Oct 2011
              210022

            
              Nov 2011
              22847886

            
              Dec 2011
              31925874

            
              Jan 2012
              16250877

            
              Feb 2012
              14044124

            
              Mar 2012
              19093709

            
              Apr 2012
              31144962

            
              May 2012
              31195524

            
              Jun 2012
              40226595

            
              Jul 2012
              68097667

            
              Aug 2012
              106612386

            
              Sep 2012
              199849353

            
              Oct 2012
              -138471

            
              Nov 2012
              10842215

            
              Dec 2012
              42353078

            
              Jan 2013
              24654208

            
              Feb 2013
              6925018

            
              Mar 2013
              6109021

            
              Apr 2013
              4597776

            
              May 2013
              3870162

            
              Jun 2013
              10763034

            
              Jul 2013
              24218006

            
              Aug 2013
              105013774

            
              Sep 2013
              211593690

            
              Nov 2013
              21973528

            
              Dec 2013
              42273265

            
              Jan 2014
              46506665

            
              Feb 2014
              140365
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	font: 10px sans-serif;
	}

	path {
	fill: steelblue;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.brush .extent {
	stroke: #fff;
	fill-opacity: .125;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var total_width = 960,
	total_height = 400,
	margin = {top: 10, right: 10, bottom: total_height*.2, left: 120},
	bottompanelmargin = {top: total_height - margin.bottom + 30, right: margin.right, bottom: 20, left: margin.left},
	leftpanelmargin = {top: margin.top, right: margin.left-40, bottom: margin.bottom, left: 40},
	width = total_width - margin.left - margin.right,
	height = total_height - margin.top - margin.bottom,
	bottompanelheight = total_height - bottompanelmargin.top - bottompanelmargin.bottom,
	leftpanelwidth = leftpanelmargin.right - leftpanelmargin.left;

	var parseDate = d3.time.format("%b %Y").parse;

	var x = d3.time.scale().range([0, width]),
	bottompanelx = d3.time.scale().range([0, width]),
	leftpanelx = d3.scale.linear().range([0, leftpanelwidth]),
	y = d3.scale.linear().range([height, 0]),
	bottompanely = d3.scale.linear().range([bottompanelheight, 0]),
	leftpanely = d3.scale.linear().range([height, 0]);

	var xAxis = d3.svg.axis().scale(x).orient("bottom"),
	bottompanelxAxis = d3.svg.axis().scale(bottompanelx).orient("bottom"),
	yAxis = d3.svg.axis().scale(y).orient("left"),
	leftpanelyAxis = d3.svg.axis().scale(leftpanely).orient("left");

	var brushx = d3.svg.brush()
	.x(bottompanelx)
	.on("brush", brushedx);

	var brushy = d3.svg.brush()
	.y(leftpanely)
	.on("brush", brushedy);

	var area = d3.svg.area()
	.interpolate("monotone")
	.x(function(d) { return x(d.date); })
	.y0(height)
	.y1(function(d) { return y(d.price); });

	var bottompanelarea = d3.svg.area()
	.interpolate("monotone")
	.x(function(d) { return bottompanelx(d.date); })
	.y0(bottompanelheight)
	.y1(function(d) { return bottompanely(d.price); });

	var leftpanelarea = d3.svg.area()
	.interpolate("monotone")
	.x(function(d) { return leftpanelx(d.date); })
	.y0(height)
	.y1(function(d) { return leftpanely(d.price); });

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

	svg.append("defs").append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", width)
	.attr("height", height);

	var focus = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var leftpanelcontext = svg.append("g")
	.attr("transform", "translate(" + leftpanelmargin.left + "," + leftpanelmargin.top + ")");

	var bottompanelcontext = svg.append("g")
	.attr("transform", "translate(" + bottompanelmargin.left + "," + bottompanelmargin.top + ")");

	d3.csv("nifa-awards-by-month.csv", function(error, data) {

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	d.price = +d.price;
	});

	x.domain(d3.extent(data.map(function(d) { return d.date; })));
	y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
	bottompanelx.domain(x.domain());
	bottompanely.domain(y.domain());
	leftpanelx.domain(x.domain());
	leftpanely.domain(y.domain());

	focus.append("path")
	.datum(data)
	.attr("clip-path", "url(#clip)")
	.attr("d", area);

	focus.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	focus.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	leftpanelcontext.append("path")
	.datum(data)
	.attr("d", leftpanelarea);

	bottompanelcontext.append("path")
	.datum(data)
	.attr("d", bottompanelarea);

	bottompanelcontext.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + bottompanelheight + ")")
	.call(bottompanelxAxis);

	leftpanelcontext.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" - leftpanelwidth + ", 0 )")
	.call(leftpanelyAxis);

	bottompanelcontext.append("g")
	.attr("class", "x brush")
	.call(brushx)
	.selectAll("rect")
	.attr("y", -6) // 6 goes along with 7 below for shifting.
	.attr("height", bottompanelheight + 7);

	leftpanelcontext.append("g")
	.attr("class", "y brush")
	.call(brushy)
	.selectAll("rect")
	.attr("width", leftpanelwidth);
	});

	function brushedx() {
	x.domain(brushx.empty() ? bottompanelx.domain() : brushx.extent());
	focus.select("path").attr("d", area);
	focus.select(".x.axis").call(xAxis);
	}

	function brushedy() {
	y.domain(brushy.empty() ? leftpanely.domain() : brushy.extent());
	focus.select("path").attr("d", area);
	focus.select(".y.axis").call(yAxis);
	}

	</script>
	date	price
	Nov 2001	100000
	Dec 2001	318900
	Jan 2002	3185360
	Feb 2002	1877994
	Mar 2002	22610223
	Apr 2002	26790646
	May 2002	46778851
	Jun 2002	70251665
	Jul 2002	47390151
	Aug 2002	86427797
	Sep 2002	93517521
	Oct 2002	5139719
	Nov 2002	16886180
	Dec 2002	3122468
	Jan 2003	850187
	Feb 2003	34623
	Mar 2003	60232
	Apr 2003	30271187
	May 2003	49118878
	Jun 2003	54184686
	Jul 2003	103706833
	Aug 2003	80914061
	Sep 2003	104751368
	Oct 2003	3597183
	Nov 2003	14091751
	Dec 2003	8790589
	Jan 2004	7404805
	Feb 2004	6602678
	Mar 2004	13789680
	Apr 2004	40386781
	May 2004	62648318
	Jun 2004	71684857
	Jul 2004	99228355
	Aug 2004	92159101
	Sep 2004	59148053
	Oct 2004	1869781
	Nov 2004	23821209
	Dec 2004	24732598
	Jan 2005	12057681
	Feb 2005	13735922
	Mar 2005	26243470
	Apr 2005	29562514
	May 2005	72144078
	Jun 2005	100243908
	Jul 2005	100367757
	Aug 2005	98878797
	Sep 2005	55739302
	Oct 2005	3932105
	Nov 2005	18926023
	Dec 2005	19338108
	Jan 2006	10952044
	Feb 2006	12192060
	Mar 2006	20330658
	Apr 2006	20820709
	May 2006	42246276
	Jun 2006	110793099
	Jul 2006	124663597
	Aug 2006	120538136
	Sep 2006	53988918
	Oct 2006	3525028
	Nov 2006	17751690
	Dec 2006	27144737
	Jan 2007	10354204
	Feb 2007	7705785
	Mar 2007	7010716
	Apr 2007	19320242
	May 2007	26924906
	Jun 2007	78214191
	Jul 2007	91250653
	Aug 2007	65727313
	Sep 2007	58743876
	Oct 2007	2065854
	Nov 2007	18462643
	Dec 2007	22800895
	Jan 2008	18035719
	Feb 2008	9420095
	Mar 2008	8322476
	Apr 2008	15561020
	May 2008	18570992
	Jun 2008	66274526
	Jul 2008	144207496
	Aug 2008	112904897
	Sep 2008	143656629
	Nov 2008	21265696
	Dec 2008	32542479
	Jan 2009	28148014
	Feb 2009	17091715
	Mar 2009	-19225470
	Apr 2009	11414984
	May 2009	18714249
	Jun 2009	59753247
	Jul 2009	65247912
	Aug 2009	152037361
	Sep 2009	270941877
	Nov 2009	15121869
	Dec 2009	38090852
	Jan 2010	29783017
	Feb 2010	20997669
	Mar 2010	42531861
	Apr 2010	49056398
	May 2010	32459197
	Jun 2010	54544917
	Jul 2010	52850139
	Aug 2010	120597683
	Sep 2010	224768119
	Oct 2010	49946
	Nov 2010	8818778
	Dec 2010	14019499
	Jan 2011	41140892
	Feb 2011	57741253
	Mar 2011	45277888
	Apr 2011	47789262
	May 2011	4289814
	Jun 2011	17284614
	Jul 2011	73319009
	Aug 2011	113530217
	Sep 2011	338778388
	Oct 2011	210022
	Nov 2011	22847886
	Dec 2011	31925874
	Jan 2012	16250877
	Feb 2012	14044124
	Mar 2012	19093709
	Apr 2012	31144962
	May 2012	31195524
	Jun 2012	40226595
	Jul 2012	68097667
	Aug 2012	106612386
	Sep 2012	199849353
	Oct 2012	-138471
	Nov 2012	10842215
	Dec 2012	42353078
	Jan 2013	24654208
	Feb 2013	6925018
	Mar 2013	6109021
	Apr 2013	4597776
	May 2013	3870162
	Jun 2013	10763034
	Jul 2013	24218006
	Aug 2013	105013774
	Sep 2013	211593690
	Nov 2013	21973528
	Dec 2013	42273265
	Jan 2014	46506665
	Feb 2014	140365