D3 - Lines with area

by mark47

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:400, 700);
 svg {
    font: 14px'Open Sans';
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.axis text {
    fill: #000;
}
.axis .tick line {
    stroke: rgba(0, 0, 0, 0.1);
}
.area {
    stroke-width: 1;
}
.area.upper, .legend .outer {
    fill: rgba(230, 230, 255, 0.8);
    stroke: rgba(216, 216, 255, 0.8);
}
.area.lower, .legend .inner {
    fill: rgba(127, 127, 255, 0.8);
    stroke: rgba(96, 96, 255, 0.8);
}
.median-line, .legend .median-line {
    fill: none;
    stroke: #000;
    stroke-width: 3;
}
.legend .legend-bg {
    fill: rgba(0, 0, 0, 0.5);
    stroke: rgba(0, 0, 0, 0.5);
}
.marker.client .marker-bg, .marker.client path {
    fill: rgba(255, 127, 0, 0.8);
    stroke: rgba(255, 127, 0, 0.8);
    stroke-width: 3;
}
.marker.server .marker-bg, .marker.server path {
    fill: rgba(0, 153, 51, 0.8);
    stroke: rgba(0, 153, 51, 0.8);
    stroke-width: 3;
}
.marker path {
    fill: none;
}
.legend text, .marker text {
    fill: #fff;
    font-weight: bold;
}
.marker text {
    text-anchor: middle;
}

JavaScript

var mainData = [{
    "month": 0,
        "avg": 92.10,
        "avgPlus": 94.94,
        "avgMinus": 89.26
}, {
    "month": 1,
        "avg": 46.12,
        "avgPlus": 50.36,
        "avgMinus": 41.86
}, {
    "month": 2,
        "avg": 57.44,
        "avgPlus": 61.59,
        "avgMinus": 53.23
}, {
    "month": 4,
        "avg": 70.65,
        "avgPlus": 74.93,
        "avgMinus": 66.36
}, {
    "month": 8,
        "avg": 75.71,
        "avgPlus": 82.72,
        "avgMinus": 71.58
}, {
    "month": 12,
        "avg": 78.79,
        "avgPlus": 82.92,
        "avgMinus": 74.87
}];

function addAxesAndLegend(svg, xAxis, yAxis, margin, chartWidth, chartHeight) {
    var legendWidth = 200,
        legendHeight = 100;

    // clipping to make sure nothing appears behind legend
    svg.append('clipPath')
        .attr('id', 'axes-clip')
        .append('polygon')
        .attr('points', (-margin.left) + ',' + (-margin.top) + ' ' + (chartWidth - legendWidth - 1) + ',' + (-margin.top) + ' ' + (chartWidth - legendWidth - 1) + ',' + legendHeight + ' ' + (chartWidth + margin.right) + ',' + legendHeight + ' ' + (chartWidth + margin.right) + ',' + (chartHeight + margin.bottom) + ' ' + (-margin.left) + ',' + (chartHeight + margin.bottom));

    var axes = svg.append('g')
        .attr('clip-path', 'url(#axes-clip)');

    axes.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + chartHeight + ')')
        .call(xAxis)
        .append("text")
        .attr("y", 40)
        .attr("x", 50)
        .text("Months Since Treatment");

    axes.append('g')
        .attr('class', 'y axis')
        .call(yAxis)
        .append('text')
        .attr('transform', 'rotate(-90)')
        .attr('y', -40)
        .attr('x', -50)
        .attr('dy', '.8em')
        .style('text-anchor', 'end')
        .text('Urinary Incontinence Function');

    var legend = svg.append('g')
        .attr('class', 'legend')
        .attr('transform', 'translate(' +...