| 
          <!DOCTYPE html> | 
        
        
           | 
          <meta charset="utf-8"> | 
        
        
           | 
          <svg width="960" height="500"></svg> | 
        
        
           | 
          <script src="//d3js.org/d3.v4.min.js"></script> | 
        
        
           | 
          <script> | 
        
        
           | 
          
 | 
        
        
           | 
          var svg = d3.select("svg"), | 
        
        
           | 
              margin = {top: 20, right: 20, bottom: 30, left: 50}, | 
        
        
           | 
              width = svg.attr("width") - margin.left - margin.right, | 
        
        
           | 
              height = svg.attr("height") - margin.top - margin.bottom; | 
        
        
           | 
          
 | 
        
        
           | 
          var parseDate = d3.timeParse("%Y %b %d"); | 
        
        
           | 
          
 | 
        
        
           | 
          var x = d3.scaleTime().range([0, width]), | 
        
        
           | 
              y = d3.scaleLinear().range([height, 0]), | 
        
        
           | 
              z = d3.scaleOrdinal(d3.schemeCategory10); | 
        
        
           | 
          
 | 
        
        
           | 
          var stack = d3.stack(); | 
        
        
           | 
          
 | 
        
        
           | 
          var area = d3.area() | 
        
        
           | 
              .x(function(d, i) { return x(d.data.date); }) | 
        
        
           | 
              .y0(function(d) { return y(d[0]); }) | 
        
        
           | 
              .y1(function(d) { return y(d[1]); }); | 
        
        
           | 
          
 | 
        
        
           | 
          var g = svg.append("g") | 
        
        
           | 
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | 
        
        
           | 
          
 | 
        
        
           | 
          d3.tsv("data.tsv", type, function(error, data) { | 
        
        
           | 
            if (error) throw error; | 
        
        
           | 
          
 | 
        
        
           | 
            var keys = data.columns.slice(1); | 
        
        
           | 
          
 | 
        
        
           | 
            x.domain(d3.extent(data, function(d) { return d.date; })); | 
        
        
           | 
            z.domain(keys); | 
        
        
           | 
            stack.keys(keys); | 
        
        
           | 
          
 | 
        
        
           | 
            var layer = g.selectAll(".layer") | 
        
        
           | 
              .data(stack(data)) | 
        
        
           | 
              .enter().append("g") | 
        
        
           | 
                .attr("class", "layer"); | 
        
        
           | 
          
 | 
        
        
           | 
            layer.append("path") | 
        
        
           | 
                .attr("class", "area") | 
        
        
           | 
                .style("fill", function(d) { return z(d.key); }) | 
        
        
           | 
                .attr("d", area); | 
        
        
           | 
          
 | 
        
        
           | 
            layer.filter(function(d) { return d[d.length - 1][1] - d[d.length - 1][0] > 0.01; }) | 
        
        
           | 
              .append("text") | 
        
        
           | 
                .attr("x", width - 6) | 
        
        
           | 
                .attr("y", function(d) { return y((d[d.length - 1][0] + d[d.length - 1][1]) / 2); }) | 
        
        
           | 
                .attr("dy", ".35em") | 
        
        
           | 
                .style("font", "10px sans-serif") | 
        
        
           | 
                .style("text-anchor", "end") | 
        
        
           | 
                .text(function(d) { return d.key; }); | 
        
        
           | 
          
 | 
        
        
           | 
            g.append("g") | 
        
        
           | 
                .attr("class", "axis axis--x") | 
        
        
           | 
                .attr("transform", "translate(0," + height + ")") | 
        
        
           | 
                .call(d3.axisBottom(x)); | 
        
        
           | 
          
 | 
        
        
           | 
            g.append("g") | 
        
        
           | 
                .attr("class", "axis axis--y") | 
        
        
           | 
                .call(d3.axisLeft(y).ticks(10, "%")); | 
        
        
           | 
          }); | 
        
        
           | 
          
 | 
        
        
           | 
          function type(d, i, columns) { | 
        
        
           | 
            d.date = parseDate(d.date); | 
        
        
           | 
            for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = d[columns[i]] / 100; | 
        
        
           | 
            return d; | 
        
        
           | 
          } | 
        
        
           | 
          
 | 
        
        
           | 
          </script> | 
        
  
d3.tsv("data.tsv", function(error, data) {
should be
d3.tsv("data.tsv", function(data, error) {