stacked Cuve Line

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="legend.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    div#container{ overflow: scroll; }
    svg{
        border: 1px solid #ccc;
        background-color: #ccc;
    }
    .axis path, .axis line{
        fill: none;
        stroke: black;
        stroke-width: 1;
    }
    rect.mutLegendBG{
        fill: transparent !important;
        stroke: none !important;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    
    d3.csv('stacked_bars.csv', function(error, rawData){
        var layers = d3.keys(rawData[0]);
        // shift the first item: State
        layers.shift();

var states = rawData.map(function(d){
            return d.State;
        });

// construct layer-style data: {x: a, y: b, y0: c}
        var layerData = layers.map(function(age){
            return rawData.map(function(d){
                return {x: d.State, y: +d[age]};
            })
        });
        layerData = d3.layout.stack()(layerData);

var maxPopulation = d3.max(
            layerData[layerData.length - 1],
            function(d){
                return d.y + d.y0;
            });

// basic chart elements
        var margin = {top: 50, bottom: 80, left: 100, right: 50},
            svgWidth = 1200,
            svgHeight = 600,
            width = svgWidth - [margin.left + margin.right],
            height = svgHeight - [margin.top + margin.bottom],

xScale = d3.scale
                .ordinal()
                .domain(states)
                .rangePoints([0, width]),
            yScale = d3.scale
                .linear()
                .domain([0, maxPopulation])
                .range([0, height]),
            colors = d3.scale.category10(),

xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom'),
            yAxis = d3.svg.axis()
                .scale(yScale.copy().domain([maxPopulation, 0]))
                .orient('left');

var svg = d3.select('#container')
            .append('svg')
            .attr({width: svgWidth, height: svgHeight});

var leftAxis = svg.append('g')
            .attr('class', 'axis leftAxis')
            .attr('transform', 'translate(' +
                  [margin.left, margin.top] + ')'),

btmAxis = svg.append('g')
            .attr('class', 'axis btmAxis')
            .attr('transform', 'translate(' +
                  [margin.left, margin.top + height] + ')'),

gMain = svg.append('g')
            .attr('class', 'gMain')
            .attr('transform', 'translate(' +
                  [margin.left, margin.top + height] + ')');

leftAxis.call(yAxis);
        btmAxis.call(xAxis).call(axisStyle);

var area = d3.svg.area()
            .x(function(d,i){ return xScale.range()[i]; })
            .y(function(d){ return -yScale(d.y + d.y0); })
            .y0(function(d){ return -yScale(d.y0); });

gMain.selectAll('g.layer')
            .data(layerData)
            .enter()
            .append('g')
            .attr('class', 'layer')
            .append('path')
            .attr('d', area)
            .attr('title', function(d,i){ return layers[i]; })
            .attr('fill', function(d,i){ return colors(i); });

// ledgend
        var legend = d3.svg.legend()
            .labelFormat("none")
            .cellPadding(5)
            .orientation("vertical")
            .units("")
            .cellWidth(25)
            .cellHeight(18)
            .inputScale(colors.domain(layers))
            .cellStepping(10);

gMain.append('g')
            .attr('transform', 'translate(' + [width - 150, -height] + ')')
            .attr('class', 'legend')
            .call(legend);

d3.select(self.frameElement).style({
          width: svgWidth + "px",
          height: svgHeight + "px"
        });
    })

function axisStyle(selection){
        selection.selectAll('text')
            .style('text-anchor', 'start')
            .attr('transform', 'rotate(90)')
            .attr('dy', -3)
            .attr('dx', 10);
    }

</script>
</body>

https://d3js.org/d3.v3.min.js