Difference Chart

This variation of a bivariate area chart uses clipping to alternate textures. 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.

Textures via textures.js, by Riccardo Scalco

Note to self: for each difference interval, modification of the texture based on some measure (length of interval, amount of difference in avg, etc..)

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

body {
  font: 10px sans-serif;
}

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

.x.axis path {
  display: none;
}

.area.above {
  fill: rgb(252,141,89);
}

.area.below {
  fill: rgb(145,207,96);
}

.line1 {
  fill: none;
  stroke: #7D301E;
  stroke-width: 1.5px;
}

.line2 {
  fill: none;
  stroke: #22415C;
  stroke-width: 1.5px;
}

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

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

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

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

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

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

var line1 = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d["New York"]); });

var line2 = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d["San Francisco"]); });

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

var svg = d3.select("body").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 texture_above = textures.lines().size(4).strokeWidth(1).stroke('#ffffff').background('#DF5535');
var texture_below = textures.lines().size(4).strokeWidth(1).stroke('#ffffff').background('#326087');

svg
  .call(texture_above)
  .call(texture_below);

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

data.forEach(function(d) {
    d.date = parseDate(d.date);
    d["New York"]= +d["New York"];
    d["San Francisco"] = +d["San Francisco"];
  });

x.domain(d3.extent(data, function(d) { return d.date; }));

y.domain([
    d3.min(data, function(d) { return Math.min(d["New York"], d["San Francisco"]); }),
    d3.max(data, function(d) { return Math.max(d["New York"], d["San Francisco"]); })
  ]);

svg.datum(data);

svg.append("clipPath")
      .attr("id", "clip-below")
    .append("path")
      .attr("d", area.y0(height));

svg.append("clipPath")
      .attr("id", "clip-above")
    .append("path")
      .attr("d", area.y0(0));

svg.append("path")
      .attr("class", "area above")
      .style("fill", texture_above.url())
      .attr("clip-path", "url(#clip-above)")
      .attr("d", area.y0(function(d) { return y(d["San Francisco"]); }));

svg.append("path")
      .attr("class", "area below")
      .style("fill", texture_below.url())
      .attr("clip-path", "url(#clip-below)")
      .attr("d", area);

svg.append("path")
      .attr("class", "line1")
      .attr("d", line1);

svg.append("path")
      .attr("class", "line2")
      .attr("d", line2);

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

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Temperature (ºF)");
});

</script>

https://d3js.org/d3.v3.min.js