d3 difference chart

based on bostock gallery example. To quote him, "This variation of a bivariate area chart uses clipping to alternate colors. When New York is warmer than San Francisco, the difference between the two is filled in green. When San Francisco is warmer, the difference is filled in red. A similar technique was used by William Playfair all the way back in 1786." Black line is the New York data. SF data has no line.

HTML

<div id="chartContainer">
</div>

CSS

body {
  font: 10px sans-serif;
}

svg {
    background-color: beige;
}

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

.x.axis path {
  /*display: none;*/
}

.area.above {
  fill: #D4D4FF;
}

.area.below {
  fill: #E6D8B5;
}

.lineNY {
  fill: none;
  stroke: #AD513F;  /* brown */
  stroke-width: 1.5px;
}
.lineSF {
  fill: none;
  stroke: #314EE0;  /* royal blue */
  stroke-width: 1.5px;
}

JavaScript

"use strict";

var tsvDataString = "date	New York	San Francisco\n\
20111001	63.4	62.7\n\
20111002	58.0	59.9\n\
20111003	53.3	59.1\n\
20111004	55.7	58.8\n\
";

var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 960 - margin.left - margin.right;
//var width = d3.select("div#chartContainer").attr("width") - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

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

var xScale = d3.time.scale()
    .range([0, width]);

var yScale = d3.scale.linear()
    .range([height, 0]);

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

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

// draw a line for New York data
var lineNY = d3.svg.area()
    //.interpolate("basis")
    .interpolate("linear")
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d["New York"]); });

// draw a blue line for SF data.  This is not done in Bostock's version.
// while his version looks cuter, it unfairly discriminates against the SF 
// data by giving it no line.
var lineSF = d3.svg.area()
    //.interpolate("basis")
    .interpolate("linear")
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d["San Francisco"]); });

var area = d3.svg.area()
    //.interpolate("basis")
    .interpolate("linear")
    .x(function(d) { return xScale(d.date); })
    .y1(function(d) { return yScale(d["New York"]); });

//var svg = d3.select("body").append("svg")
var svg = d3.select("div#chartContainer").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var dataArray = d3.tsv.parse(tsvDataString, function(d) {
    d.date = parseDate(d.date);
    d["New York"]= +d["New York"];
    d["San Francisco"] = +(d["San Francisco"].trim());
    return...