reference line on area chart

response to stack overflow question: http://stackoverflow.com/questions/10559478/d3-js-line-and-area-graph-want-to-add-a-extra-line-defined-by-two-points-and-r

by jsl6906

HTML

<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<div id="graphtitle"></div>
<div id="chart"></div>

CSS

.axis text {
  font: 10px sans-serif;
}
  
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

// Set up margins
var m = [20, 50, 50, 20],
    w = 500 - m[1] - m[3],
    h = 250 - m[0] - m[2],
    parse = d3.time.format("%Y-%m-%d").parse,
    format = d3.time.format("%Y");

// Scales
var x = d3.time.scale().range([0, w]),
    y = d3.scale.linear().range([h, 0]),
    xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-h, 0).tickPadding(6),
    yAxis = d3.svg.axis().scale(y).orient("right").tickSize(-w).tickPadding(6);

// An area generator
var area = d3.svg.area()
  .interpolate("step-after")
  .x(function(d) { return x(d.date); })
  .y0(y(0))
  .y1(function(d) { return y(d.value); });

// A line generator
var line = d3.svg.line()
    .interpolate("step-after")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

// Build the graph
var svg = d3.select("#chart").append("svg:svg")
    .attr('width', w + m[1] + m[3])
    .attr('height', h + m[0] + m[2])
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var gradient = svg.append("svg:defs").append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x2", "0%")
    .attr("y2", "100%");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#00F")
    .attr("stop-opacity", .3);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", '#006')
    .attr("stop-opacity", 1);

var rect = svg.append("svg:rect")
    .attr("class", "pane")
    .attr("width", w)
    .style("fill","white")
    .attr("height", h);

svg.append("svg:clipPath")
    .attr("id", "clip")
  .append("svg:rect")
    .attr("x", x(0))
    .attr("y", y(1))
    .attr("width", x(1) - x(0))
    .attr("height", y(0) - y(1));

svg.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + w + ",0)");

svg.append("svg:path")
    .attr("class", "area")
    .attr("clip-path", "url(#clip)")
    .attr("pointer-events","none")
    .style("fill", "url(#gradient)");

svg.append("svg:g")
    .attr("class", "x...