Bio survival chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<div id="container"></div>
<body>
  <script>
d3.svg.survivalLineChart = function(id, rData){
    /*
    rData formation:
    [
        ["name1", [month, survivalRate, marked], [x, y, 0], [x, y, 1], ... ],
        ["name2", [month, survivalRate, marked], [x, y, 0], [x, y, 1], ... ],
        ["name3", [month, survivalRate, marked], [x, y, 0], [x, y, 1], ... ]
    ]
    */
    var svgWidth    = 640,
        svgHeight   = 450,
        margin      = {top: 30, right: 100, bottom: 60, left: 70},
        width       = svgWidth - margin.left - margin.right,
        height      = svgHeight - margin.top - margin.bottom,
        radius      = 1,
        legendRect  = 12,
        legendSpan  = 23,
        duration    = 2000,
        colors      =  ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
    
        
    if(!rData){
				alert("data is empty"); return;
    }
    
    // data proccessing
    var maxLifeSpan = 0,
        data = rData.map(function(d, i){
            maxLifeSpan = Math.max(d3.max(d[1].map(function(e){ return e[0]; })), maxLifeSpan);
            return {
                name: d[0],
                points: d[1].map(function(e){return [ e[0], e[1], e[2], colors[i] ]; }),
                color: colors[i]
            };
        }),
        
        xScale = d3.scale.linear().domain([0, maxLifeSpan]).range([0, width]),
        yScale = d3.scale.linear().domain([0, 1]).range([0, height]),
        
        xAxis = d3.svg.axis().orient("bottom").scale(xScale),
        yAxis = d3.svg.axis().orient("left").tickFormat(d3.format("%")).ticks(5).scale(yScale.copy().range([height, 0]));
        
    
    
    var svg = d3.select("#" + id).html("")
        .append("svg")
        .style("font-size", "12px")
        .attr({
            width             : svgWidth,
            height            : svgHeight,
            "shape-rendering" : "crispEdges",
            version           : 1.1,
            xmlns             : "https://www.w3.org/2000/svg"
        });

// axises generation & uniform all style
    function uniformAxis(s){
        s.select(".domain").attr({ fill: "none", stroke: "#333", "stroke-width": 1});

if(s.node().classList.contains("yaxis")){
           s.selectAll(".tick line").each(function(d){
               d3.select(this).attr({ x1: -6, x2: width, stroke: "#333", "stroke-width": 1, "stroke-dasharray": "6,6" });
           });
       }else{
           s.selectAll(".tick line").attr({ stroke: "#333", "stroke-width": 1 });
       }
    }
    gXAxis.call(xAxis).call(uniformAxis);
    gYAxis.call(yAxis).call(uniformAxis);
    
    
    // draw legend
    gLegend.selectAll("g.legend-item")
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function(d,i){ return "translate(0," + (i * legendSpan) + ")"; })
        .each(function(d,i){
            d3.select(this).append("rect").attr({ width: legendRect, height: legendRect, fill: colors[i] });
            d3.select(this).append("text").text(d.name).attr({ dx: 18, dy: 10 });
        });
    
    gLegend.append("g")
        .attr({"class": "cross", "transform": "translate(0," + -legendSpan + ")"})
        .call(function(s){
            s.append("use").attr({href: "#s-cross", stroke: "black", "transform": "translate(6,0)"});
            s.append("text").text("CENSORED").attr({dx: 15, dy: 3});
        });
    
    // adding axis titles
    gYAxis.append("text").text("Survival Rate")
        .attr({ transform: "translate(" + [-45, 0.5 * height] + ")rotate(-90)", "text-anchor": "middle" });
    gXAxis.append("text").text("Months")
        .attr({ transform: "translate(" + [0.5 * width, 40] + ")", "text-anchor": "middle" });
    
    
    // draw lines
    // linear linear-closed step step-before step-after
    var line =  d3.svg.line()
        .x(function(d){ return xScale(d[0]); })
        .y(function(d){ return -yScale(d[1]); })
        .interpolate("step-after");
    var gLine = plotMain.selectAll("g.s-plot-item")
        .data(data)
        .enter()
        .append("g")
        .attr({
            class: "s-plot-item",
            transform: "translate(" + [0, height] + ")"
        });
        
    gLine.selectAll("g")
        .data(function(d){ return d.points.filter(function(e){ return e[2]; }); })
        .enter()
        .append("g")
        .attr("transform", function(d){ return "translate(" + [xScale(d[0]), -yScale(d[1])] + ")"; })
        .append("use")
        .attr({href: "#s-cross", stroke: "black"});

gLine.append("path")
        .attr({
            d: function(d){ return line(d.points.slice(0)); },
            fill: "none",
            "stroke-width": 2,
            stroke: function(d){ return d.color; }
        })
        .transition()
        .duration(duration)
        .attrTween("d", function(d){
            var i = d3.interpolate(1, d.points.length);
            return function(t){ return line(d.points.slice(0, Math.ceil(i(t)))); };
        });
    /*
    gLine.selectAll("circle")
        .data(function(d){return d.points; })
        .enter()
        .append("circle")
        .attr({
            fill: function(d){ return d[3]; },
            r: 0,
            cx: function(d){ return xScale(d[0]); },
            cy: 0
        })
        .transition()
        .duration(duration)
        .attr({ r: radius, cy: function(d){ return -yScale(d[1]); } });
    */
    
    
};
    
    
    
    
var acc = [
	["MALE", [[0, 1.0, 0],[5, 0.9666666666666667, 0],[13, 0.9333333333333333, 0],[16, 0.9, 1],[17, 0.8666666666666667, 0],[19, 0.7666666666666667, 1],[20, 0.7333333333333334, 0],[23, 0.7000000000000001, 0],[25, 0.6666666666666667, 1],[26, 0.6333333333333334, 1],[28, 0.6000000000000001, 1],[29, 0.5666666666666668, 1],[40, 0.5333333333333334, 0],[41, 0.4666666666666668, 1],[44, 0.43333333333333346, 1],[46, 0.40000000000000013, 0],[50, 0.3666666666666668, 1],[53, 0.3333333333333335, 1],[59, 0.30000000000000016, 0],[62, 0.26666666666666683, 1],[68, 0.2333333333333335, 1],[74, 0.20000000000000018, 1],[78, 0.16666666666666685, 1],[85, 0.13333333333333353, 1],[92, 0.1000000000000002, 1],[110, 0.06666666666666687, 1],[116, 0.03333333333333354, 1],[121, 2.0816681711721685e-16, 1]]],
	["FEMALE", [[0, 1.0, 0],[6, 0.9824561403508771, 0],[7, 0.9649122807017543, 0],[10, 0.9473684210526314, 0],[12, 0.9298245614035086, 0],[13, 0.9122807017543857, 0],[14, 0.8947368421052628, 0],[15, 0.8421052631578945, 0],[17, 0.8070175438596489, 0],[19, 0.7719298245614032, 0],[21, 0.7543859649122804, 1],[23, 0.7368421052631575, 1],[24, 0.7192982456140347, 1],[25, 0.7017543859649118, 1],[29, 0.6842105263157889, 1],[30, 0.6491228070175433, 1],[31, 0.6140350877192977, 1],[33, 0.5964912280701749, 1],[34, 0.578947368421052, 0],[37, 0.5087719298245608, 1],[40, 0.47368421052631515, 1],[44, 0.45614035087719235, 1],[46, 0.42105263157894673, 1],[48, 0.40350877192982393, 1],[50, 0.3859649122807011, 1],[54, 0.3684210526315783, 0],[56, 0.3508771929824555, 0],[60, 0.3333333333333327, 1],[62, 0.2982456140350871, 1],[68, 0.2807017543859643, 1],[69, 0.2631578947368415, 1],[70, 0.22807017543859587, 1],[71, 0.19298245614035026, 1],[79, 0.17543859649122745, 1],[80, 0.15789473684210464, 0],[81, 0.14035087719298184, 0],[90, 0.12280701754385903, 1],[91, 0.10526315789473623, 1],[93, 0.08771929824561342, 1],[97, 0.07017543859649061, 1],[102, 0.05263157894736781, 1],[130, 0.035087719298245, 1],[155, 0.017543859649122195, 1],[156, -6.106226635438361e-16, 1]]]
];

d3.svg.survivalLineChart("container", acc);

</script>
</body>

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