D3 Examples - Difference Chart 2

Difference Chart 2

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.

xxxxxxxxxx
 
<!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);
  opacity:0;
}
​
.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v3.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.scale.ordinal()
         .rangePoints([0, width])
​
var y = d3.scale.linear()
    .range([height, 0]);
​
var xAxis = d3.svg.axis()
    .scale(x)
    .ticks(5)
    .orient("bottom");
​
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
​
var line = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.gamesplayed) })
    .y(function(d) { return y(d["GF"]); });
​
var area = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.gamesplayed) })
    .y1(function(d) { return y(d["GF"]); });
​
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 + ")");
​
d3.tsv("data.tsv", function(error, data) {
  data.forEach(function(d) {
    d["GF"]= +d["GF"];
    d["GA"] = +d["GA"];
  });
​
  x.domain(data.map(function(d) {
                return d.gamesplayed
            }));
​
  y.domain([0,100]);
  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")
      .attr("clip-path", "url(#clip-above)")
      .attr("d", area.y0(function(d) { return y(d["GA"]); }));
​
  svg.append("path")
      .attr("class", "area below")
      .attr("clip-path", "url(#clip-below)")
      .attr("d", area);
​
  svg.append("path")
      .attr("class", "line")
      .attr("d", line);
​
  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>
    