title: Adding dynamic tooltips to a streamgraph d3.js
body: <p>Im working on a streamgraph at the moment, I want to add tooltips to each layer similar to this <a href="http://archive.stamen.com/mtvmovies-streamgraph/chart.html" rel="nofollow noreferrer">http://archive.stamen.com/mtvmovies-streamgraph/chart.html</a></p>
  
  <p><img src="https://i.stack.imgur.com/uDdSc.png" alt="enter image description here"></p>
  
  <p>The tooltips I have now dont really work at all. All I get is 'NaN' displayed in the tooltip box.</p>
  
  <p>Any suggestions?? My code is below.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>   var customPalette = [
         "#ff7f0e",  "#2ca02c", "#00FFFF", "#d62728", "#9467bd",
        "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
      ];
  
      var format = d3.time.format("%y");
  
      //creating margins around the graph
      var margin = {top: 20, right: 30, bottom: 30, left: 200},
          width = 1200 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;
  
      //OUTPUT RANGE
      var x = d3.time.scale()
          .range([0, width]);
  
      //OUTPUT RANGE
      var y = d3.scale.linear()
          .range([height, 0]);
  
      //assining custom colors to layers
      var colours = d3.scale.ordinal().range(customPalette);
  
      var xAxis = d3.svg.axis()
          .scale(x)
          .orient("top")
          .ticks(d3.time.years);
  
      var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left");
  
      //ctreate stack layout
      var stack = d3.layout.stack()
          .offset("wiggle")
          .order("reverse")
          .values(function(d) { return d.values; })
          .x(function(d) { return d.date; })
          .y(function(d) { return d.amount; });
  
      //creates array of datya elements for stacked bar graph
      var nest = d3.nest()
          .key(function(d) { return d.age; });
  
      //create area
      var area = d3.svg.area()
          //adds curviture
          .interpolate("monotone")
          .x(function(d) { return x(d.date); })
          .y0(function(d) { return y(d.y0); })
          .y1(function(d) { return y(d.y0 + d.y); });
  
      var svg = d3.select("body").append("svg")
          //defines length of x-axis
          .attr("width", width + margin.left + margin.right)
          //defines height of y-axis
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
      d3.csv("data6.csv", function(data) {
        data.forEach(function(d) {
          // Convert strings to numbers
          d.date = format.parse(d.date);
          d.amount = +d.amount;
        });
  
        //returns an array of objects with a key feild (0-20yrs....)
        //and a value array which contains associated records
        var layers = stack(nest.entries(data));
  
        //.extent() returns min and max values of argument
        x.domain(d3.extent(data, function(d) { return d.date; }));
        //
        y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
  
        svg.selectAll(".layer")
            .data(layers)
          .enter().append("path")
            .attr("class", "layer")
            .attr("d", function(d) { return area(d.values); })
            .style("fill", function(d, i) { return colours(i); });
  
        //CURRENT TOOLTIP CODE
        var toolTip = svg.selectAll("path")
                         .append("svg:title")
                     .text(function(d) { return (d.date) + (d.amount) });;
  
  
      svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + 0 + ")")
            .call(xAxis);
  
      svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);
  
      });
  </code></pre>