JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.13/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <svg class="detail"></svg>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <svg class="navigation"></svg>
        </div>
    </div>
</div>

CSS

svg {
    width: 100%;
}

svg.detail {
    height: 500px;
}

.line{
    fill: none;
    stroke: steelblue;
    stroke-width: 2;
}

path.area {
    fill-opacity: 0.5;
}

.line.available-series {
    fill: blue;
    stroke: blue;
    stroke-width: 1px;
}

.line.unavailable-series {
    fill: green;
    stroke: green;
    stroke-width: 1px;
}

.line.tax-free-series {
    fill: red;
    stroke: red;
    stroke-width: 1px;
}

.extent {
    fill-opacity: 0.3;
}

JavaScript

var sipData = [
    {
        key: "Unavailable",
        values: [
            ["01-Jan-01", 0], ["01-Jan-02", 10], ["01-Jan-03", 20], ["01-Jan-04", 30], ["01-Jan-05", 40]
        ]
    },
    {
        key: "Available",
        values: [
            ["01-Jan-01", 5], ["01-Jan-02", 25], ["01-Jan-03", 10], ["01-Jan-04", 15], ["01-Jan-05", 20]
        ]
    },
    {
        key: "Tax Free",
        values: [
            ["01-Jan-01", 10], ["01-Jan-02", 40], ["01-Jan-03", 10], ["01-Jan-04", 15], ["01-Jan-05", 20]
        ]
    }
];

var dateParser = d3.time.format('%y-%b-%d').parse;

var availablePlotData = {name: "Available", values: []},
    unavailablePlotData = {name: "Unavailable", values: []},
    taxPlotData = {name: "Tax Free", values: []},
    plotData = [availablePlotData, unavailablePlotData, taxPlotData];

var minX,
    minY,
    maxX,
    maxY,
    totalYUnavailable,
    totalYAvailable,
    totalYTaxFree;

sipData.forEach(function (layer) {
    layer.values.forEach(function (item) {
        var date = dateParser(item[0]);

        var value = {
            x: date,
            y: item[1]
        };

        if (layer.key === "Available") {
            availablePlotData.values.push(value);

            if (totalYAvailable == undefined || totalYAvailable < value.y) {
                totalYAvailable = value.y;
            }
        }

        if (layer.key === "Unavailable") {
            unavailablePlotData.values.push(value);

            if (totalYUnavailable == undefined || totalYUnavailable < value.y) {
                totalYUnavailable = value.y;
            }
        }

        if (layer.key === "Tax Free") {
            taxPlotData.values.push(value);

            if (totalYTaxFree == undefined || totalYTaxFree < value.y) {
                totalYTaxFree = value.y;
            }
        }

        if (minX == undefined || minX > date) {
            minX = date;
        }

        if (maxX == undefined || maxX < date) {
            maxX = date;
   ...