title: D3 Line Chart to display first and last point values
body: <p>Below is the code for a line chat in D3. Currently it displays all the values on the line but what I want to show is only the first and last point with a "B" appended at the end. How do I fix this?</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;title&gt;Unemployment by Ward Bar Chart&lt;/title&gt;
  
   &lt;style type="text/css"&gt;
    .axis text{
    font-family: Arial;
    font-size: 13px;
    color: #333333;
    text-anchor: end;
    }
  
    path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
    }
  
   .axis path,
   .axis line {
   fill: none;
   stroke: grey;
   stroke-width: 1;
   shape-rendering: crispEdges;
   } 
  
  
   .textlabel{
      font-family:  Arial;
      font-size:13px;
      color: #333333;
      text-anchor: middle;
    }
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  
  
   &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
   &lt;script&gt;
  
   // Set the dimensions of the canvas / graph
   var margin = {top: 20, right: 0, bottom: 60, left: 60},
  
   width = 475;
   height = 350;
   padding = 100; 
  
  
    // Adds the svg canvas
    var svg = d3.select("body")
    .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
     .attr("viewBox", "0 0 " + width + " " + height);
  
  
   // Parse the date / time
   var parseDate = d3.time.format("%m/%d/%y").parse;
   var formatTax = d3.format(",.2f");
  
   // Set the ranges
   var x = d3.time.scale()
      .range([0, width - margin.right - margin.left], .1);
  
  
    var y = d3.scale.linear()
      .range([height - margin.top - margin.bottom, 0]);
  
   // Define the axes
   var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom")
          .ticks(5);
  
   var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left")
          .tickFormat(function(d) {return "$" + d + "B"});
  
  
  
   // Define the line
   var valueline = d3.svg.line()
  
  .x(function(d) { return x(d.Date); })
  .y(function(d) { return y(d["Tax Collections"]); });
  
  
  
  
  // Get the data
   d3.csv("Yearly Tax Collections.csv", function(error, data) {
     data.forEach(function(d) {
      d.Date = parseDate(d.Date);
      d["Tax Collections"] = formatTax(+d["Tax Collections"]/1000000000);
  });
  
  
   // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.Date; }));
    y.domain([0, d3.max(data, function(d) { return d["Tax Collections"]; })]);
  
     // Add the valueline path.
       svg.append("path")
      .attr("class", "line")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
       .attr("d", valueline(data));
  
  // Add the X Axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + margin.left + "," + (height -         margin.bottom) + ")")
      .call(xAxis);
  
     // Add the Y Axis
     svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(yAxis);
  
      // Y-axis labels
     svg.append("text")
     .attr("text-anchor", "middle")
     .style("font-size", "13px")
     .style("color", "#333333")
     .attr("transform", "translate ("+ (padding/4) + "," +(height/2)+") rotate(-90)")
     .text("Tax Revenue")
     .style("font-family", "Arial"); 
  
     // X-axis labels
     svg.append("text")
     .attr("text-anchor", "middle")
     .style("font-size", "13px")
     .style("color", "#333333")
     .attr("transform", "translate("+ (width/2) + "," +(height-(padding/4)) + ")")
     .text("Fiscal Year")
     .style("font-family", "Arial"); 
  
   //source
  
     svg.append("text")
     .attr("text-anchor", "middle")
     .style("font-size", "13px")
     .style("color", "#333333")
     .attr("transform", "translate("+ (width/4.5) + "," +(height/1) + ")")
     .text("Source: DC OCFO")
     .style("font-family", "Arial")
  
  //title for the chart 
  
     svg.append("text")
     .attr("text-anchor", "middle")
     .style("font-size", "16px")
     .style("color", "#333333")
     .attr("transform", "translate("+ (width/3) + "," +(height/30) + ")")
     .text("DC Total Tax Revenues by Fiscal Year")
     .style("font-family", "Arial");
  
  
    svg.append("text")
    .attr("text-anchor", "left")
    .style("font-size", "10x")
    .style("color", "#333333")
    .attr("transform", "translate("+ (width/20) + "," +(height/12) + ")")
    .text("2000 to 2015")
    .style("font-family", "Arial")
  
    //line labels
  
    svg.append('g')
    .classed('labels-group', true)
    .selectAll('text')
    .data(data)
    .enter()
  
    .append('text')
    .classed('label',true)
    .attr({
      'x':function(d,i) {
          return x(d.Date);
  
      },
        'y':function(d,i) {
          return y(d["Tax Collections"]);
      }
    })
   .text(function(d,i){
      return d["Tax Collections"];
     })
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
  
  
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/kW8Ha.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kW8Ha.png" alt="This is what I have"></a></p>
  
  <p><a href="https://i.stack.imgur.com/glg6L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/glg6L.png" alt="This is what I want it to look like"></a></p>
  
  <p>Thank you so much in advance!</p>