line chart code

// set the dimensions and margins of the graph
var margin    = { top: 20, right: 20, bottom: 50, left: 70 };
var width     = 960 - margin.left - margin.right;
var height    = 500 - margin.top - margin.bottom;
// set the ranges
var x         = d3.scaleOrdinal().range([0, width]);
var y         = d3.scaleLinear().range([height, 0]);

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

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select('.line-graph').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 + ')');

// get the data
d3.csv('https://gist.githubusercontent.com/Ciwan1859/3f17c0ae0c6bf84c9d9f24b2e3dd8fcd/raw/71cb4490f85efa8615f43f82a6e0f5768e68ee20/quarters-data', function(error, data) {
  if (error) throw error;

  // format the data
  data.forEach(function(d) {
      d.date = d.date;
      d.close = +d.close;
  });

  // scale the range of the data
  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.close; })]);

  // add the valueline path.
  svg.append('path')
      .data([data])
      .attr('class', 'line')
      .attr('d', valueline);

  // add the x axis
  svg.append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .call(d3.axisBottom(x));

  // text label for the x axis
  svg.append('text')
      .attr('transform',
            'translate(' + (width/2) + ' ,' +
                           (height + margin.top + 20) + ')')
      .style('text-anchor', 'middle')
      .text('Date');

  // add the y axis
  svg.append('g')
      .call(d3.axisLeft(y));

  // text label for the y axis
  svg.append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', 0 - margin.left)
      .attr('x',0 - (height / 2))
      .attr('dy', '1em')
      .style('text-anchor', 'middle')
      .text('Metric Values');
});