simple D3 line chart

copied from: https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-starting-with-a-basic-graph

by gdicerbo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSS

body {
  font: 12px Arial;
}

path {
  stroke: #588ebb;
  stroke-width: 2;
  fill: none;
}

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.area {
  fill: #588ebb;
  stroke-width: 0;
  opacity: .2;
}

.area1 {
  fill: #404952;
  stroke-width: 0;
  opacity: .2;
}

.area2 {
  fill: #505b67;
  stroke-width: 0;
  opacity: .2;
}

.area3 {
  fill: #505b67;
  stroke-width: 0;
  opacity: .2;
}

.legend {
  position: absolute;
  right: 1%;
  top: 1%;
}

JavaScript

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

var parseDate = d3.time.format("%Y").parse;
var bisectDate = d3.bisector(function(d) {
    return d.date;
  }).left,
  formatValue = d3.format(",2f"),
  formatCurrency = function(d) {
    return "$" + formatValue(d);
  };

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").ticks(10)
  .tickFormat(d3.time.format("%Y"));

var yAxis = d3.svg.axis().scale(y)
  .orient("left").ticks(10).tickFormat(d3.format("$s"));

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

var area1 = d3.svg.area()
  .x(function(d) {
    return x(d.date);
  })
  .y0(height)
  .y1(function(d) {
    return y(d.open);
  });

var area2 = d3.svg.area()
  .x(function(d) {
    return x(d.date);
  })
  .y0(height)
  .y1(function(d) {
    return y(d.ds);
  });

var area3 = d3.svg.area()
  .x(function(d) {
    return x(d.date);
  })
  .y0(height)
  .y1(function(d) {
    return y(d.dr);
  });

var valueline = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.close);
  });

var valueline2 = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.open);
  });

var valueline3 = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.ds);
  });

var valueline4 = d3.svg.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.dr);
  });


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 lineSvg = svg.append("g");

var focus =...